Linking to Data Table

100%

Linking to Data Table

✓ Published0🌍 Public

Last edited Feb 27, 2017

Created on Feb 27, 2017

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.

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

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

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

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

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

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

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

71% match

Loading thumbnail…

datatable

This example combines D3.js with the DataTables jQuery plugin to create an interactive data table and a linked bar-chart-style visualization of 500 generated rows. The page renders a scrollable, reorderable table with columns for ID, names, ZIP code, and country, while a horizontal row of thin rectangles above it represents each record. Hovering over a rectangle triggers a throttled mouseover event that scrolls the corresponding table row into view and highlights it, with a text element displaying the row index. The table uses the Scroller extension for virtual rendering and RowReorder for drag-and-drop sorting, while D3 manages the SVG rectangles and event handling.

AAlainRo

71% match