Radius

As explained in D3.js in Action, Third Edition

A radius is the distance from the center or origin of a geometric figure to a point on its boundary.

A radius measures the distance from the origin to a point in space. In a polar coordinate system, it works with an angle to position points around a centered visualization. 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.

Compare Cartesian coordinates, which use perpendicular x and y dimensions, with polar coordinates, which use radius and angle. section 4.4.1

In arc-based SVG visualizations, radius determines the geometry of the shape:

• Use an inner radius to define the inside boundary of an arc and an outer radius to define its outside boundary. section 4.5
• Position the arc origin at the center of the SVG group so appended arcs are relative to the chart center. section 4.4.1

Centered arc chart

Translate an SVG group to the chart’s center, then configure a D3 arc generator with innerRadius() and outerRadius() to control the arc’s thickness and extent. section 4.4.1 section 4.5

How D3.js in Action, Third Edition covers it

How deep it goes

Defines radius as origin-to-point distance and applies it through D3 arc boundaries and related accessors.

Examples

Uses a centered SVG arc chart and D3’s innerRadius() and outerRadius() accessors as concrete applications.

What you can do after

Apply it via D3’s arc generator to define SVG arc geometry with inner and outer radii.

How it connects

Connects radius with polar coordinates, angles, SVG arcs, arc generators, centroids, and Cartesian coordinates.

liveBookmanning.com

Read D3.js in Action, Third Edition on liveBook Get the book at manning.com

Also explained in

• 

  liveBookmanning.com
  Advanced Algorithms and Data StructuresA radius is the maximum distance from a center to the boundary or an included point of a geometric region.
• 

  liveBookmanning.com
  Geometry for ProgrammersA radius is a line segment or distance from the center of a circle to a point on its circumference.
• 

  liveBookmanning.com
  Math for Web DesignA radius is the distance from the center of a circle to any point on its circumference.

Compare how 4 books explain radius →

Related concepts

• curvaturecontrasts with · Curvature is a measure of how a curve or surface bends locally, or, for a function, how its slope changes across its input space.
• polar coordinatepart of · A polar coordinate specifies a point in two-dimensional space by its distance from an origin and its angle relative to a reference direction.
• circle()configured by · The CSS circle() function defines a circular basic shape using a radius and optionally a center position.

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.