Skip to main content
SimilarExport ZIP
100%

parallel coordinates

✓ Published0🌍 Public
GGoomble
Last edited Mar 1, 2017
Created on Mar 1, 2017

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.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

fresh block

This example presents a parallel coordinates chart showing the relationship between college tier and five numerical factors: the proportion of female students, married students, parental income, kid earnings, and mobility rate. The visualization uses grey background lines for all data categories and blue foreground lines for the currently focused tier. Users can brush along any axis to filter the displayed lines. The implementation relies on d3.v3, specifically using `d3.svg.brush` for interactive filtering, `d3.scale.ordinal().rangePoints` for the categorical axis, and `d3.svg.line()` to draw the polylines, with data loaded from the included `mrc_table.csv` file.

GGoomble
83% 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
80% match
Loading thumbnail…

Parallel Coordinates Final

This interactive parallel coordinates chart displays bank data clustered by financial indicators such as total deposits, credit, and assets, with each cluster distinguished by color. The visualization uses D3 v3 with SVG paths for the background and foreground lines, and ordinal color scaling for cluster grouping. Users can drag axes to reorder dimensions or brush along a single axis to filter which data lines remain visible. The implementation relies on `d3.svg.axis`, `d3.behavior.drag`, and `d3.svg.brush` to manage the interactions.

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

Parallel Coordinates

This visualization uses parallel coordinates to compare country-level indicators like happiness, environmental engagement, and religious participation, with each country represented by a drawn path. The code loads data from a CSV file using `d3.csv` and renders the chart with D3 v3’s SVG and animation support. Users can drag any axis to reorder dimensions, and the `d3.svg.brush` component enables filtering along individual axes, temporarily hiding background paths during interaction. The visualization also uses ordinal and linear scales to map categorical dimensions and quantitative values to screen coordinates.

Eerin1234567
77% match