Skip to main content
100%

v4 curve interpolation comparison

✓ Published0🌍 Public
TThanaporn-sk
Last edited Aug 17, 2017
Created on Aug 17, 2017

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

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.

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>

mit Licensed

Similar vizzes