v4 curve interpolation comparison

100%

v4 curve interpolation comparison

✓ Published0🌍 Public

Last edited Jul 10, 2016

Created on Jul 9, 2016

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()`.

AI-generated description

This bl.ock demonstrates the range of interpolation curves available in v4 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 4 of d3.js.

Similar vizzes

Loading thumbnail…

v6 curve interpolation comparison

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.

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

91% 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

90% 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

82% 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…

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

75% match