Skip to main content
SimilarExport ZIP
100%

Fork of d3NoobV5 Reusable Examples - Line Types Chart

✓ Published1🌍 Public
JJimMaltby
Last edited Jun 22, 2021
Created on Jun 21, 2021

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.

AI-generated description

Simple Area Chart:

A vanilla HTML implementation of a d3Noob's V5 examples.

Examples Malcolm Maclean's (d3noob) great book "D3 Tips and Tricks v5.x Interactive Data Visualization in a Web Browser" (https://leanpub.com/d3-t-and-t-v5).

It is derived from Mike Bostock's Towards Reusable Charts (https://bost.ocks.org/mike/chart/) as the source of the foundational principles. But uses the ProD3 pattern (Pro D3.js Use D3.js to Create Maintainable, Modular, and Testable Charts by Marcos Iglesias https://www.apress.com/gp/book/9781484252024) as the basis for the charts.

Addtional help from and aknowledgement to:

MIT Licensed

Similar vizzes

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
94% 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
93% 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
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
82% match
Loading thumbnail…

d3NoobV5 Reusable Examples - Dotted Line Chart

This example shows a dotted line chart of stock closing prices over time, using a reusable chart module pattern derived from d3noob’s D3 tips and the Pro D3 book. The SVG renderer uses `d3.scaleTime` and `d3.scaleLinear` for axes, and `d3.line` with a `stroke-dasharray` attribute to create the dotted effect. Data comes from a CSV file with date and close values.

JJimMaltby
82% match
Loading thumbnail…

d3NoobV5 Reusable Examples - Simple Line Chart

This example displays a simple line chart of stock closing prices over time, with a steelblue stroke on an SVG canvas. It implements a reusable chart module using D3 v5, following the ProD3 pattern for maintainable structure. The code defines scales with `d3.scaleTime` and `d3.scaleLinear`, renders axes via `d3.axisBottom` and `d3.axisLeft`, and draws the line with `d3.line`. Data is loaded from a CSV file containing date and close values, with axis labels and a title included.

JJimMaltby
81% match
Loading thumbnail…

d3NoobV5 Reusable Examples - MultiLine Chart with lines labelled

This example shows a multi-line chart that plots two time-series from a small CSV dataset, with each line labeled directly on the chart. Using the D3.js v5 library, it defines reusable chart components through a module pattern, building SVG output with scales for date and linear values. The code constructs axes, gridlines, and lines via `d3.axisBottom`, `d3.axisLeft`, `d3.scaleTime`, and `d3.scaleLinear`, while the data is accessed using extractor functions. The chart is based on Malcolm Maclean's "D3 Tips and Tricks" examples, adapted into a modular, testable structure following the ProD3 pattern.

JJimMaltby
81% match
Loading thumbnail…

d3NoobV5 Reusable Examples - Line Chart with Grid Lines

A reusable line chart renders financial closing prices from a CSV file, mapping dates on a time scale and values on a linear scale. The visualization includes labeled axes, a title, and light gray grid lines created with d3.axisBottom and d3.axisLeft using negative tick sizes. Built with d3.v5 and SVG, the code applies the ProD3 pattern for modular chart components, following Malcolm Maclean’s D3 Tips and Tricks and Mike Bostock’s reusable chart principles.

JJimMaltby
80% match