Skip to main content
SimilarExport ZIP
100%

parrelPlot

✓ Published0🌍 Public
ZZeroKurosakii
Last edited Oct 2, 2023
Created on Oct 2, 2023
Forked from HTML Starter

This interactive parallel coordinates plot visualizes relationships across multiple dimensions of a dataset, with four dropdown menus allowing the user to select which columns appear on each axis. Written in React with SVG rendering using D3 v7, it employs `d3.csv` to load data, `scaleLinear` for axis scaling, and `axisLeft`/`axisBottom` to draw the coordinate frames. The `menu` function dynamically generates select elements, and the `on change` handler triggers re-rendering of the plot when axis assignments change.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Parallel Coordinate Plot

This interactive parallel coordinate plot visualizes the Iris dataset, showing each flower's sepal and petal measurements across four vertical axes. A dropdown menu above each axis lets users swap which attribute is displayed, while a color-coded legend for species highlights subsets on hover, fading unrelated lines. The visualization uses D3 scales and line generators for the underlying chart, with React managing state for selected attributes and hover interactions. SVG renders the polylines, axes, and legend, with data loaded via `d3.csv`. A color legend uses ordinal scaling to map species categories to distinct colors.

Cchiara01050105@gmail.com
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 Coordinate Plots

An interactive parallel coordinate plot visualizes the Iris dataset, showing each flower as a polyline across four variable axes (sepal length/width and petal length/width) with lines colored by species class. The visualization uses D3 v7 scales and SVG paths to render the axes and lines, while React manages dropdown menus that allow reassigning each axis to a different attribute. Hovering the color legend filters the displayed lines to the selected species, using D3’s `scaleOrdinal` for colors. Data is loaded asynchronously via D3’s `csv` parser.

JJiaYu07
78% match
Loading thumbnail…

Fork of Parallel Coordinate Plot

This interactive parallel coordinate plot visualizes the Iris dataset, letting viewers explore relationships between sepal and petal measurements across three flower species. Using React state, each of the four axes features a dropdown menu that swaps its corresponding attribute, dynamically updating the scales and line data via custom helper functions. The SVG renderings use D3 scales like `scaleLinear` for each dimension and `scaleOrdinal` for species coloring, while a color legend filters lines on hover with opacity modifiers. The code also relies on D3’s `csv` loader and contributes `line` generators for path creation.

TTiado Kollender
78% 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
78% match
Loading thumbnail…

Fork of Parallel Coordinate Plot

This interactive parallel coordinate plot visualizes the Iris dataset, encoding four flower measurements (sepal length, sepal width, petal length, petal width) as vertical axes with each observation drawn as a colored polyline. Users can change which attribute maps to each axis via react-dropdown menus, and hover over the color legend to highlight all lines of a selected species. Built with D3 v7 for scaling and line generation, and React for state management, the SVG renders axes via custom tick components and supports data filtering through D3’s `scaleOrdinal` for categorical colors.

PPenguin-jpg
78% match
Loading thumbnail…

Parallel Coordinates Template in React

A parallel coordinates chart displays the Iris flower dataset across four quantitative dimensions—petal length, petal width, sepal length, and sepal width—with each species colored via a `d3.scaleOrdinal` and the `schemeDark2` palette. The React component builds per-dimension linear scales with `d3.scaleLinear` and a common point scale for axis positioning, then renders natural curves through each row using the `d3.line` generator with `curveNatural` within an SVG. Data is loaded asynchronously from a CSV using `d3.csv` inside a custom `useData` hook.

Iiblub
77% match
Loading thumbnail…

Fork of Parallel Coordinate Plot

This interactive parallel coordinate plot visualizes the classic Iris dataset, showing measurements of sepal and petal length and width for three flower species. Each polyline traces one flower across four vertical axes, colored by species classification. Users can reassign any of the four displayed attributes via dropdown menus using React state, while hovering over the color legend filters lines by species. The visualization uses d3.csv for data loading, d3.scaleLinear and d3.scaleOrdinal for axes and colors, and d3.line to render the paths in SVG.

Nnanegole
77% match