Dataviz Insights with React and D3.js

While our gallery showcases a myriad of graph examples, this space is dedicated to delving into the intricacies of data visualization using React and D3.js.

From unraveling the complexities of creating stacked bar plots with negative values to envisioning futuristic visualizations, our articles aim to enlighten, inspire, and guide you through the advanced realms of dataviz.

Whether you're a seasoned developer or just starting out, these articles offer a wealth of knowledge to elevate your visualization game.

Let's embark on this enlightening journey together! 🔥

🍔 Stacked barplot: how to deal with negative values

A stacked barchart displays the values of items split in group and subgroups. It's a quite common chart type, but dealing with negative values in the dataset brings some interesting dataviz discussions.Read more

6 minutes read

The next articles are currently in writing mode. ⬇️

They will be released soon and you can be updated through my newsletter:

Using react and d3.js: The 2 strategies

React modifies the DOM. So does d3.js. It makes it notoriously hard to have them work together. This blog post describes the 2 main strategies to use d3.js in a react app, with their pros and cons.

4 minutes read

Axes: build them with react (and a bit of d3)

Most of the viz types need some axes to be insightful. This post explains how to build them from a d3 scale, using the tick() method of d3 to create re-usable react components.

8 minutes read

Responsiveness: a hook that makes your viz fits its container

Viz components often take a width and a height properties as input. This blogposts explains how to build a wrapper around it that computes the parent's div dimension and pass it as props

5 minutes read

Hover interaction

Interactivity is an important part of dataviz when working in the browser. Adding a hover effect can improve the user experience by highlighting a series on the chart. Here are a couple way to implement it, always keeping performances in mind.

6 minutes read

Graph to graph interaction

Let's say you have a choropleth map on a side, a timeseries on the other. How can you add cross-viz interactions, like hovering a country to highlight its trend on the timeseries?

10 minutes read

Spring animations with react spring

It's often necessary to transition between 2 ys of a graph. React-spring is here to help, allowing to use spring animations easily.

5 minutes read

Dataset transition

Adding a smooth transition between dataset often adds a nice touch to your viz component. Let's see how to implement it with react-spring.

5 minutes read

Shape morphism: animate the transition between 2 distincts charts

How can we build a smooth transition between a pie chart and a barplot? The flubber js library allows to interpolate shapes and react-spring can animate this interpolation.

5 minutes read

Improve chart performance with Canvas

Rendering a chart using svg is limited in term of performace. The DOM gets to crowded and updating it ends up being slow. Using canvas is the best workaround but you need to be able to draw your svg path using it!

5 minutes read

Fix the blurry canvas on Retina screens

When using canvas for your viz, the result will be blurry on retina screens if you don't scale the canvas properly. Here is why and how to implement it.

5 minutes read

What is a color

There are so many ways to define a color when talking with a computer. Let's take a tour and see what's the most appropriate for a dataviz point of view.

3 minutes read

Buiding a futuristic viz

What makes a viz look from the future. And how to implement it with d3.js and reac.

3 minutes read


👋 Hey, I'm Yan and I'm currently working on this project!

Feedback is welcome ❤️. You can fill an issue on Github, drop me a message on Twitter, or even send me an email pasting with You can also subscribe to the newsletter to know when I publish more content!