Skip to main content
100%

v7 curve interpolation comparison

✓ Published0🌍 Public
Aackuser
Last edited Jun 18, 2021
Created on Mar 6, 2023

This visualization compares eight d3.js v7 interpolation curves—including linear, step, basis, cardinal, monotoneX, and Catmull-Rom—by rendering the same time-series dataset (stock closing prices from April to May 2012) as overlapping SVG line paths. Each curve is drawn with a distinct color and labeled in a legend; clicking a label toggles the corresponding line’s opacity with a transition. The chart also includes scatterplot circles for the raw data points and uses d3.axisBottom and d3.axisLeft for the time and value scales.

AI-generated description

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

mit Licensed

Similar vizzes

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

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
89% match
Loading thumbnail…

linechart

This interactive line chart demonstrates how different curve interpolation methods affect the visual representation of a small dataset of six points. A dropdown menu lets users switch between eight D3 curve types, including basis, linear, natural, step, cardinal, monotone, and Catmull-Rom. The chart renders as an SVG with axes, labeled X and Y, and circular markers for each data point. When a new curve is selected, the line path smoothly transitions to the new shape using `d3.line` with the chosen `d3.curve` function, leveraging D3 v4’s transition system.

Aaaizemberg
84% match
Loading thumbnail…

v4 curve interpolation comparison

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

TThanaporn-sk
84% 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
82% match