Skip to main content
SimilarExport ZIP
100%

Parallel Coordinate Chart

✓ Published0🌍 Public
JJanchorizo
Last edited Jun 13, 2018
Created on Jun 13, 2018

This parallel coordinate chart visualizes player performance metrics across eight dimensions, including distance, sprinting time, and work-to-rest ratio, with each polyline representing an individual player. The D3 v4 code uses `d3.scalePoint` for horizontal axis placement, `d3.scaleLinear` for each vertical dimension, and `d3.brushY` to enable interactive filtering by dragging along any axis. Inactive lines render in light gray while selected regions highlight active paths in blue via CSS classes, with data displayed as static SVG elements.

AI-generated description

Built with blockbuilder.org

Parallel Coordinate Chart with D3.js v4.13.0

Just another visualization of multidimensional data.

I decided to try and do my own as the examples I found online where for older versions fo the library.

Hope you find it usefull

All code was done by myself and none copyed; however, I got great influence from these two examples :

mit Licensed

Similar vizzes

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
79% match
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
79% 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
Loading thumbnail…

Parallel Coordinates

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.

115Dkatz
77% match
Loading thumbnail…

Untitled

A parallel coordinates plot displays two data records across five categorical axes—Style, Intelligence, Focus, Magic, and Gender—with values scaled linearly from 1 to 10. Solid and dashed polylines represent each row, distinguishing the two series. Built with D3 v4, it uses `d3.scaleLinear` for y-axes, `d3.scalePoint` for x-axis positioning, and `d3.axisLeft` for rendering. SVG paths are generated via `d3.line`, with a custom legend annotating “Achieved Performance” and “Requirement.” Data loads from a CSV file containing two numeric rows.

JJoker-tr
77% 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
76% match
Loading thumbnail…

parallel coordinates

This parallel coordinates chart displays six dimensions of college data—including parental income, kid earnings, and mobility rate—across six tiers of institutions, with each tier color-coded via `d3.svg.line` strokes. The visualization uses `d3.scale.ordinal` for axis placement and `d3.scale.linear` for each dimension, rendering gray background paths for all records and colored foreground paths for focus. Users can brush along any axis using `d3.svg.brush`, which filters the foreground lines to highlight subsets. Data comes from the embedded `mrc_table.csv` file.

GGoomble
76% 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
75% match