SVGs beyond mere shapes

a combination of interactive slides, 10 tutorials & a talk

Scroll down for information


Go to the Kick-off blog


March – June 2016


Having been accepted as a speaker to 2016’s OpenVis conference in Boston


RevealJS, D3.js & some R


Many different datasets


The SVGs beyond mere shapes series is not a typical project, it’s more a collection of works around the same idea. It now consists of a presentation deck, build as a website with RevealJS that includes fully interactive d3.js examples, 11 extensive tutorials on how to create the different examples talked about in during the presentation and a video of the talk.


It all started when I really wanted to go to OpenVis in April of 2016 and what better way then to try and apply for a speaker spot.  You get to talk about a your passion while also being reimbursed for your travel, hotel and ticket costs (you do need to prepare a lot, but it’s worth it).
While thinking of an interesting subject and writing down some random things I’d done in the past I saw a common theme. I had often taken the SVGs, which are the basic building blocks of d3.js’ visuals, and used it for more than just being a rectangle, circle or path. Instead, I was apply gradients and filters to transform them. Therefore, I applied to OpenVis Conf with my idea on “SVGs beyond mere shapes” and was crazy happy when I got accepted.

I had 30 minutes to talk about the different ways that you can take SVGs beyond mere shapes in the visualization of data. However, with 9 examples that left no time to explain the code behind it. Therefore, in the 9 weeks after the conference I posted one tutorial each week on my blog that explained one of the examples in far greater detail and sharing the code for the examples used in my presentation.


Go to the Kick-off blog with all tutorials

This is the first blog of the series that bundles the links to all of the 9 extensive & separate tutorials that I’ve published on all SVG gradient & filter experiments

SVG beyond mere shapes - Title slide
Complication of the slides

Check out the interactive slides

A blog with the slides of the presentation, fully interactive and bouncing around. But there’s more, I also explain what tools and resources I used and show a bit of the sketching phase (hexagon calculations are fun :) ) and screenshots of things that didn’t make the final cut.

Watch the talk from OpenVis

If you’re interested to know more about what I said with each of the slides (they are rather word-empty) you can look at the video of the talk that Bocoup has made available. If you also want to be able to play around with a cool visualization/analysis that was made about all of the talks at OpenVis, check out the video section at