Data Visualization for React Developers

Creating a Radial Chart

Shirley Wu

Shirley Wu

Data Sketches
Data Visualization for React Developers

Check out a free preview of the full Data Visualization for React Developers course

The "Creating a Radial Chart" Lesson is part of the full, Data Visualization for React Developers course featured in this preview video. Here's what you'd learn in this lesson:

Shirley demonstrates how to generate a radial chart using D3's arc() function.

Preview
Close

Transcript from the "Creating a Radial Chart" Lesson

[00:00:00]
>> Shirley Wu: So this is the one we'll be talking about next. And then again, don't worry about copying down all of the code, cuz all of the code is in the full version. So this one, I want to talk about this one next. Again, the radial chart is made out of 365 paths and we just need to figure out the path to draw, and like you saw in the very first exercise, that path is really, really ugly if we have to generate it ourselves, and so, D3's got you covered.

[00:00:36]
D3 has this thing called D3.ARC, and the arc generator, that works pretty much very similar to D 3.line, But this time around what we want to do is give the arc generator a data set, or sorry, give the arc generator instead of an array of data points, we want to give it an object of just one data point.

[00:01:04]
And then, D3.ARC generator, always always wants an inner radius, an outer radius, a start angle, and an end angle to draw its arc.
>> Shirley Wu: So this one is pretty commonly used for pie charts.
>> Shirley Wu: And so, the most common example for it, is a pie chart like this where you give it a start angle, an end angle.

[00:01:45]
Can you see that? For example, for this slice, you give it this start angle, and then this end angle, and you give it an inner radius, which in this case is 0, and then an outer radius, however big you want it to be, or, in the donut case, it's a, whatever this inter radius, and then outer radius, and it just calculates the string for you, so it calculates one of these strings.

[00:02:15]
And so for us what we want is we just tell it our inner radius, outer radius, start angle, end angle, pass in that data object, and it gives us back the string that draws that pie slice. So, let's again, give that a try

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now