SVGs beyond mere shapes


Project description

March – June 2016


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


RevealJS, D3.js & some R


A whole bunch of data for specific examples

The SVGs beyond mere shapes series is not a typical project, it’s more a collection of works around the same idea. 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’s visuals, and used it for more than just being a rectangle, circle or path. Gradients or filters, I had transformed and used them in many different ways. So I applied 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, but with 9 examples that left no time to explain the code behind it. So in the 9 weeks after the conference I posted one tutorial each week on Visual Cinnamon that explained one of the examples in far greater detail and sharing the code for the examples used in my presentation.

In the end the project consisted of a presentation deck that was build as a website with RevealJS which included fully interactive d3.js examples, 11 extensive tutorials on the different examples and their creation and thanks to Bocoup a video of the talk.


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