Hello friends! 👋
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!
The JavaScript library D3.js is a popular choice for creating SVG dataviz, but you don’t need to use a charting library, there are loads of ways to play with data and SVG!
💡 SVG tip
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 <marker> element.
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.
Check out the demo!
✏️ Article
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.
✨ Fun demos
SVG & GSAP Circular Animated Graph – view demo
Pete Barr made this cool radial bar chart demo on CodePen. He’s using GSAP for the animation along with their Draw SVG plugin.
Earth day at Clearleft – view site
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!
The 10 most popular baby names per year since 1880 – view site
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. A lovely Melting-Pot. – view site
Brussels is a truly international city. Karim Douieb uses D3.js, and some beautiful scrolling animations to explore the diversity of Europe’s capital.
🏆 viewBox Challenge!
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.
🎨 This months theme is Data visualization
Ideas…
-
Explore some fun datasets, like this lord of the rings API.
-
Experiment with a charting library.
-
Design a cool graph animation.