Reusable Line Chart v2

100%

Reusable Line Chart v2

✓ Published0🌍 Public

Last edited Oct 10, 2018

Created on Oct 10, 2018

This responsive multiline chart visualizes up to four time series, with a legend that toggles the visibility of each series on click. It is built as a reusable, modular chart function, following Mike Bostock's "Towards Reusable Charts" pattern, and supports customization of chart size, margins, colors, and axis labels through a bind method. The chart renders with SVG and animation, and includes an interactive tooltip and a legend. The responsive design ensures the chart resizes with the screen, and the tooltip displays values on hover. The example uses D3 v3 and is licensed under MIT.

AI-generated description

An implementation of a reusable responsive multiline chart. Based on the concept outlined in Mike Bostocks blog post Towards Reusable Charts.

Features:

Reusable modular design
Responsive design, chart size adjusts with screen size
Customizable options
- Chart Size
- Margins
- Div Selector
- Chart Colors
- Axis labels
Toggleable series (click on the legend to toggle series)

Previous version: Reusable Responsive Multiline Chart

forked from <a href='http://bl.ocks.org/asielen/'>asielen</a>'s block: <a href='http://bl.ocks.org/asielen/50a527004cb79facf219'>Reusable Line Chart v2</a>

forked from <a href='http://bl.ocks.org/DonRiddler/'>DonRiddler</a>'s block: <a href='http://bl.ocks.org/DonRiddler/f3bf131f7267566a8e79cb6f3ea9b484'>Reusable Line Chart v2</a>

forked from <a href='http://bl.ocks.org/DonRiddler/'>DonRiddler</a>'s block: <a href='http://bl.ocks.org/DonRiddler/75dc404c7ca7e9f4b63ab654cb3fbe3d'>Reusable Line Chart v2</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Reusable Line Chart VK

This chart displays four time-series variables from a CSV dataset, plotted over a shared x-axis of years where each line is color-coded and can be toggled on or off by clicking legend markers. Built with D3 v3, the SVG rendering is fully responsive, resizing with the browser window while custom margins, axis labels, and chart dimensions are configurable. The implementation uses D3’s `d3.scale.category10` for automatic color assignment, `d3.bisector` for data interpolation, and `d3.csv` for data ingestion. Animated tooltips highlight data points on hover, while the layout adapts via CSS media queries.

KKacieW

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…

Reusable Chart Example

This example demonstrates small multiples by rendering six separate time-series charts for stock price data from a TSV file, with each chart showing a different symbol (such as S&P 500 and MSFT) sharing a common x-axis extent. Built with D3 v4, the reusable chart component `timeSeriesChart()` uses SVG rendering, with `d3.scaleTime()`, `d3.scaleLinear()`, and `d3.axisBottom()` to create the axes. The code employs `d3.nest()` to group data by symbol and accessors like `values` and `title` to populate each mini chart with its own line, area fill, and title.

CCurran Kelleher

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

78% match

Loading thumbnail…

Towards Reusable Charts

This example demonstrates a reusable bar chart component built with D3.js (v3) following Mike Bostock's "Reusable Charts" philosophy. The chart renders income data for five countries from an embedded CSV file, using SVG for output. The code defines `d3.svg.myBarchart` as a modular function with configurable properties like margins, scales, and axis settings, allowing the same chart to be instantiated multiple times without global variable contamination. It implements ordinal and linear scales, along with D3's axis components and a custom grid-line generator, all drawn within a fixed 600×400 viewport.

11Cr18Ni9

77% match

Loading thumbnail…

D3 multi-series line chart with tooltips and legend

This interactive multi-series line chart displays four data columns over time, with a dropdown menu to switch between three value groups. Users hover over the lines to see tooltips with the series name, formatted value, and date, powered by the jQuery Tipsy plugin. The visualization uses D3.js v3 to render SVG elements, including axes and animated transitions when the selection changes, while a legend updates based on the current data subset. Data is loaded from a CSV file using `d3.csv`.

MMatthew-Weber

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

77% match

Loading thumbnail…

Multi Line Chart

A multi-line chart displays up to ten time series from CSV data, with each series rendered as a separate SVG path and color-coded via CSS classes. Built with React and D3 v5, the visualization uses `d3.csv`, `d3.timeParse`, `d3.scaleTime`, and `d3.line` to map dates to x-coordinates and measurements to y-coordinates. Axis ticks are formatted with `d3.timeFormat` and labeled with the y-axis title "Frequency." Series labels appear at the right end of each line, and the chart is fully responsive via a `viewBox` attribute.

Aamiralitah

77% match