Skip to main content
SimilarExport ZIP
100%

Fork of Fork of d3NoobV5 Reusable Examples - Line Types Chart

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

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.

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

d3NoobV5 Reusable Examples - MultiLine Chart

A reusable multi-line chart renders two time-series lines from a CSV dataset, plotting date against closing and opening values. The visualization demonstrates a modular chart architecture using D3 v5's SVG rendering, with scales, axes, and gridlines constructed via `d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` within a pattern inspired by Mike Bostock's reusable charts. The chart draws two distinct lines from the same data columns, showing how additional series can be added to the reusable component.

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

d3NoobV5 Reusable Examples - MultiLine Chart with different axes

This example demonstrates a multi-line chart with two distinct y-axes, plotting both the close and open values from a CSV dataset over time. It uses D3 v5 to render SVG elements, with a time-scaled x-axis and separate linear scales for the left and right axes, each styled with different text colors. The chart follows a reusable module pattern inspired by Mike Bostock’s “Towards Reusable Charts” and the Pro D3 book, creating maintainable, modular visualizations. The code builds scales, axes, and lines programmatically, positioning the right axis and its corresponding line alongside the left one.

JJimMaltby
80% match