d3 | Parallel Coordinates

100%

d3 | Parallel Coordinates

✓ Published0🌍 Public

Last edited Feb 27, 2017

Created on Feb 27, 2017

This example shows a parallel coordinates plot of planetary data from NASA, displaying each planet’s day length, distance from the Sun, orbital period, mass, and diameter as linked polylines across vertical axes. Users can brush along any axis to filter the highlighted lines, and drag axes to reorder them. The visualization uses the d3.parcoords library, built on d3.v3, with SVG for axes and canvas layers for rendering shadow, foreground, and highlight strokes, plus animation during drag transitions.

AI-generated description

Displaying planetary data from nasa.gov to test Parallel Coordinates in d3 with the awesome parcoords library

forked from <a href='http://bl.ocks.org/eesur/'>eesur</a>'s block: <a href='http://bl.ocks.org/eesur/1a2514440351ec22f176'>d3 | Parallel Coordinates</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Linking to Data Table

A parallel coordinates chart displays planetary attributes—day length, distance from the Sun, orbital period, mass, and diameter—from NASA fact sheet data. The visualization uses the `d3.parcoords` library with SVG axes and canvas-rendered lines, colored by day length via a linear scale. Brushing filters the data, updating an accompanying data table built with `d3.divgrid`. Hovering over table rows highlights corresponding lines in the chart.

GGoomble

84% match

Loading thumbnail…

Linking to Data Table

A parallel coordinates chart displays planetary data from NASA, with each axis representing a dimension like orbital period or mass. Brushing and dragging axes are supported, alongside a linked data table showing the first ten rows. The visualization uses the `d3.parcoords` library for canvas rendering of lines, while a custom `d3.divgrid` component handles the table. Hovering over a table row highlights the corresponding line via the `parcoords.highlight` API, and brush events update the table's filtered data.

GGoomble

83% match

Loading thumbnail…

Linking to Data Table

This example links a parallel coordinates chart with a scrollable data table to explore planetary characteristics from NASA’s planetary fact sheet. It uses the d3.parcoords library for the interactive axes and brushing, while a custom d3.divgrid renders the table, with mouseover events highlighting corresponding rows in the parallel coordinates via the `highlight` method. The SVG axes and canvas-based rendering show dimensions like day length, distance from the Sun, and orbital period.

GGoomble

83% match

Loading thumbnail…

Linking to Data Table

A parallel coordinates chart displays multidimensional planetary data from NASA, rendered with the d3.parcoords library. It uses the Canvas API for drawing and SVG for axes. A linked data table, built with d3.divgrid, lists the first ten rows of the dataset. Hovering over a table row highlights the corresponding polyline in the chart, while brushing axes filters the table to show only the brushed data points, using d3's event system.

GGoomble

82% match

Loading thumbnail…

Linking to Data Table

This example links a parallel coordinates plot to a data table, displaying planetary data from NASA.gov. Built with the d3.parcoords library and D3.js, it renders the chart using SVG axes and canvas layers for the lines. The table, created with d3.divgrid, updates to show filtered data when users brush along any axis, with hover highlighting syncing between the two views.

GGoomble

82% match

Loading thumbnail…

Exoplanets Paralle Coordinates

This interactive parallel coordinates chart visualizes a dataset of exoplanet properties, including orbital period, mass, and discovery method, across multiple axes. Users can brush along any axis to filter the displayed polyline series, which are rendered as SVG axes and an overlaid semi-transparent Canvas layer for performance. The visualization uses D3.js for scales, axes, and brushing interactions, with a custom render-queue script to manage the Canvas drawing and achieve smooth filtering.

Mmuzzheng

81% match

Loading thumbnail…

Parallel Coordinates

This parallel coordinates plot uses gray background lines to show all countries and blue foreground lines for focus, with each axis representing a dimension from the total4.csv dataset (Happiness, Art/Educational, Environmental, and other membership categories). Users can drag axes to reorder dimensions via `d3.behavior.drag`, and brush along axes with `d3.svg.brush` to filter which lines remain visible. The code builds SVG paths with `d3.svg.line`, applies linear scales per dimension, and animates reordering using `transition`.

Cchungmin-yu

78% match

Loading thumbnail…

Parallel Coordinate Plot

This parallel coordinate plot displays sample data across four dimensions, A through D, with each row represented as a polyline connecting its values on parallel vertical axes. The code builds the chart using D3 v7, employing `d3.scalePoint` to position axes and `d3.axisLeft` for tick marks, while polylines are drawn with `d3.line` and SVG paths. The provided dataset, `users.csv`, is not actually loaded; instead, the visualization uses hardcoded sample arrays for demonstration purposes.

PPO-CHEN-LAI

78% match