0816043_HW2

100%

✓ Published0🌍 Public

Last edited Oct 16, 2022

Created on Oct 16, 2022

Forked from Iris Parallel Coordinate Plot

This example uses D3 v5 to create an interactive parallel coordinate plot of the Iris dataset, visualizing four flower measurements (sepal length, sepal width, petal length, petal width) as polylines colored by species. Users can drag the vertical axes to reorder them, with a d3.drag handler updating the line paths and axis positions in real time. The code renders with SVG, animates transitions via transition.attr, and includes a legend for the three Iris species. The linear scale for the y-axis and point scale for the x-axis are defined using d3.scaleLinear and d3.scalePoint.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

hw2_1

This interactive parallel coordinates plot visualizes the Iris dataset, with each flower’s measurements (sepal and petal length/width) drawn as colored polylines across four vertical axes. Users can drag and drop axis labels in a fixed sidebar to reorder the dimensions, triggering a full redraw via `d3.scalePoint` and `d3.line`. Hovering highlights a species by fading other lines, using D3 transitions and ordinal color scales. Data loads from a remote CSV, and rendering uses SVG with D3 v6 axis generators.

Wwilliamkuo2000

92% match

Loading thumbnail…

HW2_move1

This example presents an interactive parallel coordinate plot for the Iris dataset, showing four measured attributes (sepal length, sepal width, petal length, petal width) across three flower species. Each polyline is colored by species using a scaleOrdinal mapping. Users can drag any vertical axis to reorder the dimensions; the lines and axes update live via d3.drag, while a smooth transition after release repositions everything to their new sorted order. The visualization uses D3 v5 with SVG rendering, scalePoint and scaleLinear for axes, and a legend highlighting species colors.

SSandyWu7179290504

91% match

Loading thumbnail…

hw2 v5

This interactive parallel coordinate plot visualizes the Iris dataset, displaying 150 flowers across four numeric attributes (sepal length, sepal width, petal length, petal width) with each of the three Iris species color-coded. Users can drag the vertical axes horizontally to reorder dimensions, with polylines smoothly transitioning to maintain their data positions. A legend on the right uses colored rectangles to identify species. The visualization uses D3 v5 APIs including `scalePoint`, `scaleLinear`, `axisLeft`, and the `drag` behavior, rendering with SVG and animated transitions via `transition.attr`.

Nnathanowen06

91% match

Loading thumbnail…

109705001_hw2

This interactive visualization displays the classic Iris dataset as a parallel coordinates plot, with four axes representing sepal and petal measurements and polylines colored by species. Users can drag any axis label horizontally to reorder the dimensions, which updates the paths and axis positions accordingly. Built with d3.v5, it uses `scalePoint`, `scaleLinear`, `axisLeft`, and the `drag` behavior to enable dynamic reordering, with smooth `transition` animations on drag end. The SVG rendering includes a legend for the three iris classes.

Yyihsuan

91% match

Loading thumbnail…

0616027_hw2

This interactive parallel coordinates plot visualizes the Iris dataset, with each polyline representing a flower sample and colored by species (setosa, versicolor, virginica). The chart shows four dimensions—sepal length, sepal width, petal length, and petal width—on vertical axes. Users can drag axes to reorder dimensions and brush along any axis to filter which lines remain visible. Built with D3 v3 in a React framework, it uses `d3.svg.axis`, `d3.svg.line`, `d3.behavior.drag`, and `d3.svg.brush` to enable these interactions, rendering polylines as SVG paths with animated transitions during axis dragging.

Yyixinxu2020

91% match

Loading thumbnail…

HW2-2

This interactive parallel coordinate plot visualizes the Iris dataset, displaying four measurements—sepal length, sepal width, petal length, and petal width—as connected polylines for 149 samples, colored by species (red, green, blue). Users can drag any axis horizontally to reorder dimensions, which updates the line paths accordingly. Built with D3 v4, it uses `d3.scaleOrdinal` for color mapping, `d3.scalePoint` for axis positioning, `d3.axisLeft` for rendering ticks, and `d3.drag` for interactive reordering, with hover highlighting that dims non-selected lines via `transition()` styling.

Aanna960073@gmail.com

91% match

Loading thumbnail…

0616027_hw2

This interactive parallel coordinates plot visualizes the Iris dataset, with each line representing a flower and colored by species (setosa, versicolor, or virginica) using a D3 ordinal color scale. The graphic displays four numerical dimensions—sepal and petal length and width—on vertical axes, and supports dragging axes to reorder them and brushing along axes to filter the highlighted foreground lines. Built with D3 v3, the SVG rendering includes background and foreground path layers, with axes and brushes appended to each dimension group. The legend uses colored circles to map species to the purple, green, and yellow palette.

Cchungmin-yu

90% match

Loading thumbnail…

DV_HW2

This interactive parallel coordinate plot visualizes the Iris dataset, with each of the 150 flowers represented as a polyline spanning four axes: sepal length, sepal width, petal length, and petal width. Lines are colored by class (setosa, versicolor, virginica) and rendered as semi-transparent SVG paths with a 0.35 opacity. Users can drag any axis horizontally to reorder the dimensions, using d3.drag and d3.line to update paths and axis positions dynamically. A legend identifies the three classes, and axis labels are added via d3.axisLeft.

SSandyWu7179290504

90% match