Data Visualization With React

Articles & Tutorials

Data Visualization: Build React Graphs the Easy Way (telerik.com)
Mar 24, 2021
Let’s explore an efficient way to create React graphs with the KendoReact Charts library. Read on to see how to quickly implement Donut, Bar, Line and Sparkline charts.
  • Thomas Findlay
A Dive Into React And Three.js Using react-three-fiber (smashingmagazine.com)
Nov 09, 2020
react-three-fiber is a powerful Three.js renderer that helps render 3D models and animations for React and its native applications. In this tutorial, you will learn how to configure and build 3D models in a React application.
  • Fortune Ikechi
Using D3.js v6 with React (blog.logrocket.com)
Nov 06, 2020
Version 6 is the latest release of D3.js, and in this article, we’ll look at how to use D3.js v6 in our React apps.
  • John Au-Yeung
React area chart comparison (blog.logrocket.com)
Dec 24, 2019
React has a number of great charting options to choose from. Not all have the same charts available, but most touch on the staples, such as line, bar, and pie charts. We’ll be focusing on an area chart, which is similar to a line chart, but with the area underneath the line shaded in.
  • Leigh Halliday
Fancy charts with Victory (react.christmas)
Dec 12, 2019
Say you want to add a nice chart or other form of data visualization to your React app, but don't have the slightest idea of where to start. Do you write it from scratch, or do you utilize one of the many charting libraries out there?
  • Stephen Ramthun
React + D3.js (wattenberger.com)
Oct 31, 2019
When I visualize data on the web, my current favorite environment is using D3.js inside of a React.js application.
  • Amelia Wattenberger
How to construct a heat map in React (freecodecamp.org)
Aug 24, 2019
Heat maps are a great way of visualizing correlations among two data sets. With colors and gradients, it is possible to see patterns in the data almost instantly.
  • Jeff M Lowery
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?
Data Visualization in React Application (codeburst.io)
May 13, 2019
As I am a huge fan of both React and data visualization, I’ve decided to share with you my experience of adding a custom dashboard to the React app.
  • Veronika Rovnik
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

React Google Charts - Calendar, Gantt, Geo, Wordtree (youtube.com)
Jan 04, 2020
In this video, I will show you how to install and create various charts using google charts.
  • Hong Ly
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.
Live: Trying out ReactVR for 3D dataviz (youtube.com)
Aug 03, 2018
Playing around with ReactVR, part of research for my new React + D3 book and course.
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?'
Using Chart.js With React (youtube.com)
Jun 24, 2017
In this video I will show you how to build a React app that implements the Chart.js JavaScript library for building charts

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

victory (formidable.com)6855
v32.3.6
Aug 09, 2019
An ecosystem of modular data visualization components for React. Friendly and flexible.
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
@progress/kendo-react-common (telerik.com)
v3.2.2
Jun 15, 2019
Native UI and Data Visualization Components for React.
    React Timeseries Charts (software.es.net)576
    v0.16
    May 17, 2019
    Declarative and modular timeseries charting components for React.
    • Peter Murphy
    • Sartaj Singh Baveja
    react-stockcharts (rrag.github.io)2249
    v0.7.8
    Sep 04, 2018
    Highly customizable stock charts with ReactJS and d3.
    • Ragu Ramaswamy
    react-chartjs (github.com)2809
    v1.2.0
    Jan 06, 2018
    Common react charting components using chart.js.
    • Joe Hudson
    • Austin Pray