Skip to main content
SimilarExport ZIP
100%

Parallel Coordinates

✓ Published0🌍 Public
PPranay Matalia
Last edited Apr 26, 2022
Created on Apr 26, 2022
Forked from HTML Starter

This parallel coordinates chart visualizes the changing proportions of racial groups in the U.S. population across 1960, 2010, and 2060. Three vertical axes represent each year, with four polylines connecting the percentage values for White, Black, Hispanic, and Asian groups, colored via a d3.scaleOrdinal. The visualization uses React with d3.v6, rendering SVG paths with animation, and includes mouseover highlighting that dims all lines except the hovered group to facilitate comparison.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

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

Parallel Coordinates

This parallel coordinates chart compares countries across multiple demographic dimensions, including happiness, environmental concern, and membership in groups like religious or professional organizations. Grey background lines show all data for context, while blue foreground lines can be filtered by brushing along an axis, which hides unrelated countries. Built with d3.v3, it uses d3.svg.brush and d3.svg.axis to support interactive dimension dragging and brushing. Data comes from the local total4.csv file, with most values normalized to a 0–100 scale.

OOhayouKaminari
72% match
Loading thumbnail…

Parallel Coordinates

This parallel coordinates chart displays survey data on happiness and membership in various organizations (e.g., religious, labor unions, sports) across multiple countries. Gray background lines provide context, while blue foreground lines highlight each country’s profile. Built with D3 v3, it uses `d3.svg.line`, `d3.svg.axis`, and `d3.svg.brush` for interactive filtering. Users can drag axes to reorder dimensions or brush along an axis to highlight matching lines. SVG rendering with drag-and-drop animations updates the paths smoothly. Data is loaded from an external CSV file.

Wwinniepooh520
72% match
Loading thumbnail…

Parallel Coordinates

This parallel coordinates chart displays survey data on happiness and membership in various organizations (e.g., religious, labor unions, sports) across multiple countries. Gray background lines provide context, while blue foreground lines highlight each country’s profile. Built with D3 v3, it uses `d3.svg.line`, `d3.svg.axis`, and `d3.svg.brush` for interactive filtering. Users can drag axes to reorder dimensions or brush along an axis to highlight matching lines. SVG rendering with drag-and-drop animations updates the paths smoothly. Data is loaded from an external CSV file.

Wwinniepooh520
72% match
Loading thumbnail…

Parallel Coordinates

This parallel coordinates chart compares national happiness and social participation across countries in nine dimensions, including religion, political party, and environmental groups. It uses D3 v3 with SVG paths, ordinal and linear scales, and `d3.svg.axis` for labeled axes. Users can drag axes to reorder dimensions, and brush along any axis to filter foreground lines, which highlight matching countries from the CSV data while grey background lines show the full context. The code applies a transition for smooth reordering.

Sshihai832
72% match
Loading thumbnail…

Parallel Coordinates

This parallel coordinates chart visualizes survey data on happiness and organizational membership across countries, with each vertical axis representing a category like Environmental or Religious groups. The view uses grey background lines for all countries and blue foreground lines for focus, allowing users to compare multidimensional patterns. Built with D3 v3, the visualization supports interactive brushing on any axis to filter displayed countries, and users can drag dimension titles to reorder axes. Data loads from a CSV file, with axes scaled from 0 to 100 and animations smoothing drag transitions.

KKanwalNayan
72% match