Tutorial & D3.js
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.
Tutorial & D3.js
Today it’s time for a short blog about a very subtle effect that can add a bit more pizzazz to your visualization. It’s definitely not something that will suit a business/no-nonsense chart. But then again, if you only make those kinds of charts, I feel that doing data visualization is definitely less enjoyable than if you try to have some fun with your creations every now and then. So let’s start by adding a bit of glow to our shapes!
Tutorial & D3.js
In the past few weeks, several tutorials about SVG gradients in data visualizations have come to pass already. But those were mostly focusing on creating one gradient. In this tutorial, I want to show you how you can create a gradient for each of your datapoints. And how to adjust each of these gradients using some aspect of your data, so each gradient will become unique.
Tutorial & Data Art
In this short tutorial I want to introduce you to those wonderful color blending modes that you have (in Photoshop for example) where two colors overlapping each other can create another color. I actually started out trying to recreate this effect with SVG filters. But then I found out that it be done with just two lines of CSS.
Tutorial & D3.js
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.
If you want to be notified of updates on my new projects, tutorials and blogs be sure to sign up for my quarterly newsletter!
Sign up