Blog

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

It hardly ever "feels right"

Posted: May 18, 2017-Likes: 0-Comments: 0-Categories: Uncategorized

A short blog that I originally wrote for SuperYesMore for their the “Human in the Machine” publication. This publication is dedicated to productivity and features a different author each day. I decided to write about the search for the “right” feeling that I’m often looking for when starting a new big project. But it’s best not wait for that special mindset. Don’t think, just do, but do small

Read more »
My journey into data visualization

My journey into data visualization

Posted: March 27, 2017-Likes: 0-Comments: 3-Categories: Data Visualization, Tutorial-Tags: Data Visualization, personal, tutorial

Sort-of upon request from all the wonderful people that ask me how I learned data visualization via email (because they want to learn it too, awesome!), I’ve decided to write it all down. This gives me more space to go into details and add some images along the way. Starting at my years learning about the stars, then going to work as a data scientist and finally ending up in data visualization. I’m also explaining about the tools I learned during those years and the struggles and opportunities I faced/had. Hopefully it will show you one (windy) version of how you can end up in the field.

Just a warning, it’s a long post, but you’ll be rewarded along the way with some (embarrassing) charts that I made in my early days (and never have shown before) ;)

Read more »
Hacking the Visual Norm slides

Hacking the Visual Norm

Posted: March 18, 2017-Likes: 0-Comments: 1-Categories: D3.js, Data Visualization, Interactive-Tags: D3.js, Data Visualization, Presentation

A short blog about my presentation “Hacking the Visual Norm”. 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) and personal projects. It revolves around “Combining, Re-using, Designing & Hacking” your visuals into something more effective and engaging. You can find a video of the talk, the slides and some extra tidbits in the blog :)

Read more »

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: 3-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: 4-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: 1-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 »