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!