Using D3 With React

D3 helps you bring data to life using HTML, SVG, and CSS. More info

Articles & Tutorials

How to drive React state with D3 transitions for complex animation (swizec.com)
Jul 01, 2019
Here’s part 2 of Kiran B’s challenge from last week - animating our drilldown piechart.
A Drilldown Piechart with React and D3 (swizec.com)
Jun 28, 2019
A few days ago Kiran B sent me a challenge via Twitter DM: How can I make a drilldown piechart?
How to get started with D3 and React (medium.freecodecamp.org)
May 13, 2019
Data Driven Documents (D3.js) is a JavaScript library used to create visualizations of data using HTML, CSS, and SVG. It does this by binding data to the DOM (Document Object Model) and its elements and allowing them to transform when the data changes.
  • Magda Stenius
Bringing Together React, D3, And Their Ecosystem (smashingmagazine.com)
Feb 21, 2018
React and D3.js are great tools to help us deal with the DOM and its challenges. They can surely work together, and we are empowered to choose where to draw the line between them.
  • Marcos Iglesias

Video Guides & Talks

Data Visualization in React Using Gatsby (youtube.com)
Aug 21, 2019
How can you create data visualization that works well in progressive web apps? On this episode, Swizec Teller joins to teach us how to use D3, React, and Gatsby to create SSR-friendly data visualizations for high performance dataviz.
The 5 minutes React Native D3 & SVG Animation (youtube.com)
Jun 11, 2019
In this video, we are building a D3/SVG graph animation in 5 minutes using React Native.
THE key insight to understand any D3 example (youtube.com)
Nov 15, 2018
A sample video from my upcoming course on #reactjs and #d3js
Revolut Chart - “Can it be done in React Native?” (youtube.com)
Oct 03, 2018
In this video we try to clone the beautiful chart from the Revolut app using React Native and D3.
Data Visualizations with React + D3 (youtube.com)
Mar 31, 2018
React can make your D3 amazing. Want to animate 20,000 elements with React? I'll show you. Want to build a complex dataviz? You'll know how. Want to write maintainable dataviz components that you can reuse in any project? I gotchu, fam. This talk shows you everything I've learned about creating reusable and maintainable graphical components over 3 years of hammering away at the question: 'Jeez D3 sure is hard to learn, how do we make this easier?'

Books & Guides

React+D3v4 (swizec.com)
Aug 22, 2017
Become a data visualization engineer with React + D3v4

Courses & Video Series

React for Data Visualization (reactfordataviz.com)
Sep 05, 2019
Learn how to build scalable dataviz components your whole team can understand with React for Data Visualization.
Data Visualization for React Developers (frontendmasters.com)
Sep 10, 2018
Learn to design simple visualizations with D3.js and React!
  • Shirley Wu

Libraries

recharts (recharts.org)10936
v1.7.0
Aug 08, 2019
Recharts is a Redefined chart library built with React and D3.
  • xile611
@vx/vx (vx-demo.now.sh)5758
v0.0.190
Jul 17, 2019
vx is a collection of reusable low-level visualization components. vx combines the power of d3 to generate your visualization with the benefits of react for updating the DOM.
  • Harrison Shoff
@nivo/core (nivo.rocks)5049
v0.59.1
Jun 29, 2019
nivo provides a rich set of dataviz components, built on top of the awesome d3 and Reactjs libraries
  • Raphaël Benitte
react-stockcharts (rrag.github.io)2249
v0.7.8
Sep 04, 2018
Highly customizable stock charts with ReactJS and d3.
  • Ragu Ramaswamy