Blog

Where I share what I’ve done, experienced & learned

Visualizing the Beauty of Math in 3 minutes

Posted: September 9, 2016-Likes: 0-Comments: 4-Categories: Data Art, Data Visualization-Tags: art in pi, conference, exoplanets

A very short blog where I just wanted to share the slides and video of the 3-minute elevator pitch I gave at the Reasons to conference in Brighton, UK. The theme of my talk was “Visualizing the Beauty of Math” and it involves exoplanets, spirographs, guilloche and an animated version of my Art in Pi work. I hope you’ll enjoy it :)

Read more »

Brushable & interactive bar chart in d3.js

Posted: July 25, 2016-Likes: 2-Comments: 3-Categories: D3.js, Data Visualization, Interactive-Tags: bar chart, brush, D3.js

A short post in which I share the examples/code on how you can create a brushable bar chart. 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 brushing 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.

Read more »

Using gradients for abrupt color changes in data visualizations

Posted: June 27, 2016-Likes: 0-Comments: 0-Categories: D3.js, Data Visualization, Tutorial-Tags: Baby names, BMI, D3.js

We’ve finally come to the last tutorial in the 10-part “SVGs beyond mere shapes series”. Although in this blog the official method is still a gradient, we’re not going to use it as something in which colors go smoothly from one color to another. Instead, I’ll show you how gradients can be very useful to display abrupt color changes as well. Just think about displaying thresholds where something is bad if the value goes above a certain value. But I’ve also used it to create a better “connection” between the typical focus + context chart. As a bonus, I’ll explain how this threshold region can easily be updated on a user input.

Read more »

More fun data visualizations with the gooey effect

Posted: June 20, 2016-Likes: 2-Comments: 2-Categories: D3.js, Data Visualization, Tutorial-Tags: D3.js, gooey, SVG beyond mere shapes

This week we’re revisiting the Gooey effect! It’s the last SVG filter blog of the SVG beyond mere shapes series. And although I blogged about the gooey effect little over a year ago I wanted to show you even more fun examples, such as rotating circles and a gooey collision detection. In the final part, I’ll explain how you can use this effect in actual useful data visualizations by looking at maps and the force layout.

Read more »

Data-based orientations for gradients in a d3.js Chord Diagram

Posted: June 13, 2016-Likes: 0-Comments: 0-Categories: D3.js, Data Visualization, Interactive-Tags: avengers, Chord Diagram, D3.js

In this blog, a part of the “SVGs beyond mere shapes” series, I explain how you can create smooth color gradients for the chords in a D3.js Chord Diagram. We’re going to investigate the collaborations of the Avengers in the MCU and see how to improve the default chord diagram to fit this type of symmetrical dataset better. I’ll explain how you can use data to set both the angle/direction along which a gradient should run and the colors of the gradient. We’ll need a bit of trigonometry, but the code in this blog is very versatile and can be used for other examples where you only have to change the dataset.

Read more »

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

Posted: June 6, 2016-Likes: 0-Comments: 0-Categories: D3.js, Data Visualization, Tutorial-Tags: D3.js, glow, Radar chart

A short blog this time, still part of the “SVGs beyond mere shapes” series. I’ll show you a fun SVG filter to apply. It might not suit your visual in all circumstances, but if it does, your data visualization will have a little bit more magic :) So, let me show you how to add a bit of glow to your shapes with a few simple steps that can be reused without changing a thing.

Read more »

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

Posted: May 30, 2016-Likes: 0-Comments: 0-Categories: D3.js, Data Visualization, Tutorial-Tags: D3.js, exoplanets, Space

With the 5th tutorial, we’re now just past the halfway point of the “SVGs beyond mere shapes” blog series. In this installment, I’d like to focus on a basic but extremely useful technique for using gradients in data visualizations; creating a data-based / unique gradient for each of your datapoints.

In this Astronomy-themed tutorial, I’ll use examples from our Sun, the Solar system, exoplanets en even our nearest stars to explain the simple steps needed to create (radial) data based gradients.

Read more »

Beautiful color blending effects with SVGs & d3.js

Posted: May 23, 2016-Likes: 0-Comments: 0-Categories: D3.js, Data Art, Data Visualization-Tags: D3.js, SVG beyond mere shapes, SVGs

In this short tutorial, nr. 4 in the “SVGs beyond mere shapes” series, I’d like to introduce you to the wonderful results of using color blending on your SVGs. These techniques that some of you might already know from Photoshop can do some fun and beautiful things to overlapping SVGs, where two colors overlapping each other can create an entirely different color. And it takes just two lines of CSS to get any of the 16 different blending effects going in your browser. So you can get started with your own experiments in no time!

Read more »

Animating a gradient to imitate a flow using d3.js

Posted: May 16, 2016-Likes: 0-Comments: 3-Categories: D3.js, Data Visualization, Interactive-Tags: D3.js, gradient, gradient animation

In this blog, a part of the “SVGs beyond mere shapes” series, I’ll explain a very specific use of gradients. By animating a gradient you can give the intuitive impression of a flow moving between two locations.

The example visualization in which I’ve applied this is the stretched chord diagram (or “bat-plot” for a more catchy name) which has featured in its own blog before. It shows how people flowed from their different study direction to their eventual occupation. There’s also a fun example involving Minard’s famous chart from 1869 showing Napoleon’s campaign to and from Moscow.

Let me show you how you can animate a gradient with just a few lines of code that almost speak for themselves.

Read more »

Creating real-life based motion effects in d3.js visuals

Posted: May 9, 2016-Likes: 0-Comments: 3-Categories: D3.js, Data Visualization, Tutorial-Tags: D3.js, SVG beyond mere shapes, SVG filter

In this second post of the “SVGs beyond mere shapes” series, we’ll look at the first SVG filter. In real life, we’re used to seeing things blurred when they move fast and close to us. By using a blur filter in one direction we can mimic this motion blur effect on the screen as well. It’s a subtle filter that has a nice added effect when you have movement in your data visualizations. We’re starting off with some simple examples to show the effects and how to set up the filter and we’ll be ending with some more advanced examples of applying the effect to diagonal moving objects and how to adjust the amount of blur on your dataset. And if you want to see a string of circles moving inside a hexagon indefinitely for a mesmerizing effect, check out the post as well!

Read more »