d3-shape module overview
The d3-shape module provides graphical primitives for visualization.
d3-shape
59 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
Line generator to Canvas 2D context
A line generator can render to a Canvas 2D context using line.context(context)(data);
d3-shape generator types
d3-shape provides the following shape generators: Arcs (circular or annular sectors for pie or donut charts), Areas (area defined by topline and baseline), Curves (interpolate between points), Lines (spline or polyline), Links (smooth cubic Bézier curves), Pies (compute angles for pie charts), Stacks (stack adjacent shapes), Symbols (categorical shape encoding), Radial areas (areas in polar coordinates), Radial lines (lines in polar coordinates), and Radial links (links in polar coordinates).
d3-shape module overview
The d3-shape module provides shape generators for visualizations including symbols, arcs, lines, and areas. Shape generators are data-driven with accessors that control how input data maps to visual representation. They can render to SVG path elements via the d attribute or to Canvas 2D contexts.
Line generator example with accessors
A line generator for a time series can be created with d3.line() and configured with .x() and .y() accessors that scale data fields. Example: const line = d3.line().x((d) => x(d.date)).y((d) => y(d.value));
Line generator to SVG path
A line generator can compute the d attribute of an SVG path element using path.datum(data).attr("d", line);
link.target() accessor
link.target(target) sets the target accessor to the specified function and returns the link generator. If target is not specified, returns the current target accessor. The target accessor defaults to: function target(d) { return d.target; }
link.x() accessor
link.x(x) sets the x-accessor to the specified function or number and returns the link generator. If x is not specified, returns the current x accessor. The x accessor defaults to: function x(d) { return d[0]; }
link.y() accessor
link.y(y) sets the y-accessor to the specified function or number and returns the link generator. If y is not specified, returns the current y accessor. The y accessor defaults to: function y(d) { return d[1]; }
link.context() for canvas rendering
link.context(context) sets the context and returns the link generator. If context is not specified, returns the current context. The context defaults to null. If the context is not null, the generated link is rendered to this context as a sequence of path method calls. Otherwise, a path data string is returned.
link.digits() precision control
link.digits(digits) sets the maximum number of digits after the decimal separator and returns the link generator. If digits is not specified, returns the current maximum fraction digits, which defaults to 3. This option only applies when the associated context is null, when the link generator produces path data strings.
link() function signature and purpose
d3.link(curve) returns a new link generator using the specified curve. The link shape generates a smooth cubic Bézier curve from a source point to a target point. The tangents of the curve at the start and end are either vertical or horizontal.
linkVertical() shorthand
d3.linkVertical() is shorthand for d3.link(d3.curveBumpY) and is suitable for visualizing links in a tree diagram rooted on the top edge of the display.
linkHorizontal() shorthand
d3.linkHorizontal() is shorthand for d3.link(d3.curveBumpX) and is suitable for visualizing links in a tree diagram rooted on the left edge of the display.
link generator calling conventions
A link generator is invoked as link(...arguments) and generates a link for the given arguments. The arguments are arbitrary and are propagated to the link generator's accessor functions. With default settings, an object with source and target properties is expected. Example: link({source: [100, 100], target: [300, 300]}) returns "M100,100C200,100,200,300,300,300".
link.source() accessor
link.source(source) sets the source accessor to the specified function and returns the link generator. If source is not specified, returns the current source accessor. The source accessor defaults to: function source(d) { return d.source; }
areaRadial.startAngle(angle) and endAngle(angle)
startAngle() is equivalent to area.x0 for Cartesian areas, and endAngle() is equivalent to area.x1. Both return angles in radians with 0 at -y (12 o'clock). These methods are typically not used; the angle() method should be used instead to set a single angle accessor.
d3.areaRadial() constructor
d3.areaRadial() constructs a new radial area generator with default settings. A radial area generator is like the Cartesian area generator except the x and y accessors are replaced with angle and radius accessors. Radial areas are positioned relative to the origin; use a transform to change the origin.
areaRadial(data) generates path data
Calling areaRadial(data) generates SVG path data from an array of data points. The result can be used with svg.append('path').attr('d', area(data)) to render the radial area.
areaRadial.angle(angle) accessor
The angle accessor is equivalent to area.x for Cartesian areas. It accepts a function that returns the angle in radians, with 0 at -y (12 o'clock position). Example: area.angle((d) => a(d.Date)). Typically this method is used instead of setting separate start and end angles.
areaRadial.radius(radius) accessor
The radius accessor is equivalent to area.y for Cartesian areas. It accepts a function that returns the radius: the distance from the origin. Example: area.radius((d) => r(d.temperature)).
areaRadial.innerRadius(radius) and outerRadius(radius)
innerRadius() is equivalent to area.y0 for Cartesian areas, returning the radius for the inner edge. outerRadius() is equivalent to area.y1, returning the radius for the outer edge. Both accept functions that return the distance from the origin. Example: area.innerRadius((d) => r(d.low)) and area.outerRadius((d) => r(d.high)).
areaRadial.defined(defined) accessor
The defined accessor is equivalent to area.defined. It accepts a function that determines whether a data point should be included in the area. Example: area.defined((d) => !isNaN(d.temperature)).
areaRadial.curve(curve) setting
The curve setting is equivalent to area.curve and controls how the area is interpolated. Example: area.curve(d3.curveBasisClosed). Note that curveMonotoneX or curveMonotoneY are not recommended for radial areas because they assume the data is monotonic in x or y, which is typically untrue of radial areas.
areaRadial.context(context) setting
The context setting is equivalent to area.context. It accepts a 2D canvas context for rendering. Example: const context = canvas.getContext('2d'); const area = d3.areaRadial().context(context).
areaRadial.lineInnerRadius() method
lineInnerRadius() is an alias for lineStartAngle(). It returns a new radial line generator with the radial area generator's current defined accessor, curve, and context. The line's angle accessor is the area's start angle accessor, and the line's radius accessor is the area's inner radius accessor.
areaRadial.lineStartAngle() method
lineStartAngle() returns a new radial line generator that shares this radial area generator's defined accessor, curve, and context settings. The line's angle accessor is this area's start angle accessor, and the line's radius accessor is this area's inner radius accessor.
areaRadial.lineEndAngle() method
lineEndAngle() returns a new radial line generator that shares this radial area generator's defined accessor, curve, and context settings. The line's angle accessor is this area's end angle accessor, and the line's radius accessor is this area's inner radius accessor.
areaRadial.lineOuterRadius() method
lineOuterRadius() returns a new radial line generator that shares this radial area generator's defined accessor, curve, and context settings. The line's angle accessor is this area's start angle accessor, and the line's radius accessor is this area's outer radius accessor.
lineRadial() constructor
d3.lineRadial() constructs a new radial line generator with default settings. The radial line generator is like the Cartesian line generator except the x and y accessors are replaced with angle and radius accessors. Radial lines are positioned relative to the origin; use an SVG transform to change the origin.
lineRadial(data) generates path data
Calling a lineRadial generator with data is equivalent to calling a line generator with data. The result can be used as the 'd' attribute of an SVG path element. Example: svg.append("path").attr("d", line(data)).attr("stroke", "currentColor");
lineRadial.angle(angle) accessor
The angle accessor is equivalent to line.x, except the accessor returns the angle in radians, with 0 at -y (12 o'clock). Example: d3.lineRadial().angle((d) => a(d.Date))
lineRadial.curve(curve) curve method
The curve method is equivalent to line.curve. It sets the curve interpolation method. Note that curveMonotoneX or curveMonotoneY are not recommended for radial lines because they assume that the data is monotonic in x or y, which is typically untrue of radial lines. Example: d3.lineRadial().curve(d3.curveBasis)
lineRadial.defined(defined) accessor
The defined accessor is equivalent to line.defined. It determines which data points are defined. Example: d3.lineRadial().defined((d) => !isNaN(d.temperature))
lineRadial.context(context) canvas method
The context method is equivalent to line.context. It sets the canvas 2D context for rendering. Example: const context = canvas.getContext("2d"); const line = d3.lineRadial().context(context);
lineRadial.radius(radius) accessor
The radius accessor is equivalent to line.y, except the accessor returns the radius: the distance from the origin. Example: d3.lineRadial().radius((d) => r(d.temperature))
linkRadial() constructor
linkRadial() returns a new link generator with radial tangents. It is similar to the Cartesian link generator but uses angle and radius accessors instead of x and y accessors. Radial links are positioned relative to the origin; use an SVG transform attribute to change the origin.
linkRadial angle accessor
The angle(*angle*) method sets or gets the angle accessor for a radial link generator. The accessor returns the angle in radians, with 0 at -y (12 o'clock). It is equivalent to link.x() for Cartesian links.
linkRadial radius accessor
The radius(*radius*) method sets or gets the radius accessor for a radial link generator. The accessor returns the radius, which is the distance from the origin. It is equivalent to link.y() for Cartesian links.
linkRadial example for tree diagram
To visualize links in a tree diagram rooted in the center of the display using radial links: const link = d3.linkRadial().angle((d) => d.x).radius((d) => d.y);
stackOrderAppearance(*series*) orders by maximum value
stackOrderAppearance(*series*) returns a series order such that the earliest series (according to the maximum value) is at the bottom.
stackOffsetWiggle(*series*, *order*) minimizes layer wiggle
stackOffsetWiggle(*series*, *order*) shifts the baseline so as to minimize the weighted wiggle of layers. This offset is recommended for streamgraphs in conjunction with the inside-out order. See Stacked Graphs — Geometry & Aesthetics by Byron & Wattenberg for more information.
Stacked bar chart rendering example
svg.append("g") .selectAll("g") .data(series) .join("g") .attr("fill", d => color(d.key)) .selectAll("rect") .data(D => D) .join("rect") .attr("x", d => x(d.data[0])) .attr("y", d => y(d[1])) .attr("height", d => y(d[0]) - y(d[1])) .attr("width", x.bandwidth()); This example shows how to render stacked series from a stack generator. Each series is rendered as a group, and each point in the series becomes a rectangle. The y-position and height are determined by the lower (d[0]) and upper (d[1]) values from the stacked output.
stack() constructor
stack() constructs a new stack generator with default settings.
stack(*data*, ...*arguments*) generates stacks for data
Calling a stack generator with *data* and optional additional *arguments* returns an array representing each series. Each series is an array of points [y0, y1] representing lower (baseline) and upper (topline) values. The series key is available as series.key and the index as series.index. The input data element is available as point.data. Additional arguments are propagated to accessors along with the this object.
stack().keys(*keys*) sets or gets keys accessor
stack().keys(*keys*) sets the keys accessor to a function or array and returns the stack generator. If *keys* is not specified, returns the current keys accessor. Keys are typically strings but may be arbitrary values. A series (layer) is generated for each key. The default keys accessor is the empty array.
stack().value(*value*) sets or gets value accessor
stack().value(*value*) sets the value accessor to a function or number and returns the stack generator. If *value* is not specified, returns the current value accessor. The default value accessor is: function value(d, key) { return d[key]; }. The default assumes input data is an array of objects with named numeric properties (wide representation) rather than tidy data, which is no longer recommended.
stack().order(*order*) sets or gets order accessor
stack().order(*order*) sets the order accessor to a function or array and returns the stack generator. If *order* is a function, it receives the generated series array and must return an array of numeric indexes representing the stack order. The stack order is computed prior to the offset; thus the lower value for all points is zero at computation time. If *order* is not specified, returns the current order accessor. The default is stackOrderNone, which uses the order given by the key accessor.
stack().offset(*offset*) sets or gets offset function
stack().offset(*offset*) sets the offset accessor to a function and returns the stack generator. The offset function receives the generated series array and order index array, and is responsible for updating the lower and upper values in the series array. If *offset* is not specified, returns the current offset accessor. The default is stackOffsetNone, which uses a zero baseline.
stackOrderNone(*series*) returns series in key order
stackOrderNone(*series*) returns the given series order [0, 1, … n - 1] where n is the number of elements in *series*. Thus, the stack order is given by the key accessor.
stackOrderReverse(*series*) reverses series order
stackOrderReverse(*series*) returns the reverse of the given series order [n - 1, n - 2, … 0] where n is the number of elements in *series*. Thus, the stack order is given by the reverse of the key accessor.
stackOrderDescending(*series*) orders by series sum descending
stackOrderDescending(*series*) returns a series order such that the largest series (according to the sum of values) is at the bottom.
Stack generator with tidy data example
const series = d3.stack() .keys(d3.union(data.map(d => d.fruit))) // apples, bananas, cherries, … .value(([, group], key) => group.get(key).sales) (d3.index(data, d => d.date, d => d.fruit)); This example shows how to use a stack generator with tidy data (one row per observation). The keys are derived from unique fruit values using d3.union. The value accessor extracts the sales value from a grouped structure created by d3.index.
stackOrderInsideOut(*series*) for streamgraphs
stackOrderInsideOut(*series*) returns a series order such that the earliest series (according to the maximum value) are on the inside and the later series are on the outside. This order is recommended for streamgraphs in conjunction with the wiggle offset. See Stacked Graphs — Geometry & Aesthetics by Byron & Wattenberg for more information.
stackOffsetNone(*series*, *order*) applies zero baseline
stackOffsetNone(*series*, *order*) applies a zero baseline to the stack.
stackOffsetExpand(*series*, *order*) normalizes to 0-1 range
stackOffsetExpand(*series*, *order*) applies a zero baseline and normalizes the values for each point such that the topline is always one.
stackOffsetDiverging(*series*, *order*) stacks around zero
stackOffsetDiverging(*series*, *order*) stacks positive values above zero, negative values below zero, and zero values at zero.
stackOffsetSilhouette(*series*, *order*) centers streamgraph
stackOffsetSilhouette(*series*, *order*) shifts the baseline down such that the center of the streamgraph is always at zero.
d3.line signature
d3.line(xAccessor, yAccessor) creates a line generator. Example: d3.line((d, i) => x(i), y) where the first argument is the x accessor and second is the y accessor. It returns a path data string when called with an array of data.