Fork

100%

✓ Published0🌍 Public

Last edited Sep 18, 2024

Created on Sep 18, 2024

A parallel coordinates plot displays the Iris dataset, coloring each of the 150 flower samples by species to reveal patterns across sepal and petal measurements. Users can drag and reorder the four attribute axes, rendered as sortable HTML divs, to bring distant dimensions together for easier comparison. The visualization uses D3.js scales and axes to draw polylines, with the Sortable.js library managing axis reordering. The SVG re-renders with a new axis order whenever a drag operation completes, using color to differentiate the three Iris classes.

AI-generated description

Iris Dataset Parallel Coordinate Plot. Users are able to change the order of the axis because the attribute relations are difficult to observe if they are far away.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of hw222222

This interactive parallel coordinate plot visualizes the Iris dataset, showing how sepal and petal measurements vary across three iris species. The SVG displays each flower as a colored polyline spanning four vertical axes, with colors distinguishing species classes. Using D3 v7, the visualization implements drag-and-drop axis reordering, allowing users to rearrange dimensions interactively. The code employs d3.scaleLinear for value mapping, d3.scalePoint for axis positioning, d3.drag for user interaction, and d3.line for path generation, with data loaded from a local CSV file.

Eeyxxr1260@gmail.com

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

87% match

Loading thumbnail…

Fork of HW02

This example presents an interactive parallel coordinate plot of the classic Iris dataset, allowing users to reorder the dimensions by dragging the axis labels. The visualization renders each flower as a polyline connecting its measurements across the four numeric axes and the categorical species axis, with the three iris species distinguished by color. Built with D3 v7, the chart uses `d3.scaleLinear` and `d3.scaleBand` for axis scaling and `d3.line` to generate the paths. The reordering functionality relies on the Sortable.js library, which triggers a full re-render of the SVG when the drag operation ends.

CCinSiangNg

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

87% match

Loading thumbnail…

Fork of Fork of Iris Parallel Coordinate Plots

This interactive visualization displays the classic Iris flower dataset using parallel coordinate plots, with each of the 150 samples represented as a colored line connecting four vertical axes for sepal length, sepal width, petal length, and petal width. Users can reassign which measurement appears on each axis using dropdown menus, and the lines smoothly animate to their new positions via D3 transitions. The chart, built with D3 v5, uses `scaleLinear` and `axisLeft` to render the axes, with colors differentiating the three Iris species.

AAlextien

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

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

87% match

Loading thumbnail…

Fork of Iris Parallel Coordinate Plot

This interactive parallel coordinate plot visualizes the classic Iris dataset, with each flower’s measurements drawn as a colored line across four axes. Users can drag any axis horizontally to reorder the dimensions, which repositions the lines and remaining axes with a smooth transition. The visualization uses D3 v5 APIs such as `scalePoint`, `scaleLinear`, `axisLeft`, `drag`, and `transition`, rendering as SVG with mouse-driven interactions to explore species clustering.

Aa1153724

87% match