Linking to Data Table

100%

Linking to Data Table

✓ Published0🌍 Public

Last edited Feb 27, 2017

Created on Feb 27, 2017

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.

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>

forked from <a href='http://bl.ocks.org/Goomble/'>Goomble</a>'s block: <a href='http://bl.ocks.org/Goomble/0aa75df9661abe29b3a8d20d621f5448'>d3 | Parallel Coordinates</a>

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

mit Licensed

Similar vizzes

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

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

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

94% match

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

93% match

Loading thumbnail…

d3 | Parallel Coordinates

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.

GGoomble

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

74% match

Loading thumbnail…

Parallel Coordinates

This parallel coordinates visualization displays multivariate data from a cars dataset recorded in CSV format, with each row represented as a path crossing multiple vertical axes. Users can drag axes to reorder dimensions and brush along them to filter highlighted foreground lines, while gray background lines provide context. Built with D3 v3, the example uses SVG rendering, ordinal and linear scales, `d3.svg.axis`, `d3.svg.line`, `d3.behavior.drag`, and `d3.svg.brush`. Axes reorder smoothly with transitions, and brushing toggles focus based on selected extents.

BBBischof

73% match

Loading thumbnail…

Parallel Coordinates

This parallel coordinates chart uses color-coded polylines to display country-level survey data across multiple dimensions, including happiness, art/education, environmental concern, and organizational memberships. Built with D3.js v3, the visualization renders SVG paths for both background context (gray) and foreground focus (steel blue) lines. The code implements interactive brushing via `d3.svg.brush()` to filter data, and uses `d3.behavior.drag()` to allow users to reorder axes by dragging. Axis labels are mapped through `d3.scale.ordinal()` and `d3.scale.linear()`, with data loaded from the `total4.csv` file.

KKanwalNayan

73% match