Tutorial on Visual Cinnamon

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.

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

My Journey into Data Visualization

Mon, 27 Mar 2017 00:00:00 +0000

I often get emails from people asking me diverse question about my path into data visualization. And after typing out my story for the Nth time I thought it might actually be easier if I just place it in a blog post. That way I can be more detailed & even add some images (ﾉ◕ヮ◕)ﾉ*:・ﾟ✧

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.

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.

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.

How to create a hexagonal heatmap in R

Wed, 13 Nov 2013 00:00:00 +0000

Like I wrote in one of my previous posts on the creation of a “self organizing map” program in R, I really wanted the results of a SOM visualized in a hexagonal heatmap, so I wrote my own piece of code for it.

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.

Plotting survival analysis results in R with ggplot2

Sun, 14 Jul 2013 00:00:00 +0000

Even though R has been my favorite language to program in since a few months, one thing it is not designed to do is make your plots look anywhere near good. With this I mean that those plots are not the stuff I can just save and put into a client presentation.