liveBook · Manning

Radian

As explained in D3.js in Action, Third Edition

A radian is an angular measurement equal to the angle subtended at a circle's center by an arc whose length equals the circle's radius.

A radian measures an angle using a circle’s radius: one radian is the angle subtended by an arc whose length equals that radius. A full circle measures 2π radians. section 4.4.1 section 5.1.4

Use radians when building circular visualizations:

  • Convert degrees with radians = degrees × π / 180. section 4.4.1
  • Pass radian values to D3’s arc generator through startAngle() and endAngle(). section 4.5
  • Calculate a pie or donut percentage as (endAngle − startAngle) / (2π). section 5.1.4

Convert precipitation data into an arc

If 126 of 365 days have precipitation, the share is about 35%, or 126 degrees. Convert it with 126 × π / 180 to obtain about 2.2 radians, then use that value as an arc angle. section 4.4.1

Figure 4.24 The dimensions of a Cartesian coordinate system are perpendicular to one another, while the polar coordinate system uses the radius and angle dimensions to describe a position in space.
figure

Compare polar coordinates, which describe positions with radius and angle, with Cartesian coordinates. section 4.4.1

How D3.js in Action, Third Edition covers it

How deep it goes
Explains definition, conversion, full-circle measurement, and pie-chart calculations without developing deeper trigonometry.
Examples
Uses precipitation percentages, D3 arc angles, and donut-chart labels positioned at arc centroids.
What you can do after
Apply radians via D3’s arc generator to create proportional pie and donut chart segments.
How it connects
Connects radians with polar coordinates, SVG paths, arc generators, pie charts, donut charts, and centroids.

Also explained in

Compare how 2 books explain radian →

Related concepts

This explainer was generated by Manning's knowledge graph from the text of D3.js in Action, Third Edition. The section links point to the parts of the book it draws on.