2003 BMW Z8

100%

✓ Published0🌍 Public

Last edited Oct 10, 2018

Created on Oct 10, 2018

This example shows a responsive multiline chart tracking the value of a 2003 BMW Z8 across four condition categories—Concours, Excellent, Good, and Fair—over time. Built with D3.js v3 and SVG, the chart demonstrates reusable chart architecture based on Mike Bostock's "Towards Reusable Charts" concept. The implementation supports interactive series toggling via legend clicks, customizable chart size, margins, colors, and axis labels, and uses a tooltip for detailed value inspection. The chart responds to screen size changes, adjusting its dimensions automatically, and renders smooth animated transitions when data or series are toggled.

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/ptvans/'>ptvans</a>'s block: <a href='http://bl.ocks.org/ptvans/f88602355ecd06bca068b42565416a00'>1988 Porsche 959 Sport</a>

forked from <a href='http://bl.ocks.org/ptvans/'>ptvans</a>'s block: <a href='http://bl.ocks.org/ptvans/8fc90a54688dd9bc7c1136a6e5d42e51'>1988 Porsche 959 Sport</a>

forked from <a href='http://bl.ocks.org/ptvans/'>ptvans</a>'s block: <a href='http://bl.ocks.org/ptvans/50df304dc0ae619f745d108efaaba310'>1994 Porsche 911 Carrera Turbo</a>

forked from <a href='http://bl.ocks.org/ptvans/'>ptvans</a>'s block: <a href='http://bl.ocks.org/ptvans/3f119284f821fc2b5d9e17ca7c1d6787'>2003 BMW Z8</a>

mit Licensed

Similar vizzes

Loading thumbnail…

1988 Porsche 959 Sport

This example visualizes the value of a 1988 Porsche 959 Sport over time, using a responsive multiline chart rendered with D3 v3 and SVG. Four condition-based series (Concours, Excellent, Good, Fair) are plotted from CSV data, with toggleable legend entries that let users show or hide individual lines. The chart features a tooltip, custom colors, and axis labels, and it adjusts its size to fit the screen. Built as a reusable module, it supports configurable margins, selectors, and colors, and was adapted from a previous block by asielen.

663anp3ca

76% match

Loading thumbnail…

3D Bar Chart

This 3D Bar Chart visualizes a BMW dataset, displaying multiple series of price and mileage values for different car models. Built with D3.js v5 and the d3-3d and d3-x3d libraries, it renders an interactive three-dimensional bar chart using X3DOM for WebGL-based output. The code loads CSV data via the `d3.csv` method, parses it into multi-series format, and passes it to a `d3.x3d.chart.barChartMultiSeries()` component. Users can rotate and explore the 3D scene to compare values across categorical and numeric dimensions.

AAmruthaVee

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

71% match

Loading thumbnail…

Reusable Line Chart v2

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.

663anp3ca

71% match

Loading thumbnail…

Untitled

This interactive parallel coordinates chart visualizes a dataset of cars and their specifications, such as fuel economy, horsepower, and weight. Each car is represented by a line connecting its attribute values across multiple vertical axes. Users can drag axes to reorder them and use brush controls on each axis to filter which vehicles remain highlighted, with the background context paths hidden while dragging. The visualization is built with D3.js v3, using SVG for rendering, `d3.svg.axis` for axes, and `d3.behavior.drag` and `d3.svg.brush` for interaction.

QqOp3

69% match

Loading thumbnail…

Untitled

This example displays an interactive 3D bar chart built with D3.js v2 and jQuery. It renders an SVG-based visualization where bars are grouped by categorical x-axis values, with drop shadows applied via SVG filters to create a 3D effect. The chart uses ordinal and linear scales to map data, and includes custom axis tick formatting for captions. The code initializes on document ready, transforming input data and building the chart within a scrollable container.

Sskambhore04

69% match

Loading thumbnail…

Working stuff out - zz

This example presents an interactive scatter plot of the auto-mpg dataset, where users can select which numeric column to display on the x- and y-axes via dropdown menus. The visualization uses React for UI components and d3.v5 for rendering SVG circles, axes, and grid lines. Data points are colored based on their x-axis position using a custom color scale, and circles pulse with a brief transition animation when the axis selection changes. The code leverages d3’s `scaleLinear`, `extent`, `axisBottom`, `axisLeft`, and `transition` APIs to update the chart smoothly.

Jjsong

69% match

Loading thumbnail…

d3-template: timeSeries

This example demonstrates a reusable time series chart built with D3.js v3, following the reusable chart pattern. The visualization renders an area chart with an overlaid line, using SVG, with data embedded directly in the page via a hidden `<pre>` tag or loaded from an external CSV file. The chart supports a configurable API (margin, width, height, x/y accessors) and combines approaches from Mike Bostock's reusable charts, Rob Moore's updatable charts, and the author's unified interface for external and embedded data. The time series shows monthly price data from January 2000 through August 2001, with the area filled in steel blue and a black line. The example highlights modular, reusable D3 code with a clean separation of concerns.

EEE2dev

68% match