Fork of Parallel Plot

100%

Fork of Parallel Plot

✓ Published0🌍 Public

Last edited Oct 13, 2023

Created on Oct 13, 2023

This interactive parallel coordinates plot visualizes the Iris dataset, with each of the 150 flowers represented as a colored polyline tracing sepal and petal measurements across four vertical axes. Species are distinguished by color—setosa in green, versicolor in red, and virginica in blue—using `d3.line`, `d3.scaleLinear`, and `d3.scalePoint`. Below the SVG, draggable attribute labels let users reorder the dimensions via mouse events, triggering a redraw that repositions the axes and recomputes all paths.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

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

95% 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

94% match

Loading thumbnail…

Fork of Iris Parallel Coordinates

This interactive parallel coordinates plot visualizes the classic Iris flower dataset, with each of the 150 specimens represented as a polyline across axes for sepal and petal dimensions. Lines are color-coded by species using a d3.scale.ordinal, and the plot includes a legend for the three classes. Users can drag axis labels to reorder dimensions, triggering d3.behavior.drag interactions that dynamically update the SVG paths via d3.svg.line. The visualization uses D3 v3 to render the chart as SVG elements, with data loaded from an external CSV file.

Ttiffycshsf

93% match

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

93% 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

93% 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

93% match

Loading thumbnail…

Fork of Iris parallel coordinate plot

This parallel coordinate plot visualizes the classic Iris dataset, with each flower sample drawn as a colored polyline across four axes: petal length, petal width, sepal length, and sepal width. The lines are colored by species (red, green, blue), and hovering over a line highlights all samples of that species while dimming the rest. The axes can be dragged horizontally to reorder dimensions; when dragged past another axis, the two axes swap positions with an animated transition. The visualization uses d3.v4 with d3.line for paths, d3.axisLeft for scales, and d3.drag for interactive axis reordering, rendered as SVG.

SSumeyya-Eser

93% match

Loading thumbnail…

Fork of Parallel Coordinate Plot

This fork of a parallel coordinate plot visualizes the classic Iris Dataset, showing the relationships between sepal length, sepal width, petal length, and petal width for three flower species. Each row is drawn as a semi-transparent polyline, with colors distinguishing Iris setosa, versicolor, and virginica. The code uses d3.csv to load data, then applies d3.scalePoint, d3.scaleLinear, d3.axisLeft, and d3.line to construct the axes and paths. A static SVG canvas renders the chart, including a title, axis labels, and a legend showing class colors.

Jjas0821

93% match