D3.js on Visual Cinnamon

Top 39 Actors

Fri, 16 Oct 2026 00:00:00 +0000

I had the chance to create a fun, whimsical interactive visualization for Graffu, a platform dedicated to sharing stories focused on people of color. The article centers on showing the set of actors the writer was most familiar with, sorted by how profitable the movies they starred in were. I felt the topic was a wonderful fit for a more playful approach, so I leaned into a cinema theme—using pieces of popcorn to visualize each movie, paired with retro 3D glasses (for the color palette as well) and classic popcorn buckets. It turned the final article into an inviting, joyful piece that’s fun to read and explore.

Rays

Thu, 20 Aug 2026 00:00:00 +0000

I was asked by a private equity firm to create a collection of artworks to celebrate the history of the company using the company’s data. The final collection, drawn using millions of tiny dots, consists of a main piece, two specific specializations and a set of five vibrantly colored monochrome versions.

Growing Cities

Thu, 13 Aug 2026 00:00:00 +0000

In collaboration with the EPFL Laboratory of Urban and Environmental Systems, I transformed their scientific research on global urban growth into an aesthetic data artwork. By visualizing how cities like Shanghai and Beijing have evolved over two decades, I created an A0-sized piece that brings their findings to a wider audience in a beautiful, art-oriented way. The team aimed to move beyond traditional scientific charts to showcase their research through a more engaging lens. The design ensures that while the end result looks like abstract art at first glance, upon closer inspection, the viewer can clearly discern the underlying urban growth trends and individual city morphology.

RéciTAC

Fri, 05 Jun 2026 00:00:00 +0000

I was approached by the Transforming Climate Action program, a team of researchers from four Canadian universities (Dalhousie University, Université du Québec à Rimouski, Université Laval, and Memorial University) working together to support just and equitable climate adaption, advance responsible marine carbon dioxide removal science and reduce critical uncertainty in the climate system. The team overseeing the massive project was looking for a visual way to show how the researchers were connected through collaborations across various projects. The resulting network is an inviting and playful way to encourage exploration and discovery of the people and projects within the program. Visitors can hover and click on nodes to discover details, filter by discipline or project, and more.

A Giant Map of the World

Thu, 21 May 2026 00:00:00 +0000

I created this very large map of the world that measures 2.85m x 1.5m (roughly 9.5’ x 5’), which takes up nearly one entire wall of my living room. The map is based mostly on the vector and shaded relief data from the Natural Earth and the colored contour areas (height lines) from Amazon Web Services Terrain Tiles. I had the map printed on an ArtFrame (by Art Heroes), which is a textile canvas that is stretched along a black aluminum frame.

Searching for Birds

Thu, 12 Feb 2026 00:00:00 +0000

“Searching for Birds” is an interactive data storytelling project created for Google Trends that transforms millions of search queries into a visually rich exploration of how people connect with birds. Combining Google Trends data with various public datasets, I designed a fully bespoke visual language of illustrated birds, playful metaphors, and custom interactive charts that invite users to explore patterns across nearly 700 species. It blends rigorous analysis, crafted illustration, and thoughtful UX to turn complex data into an engaging, memorable experience for both birders and anybody even remotely interested in birds.

Visualizing Neglect

Fri, 30 Jan 2026 00:00:00 +0000

“Visualizing Neglect” is an interactive data-driven article created for the The END Fund, exploring the global burden of neglected tropical diseases (NTDs). These diseases affect around 1.5 billion people worldwide, many of them children, causing lifelong physical, cognitive, and economic harm. Despite their enormous impact, NTDs remain underfunded and underreported—hence the term neglected. The project’s goal was to transform relatively dry public-health data into an experience that makes the scale of the problem, and the progress toward solving it, both understandable and emotionally resonant.

Wall Artworks for New DNV Office

Mon, 15 Dec 2025 00:00:00 +0000

I was contacted through Avison Young Studio Project Services to create two large wall-filling artworks for DNV’s new office in Houston, Texas. They wanted to visually represent part of the data they provide, preferably with an energy and maritime focus, in a captivating way. I used two datasets from their “Energy Transition Outlook” to show the change in energy consumption between 2000 and 2050, and the projected maritime energy demand over the same period as a spiral with time flowing outward and the density of certain colors representing the different energy sources.

EU Data Stories

Thu, 25 Sep 2025 00:00:00 +0000

The Publications Office of the European Union asked me to create the data visualizations to accompany three of their monthly Data Stories, creating three relatively straightforward visuals per story. Each story focuses on a different topic relevant to the EU, and the visualizations are designed to be both informative and engaging, helping to communicate key insights from the data. During 2025 I created three stories: the first story focused on the future, looking at the “2025–2027 Horizon Europe strategic plan,” the second had a whimsical air as it explored leisure time across the EU, and the third took a deep dive into health and well-being statistics. For the first half of 2026, I created two more stories: about travel patterns in the EU and one about the adoption of AI.

The Radius Gap

Mon, 19 May 2025 00:00:00 +0000

Scientific American commissioned me to create a data visualization for an article exploring the “radius gap.” This is a puzzling absence of exoplanets within a specific size range, larger than Earth but smaller than Neptune. The goal was to illustrate this phenomenon in a way that was both scientifically accurate and visually compelling. Rather than relying on a traditional scatterplot, I aimed to design something more engaging while still making the data accessible to readers. The final visualization, inspired by sci-fi aesthetics, uses a polar plot with density contour lines to highlight the two distinct populations of exoplanets: Super-Earths and Sub-Neptunes. This approach not only made the radius gap apparent but also provided a striking, intuitive way to compare these distant worlds to our own solar system.

Time For CH₄nge Campaign

Sat, 26 Apr 2025 00:00:00 +0000

I was commissioned by the Environmental Defense Fund (through Fourtold) to create a data art hero image for their Time For CH₄nge campaign, designed to raise awareness about methane emissions and their impact on climate change. The challenge was to give form to the invisible: methane is a colorless, odorless gas, making its growing presence difficult to perceive. I developed a full data art system and interactive webpage, inviting users to enter their date of birth and experience how much methane has been added to the atmosphere during their lifetime, making the global issue feel personal and immediate.

GitHub Commit History Timeline

Tue, 28 Jan 2025 00:00:00 +0000

Through the Builders program (previously MIECO) of Mozilla, I collaborated with Adam Bouhenguel to create an interactive visualization that shows the entire commit history of a GitHub repository. It includes an option to highlight those contributors that have been awarded with ORCA. (The Open Retrospective Compensation Agreement (ORCA), conceived by Adam, is a simple agreement for businesses to share revenue with the open source contributors who make that revenue possible.) This visual is created to work for any GitHub repository and includes documentation on how to prepare the data and load the visual for other repositories than the default of pdf.js.

The GitHub Top Contributor Network

Mon, 27 Jan 2025 00:00:00 +0000

Through the Builders program (previously MIECO) of Mozilla, I collaborated with Adam Bouhenguel, to create an elaborate visualization that shows the top contributors of any GitHub repository and especially highlight those that have been awarded with ORCA. The Open Retrospective Compensation Agreement (ORCA), conceived by Adam, is a simple agreement for businesses to share revenue with the open source contributors who make that revenue possible. The network shows how top contributors to a certain repository are connected to the (other) repositories that they have made commits to, thereby showing how providing compensation to these contributors could have a ripple effect throughout the open source community.

GDQS Data Art Collection

Tue, 31 Dec 2024 00:00:00 +0000

This six-piece data art collection, created for the GDQS Country Story Book by Intake, transforms Global Diet Quality Score (GDQS) data from over 80,000 individuals across 23 countries into vibrant visualizations. Each artwork symbolizes dietary patterns, using distinct visual elements — like wavy white lines for “Whole Grains” and bold red circles for “Red Meat” — to represent the 25 GDQS food groups. The centerpiece visualizes individuals’ dietary data as colorful rings, where the size and color of each section reflect the variety and quantity of foods consumed during a single day. Additional pieces explore unique themes: animal source foods, vegetables and tubers, sweets and processed foods, whole foods, and fruits, each inspired by familiar forms like lollipops or fruit slices. Inspired by universal experiences like shared meals, this collection celebrates the richness, diversity, and cultural nuances of global diets, offering a visually engaging narrative of dietary data and its impact.

The Amsterdam Startup Landscape

Tue, 25 Jun 2024 00:00:00 +0000

ACE was preparing for the soft launch of their rebrand to Cæmpus. They tasked me with analyzing data from the past decade (and beyond), during which they supported academic entrepreneurs in starting and growing their companies. My goal was to identify trends and interesting patterns that could be shared with the audience at the event. Additionally, during the event we highlighted the gaps in the existing data, emphasizing the importance of contributions from the community to ensure that future entrepreneurs can benefit from the collective experience.

The 100 Tallest Buildings in the World

Mon, 31 Jul 2023 00:00:00 +0000

This self-initiated data visualization appeared in the third issue of Nightingale, the printed journal of the Data Visualization Society. The theme of the issue was guidelines and with this visual, I embrace one of the main “taboos” within data visualization: 3D (bar) charts. It is accompanied by a short article that explains how you can go beyond the guidelines and rules when you have the right reasons.

Using a 3D perspective in data visualization is generally only to the detriment of the visual, and for good reason. However, when I started playing with the dataset of the 100 tallest buildings in the world, and noticed that they all fall within a rather narrow band of heights (apart from the tallest handful), I knew that comparing exact heights would not be the main point of visualizing this dataset. Instead, seeing that more than half of those buildings are in China, that most of them are offices, and which buildings once were the tallest (and for how long) became the insights that I wanted the visual to focus on.

wavʌves

Mon, 31 Jul 2023 00:00:00 +0000

“Waves and Lines, Interlocking, Interweaving, Ever Flowing, Fixed in Time” The wavʌves collection (pronounced waves), a mid-century modern inspired generative art set of 144 pieces, was created for the “N=12” exhibition on Feral File. It leverages a playful use of color to convey a sense of interaction. Distinct blocks combine with groups of fluid lines, suggesting the parallel creative processes and intersecting practices at the heart of the N=12. I’ve left it intentionally abstract and left it to the viewer for interpretation.

GenCoop

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

Swissgrid, the national transmission system operator in Switzerland, requested two animation about solar panels that they wanted to use for a specific project. One shows the immense rise of solar panels over the past 35 years since the first was registered in 1988. While the second one reveals a model of the expected daily energy production of each panel across 2022 using weather data. The design of each element of the animation, from the map to the line charts has been a highly custom process to create a unique and visually captivating result.

Senja, Lofoten & Vesterålen

Thu, 09 Feb 2023 00:00:00 +0000

I created this map of Senja, Lofoten & Vesterålen to remember the five months I traveled through Norway in 2022. I loved the whole country, but these locations stole my heart. The map uses on data from the OpenStreetMap API and the height lines (contours) from Amazon Web Services Terrain Tiles. To make it more personal, I added several layers of personal geo data to the map as red elements: lines show our hikes, small dots along the road are the Google location history points, diamonds for the locations we stayed overnight, and more. I had the map printed at 50x60cm on fine-art paper and it is now hanging in a prime spot of our hallway.

Global Plastics Outlook

Mon, 06 Jun 2022 00:00:00 +0000

For the Global Plastics Outlook published by the OECD in June of 2022 I was asked to create 4 of the visualizations. About the flow of plastics in 2019 and how it would grow to 2060, visualizing the leakage into our rivers and oceans of plastic, about the life cycle analysis of several polymers, and the change in GDP for all countries between 2019 and 2060.

I was asked to tackle the four visuals from the report that the client felt were the most difficult to handle, such as showing a flow while also being able to compare two years.

Small World of Words

Mon, 25 Apr 2022 00:00:00 +0000

The Small World of Words project had celebrated its 10-year anniversary and wanted to create a poster about the data it collected during this time to celebrate. This research project, led by Simon de Deyne, looks at how people associate words, asking for the first words that come to mind when presented by a specific word, such as “apple”. The client prepared a script to turn their dataset into a network after which I took over to create the visual design; usage of colors, incorporating extra variables, fonts, layout, legends, etc. I created two versions; a big square poster of 70x70cm that was able to show 3,200 word labels, and a smaller poster at A3 size having 1,100 of the circles labeled with the word they represent.

Wanderings of Stars

Mon, 20 Sep 2021 00:00:00 +0000

The three pieces in this generative & data art collection reveal how the stars in our night sky are moving through the “lens” of how our current constellations are pulled apart as time is either moved 400,000 years into the past, the future, or both. These pieces place you as an outside viewer, looking at the night sky as a sphere with the stars and constellations drawn along the outside, and our Earth a theoretical speck in the center.

Landscape of Power Flows

Mon, 05 Jul 2021 00:00:00 +0000

Swissgrid, the national transmission system operator in Switzerland, reached out to me because they wanted to explore an artistic way to visualize the data that is generated in their extra-high-voltage network of electrical grids. With over 60 million datapoints from the year 2019 it was quite a challenge to find the right balance of aggregating values while still showing as much detail as possible. The final result, called “Landscape of Power Flows”, became a giant work of 2m x 2.7m, printed on acrylic glass, and is now hanging in the lobby of Swissgrid’s main office in Aarau, where guests (and employees) can take in the whole visual, but also slowly explore the many details that reveal themselves the closer you get.

Gravitational Waves

Tue, 26 Jan 2021 00:00:00 +0000

First discovered in 2015, LIGO and Virgo have since detected 50 gravitational wave events. These ripples through space time itself are caused by the violent collisions of black holes (and/or neutron stars) dating back billions of years. To celebrate the release of the 2nd catalog of mergers Science News asked me to create an interactive data visualization revealing each event together with a companion for their printed magazine. We wanted to make the interactive part more special than a static visual. The final visual includes sound bites for some mergers. Hovering over a merger starts a tiny (physics based) animation of the merger. Clicking on any merger shows a pop-up modal with a lot more detailed information, such as a map of the sky that shows the rough location of where the gravitational waves originated from.

Space Wars

Wed, 16 Dec 2020 00:00:00 +0000

I created a visualization of all the satellites that are still active in space for the “Space Wars” article that was published in the November 2020 edition of Scientific American. By keeping each satellite as a separate circle, but grouping them by the two most important variables, country and orbit, the visualization reveals a very detailed look into the satellites, while not becoming overwhelming to the viewer.

The art director specifically asked to not create a visual with circles around the Earth, but to convey “the state of things”, with a specific focus on the country that owned each satellite, what orbit they occupied, and its class (business, defense, etc). The dataset contained many more interesting variables however, such as launch date, usage category, mass, which I also wanted to convey. I therefore kept each satellite represented as a circle, giving me the opportunity to style each satellite very specifically, such as making it more transparent if it was older and sizing it by its mass. I then created a treemap like clustering of these satellites into a “grid” showing country versus orbit, to highlight those two variables most clearly.

Re-imagining music’s ‘Gold Record’ with Data Art

Tue, 22 Sep 2020 00:00:00 +0000

Sony Music reached out to collaborate on creating a data-driven re-imagination of the ‘gold record’, the record certifications plaques that celebrate milestones in the journey of a song or album. Using data from the music itself and from Spotify and Youtube, such as the streams, playlists and chart positions, I created a data art system that creates a unique poster that shows the “data fingerprint” for each song. These posters are meant to be printed at the same size as the original gold records, at 40x50cm. I therefore had a lot of room to add visual details from the elaborate datasets. I aimed for a type of work that should be placed on a wall and every time you walk by, you can read a bit more and learn something new for weeks and months. Something that’s worth it to print and frame, that keeps on giving insights the longer you look. Something that you can appreciate visually in an instant, but it takes longer to gain insights (should you even want to).

Data art posters about music (streaming) data for Sony Music

Mon, 21 Sep 2020 00:00:00 +0000

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!

Satellite Surge

Mon, 29 Jun 2020 00:00:00 +0000

I created a visualization showing the rise and recent surge of the number of satellites that orbit Earth for the “Graphic Science” page of the May 2020 issue of the Scientific American. The art director specifically requested a visual that wouldn’t be a more typical “visual that shows the satellites as dots around the Earth” and wanted something more visually bold. I designed a visual that really focuses on showing the numbers and being able to see the sudden rise in the 1-10 kg range for the “Lower” Low Earth orbit in the bottom right.

Hubble's 30-year legacy

Wed, 15 Apr 2020 00:00:00 +0000

In celebration of the Hubble Space Telescope’s 30-year anniversary in April 2020 I created two static visualizations for Physics Today, to be used in their series of articles on Hubble’s history. The main visual became a full poster that revealed more than 550,000 observations in a map of the sky, while highlighting some of the most famous observations and photos. The second visual was created as a companion piece outlining the different target classifications of Hubble’s observations. Originally only meant to appear online, the client was so enthusiastic about the main visual that it was adapted and published as a gate-fold in their April issue of the Physics Today magazine as well.

A sky map of the Hubble Space Telescope's observations

Wed, 08 Apr 2020 10:00:00 +0000

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.

Visualizing the different astronomy targets that Hubble has observed

Wed, 08 Apr 2020 09:00:00 +0000

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.

The Fermi Paradox

Wed, 26 Feb 2020 00:00:00 +0000

One of the main articles in the January 2020 edition of the Scientific American was about a new simulation that had been performed to address the Fermi Paradox (if there are aliens, why haven’t we met). Scientific American was looking for a full spread visualization to accompany the article. After reading though the scientific paper and draft of the Scientific American article, I proposed to visualize the final state of the simulation, showing a tiny cube of space. I felt this would reveal the main insight best to a more general audience; that it’s perfectly possible for our Milky Way to be settled by alien civilizations, but that our Earth happens to be in a local void, currently unreachable.

Highly Hazardous Pesticides

Mon, 24 Feb 2020 00:00:00 +0000

Unearthed, the journalistic arm of Greenpeace, was doing a large scale investigation together with Public Eye, an NGO from Switzerland, on the sales of hazardous pesticides by the CropLife companies. I was approached by Unearthed to help them create eye-catching visuals to accompany the different conclusions that came out of the investigation. These visuals would be used in the articles both parties were writing. Taking into account the broad scope of audiences, from both a general readership to eventual use by experts, I advised to go for a set of static visuals, each with a version for desktop and mobile, which would be visually distinct and still effective in revealing the underlying insights.

Preferential Polling

Mon, 25 Nov 2019 00:00:00 +0000

Swayable was looking for a way to visualize the results of their “preference polls” on people’s ranked-choice votes for the (democratic) candidates for the 2020 US elections. They perform a simulated instant-runoff election, eliminating candidates with the least support and distributing the vote of each supporter to their next-preference candidate. I created two data visualization prototypes for them, capable of working with new data (new polls) and have a visually distinct look. Swayable has implemented these in internal environments and client meetings, but have also revealed the visuals in a blog post.

Kantar's MotiveMix

Mon, 18 Nov 2019 00:00:00 +0000

Kantar Consulting reached out to me to help them visualize their MotiveMix dataset. This dataset looks at American consumers along 12 “attitudinal dimensions”, such as Tech Disposition, Environmentalism, Cultural Connection, and more, to better understand what is important to consumers in the counties across the US. I created two very different pieces for this project. One being a large static poster that looks at each dimension per US state to see which states show interesting behaviors (e.g. different from most other states). The other was an animation that reveals how counties could show very similar values for the attitudinal dimensions, even though they are from completely different parts of the US, thereby transcending the typical geographic proximity that more traditional analysis tend to focus on.

A Real-World Exploration of the Janssen Product Portfolio

Thu, 17 Oct 2019 00:00:00 +0000

I created a large poster for Janssen that provides an overview of the ingredients within their product portfolio, and the extent to which those ingredients are observed across a network of healthcare data that is available throughout the Johnson & Johnson enterprise. Revealing insights such as seasonality in use, and in which areas of the world the ingredients are taken the most. This poster was created to make the employees of Johnson & Johnson, the mother company of Janssen, aware of the wealth of data that they have at their disposal to do research.

Digital Trackers

Mon, 26 Aug 2019 00:00:00 +0000

The New York Times had done a fascinating research on the insane number of digital trackers that you gather when you browse the web, well, anywhere. This resulted in a large dataset of trackers and metadata about what these trackers gathered and from which domain / company they originated. The New York Times reached out to me to help turn this large dataset into an eye-catching and illustrative visualization that would go in both the printed edition and online, revealing just how much information is being gathered on on the web that most of us never know or ever see.

Frontex: EU’s Deportation Machine

Tue, 06 Aug 2019 00:00:00 +0000

Lighthouse reports was working together with news organizations across Europe to reveal that a massive deportation machine, Frontex, has grown up in Europe in the last decade. Through “Freedom of Information” requests they had gotten information about each Frontex flight that send deportees back home. They asked me to create an animation that would reveal the enormous growth of these deportation flights in the last few years, and reveal the surge in budgets that Frontex now gets to work with, matching the political appetite for forced returns.

Imaging the entire Earth, every day

Fri, 19 Jul 2019 00:00:00 +0000

Planet’s goal of imaging the entirety of the Earth every day became achievable with the unprecedented fleet of small satellites, called “doves”. The main visualization showcases one day in the life of these satellites and the astounding 600,000 images captures on that day. Following the main flocks of satellites as white spheres circling the Earth several times a day, and seeing exactly when and where each photo was taken. There is a second section of the story that focuses on the different fleets that Planet has in orbit, and their imaging resolutions.

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.

Why Do Cats and Dogs ...?

Mon, 15 Apr 2019 00:00:00 +0000

In Why do cats & dogs …? the viewer can explore the most popular questions asked on Google that start with “why does/are/is my/a cat(s)/dog(s)”. What do people most want to know about these two pets? What “strange” behavior is asked so often that it appears to actually be quite normal behavior perhaps. What’s up with cats and cucumbers, while dogs have a fascination with poop. This dataviz-driven exploration takes you through the most interesting and funny insights found in the data in several highly interactive visuals that work well on both desktop and mobile sizes.

The Design Process of “Why Do Cats & Dogs ...?”

Thu, 11 Apr 2019 00:00:00 +0000

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.

Adyen's Shareholder Report

Wed, 27 Feb 2019 00:00:00 +0000

Adyen wanted to feature more then just text and tables in their second ever shareholder letter & annual report and reached out to me to help them. Looking at the data that is presented in the report, I looked at what information would lend itself to be visualized in an interesting and effective manner. This eventually turned into the creation of four more extensive visuals about the income statement, costs, regional and FTE growth.

alis_ OS

Thu, 31 Jan 2019 00:00:00 +0000

alis_ was looking for a way to visualize the services running on their custom alis_ OS. To reveal if the OS was running well, which tasks were failing. But also to show the dependencies of services having created new services and so on. And to have a clear differentiation between their domains. Finally, the final visual was going to be used both for management and marketing purposes and thus had to be really effective, still look good, and on brand. After a longer design phase to investigate what forms revealed the insights, I developed a custom chart for them to implement as a prototype into their systems.

Intangible Cultural Heritage

Thu, 20 Dec 2018 11:15:47 +0100

Since 2003 UNESCO safeguards an ever growing list of our Intangible Cultural Heritage and these days there are almost 500 unique cultural elements inscribed on the list. Four interactive and unique visuals help people understand and discover their cultural heritage, and how this is connected to other cultures through connections such as regions, countries, World Heritage Sites and concepts such as Family, Trees, Dance, and more.

In March I was approached by UNESCO to help them visualize Intangible Cultural Heritage (ICH) in such as way as to help people understand the connections that exist between them. They had already been creating the data set of connections in the year before that.

Culture Mapping

Wed, 19 Dec 2018 00:00:00 +0000

The client, scenarioDNA, has a (patented) data-driven method that addresses the study of people and their ideologies over time. The best way to understand where ideas are going is to see where they live in the context of near neighbors and contrasting ideologies. They had an existing interactive tool that let their users explore the data and insights. However, this tool was perceived as being too dense and complex to understand. ScenarioDNA asked me to create a new version that would hold true to their patented approach, encourage users to explore, and be understandable. I created a fully functional visual prototype, based on their Food & Beverage dataset, and design for the surrounding UX elements.

Figures in the Sky

Tue, 17 Jul 2018 00:00:00 +0000

No matter where you are on Earth, we all look up to the same sky during the dark nights. You might see a different section of it depending on your exact location, time & season, nevertheless the stars have fascinated humans across time and continents. Our own creativity combined with stories about local legends and myths have created a diverse set of different constellations. And even though the stars don’t change, people have found many different shapes in the same sky. This interactive visual story looks into the differences & similarities between the constellations that 28 cultures, spread across time and across the World, have seen in the stars.

Meet the neighbors

Wed, 14 Mar 2018 00:00:00 +0000

This visual shows all the stars that we’ve discovered within 20 light years from our Solar system, and the exoplanets belonging to 12 of those stars. When comparing the types of stars, it becomes clear that most are found around M-type stars. That is why projects such as NASA’s Transiting Exoplanet Survey Satellite has a prioritized list of similar type stars to look for even more exoplanets. The visual appeared in the 2017 December issue of the Scientific American.

An Ode to Cardcaptor Sakura

Sat, 23 Dec 2017 14:52:04 +0000

Cardcaptor Sakura is one of the most beautiful and adorable manga series ever created and this project is my ode to the wonderful series. CCS was written and illustrated by the manga artist group CLAMP between 1996 and 2000, but is still extremely popular today. This visualization brings together several different aspects of the series; the main characters, the chapters, relationships and the wonderful cover art of each of the 50 chapters. By visually connecting these different aspects of Cardcaptor Sakura, fans can get a more nuanced understanding of the events that happen throughout the series.

Bussed out

Sat, 23 Dec 2017 00:00:00 +0000

How America moves its homeless | Each year, US cities give thousands of homeless people one-way bus tickets out of town. An 18-month nationwide investigation by the Guardian reveals, for the first time, what really happens at journey’s end. There are several data visualizations in this article. Many of which are created in a Scrollytelling style, where scrolling down the page will trigger animations in the data visualizations. Through these visualizations, video, photography, and of course, text, the article explains the impact of the homeless moving around the US. Both from the perspective of the homeless and the cities that are sending them away.

The Freedom of Expression

Thu, 14 Dec 2017 16:34:27 +0000

Article 19’s new Expression Agenda (XpA) metric gives a comprehensive picture of the state of freedom of expression and information internationally in 2016. The metric examines 350 aspects of democracy in 172 countries to provide an analysis that captures the challenges and complexity of the freedom expression across the world. By examining freedom of expression through this holistic approach, a far deeper understanding can be achieved of the benefits, risks and global trends that impact on the ability of everyone to raise their voice and be heard, regardless of sex, gender, ethnicity, race or religion.

Creating the Scientific American “Baby Spike” visual

Tue, 31 Oct 2017 00:00:00 +0000

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 talk on lessons learned from data sketches

Sat, 14 Oct 2017 00:00:00 +0000

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.

The Baby Spike

Sun, 01 Oct 2017 13:39:08 +0000

Charts often aggregate across time to simplify the numbers. Instead, for this visual made for Scientific American, the focus has been on visualizing the number of babies born across different time frames; from weeks down to the minute, to reveal the role of scheduling & intervention in births. Nuanced insights about data design, visual form, and graphic design resulted in these unique charts that compare the birth of babies to the average. And people have much more influence than expected!

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

Coding a “Reasons to” logo remix on my iPad

Sat, 22 Jul 2017 00:00:00 +0000

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

Breathing Earth

Wed, 24 May 2017 10:33:57 +0000

We all know that our Earth goes through a seasonal cycle, especially for the latitudes farther away from the equator. In the fall the “deciduous” plants lose their leaves only to grow back again in the next spring. The animation happening in “Breathing Earth” shows how 50.000 circles move through all 52 weeks of 2016 and visualize the seasonal cycles. Thereby displaying the how vegetation health changes throughout the year and how plant growth & decline occur on different times and scales in the many regions across the Earth.

Beautiful in English

Wed, 24 May 2017 09:43:48 +0000

Beautiful in English let’s the viewer dive into the most popular words translated into English through Google Translate. It focuses specifically on nouns and adjectives. From the most translated word being beautiful, to the most translated word per language, the top 10 per language and finally the similarities between all languages. See which languages seem related through the words they both translate. But also how culture defines unique words, such a gentleman for the French.

Hacking the Visual Norm

Sat, 18 Mar 2017 00:00:00 +0000

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.

All the Fights in Dragon Ball Z

Tue, 31 Jan 2017 22:20:44 +0000

Dive into all 200 fights that happened during Dragon Ball Z. Starting with the first fight between Picollo and Raditz, each fight is represented by a cluster of circles. Swooshing lines representing a particular character makes it easier to understand their fighting patterns. By hovering over a fight you get more insight into the what happened and who was fighting whom. Seeing the overview of all the fights in this manner reveals interesting insights that might’ve been hidden otherwise. Such as Goku, the main protagonist. He appears in most fights overall, however he’s still missing in action for very large periods of time, due to being dead (twice) or sick/recovering from injuries.

The Top 2000 ❤ the 70s & 80s

Thu, 29 Dec 2016 13:15:12 +0000

This infographic looks at the Top 2000 songs ever made and how they are spread according to their year of release. From the 60’s in the bottom left corner to 2016 in the top right, each song is represented by a circle. The circles are sized according to their position in the Top 2000 and the darker a circle, the higher the position it reached in the weekly top 40s. Several groups of special songs are highlighted. Such as all 38 tracks from the Beatles in blue, David Bowie in yellow and Prince in purple, while the top 10 is made even more apparent by making them appear as tiny vinyl records. The infographic shows that the 70s & 80s are still the most appreciated era’s in terms of music.

Magic is Everywhere

Wed, 30 Nov 2016 08:00:40 +0000

In Magic is Everywhere I’ve investigated the titles of ±900 fantasy books to look for trends in their titles. Magic is the most common word in all titles. Followed by fire, dark & red. In general, terms relating to unpleasant things are more common than those relating to positive aspects. Nevertheless, titles relating directly to magic can be found throughout the visual, indicating that the one thing that binds fantasy books together is, not surprisingly, Magic.

Royal Constellations

Wed, 12 Oct 2016 22:19:30 +0000

Royal & aristocratic families are known for their fondness of marrying within their own clique. This leads to very interesting & entangled family trees which the Royal Constellations visual tries to convey. Dive into the web of family relations to see how all 10 of the current hereditary royal leaders of Europe can be connected to each other through their ancestors. By hovering and clicking on one of the 3000 stars, each of which represent a person, the web reveals aspects such as 6-degrees of separation and shortest paths between two people.

Visualizing the “Beauty of Math” in 3 minutes

Fri, 09 Sep 2016 00:00:00 +0000

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!

Olympic feathers

Sat, 13 Aug 2016 15:30:32 +0000

More than 5000 Olympic events have had a winner in the Summer Olympics since the first games of 1896. In Olympic Feathers you can investigate how each of these medals has been won in the 56 different sporting disciplines that have competed at the games, of which 41 are still held at Rio 2016. To see patterns appear in certain sports, such as weightlifting going from mostly European medals to Asian countries during the recent Olympic Games, or get a sense of the number of events that each sport has and when women events were finally added to each sport. This visualization shows the entire history and lets the viewer decide what they want to focus on.

The Words in the Lord of the Rings

Sun, 31 Jul 2016 13:07:30 +0000

In more than 11 hours of the Lord of the Rings trilogy all characters combined speak approximately 32,000 words. The 9 members of the Fellowship alone take up about 17,000 of these words, a bit more than half. In this visualization you can find out how many words a member has spoken at each different location throughout the trilogy. Did you realize how much Sam truly spoke. Or that Legolas said even less than Boromir!

Brushable and interactive bar chart in d3.js

Mon, 25 Jul 2016 00:00:00 +0000

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.

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.

The (creation of the) interactive slides for my “SVGs beyond mere shapes” talk

Tue, 03 May 2016 00:00:00 +0000

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.

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.

SVGs beyond mere shapes

Tue, 26 Apr 2016 00:00:00 +0000

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.

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!

The top 10 babynames

Sun, 24 May 2015 16:24:54 +0000

Each year almost 4 million babies are born in the US. Although thinking of 4 million unique names is pretty difficult, theoretically it is not impossible. Nonetheless, there are always many babies given the same name. For example, in 2013 more than 18,000 boys were named Noah and more than 21,000 girls named Sophia, the most popular boy and girl name of that year. The top 10 baby names since 1880 shows the top 10 names given to babies per year and per gender since 1880. You can investigate any of the ±50 and 90 unique boy and girl names, respectively, that have entered the top 10 in the last 135 years and see their rise and fall.

Visualizing Millions of People on the Move

Tue, 31 Mar 2015 17:34:47 +0000

Societies are shifting from having a rural nature to a more and more urban nature. We face the opportunity to set the course of urbanization on a more sustainable and equitable path. This visualization is based on data on urbanization in East Asia between 2000 and 2010 collected by the World Bank using Satellite images and population models. It aims to provide you with a clear view on the magnitude of changes that can happen in only one decade and challenges you to think about the impact on the following years.

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.

The Top 2000 songs distributed by year of release

Sat, 03 Jan 2015 00:00:00 +0000

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.

Creating an interactive “exoplanets in orbit” visualization

Wed, 24 Dec 2014 00:00:00 +0000

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.

Using “Data Storytelling” with a chord diagram

Sat, 13 Dec 2014 00:00:00 +0000

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…

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.