Skip to main content
SimilarExport ZIP
100%

Fork of Parallel Coordinates

✓ Published1🌍 Public
HHugo-Dominguez
Last edited Jan 14, 2021
Created on Jan 14, 2021

A fork of the classic parallel coordinates example displays leaf shape measurements from a CSV dataset across multiple numeric axes, with each of the three leaf classes drawn as a colored line (blue, yellow, red) and a legend identifying the classes. Users can drag axis labels to reorder dimensions, triggering animated transitions of the polylines. The visualization is built with D3 v3 using `d3.svg.line` for the paths, `d3.svg.axis`, ordinal and linear scales, and `d3.behavior.drag` for interactive axis reordering. A legend, rendered manually with SVG circles and text, indicates the class colors.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Parallel Coordinates

This example shows a parallel coordinates plot of leaf measurements from a CSV dataset, with each row representing a specimen and each vertical axis a feature such as eccentricity, aspect ratio, and solidity. Lines are colored by leaf class, with a legend distinguishing three classes in blue, yellow, and red. The visualization uses D3 v4 with SVG and animation, building scales via `d3.scalePoint` and `d3.scale.linear`, rendering paths with `d3.line`, and supporting interactive dragging of axes through `d3.behavior.drag`. Brushing is applied to the background paths for context, while foreground paths highlight selected data.

HHugo-Dominguez
93% match
Loading thumbnail…

Parallel Coordinate Plot

A parallel coordinate plot displays 40 leaf specimens across 14 numeric traits, with each specimen drawn as a stroked path. Users can drag axis labels to reorder the dimensions, and the paths and axes animate smoothly during reordering. The visualization uses D3 v5 with SVG rendering, relying on `d3.scalePoint`, `d3.scaleLinear`, `d3.axisLeft`, and `d3.drag` to handle interactivity. Data comes from a CSV file that includes leaf shape and texture measurements.

HHugo-Dominguez
81% match
Loading thumbnail…

Fork of Iris Parallel Coordinate Plot

A parallel coordinate plot visualizes exam data from a CSV file, showing seven numeric and categorical attributes per student, with lines colored by pass/fail status. Users can drag any axis vertically to reposition it, which reorders the columns and dynamically redraws the polylines using d3.line. The axes use d3.scalePoint and d3.scaleLinear with d3.axisLeft, while drag behavior is implemented via d3.drag, and reordering transitions animate the updates over 300 milliseconds. The SVG rendering includes labeled axes, a title, and a color legend.

TTiado Kollender
80% match
Loading thumbnail…

Fork of Fork of Parallel Coordinate Plot

This parallel coordinate plot visualizes the Iris dataset, showing four measured features for three flower species. Each sample appears as a semi-transparent polyline linking its values across vertical axes, colored by species. Users can drag axis labels horizontally to reorder dimensions, which re-sorts the data columns and animates the polylines to reflect the new axis sequence using smooth transitions. The visualization is built with D3 v5, using `scalePoint` for axis positioning, `line` for creating the polylines, and custom drag handlers to manage interactive reordering.

Aalan489671
79% match
Loading thumbnail…

Fork of Fork of Parallel Coordinate Plot

This visualization uses a parallel coordinate plot to display the Iris Dataset, showing how three numeric attributes (RestingBP, Cholesterol, MaxHR) vary across different classes. Each polyline represents a single data point, colored by its categorical class using a custom color mapping. The code employs d3.csv to load the data, then uses d3.scalePoint, d3.scaleLinear, and d3.line to construct the axes and paths, with d3.axisLeft for tick marks. The SVG rendering includes a manually positioned legend and title, while d3.select and d3.append manage the DOM structure.

AAishwarya Manjunath
79% match
Loading thumbnail…

Fork of Iris parallel coordinate plot

This example presents a parallel coordinate plot of the classic Iris flower dataset, coloring each line by species (setosa, versicolor, virginica) to reveal multidimensional patterns. Users can drag the axis labels to reorder dimensions, prompting the bundled polylines to animate smoothly into new positions via `d3.drag()`. Hovering any line highlights its entire species group while dimming others through CSS opacity transitions. The visualization is built with D3 v4, using SVG elements and `d3.line()` to generate the paths from the CSV data.

Mmasangar
79% match
Loading thumbnail…

Fork of Parallel Coordinate Plot

This visualization displays the classic Iris dataset as a parallel coordinate plot, with each flower sample drawn as a polyline connecting its sepal and petal measurements across four vertical axes. The lines are colored by species (setosa, versicolor, virginica) using a predefined color scale, and a legend identifies each class. The code uses D3 v5 APIs including `scalePoint`, `scaleLinear`, `axisLeft`, and `line` to position axes and render the paths as SVG elements, with data loaded via `d3.csv` from a remote GitHub source.

Aa1153724
78% match
Loading thumbnail…

Fork of Iris Parallel Coordinate Plots

A parallel coordinate plot visualizes four measurements of Iris flowers, with each species distinguished by a unique color. Users can drag the vertical axes horizontally to reorder the dimensions, which dynamically redraws the connected polylines. The visualization uses D3.js v4 with `d3.scaleLinear`, `d3.scalePoint`, `d3.drag`, and `d3.axisLeft` to render SVG paths and axes, and the data comes from the classic Iris dataset.

Aalexntougias
78% match