D3 shape generator

As explained in D3.js in Action, Third Edition

d3.line() is a D3 shape API function that creates a line generator.

A D3 shape generator turns data into the SVG path instructions stored in a path element’s d attribute. It avoids hand-writing long path commands: d3.line() reads each point’s horizontal and vertical positions and returns a path that passes through them. section 4.0 section 4.2.1

Build a line generator by calling d3.line(), then provide x() and y() accessors. Each accessor receives a datum and commonly sends one of its values through a scale. Call the finished generator with the dataset, assign the returned string to d, and use fill="none" plus a stroke color to reveal the line. section 4.2.1 section 4.5

Temperature line chart

For weekly New York City temperatures, x(d => xScale(d.date)) places each date and y(d => yScale(d.avg_temp_F)) places its average temperature. Appending one path with d set to lineGenerator(data) connects the plotted points into a temperature-over-time chart. section 4.2 section 4.2.1

Add curve(interpolator) when a curved representation is appropriate. D3 offers several interpolators, but curves alter the visual representation of data, so compare them against the actual points and choose carefully. curveMonotoneX and curveCatmullRom can closely follow points; other choices may understate or reduce variation. section 4.2.2

A line generator also works when a frontend framework owns the DOM. Keep D3 for calculations, generate the d value, and render the path in framework markup. For incomplete series, defined() can handle data points whose required value is missing. section 8.6 section 8.6.3

Figure 4.14 Line generator d3.line() is used in combination with two accessor functions, x() and y(), that respectively take the horizontal and vertical position of each data point as arguments.

See how d3.line() combines x() and y() accessors before its output is assigned to an SVG path. section 4.2.1

How D3.js in Action, Third Edition covers it

How deep it goes

Explains accessor-based path generation, SVG rendering, curve selection, and missing-value handling without detailing path-command syntax.

Examples

Uses New York City weekly temperatures and a React rankings chart with curves for framework satisfaction ranks.

What it assumes

Assumes basic data binding, JavaScript object property access, scales, and SVG path elements while demonstrating line-generator setup.

What you can do after

Build it from scratch: configure d3.line(), generate a path d value, and render a styled line or curve chart.

How it connects

Connects SVG paths, scales, accessor functions, curve interpolation, data binding, and React rendering.

liveBookmanning.com

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

Related concepts

• area generatorcontrasts with · A D3 area generator converts configured upper and lower boundary data into SVG path geometry for a filled area.
• d3.curveMonotoneXconfigured by · d3.curveMonotoneX is a D3 curve factory that generates a cubic interpolating curve preserving monotonicity in the x dimension.
• SVG path data attributeproduces · The SVG path data attribute is the d attribute whose value encodes commands and coordinates defining an SVG path's geometry.
• accessor methoduses · An accessor method or function provides access to an object's property or state by retrieving its value, assigning a value, or defining behavior for such access.

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.