Blog

Where I share what I’ve done, experienced & learned
Presenting the d3 loom plugin

Presenting the d3.loom chart

Posted: August 1, 2017-Likes: 0-Comments: 2-Categories: D3.js, Data Visualization, Tutorial-Tags: D3.js, loom, Lord of the Rings

In this blog I’d like to “formally” present a new chart layout that I turned into a plugin for d3, the loom! It creates a butterfly/double axe shaped visual connecting two different groups by a numeric value. Such as the words (the value) spoken by the different member of the FellowShip (one group) at the different locations (the second group) in the Lord of the Rings movies. In this blog I’ll show you how to create your own and deep dive into the diverse settings of the loom and the effects that each setting has. I hope it’ll help you to create your own loom chart at some point!

Read more »

Coding a "Reasons to" logo remix on my iPad

Posted: July 22, 2017-Likes: 0-Comments: 2-Categories: D3.js, Data Art-Tags: conference, D3.js, Data art

In this blog I’m sharing the remix I made of the “Reasons to” logo. Reasons to is an awesome conference that takes place in Brighton, focusing on coding and being creative. Besides the end result of animating rainbow colored hexagons I also reflect a bit on what it’s like to code on a iPad (while camping in the bush of Namibia) and share two awesome SVG related libraries I learned about (like creating a single self-contained file to create animated SVGs, crazy!). Hope you enjoy it, and perhaps until September 2017 at Brighton!

Read more »

It hardly ever "feels right"

Posted: May 18, 2017-Likes: 0-Comments: 2-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 »