SVG Gradient on Visual Cinnamon

Using gradients for abrupt color changes in data visualizations

Mon, 27 Jun 2016 00:00:00 +0000

I’ve already shown the diversity of using gradients in data visualization in several other blogs in this series. But you don’t even have to use gradients as something that runs smoothly from one color to another. They can be very handy for abrupt changes as well. The first time I ended up using this technique was when I became interested in the popularity of baby names.

Data-based orientations for gradients in a d3.js chord diagram

Mon, 13 Jun 2016 00:00:00 +0000

In this blog, I’ll show you how to add a color gradient to the chords of a d3.js Chord Diagram. This comes in handy when there is no net difference in the chords. But you can apply the technique to any gradient that you want to orient based on data. We’re going to look at the collaborations between Avengers. With all those cameo’s happening in the MCU, I wanted to know how often two Avengers had appeared in a movie together. This results in a symmetrical dataset since, if Thor appeared in a movie together with Hawkeye, the reverse is true as well.

Animate a gradient to imitate a flow in a d3.js

Mon, 16 May 2016 00:00:00 +0000

We’re picking up right where I left you in my blog on Hacking a Chord diagram to visualize a Flow where I turned a Chord Diagram into a more circular flow diagram. Even with the chords now having been turned into a “bat-plot” I still wanted to emphasize more that we were dealing with a flow from left to right, from Education to Occupation. So, I thought, why not try to use a gradient and animate a movement/flow towards the right.

Creating a smooth color legend with an SVG gradient

Mon, 02 May 2016 00:00:00 +0000

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.

SVGs beyond mere shapes

Tue, 26 Apr 2016 00:00:00 +0000

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.

Creating an interactive “exoplanets in orbit” visualization

Wed, 24 Dec 2014 00:00:00 +0000

Having enjoyed the process of explaining a visualization through Storytelling in my previous post about chord diagrams, I wanted to create another and try a slightly different approach. And give myself a new project to learn more about d3.js and JavaScript in general.