Skip to main content
SimilarExport ZIP
100%

Fork of Iris Parallel Coordinate Plot

✓ Published0🌍 Public
Ccindy203cc
Last edited Oct 19, 2022
Created on Oct 19, 2022

This interactive parallel coordinate plot visualizes the classic Iris dataset, displaying four morphometric traits for three iris species. The SVG rendering uses semi-transparent, colored polylines to represent individual flowers, with the user able to reposition axes by dragging them. The code relies on D3's `d3.scalePoint`, `d3.scaleLinear`, `d3.axisLeft`, and `d3.line` to construct the plot, while a `select` element toggles between `union` and `self` Y-axis scaling. A drag interaction updates the axis positions and animates the transition using D3's `.transition()` method.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Iris parallel coordinate plot

This interactive parallel coordinate plot visualizes the classic Iris flower dataset, showing how four measurements (petal length, petal width, sepal length, sepal width) vary across three species. Users can drag any vertical axis to reorder the dimensions, with the polygonal lines re-rendering dynamically. Hovering a line highlights its species while dimming others. The visualization uses d3.csv for data loading, d3.scaleLinear and d3.scalePoint for axes, d3.drag for interaction, and color-coded SVG paths with d3.line.

Iianjwo
95% match
Loading thumbnail…

Fork of Iris Parallel Coordinate Plot

This interactive parallel coordinate plot visualizes the classic Iris dataset, with each of the 150 flowers represented as a polyline across four trait axes: sepal length, sepal width, petal length, and petal width. Lines are color-coded by species (setosa, versicolor, virginica) using a color scale defined in the code. The visualization uses D3 v5’s `d3.scalePoint` for categorical axes and `d3.scaleLinear` for each trait’s numeric range, rendered as SVG paths. Users can drag axis labels to reorder traits, and a dropdown toggles between a shared y-domain (union) or individual per-axis domains (self), triggering a re-render. The axes are drawn with `d3.axisLeft`, and drag behavior is implemented via `d3.drag`.

PPetronio Costa
94% match
Loading thumbnail…

Fork of Iris Parallel Coordinate Plot

This fork of the classic Iris parallel coordinate plot visualizes four morphological traits of iris flowers across three species, with each line color-coded by species. Users can drag the vertical axes to reorder dimensions and toggle between two y-axis scaling modes: a fixed union range shared across all traits, or a per-axis self range based on each attribute's extent. Built with D3 v5, the visualization uses SVG paths for polylines, d3-drag for interactive axis manipulation, and d3.scalePoint with d3.scaleLinear to map traits and measurements. Data comes from the iris.csv dataset.

MMeAzuree
94% match
Loading thumbnail…

Fork of Iris Parallel Coordinate Plots

This interactive parallel coordinate plot visualizes the classic Iris dataset, with each line representing a flower sample and colored by species. Users can drag the four vertical axes (sepal length, sepal width, petal length, petal width) to reorder dimensions, which triggers a redraw of all polylines and axes. Built with D3 v4, the example uses `d3.scaleLinear` for each axis, `d3.scalePoint` for axis positioning, and `d3.line` to generate the paths, while `d3.drag` enables the interactive axis reordering.

MMarcelo
94% match
Loading thumbnail…

Fork of Iris Parallel Coordinate Plot

This example displays the classic Iris dataset as an interactive parallel coordinate plot, with each flower’s measurements drawn as a semi-transparent colored path across four vertical axes. The colors correspond to the three Iris species, with a legend shown below. Users can drag any axis horizontally to reorder the dimensions, which triggers a smooth animated transition of the paths and axes. The implementation uses D3 v5 with `scalePoint` for axis positioning, `scaleLinear` for value mapping, `d3.drag` for interaction, and `transition.attr` for the reordering animation.

PPenguin-jpg
94% match
Loading thumbnail…

Fork of Fork of Fork of Iris Parallel Coordinate Plot

This visualization displays the classic Iris dataset using an interactive parallel coordinate plot, with each of the four traits (sepal length, sepal width, petal length, petal width) mapped to a vertical axis. Users can drag the axes to reorder them, and a dropdown menu toggles the y-axis scale between a fixed union range (0–8) and a per-axis self range based on observed data extents. The plot renders as SVG paths colored by species (setosa, versicolor, virginica) with opacity, and the code uses d3.scalePoint, d3.scaleLinear, d3.axisLeft, d3.drag, and d3.transition to handle layout, interaction, and animated updates.

RRikibens
94% match
Loading thumbnail…

Fork of Fork of Iris Parallel Coordinate Plot

This interactive parallel coordinate plot visualizes the classic Iris dataset, comparing sepal and petal measurements across three flower species. Users can toggle between unified and per-axis scaling via a dropdown menu, with colored lines representing Iris setosa, versicolor, and virginica. The visualization uses D3 v5 APIs including d3.scalePoint, d3.scaleLinear, d3.axisLeft, and d3.drag, enabling axis reordering through drag interactions with smooth transitions. SVG paths render each observation, while the semi-transparent stroke width highlights overlapping data patterns across the four quantitative dimensions.

RRikibens
94% match
Loading thumbnail…

Fork of Iris Parallel Coordinate Plot

This example shows an interactive parallel coordinate plot of the classic Iris dataset, with each flower sample drawn as a semi-transparent polyline across four vertical axes for sepal length, sepal width, petal length, and petal width. Lines are color-coded by species (setosa, versicolor, virginica) via a custom color function. Users can drag axis labels horizontally to reorder dimensions, with the path geometry and axis positions updating live during the drag using d3.drag and a scaling transition on release. The visualization is rendered as SVG with d3.scalePoint, d3.scaleLinear, and d3.axisLeft.

CCGTA2023
94% match