Presentation & D3.js
Let’s get right to it. You can find the slides to my SVGs beyond mere shapes talk here. It might take ±10 seconds to load since everything is loaded at the start. The reason for this is that I didn’t want any lagging to happen during the presentation itself and on a local host it loads in 1-2 seconds. Here is the corresponding Github repo with the code and where I explain a bit about the animations and bonus events that might not be apparent if you click through the slides.
Tutorial & D3.js
My first deviation from just using SVGs merely for their shapes came while trying to create a color legend. I was looking for a way to create a legend that would smoothly go from one color in my color scale to another. It wasn’t really necessary to read the exact value each color represented. It was more about seeing trends and getting a general sense of the numbers, so chopping the colors up into 5 or 6 bins wasn’t what I wanted. And that’s how I got into SVG gradients.
Presentation & D3.js
You’ve come to the blog that is the written companion to my talk called SVGs beyond mere shapes. SVG can do much more than create nice shapes and paths. In my talk I discuss several techniques and demonstrate how to implement them in D3: from dynamic gradients based on data, to SVG filters, to creating glow, gooey, and fuzzy effects that brighten up any visual.
Tutorial & D3.js
In this blog I’ll explain how to animate both solid and dashed lines. To make things slightly less boring, I’ve created a spirograph drawing app for the examples. It came about because last week I wanted to animate a dashed line in a chart. Trying to use the technique I always apply for solid animated lines I suddenly found out that animating a dashed line isn’t trivial. It’s because of the fact that an animated solid line is, secretly, a dashed line, but I’ll go into that later.
Tutorial & canvas
In this blog I’d like to take you through my learnings from last week when I finally started with canvas. I hope that, after reading this blog, I will have convinced you that canvas is a really good visualization option if you need better performance than d3.js can give you and that it’s actually not that difficult to learn canvas.
Tutorial & Design
A bit more than 2 years ago I wrote a small blog about making the d3.js radar chart look a little better. I know that opinions are diverse about the usefulness of these types of charts. But I can’t deny that I personally have a love for circular charts. I even keep a Pinterest board specifically for circular data visualizations.
Since that chart in the blog from over 2 years ago I haven’t created another radar chart, until a small project came by right before the start of the summer. And apparently, it was about time for another redesign.
Tutorial & D3.js
In this tutorial I want to go into something I’ve learned while creating a personal project called A Closer Look into the Division of Occupations & Age: how to place SVG text on arcs or paths. And how to combine this with d3’s existing donut-chart-like layouts.
Tutorial & D3.js
In this blog post I’ll explain how you can hack a chord diagram to shape it into a more circular looking sankey-like flow chart. Why not just take a regular sankey to visualize the flow? Well, the visualization was meant for use in the media to engage the viewers. Therefore, I wanted to create something visually different. In the end it appears that I just wanted to challenge myself and dive into the d3 source code (for the first time).