Skip to main content
SimilarExport ZIP
100%

v6 curve interpolation comparison

✓ Published0🌍 Public
Dd3noob
Last edited Sep 12, 2020
Created on Sep 12, 2020

This example compares eight D3 v6 curve interpolation methods—including `curveLinear`, `curveStep`, `curveBasis`, and `curveCatmullRom`—by rendering them as SVG lines over the same time-series dataset of stock closing prices. A scatterplot of the raw data points provides a visual reference for each curve’s fitting behavior. The color-coded legend labels are clickable, toggling line visibility via opacity transitions. The code builds the chart with `d3.line`, `d3.scaleTime`, `d3.scaleLinear`, and `d3.axisBottom`/`axisLeft`, reading the data from a CSV file.

AI-generated description

This bl.ock demonstrates the range of interpolation curves available in v6 of d3.js.

You can click on any of the legend labels to toggle visibility of the lines.

Details of the curve can be found on the D3 wiki.

This graph is part of the code samples for the update to the book D3 Tips and Tricks to version 6 of d3.js.

mit Licensed

Similar vizzes

Loading thumbnail…

v4 curve interpolation comparison

This example compares eight D3 v4 curve interpolation functions—including linear, step, basis, cardinal, monotone, and Catmull-Rom variants—by rendering each as a separate line over the same time-series dataset of stock closing prices. The SVG chart includes a clickable legend that toggles the visibility of each curve with a 100-millisecond transition, while the underlying data points remain visible as scatterplot circles. The code builds paths using `d3.line()`, scales time and value axes with `d3.scaleTime()` and `d3.scaleLinear()`, and loads data from a CSV file via `d3.csv()`.

Dd3noob
93% match
Loading thumbnail…

v7 curve interpolation comparison

The visualization compares eight D3 curve interpolation functions—linear, step, step-before, step-after, basis, cardinal, monotone-X, and Catmull-Rom—by plotting the same time-series dataset of stock closing prices with each curve as a separate colored line. Built with D3 v7, it uses `d3.line` with a `.curve()` method to generate the SVG paths and includes an interactive legend where clicking a label toggles the opacity of the corresponding line via `transition().duration(100)`. The data comes from the included CSV file, and the chart also renders the original data points as circles along with axes.

Dd3noob
92% match
Loading thumbnail…

v5 curve interpolation comparison

This visualization compares eight D3 v5 curve interpolation methods by rendering the same time-series dataset (Apple stock prices from April and May 2012) as distinct colored lines. Each curve—including curveLinear, curveStep, curveBasis, and curveCardinal—is drawn as an SVG path with a shared date-time x-axis and linear y-axis, plus an overlaid scatterplot of the original data points. Clicking a legend label toggles the corresponding line’s opacity with a 100-millisecond transition. The code uses d3.line(), d3.scaleTime(), d3.scaleOrdinal(), color legend, and d3.axisBottom/Left.

Dd3noob
91% 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
84% 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
84% 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
80% match
Loading thumbnail…

Fork of Fork of d3NoobV5 Reusable Examples - Line Types Chart

This example compares eight D3 line interpolation methods—curveLinear, curveStep, curveStepBefore, curveStepAfter, curveBasis, curveCardinal, curveMonotoneX, and curveCatmullRom—by rendering the same financial time series with each. Using d3.axisBottom and d3.axisLeft, it draws axes on an SVG while overlaying green and orange reference lines from the same dataset. The reusable chart pattern, based on Mike Bostock’s “Towards Reusable Charts” and the Pro D3 structure, animates the lines via D3 v5 transitions. Data comes from a CSV file with date and close prices.

JJimMaltby
80% match
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
73% match