Interactive donut chart using d3 and react

Learning d3.js can be a bit daunting. Let’s break the process down, and get you up and running with your first chart in short order.

Follow along with the repl linked above as we use d3 and react to make a simple donut chart capable of rendering multiple data sets. I will break the example down into easy to digest chunks. Note that this example is using react, react-dom, @babel/standalone and d3 (v6).

(script.js lines 1–18) Let’s start with setting up some sample data. While d3 has the ability to load in data from multiple formats like CSV, we’ll…


Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store