D3.js on Visual Cinnamon

Visualizing the Top Contributor Network of Any GitHub Repo

Tue, 28 Jan 2025 00:00:00 +0000

In this blog I want to show you the design process that went into creating the “Top Contributor Network” visual. Showing the ecosystem and synergy of the other repositories the top contributors of any GitHub repository have worked on.

How it started from a simple network, and became it’s own thing. How it involved endless tweaking, and how it then all broke, before growing into its final form.

You can find the interactive visual here (ps: it’s not really meant for mobile screens) and you can find all of the code and documentation for the visual here.

Data art posters about music (streaming) data for Sony Music

Mon, 21 Sep 2020 00:00:00 +0000

In April, Sony Music Entertainment reached out to me with a really interesting project idea. When a single or album sells more than a certain amount of units they become a gold or platinum record. The artist generally receives a framed vinyl or CD. But in these days of data being tracked everywhere and listening to music online, could I develop a more data art inspired version of a gold record using data from the actual streams, charts and the song itself. Well, that sounded like an amazingly fun project to sink my teeth into so I enthusiastically agreed!

A sky map of the Hubble Space Telescope's observations

Wed, 08 Apr 2020 10:00:00 +0000

In celebration of the Hubble Space Telescope’s 30-year anniversary in April 2020 I created an extensive visualization, more of fully-fledged poster really, for Physics Today. Let me show you how the static visuals that I made still became one of the biggest projects I’ve ever worked on in terms of hours invested. I could’ve called this blog post “the impact of small design choices” because the main issue wasn’t necessarily what type of chart form to use. It was really how to display the datapoints (Hubble’s observations) in the chosen chart form (a map of the sky) to reveal both details and the bigger picture.

Visualizing the different astronomy targets that Hubble has observed

Wed, 08 Apr 2020 09:00:00 +0000

Besides a visualization that plotted Hubble’s observation on a map in the sky, I created another dataviz for Physics Today to celebrate the Hubble Space Telescope’s 30 year anniversary in April 2020. Revealing the types of astronomy targets that Hubble has been looking at. In this design blog I’ll take you through the design process that led to the final visual.

Techniques for Data Visualization on both Mobile & Desktop

Wed, 17 Apr 2019 00:00:00 +0000

For me making a data visualization look good and be effective on both mobile and desktop is one of the most difficult aspects of my work (next to browser bugs, implementing interactivity and optimizing performance). Although there is no “one-size-fits-all” solution I have found several different options across past projects that work for me.

The Design Process of “Why Do Cats & Dogs ...?”

Thu, 11 Apr 2019 00:00:00 +0000

On April 11th 2019, the US National Pet day I released a dataviz driven exploration in collaboration with Google Trends. It went into the questions that people ask on Google to understand their cats and dogs better. In this blog I’ll be taking you through the long and windy design and creation process of the months before the release.

Creating the Scientific American “Baby Spike” visual

Tue, 31 Oct 2017 00:00:00 +0000

On the Graphic Science page of the July edition of Scientific American you could find three large circular charts about when babies are born. In this blog, let me take you along on the data & designs process that me, Zan Armstrong & Jen Christiansen went through to create this piece.

A talk on lessons learned from data sketches

Sat, 14 Oct 2017 00:00:00 +0000

A blog about the new solo talk I’ve created recently that revolves all around Data Sketches, the dataviz collaboration I’m (still) doing together with Shirley Wu. In this talk I (but also we) discuss the lessons that we’ve already learned from doing 10 months of creating an elaborate data visualization a month.

Presenting the d3.loom chart

Tue, 01 Aug 2017 00:00:00 +0000

In this blog I’d like to “formally” introduce and explain a new (and my first) d3 plugin to create a chart that I’ve started calling the loom. Although I was very much inclined to also call it the butterfly or labrys. However, I actually needed two words for this plugin, so loom + strings made more sense overall (thanks to Mike Bostock who provided the name).

Coding a “Reasons to” logo remix on my iPad

Sat, 22 Jul 2017 00:00:00 +0000

I’d like to share some of my experiences about coding on an iPad…while in the desert of Namibia (*≧▽≦). Also list a few useful new SVG libraries I learned about (like animated SVG files, yes, a file). And of course show the end result of my Reasons to logo remix

Hacking the Visual Norm

Sat, 18 Mar 2017 00:00:00 +0000

I created the Hacking the Visual Norm talk for the Fronteers Conference, held in Amsterdam on October 6 & 7th 2016. During the talk I try to show several ways that you can go beyond the norm in the visualization of data. I use examples from both a business environment (things I made for Adyen or Deloitte) and personal projects. It revolves around Combining, Re-using, Designing & Hacking your visuals into something more effective and engaging.

Brushable and interactive bar chart in d3.js

Mon, 25 Jul 2016 00:00:00 +0000

I wanted to share something I recently build with d3.js which might be useful for other people as well; a bar chart in which you can “brush”. Handy for when you have a lot of categories/bars to show with limited space, but you don’t want to only show the top X. By using the brush technique, you give the choice to the user. They can decide which portion of the bars to see, only the top 5, bottom 10, 20 in the middle, or all at once.

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.

More fun data visualizations with the gooey effect

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

Just over a year ago I posted a blog about the Gooey effect that makes it seem as if things (SVGs) start sticking together once they come close to each other. As if they are water droplets merging together. For my preparation for the “SVGs beyond mere shapes” talk I returned to the gooey effect and in this blog I’d like to teach you a few more techniques to take full use of the power of the gooey.

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.

Adding a subtle touch of glow to your d3.js visualizations

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

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!

Data-based and unique gradients for visualizations with d3.js

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

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.

Beautiful color blending effects with SVGs & d3.js

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

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.

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 real-life based motion effects in d3.js visuals

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

A filter that can create a subtle but interesting effect has to do with motion blur. The faster and closer to us things move in the real world, the more blurred they appear. And with the right filter, you can recreate this effect on the screen as well.

The (creation of the) interactive slides for my “SVGs beyond mere shapes” talk

Tue, 03 May 2016 00:00:00 +0000

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.

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.

Animating (dashed) lines and paths with d3.js & spirographs

Mon, 25 Jan 2016 00:00:00 +0000

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.

Learnings from a d3.js addict on starting with canvas

Mon, 16 Nov 2015 00:00:00 +0000

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.

A different look for the d3.js radar chart

Mon, 19 Oct 2015 00:00:00 +0000

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.

Placing text on arcs with d3.js

Wed, 30 Sep 2015 00:00:00 +0000

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.

Hacking a chord diagram to visualize a flow

Fri, 28 Aug 2015 00:00:00 +0000

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).

Using a d3 voronoi grid to improve a chart's interactive experience

Thu, 02 Jul 2015 00:00:00 +0000

In this tutorial, I’ll show you how you can add an invisible voronoi grid over a scatterplot which will improve the experience of the viewer when hovering over the plot. And I’ve actually updated this tutorial in August 2016 when Franck Lebeau came with a great improvement on the final step.

Create a “gooey effect” during transitions in d3.js

Sun, 31 May 2015 00:00:00 +0000

A short post about perhaps not a very useful, but nonetheless rather fun to watch effect in SVGs applied to d3.js: gooey effects!

Animating a heart shaped curve with d3.js

Sat, 14 Feb 2015 00:00:00 +0000

Just something small for Valentines day. I found the formula for a heart shaped curve on the Wolfram website and wanted to animate the line that draws these points with d3.js.

The Top 2000 songs distributed by year of release

Sat, 03 Jan 2015 00:00:00 +0000

At the end of the year there are several traditions, like presents and Christmas trees. For me, and quite a few other Dutch people, there are two radio related traditions. In the week before Christmas my radio is almost always on to listen to Serious Request (a charity event), and from Christmas day to 23:59 on New Year’s Eve the radio is still on 24/7, but now to listen to the Top 2000.

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.

Using “Data Storytelling” with a chord diagram

Sat, 13 Dec 2014 00:00:00 +0000

It’s been way too long since my last post. I wanted to create something to post, but a few rather busy projects at work and moving to a new home had a big impact on my creativity, as in, I was left with none…

Making the d3.js radar chart look a bit better

Tue, 10 Sep 2013 00:00:00 +0000

The last few weeks I’ve been spending some of my time on creating several visualizations of the data from a Global Mobile Consumer Survey that my company, Deloitte, performed during the spring. The results are being analysed right now and will eventually be published. I was given a free reign on what those illustrations should be, as long as they looked cool and would engage the reader. Well, what better opportunity to play around some of the more exotic d3 graphs and get paid for it!

Adding boundaries inside a hexagonal heatmap with d3.js

Tue, 23 Jul 2013 00:00:00 +0000

In the previous post I explained how to create a hexagonal heatmap. For example to use as output for a self organizing map. I like to create rather large maps with a lot of hexagons if I have enough data. It gives the idea of a high resolution. In that case it’s very useful to divide the entire map into a manageable number of higher level segments.

Creating hexagonal heatmaps with d3.js

Mon, 22 Jul 2013 00:00:00 +0000

In my previous post I spoke a bit about a program I wrote in R that helps me perform self organizing map (SOM) analyses and create heatmaps. From the cleaned data file all the way to the visualization and analysis of the heatmaps.