In this blog, I’d like to show you how I created the map below of Senja, Lofoten & Vesterålen in Norway. Using a combination of tools, including the OpenStreetMap API, Amazon Web Services Terrain Tiles, R, d3.js, and JavaScript, I was able to create a unique and personal map that features our hikes, Google location history, and the locations we stayed at during our 5-month trip through Norway in 2022.
“Anhedra” is a generative art collection that I created for GEN.ART. For this collection I was inspired by the process through which minerals (and rocks) are created, especially when growth occurs in a competitive environment and different minerals collide and form fascinating arrangements together. However, instead of having different atomic elements to grow, Anhedra uses a wide variety of color palettes, and sometimes goes beyond how processes would happen within nature, combining both the digital and organic.
“Patchwork Kingdoms” is a data + generative art project, a charity NFT collection, that I created for UNICEF’s Giga project. Giga aims to connect all schools in the world to the internet. They have a large database with information about schools, specifically if the school is connected to the internet or not. I used this data, on 283,000 schools, to create an algorithm that spread the schools out over 1000 tiny kingdoms, turning each school into a little square, while using both randomness and other aspects of the data to guide the visual appearance.
“Rotae” is a generative art collection that I created for Art Blocks. It is based on, and is an ode to, the vast array of beautiful shapes that can appear from the seemingly simple process of letting circles rotate on (many more) circles. The name of the project, Rotae, means “wheels” in Latin, and is a nod to the paper that describes the math behind finding a certain m-fold symmetry, regardless of the number of circles that are chained together.
“Wanderlust” is a data art + generative art project, a BlockStyle, that I created for EthBlock.Art. My algorithm takes the transactional data from each Ethereum block in the blockchain and converts it into a unique, but deterministic, image, visualizing several aspects of each transaction.
In September 2020 I decided to stop working for the first half year of 2021 and go back to studying. I had just applied for the Fab Academy, a globally run, full-time course of 20 weeks, headed by Neil Gershenfeld from MIT, focused on learning how to become a maker / fabricator. Making designs on a computer and then turning these into a reality with machines such as laser cutters, 3D printers, milling machines, and more, while also incorporating electronics. It’s also known as “How to Make (almost) Anything”.
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!
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.
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.
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.
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.
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 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.
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).
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
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 (ﾉ◕ヮ◕)ﾉ*:・ﾟ✧
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.
A very short blog where you can find the slides and video of the 3-minute elevator pitch I gave at the Reasons to conference in Brighton, UK on Wednesday September 7th 2016. And as a bonus some images of things that didn’t make it!
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.
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.
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.
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.
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!
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.
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.
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.
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.
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.
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.
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.
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.
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 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.
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.
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).
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.
A short post about perhaps not a very useful, but nonetheless rather fun to watch effect in SVGs applied to d3.js: gooey effects!
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.
While browsing online I came across several examples of Martin Krzywinski’s Pi art works and I was inspired to try and do a small project with the digits myself. I wanted to try and create something that wasn’t very informative per se, but hopefully pretty to look at, more like art.
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.
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.
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…
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.
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!
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.
I’ve been using self organizing maps (or SOM) to analyse client data for more than a year now. In the beginning I tried some commercial software, but I did not like the fact that it was too easy to just randomly click some buttons and a map showed up. I wanted to know what was happening under the hood.
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.
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.