v4 curve interpolation comparison

100%

v4 curve interpolation comparison

✓ Published0🌍 Public

Last edited May 5, 2017

Created on May 5, 2017

This example compares ten different curve interpolation methods from D3 v4, displaying them as colored lines over the same time-series data points from a CSV file. Clicking a legend label toggles the visibility of its corresponding line by adjusting opacity with a transition. The visualization uses `d3.line()` with specified curve functions like `d3.curveBundle`, `d3.curveNatural`, and `d3.curveMonotoneX`, rendered as SVG paths. The axes are drawn with `d3.axisBottom` and `d3.axisLeft`, and the legend uses an ordinal color scale from `d3-scale-chromatic`.

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.

forked from <a href='http://bl.ocks.org/tomshanley/'>Tom Shanley</a>'s block: <a href='http://bl.ocks.org/tomshanley/3bcf041284792acf27dfd77e8d807960'>v4 curve interpolation comparison</a>. Added Bundle and Natural as interpolation examples. Reverted to opacity of zero when deselected.

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

forked from <a href='http://bl.ocks.org/d3noob/'>d3noob</a>'s block: <a href='http://bl.ocks.org/d3noob/ced1b9b18bd8192d2c898884033b5529'>v4 curve interpolation comparison</a> to change the legend behaviour fade if line's faded, and added css pointer.

forked from <a href='http://bl.ocks.org/tomshanley/'>tomshanley</a>'s block: <a href='http://bl.ocks.org/tomshanley/3bcf041284792acf27dfd77e8d807960'>v4 curve interpolation comparison</a>

forked from <a href='http://bl.ocks.org/bill-kidwell/'>bill-kidwell</a>'s block: <a href='http://bl.ocks.org/bill-kidwell/9e550945410a684c5eecfd25f2e19793'>v4 curve interpolation comparison</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

v4 curve interpolation comparison

This example compares eight different d3 v4 curve interpolation methods (linear, step, basis, cardinal, monotone, and Catmull-Rom variants) on a shared time-series of stock closing prices. Each curve is drawn as an SVG path, and clicking a legend label toggles its opacity via `d3.select(...).transition().duration(100)`. The visualization uses `d3.line()` with a `.curve()` method to generate the paths, `d3.axisBottom` and `d3.axisLeft` for axes, and `d3.scaleOrdinal` with `d3.schemeCategory10` for colors. Data is loaded from a CSV file with `d3.csv`.

TThanaporn-sk

92% match

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

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

88% match

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

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

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

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

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

77% match