Re-create curved lines

100%

Re-create curved lines

✓ Published0🌍 Public

Last edited Sep 23, 2017

Created on Sep 23, 2017

Three line charts demonstrate D3's curve interpolation methods. The first uses a straight line between two points, while the second and third apply `d3.curveCardinal` to smooth paths through four and five data points respectively. Each path is rendered as an SVG `path` element with black stroke and no fill, using `d3.line()` with custom x and y scales that multiply coordinates by five and invert y-values. The three panels are positioned side by side at increasing offsets on the x-axis.

AI-generated description

Built with blockbuilder.org

This figures are re-production of 1 straight and 2 curved lines.

This bar chart was forked from <a href='https://bl.ocks.org/emmasaunders'>Viz Data Ltd</a>'s block: <a href='http://bl.ocks.org/emmasaunders/c25a147970def2b02d8c7c2719dc7502'>Interpolation(v4)</a>.

mit Licensed

Similar vizzes

Loading thumbnail…

D3 Line - Curve

Two SVG panels compare a standard D3 line path with a curved variant using D3 version 7. The code draws a linear path through six explicit coordinate points (x, y), then applies `d3.curveCardinal` to the same data via `d3.line().curve()` to produce a smoother interpolation. Each panel renders the resulting path as an SVG `<path>` element using the `lineGenerator` and `curveGenerator` functions, overlaid with reference circles marking the original data points. The example demonstrates how the curve generator modifies the path data without changing the underlying dataset.

SSubhendu Karmakar

83% match

Loading thumbnail…

Line (using curveCardinal)

A line chart uses a cardinal spline to connect six predefined data points across an SVG canvas. The d3.line generator with the curveCardinal interpolation produces a smooth, curved path through the points, which are also marked as circles on the chart. The rendering relies on D3 v4’s selection and attribute methods to assign the generated path data to the SVG path element.

Ppcsong33

81% match

Loading thumbnail…

Curved Lines

Four line charts show how D3’s curve bundle interpolator changes with beta values of 0, 0.25, 0.5, and 1, producing progressively smoother, more rounded paths from the same six fixed points. Each chart uses the same coordinates, with only the curve function varying, and is drawn as an SVG path with a black stroke. The example reproduces a figure from Munzner’s *Visualization Analysis and Design* using D3 v5’s `d3.line()` and `d3.curveBundle.beta()`.

Ffloresh

80% match

Loading thumbnail…

Fork of d3NoobV5 Reusable Examples - Line Types Chart

This example demonstrates eight different D3 line interpolation curves—linear, step, basis, cardinal, monotone, and Catmull-Rom—plotted together on a single time-series chart using stock close prices from a CSV file. Each curve is rendered as a distinct colored SVG path with a corresponding legend, and the chart includes axes, labels, and a title. Built with d3.v5, the code uses reusable chart patterns to organize scales, axes, and data binding, and it animates the drawing of the lines and data points.

JJimMaltby

78% match

Loading thumbnail…

Re-create Marks & Channels Graphic

This example recreates a marks-and-channels graphic by drawing a curved line through a set of six predefined points. The path uses D3’s `line` generator with `curveCardinal` interpolation to produce a smooth spline, while small circles mark each data point. The code selects the SVG `path` and appends `circle` elements for every point, using raw coordinate arrays from the dataset. Rendering is done with D3 v5 and SVG, with the line styled via CSS as a gray, unfilled stroke.

Wwangjonathan

78% match

Loading thumbnail…

d3NoobV5 Reusable Examples - Line Types Chart

This example demonstrates eight different D3 curve interpolation methods applied to a line chart of stock data, with each curve type rendered in a distinct color. The visualization compares curves such as linear, step, basis, cardinal, monotoneX, and Catmull-Rom, showing how each affects the visual smoothness and shape of the line. The code uses d3.axisBottom, d3.axisLeft, and d3.line with the corresponding d3.curve functions, while the data comes from a CSV file with date and closing price values. A static area fill is also included beneath the lines.

JJimMaltby

77% match

Loading thumbnail…

[02] Curved Line Chart - Using React Hooks with D3

This example demonstrates a curved line chart rendered as an SVG, where a dataset of numeric values is mapped to a path using D3’s `line` generator with the `curveCardinal` interpolation. The chart initializes with twenty points, and two buttons trigger updates: one increases every value by 5, while the other filters out values below 35, causing the line to redraw dynamically. React hooks (`useRef`, `useEffect`, `useState`) manage the SVG element and data state, while D3’s `select` and `path` joins handle the visual update. The viewport is set to 940 by 450 pixels, with a yellow fill and blue stroke.

Ggjonor

77% match

Loading thumbnail…

d3NoobV5 Reusable Examples ## - Line Types Chart

This example shows a time-series chart comparing eight different line interpolation methods from D3.js, including `d3.curveLinear`, `d3.curveStep`, `d3.curveBasis`, and `d3.curveMonotoneX`. Each curve is drawn as a separate SVG path using the same stock price dataset, with a legend labeling each curve type. Users can click a legend item to toggle the visibility of its corresponding line via opacity transitions. The chart uses `d3.scaleTime` and `d3.scaleLinear` for axes, `d3.line`, and `d3.csv` to load the data.

JJimMaltby

77% match