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 more6 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 awidth 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 props5 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 withreact-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? Theflubber 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
Contact
👋 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 yan.holtz.data with gmail.com. You can also subscribe to the newsletter to know when I publish more content!