My SVG animation workshop starts tomorrow (omg, nervous excitement)
There are still a few tickets left if you’d like to join us for some SVG fun!
x - Cassie
You may have guessed from this email’s title that we’re gonna be talking about graphs!
☕ If you’re enjoying this newsletter, you can buy us a coffee or contribute towards our newsletter costs here.
💌 Let’s open up the box and see what’s inside…
Data vizualisations are all around us, in the newspapers, ads and even movies.
Dataviz and SVG are match made in graphics heaven!
When designing charts, it is very common to use markers to highlight some data. If you are working with a chart with axis you may need arrows at the end of your lines.
Instead of adding shapes on top of your lines you can use the SVG
The marker element behaves very similarly to the
<symbol> element. You first need to define the paths or shapes of your marker on top of your SVG.
After specifying a single id for every marker you can use them on any
path, line, polyline or polygon with the attributes
marker-start, marker-mid marker-end.
It’s not always easy for users to understand data from a picture but thanks to SVG we can make that picture interactive and let users explore the data by themselves.
In this article by Robin Rendle you will learn how to create a graph from scratch and to make it interactive.
Read ‘How to Make Charts with SVG’
If you are interested in learning how to make your chart more accessible, take a look at this article by Sara Soueidan.
Pete Barr made this cool radial bar chart demo on CodePen. He’s using GSAP for the animation along with their Draw SVG plugin.
Traditional graphs are great for accurately representing data, but sometimes it’s fun to get a bit more creative. In this site Cassie hooked into her office’s solar panel API, and used an illustration of the building to show how many trees-worth of CO2 they had saved!
This dataviz made by Nadieh Bremer visualizes the most popular names given to babies in the USA since 1880. Make sure to explore and play with the data available. Maybe you can find your name in the timeline?
Brussels is a truly international city. Karim Douieb uses D3.js, and some beautiful scrolling animations to explore the diversity of Europe’s capital.
Each month we’ll give you a theme to kick-start your imagination. We’ll feature our favourite one in next month’s edition.
Last month’s challenge was Stroke Animation
Our favourite entry this month was from Thea. We loved the bold colours and the subtle change in stroke width.
We’ve also gathered all previous entries in a single CodePen collection! Browse through them here.
Explore some fun datasets, like this lord of the rings API.
Experiment with a charting library.
Design a cool graph animation.