Parallel Coordinates

100%

Parallel Coordinates

✓ Published0🌍 Public

Last edited Feb 25, 2017

Created on Feb 25, 2017

This parallel coordinates chart visualizes fuel economy and performance data for 1970s–80s cars, with each dimension (economy, cylinders, displacement, power, weight, acceleration, and year) represented as a vertical axis and each car as a polyline. Built with D3 v3 using SVG and animation, it extends the original example by making axes reorderable — users can drag axes to rearrange dimensions and click-drag along any axis to brush, filtering the dataset interactively. The brushing highlights selected ranges across linked dimensions, enabling rapid exploration of multivariate relationships.

AI-generated description

This is a version of Mike Bostock’s parallel coordinates example, modified to include reorderable axes.

This parallel coordinates visualization of cars from the ‘70s and ‘80s demonstrates one of D3 2.5.0’s new interactive features: the brush component. By clicking and dragging along any axis, you can specify a filter for that dimension. The brush component is also used in the updated scatterplot matrix example.

forked from <a href='http://bl.ocks.org/jasondavies/'>jasondavies</a>'s block: <a href='http://bl.ocks.org/jasondavies/1341281'>Parallel Coordinates</a>

forked from <a href='http://bl.ocks.org/15Dkatz/'>15Dkatz</a>'s block: <a href='http://bl.ocks.org/15Dkatz/600bcf009ae210cd7068443f729a6f5b'>Parallel Coordinates</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Parallel Coordinates

This parallel coordinates visualization displays automotive data from the 1970s and 1980s, with each car represented as a polyline crossing seven axes for metrics like economy, cylinders, power, and weight. Using D3 v3, the SVG-based chart renders gray background lines for all cars and steelblue foreground lines that filter interactively. A d3.svg.brush component on each axis allows users to drag and select ranges along a dimension, dynamically hiding lines that fall outside the brushed extent. The code loads car data from a CSV file and applies linear scales with d3.scale.linear for normalization.

Mmbostock

91% match

Loading thumbnail…

Parallel Coordinates

This parallel coordinates visualization displays automotive data from the 1970s and 1980s, with each car represented as a line across seven dimensions such as fuel economy, horsepower, and weight. Users can drag axes to reorder dimensions and brush along an axis to filter which cars remain visible. Built with D3 v3, it uses `d3.svg.brush` for interactive filtering, `d3.svg.axis` for scales, and `d3.behavior.drag` to reposition axes. The SVG renders both background and foreground paths, with foreground lines dynamically hidden based on brush extents.

深深度碎片

91% match

Loading thumbnail…

Parallel Coordinates

This parallel coordinates visualization displays data for cars from the 1970s and 1980s from a CSV file, mapping each car as a polyline across vertical axes representing dimensions such as economy, cylinders, displacement, power, weight, and acceleration. The visualization allows users to interactively reorder axes and brush along any dimension to filter the dataset. Built with D3 v3, it uses `d3.svg.line()`, `d3.svg.axis()`, and `d3.svg.brush()` for rendering and interaction, with SVG paths for the background and foreground lines.

115Dkatz

90% match

Loading thumbnail…

Parallel Coordinates

This interactive parallel coordinates visualization displays automotive data for cars from the 1970s and 1980s. Users can click and drag along any axis to brush and filter the dataset, or drag axis labels to reorder dimensions. Built with D3 v3, the SVG rendering uses `d3.svg.axis`, `d3.svg.line`, `d3.behavior.drag`, and `d3.svg.brush` to support filtering and dynamic reordering. The cars.csv dataset includes attributes like economy, cylinders, horsepower, and weight.

Mmbostock

89% match

Loading thumbnail…

Parallel Coordinates

This parallel coordinates chart from Mike Bostock’s classic block, forked and extended by Gerardo Furtado, visualizes automotive data from the 1970s and 1980s using D3 v3’s SVG renderer. Each car is drawn as a polyline crossing seven vertical axes for economy, cylinders, displacement, power, weight, and acceleration. The axes are reorderable by dragging, and brushing along any axis filters the dataset, highlighting the selected range while dimming the rest. The example includes a hover-based animation of data updates and was forked from Jason Davies’s version to demonstrate interactive brushing.

GGerardoFurtado

89% match

Loading thumbnail…

Parallel Coordinates

This parallel coordinates plot visualizes the relationships among multiple numeric attributes of classic cars, using the cars.csv dataset. Each car is drawn as a polyline across seven vertical axes representing attributes like fuel economy, cylinders, and power. The visualization uses d3.v3 with SVG rendering, and users can drag axes to reorder dimensions or brush over axis ranges to filter which car polylines remain highlighted. The background lines are rendered in gray with a foreground layer in steelblue.

MMohamedZaki

86% match

Loading thumbnail…

Untitled

This interactive parallel coordinates plot uses the D3.js v3 library to visualize a dataset of car characteristics, including fuel economy, engine displacement, power, weight, and acceleration. The SVG rendering shows each car as a polyline crossing multiple vertical axes, with steelblue foreground lines for focus and grey lines for background context. Users can drag the axis labels to reorder the dimensions and use the built-in brush component on each axis to filter the displayed cars dynamically, updating the foreground paths in real time.

Eeugene-gilmore

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

83% match