Fork of 2 TO Drag

100%

Fork of 2 TO Drag

✓ Published0🌍 Public

Ee94091071@gs.ncku.edu.tw

Last edited Sep 18, 2024

Created on Sep 17, 2024

Forked from 2

This interactive parallel coordinate plot displays the Iris dataset's four measurements as polylines connecting labeled axes. Users can drag axis labels to reorder variables, while hovering over color-coded legend entries highlights one of three Iris species using D3 transitions. The visualization is built with D3 v5, using scalePoint, scaleLinear, and drag behavior APIs to implement the reordering and highlighting interactions. SVG paths render the data lines, and the axis ordering updates dynamically during drag events.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Iris Parallel Coordinate Plot

This interactive parallel coordinate plot visualizes the Iris dataset, displaying four numeric measurements across parallel axes with each sample colored by species. Users can drag any axis label horizontally to reorder the dimensions, with smooth transitions animating the line paths and axes to their new positions. Built with D3 v5, the visualization uses `drag`, `scalePoint`, and `scaleLinear` for axis management, while SVG paths with `transition` handle the animated updates. The code loads data from a CSV file and includes a legend identifying the three Iris species.

Wwaterm80

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

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 Homework2

This interactive parallel coordinate plot visualizes the Iris dataset, with each polyline representing a flower sample colored by species (red, blue, green). Users can drag any of the four vertical axes to reorder them dynamically, with the lines and axis positions smoothly transitioning via D3 v5’s `drag` and `transition` APIs. The visualization uses `d3.scalePoint` and `d3.scaleLinear` for positioning, rendered as SVG paths with axis labels.

Hhuangweijie0310102@gmail.com

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

86% match

Loading thumbnail…

Fork of Iris Parallel Coordinate Plot

This example displays Fisher’s Iris dataset as an interactive parallel coordinate plot, showing four measurements per flower with colored lines by species. Users can drag any axis to reorder dimensions, which repositions the polylines with animated transitions via `d3.drag` and `transition`. Built with D3 v5, it uses `scalePoint` for axes, `scaleLinear` for each measure, and `line` generators for paths, rendering as SVG with axis labels and a legend.

TTiado Kollender

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

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

86% match