Data Visualization for React Developers

Radial Chart Exercise

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 "Radial Chart Exercise" 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 explains the exercise on how to construct a radial chart, and gives a hint about how to approach the problem.


Transcript from the "Radial Chart Exercise" Lesson

>> Shirley Wu: In this case, what we want to do is use a linear scale to map, actually, the high,
>> Shirley Wu: Just the high temperature, I think, to the radius.
>> Shirley Wu: And then use an arc generator to generate a string for the d attribute of each of the paths where the startAngle is the date and the endAngle is date + 1.

And the innerRadius is the lower temperature, and the outerRadius is the higher temperature.
>> Shirley Wu: And then return an array of objects where each of the objects has that path, that d attribute to draw a path with. And if you want to give it a fill, we can give it a fill.

>> Shirley Wu: So,
>> Shirley Wu: Any questions about it before we start? And this is the last of the kind of data calculations example.
>> Speaker 2: When you say the end angle is date plus one, do you mean add a day to the date?
>> Shirley Wu: Yeah, so this one, again, a great question.

So, I think you can do it either, yes, add a day, or you can kind of figure out what the angle of each slice should be and then use index. And then, actually, let's just do just that part together. So let's calculate together.
>> Shirley Wu: The angle for each slice, and I believe for this one, it takes radians.

>> Shirley Wu: So I think some things [LAUGH] in d3, I think d3 operates in radians and I think SVG takes degrees, something like that. So I always end up having to Google, cuz, when I'm creating these things, sometimes it will ask for radians and sometimes it will ask for degrees.

And I think this one is radians. But what I want to do here is basically get the angle for each slice and so that should be, basically,
>> Shirley Wu: The 2 pi, divide by 365, because I have 365 days. And that should be the angle for each slice. So that's 2 * Math.PI, divide by,

>> Shirley Wu: 365, or in this case, I'm gonna just say data.length, which is also 365. And then what you can imagine doing is that the startAngle is equal to the index of your slice times perSliceAngle. And the endAngle is just the index + 1 of your perSliceAngle.
>> Shirley Wu: So I think that mightbe the easier way to do it.

The other way to do it is l create a timescale and then add a day for the endAngle, etc, which is a little bit painful.

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