HW2 Iris Parallel Coordinate Plot

100%

HW2 Iris Parallel Coordinate Plot

✓ Published0🌍 Public

Last edited Oct 17, 2022

Created on Oct 17, 2022

This interactive parallel coordinate plot uses the classic Iris dataset to visualize four measured features (sepal length, sepal width, petal length, petal width) across three flower species. Built with D3.js v3, it renders each sample as a polyline via `d3.line`, with colors assigned by species. Users can drag any vertical axis to reorder dimensions, and the y-axis domain switches between a union range and per-axis self-scaling using d3.scaleLinear. Hovering over any line highlights all lines of the same species through opacity transitions, while a dropdown menu toggles the axis range mode.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

HW2

This interactive parallel coordinate plot visualizes the Iris dataset, with each flower represented as a polyline connecting measurement values across four axes: sepal length, sepal width, petal length, and petal width. Lines are color-coded by species, and each axis includes its own scale and label. Using d3.drag, users can reposition the axes horizontally to reorder dimensions, which dynamically reshapes the polylines in response to the new axis placements. The visualization is rendered as SVG, with d3.scalePoint, d3.scaleLinear, and d3.line used to construct the plot.

Yyujun12689

94% match

Loading thumbnail…

HW2 Iris Parallel Coordinate Plot

This visualization uses a parallel coordinate plot to display the classic Iris flower dataset, with each of the four measurements (sepal length, sepal width, petal length, petal width) mapped to a vertical axis. Colored polylines connect each sample across the axes, with three distinct colors separating the Iris species (setosa, versicolor, virginica) as indicated by the legend. The code uses d3.scalePoint and d3.scaleLinear for positioning, d3.line to generate the paths, and d3.axisLeft for the numeric scales. Data is loaded via d3.csv from a GitHub-hosted file, and the SVG render includes semi-transparent strokes to reveal overlapping patterns.

JJoshuoYang

93% match

Loading thumbnail…

Iris Parallel Coordinate Plot

This interactive parallel coordinate plot visualizes the classic Iris dataset, showing four measured features (sepal and petal length/width) across three flower species. Each polyline represents one flower, with colors mapped to species via d3.scaleOrdinal and schemeCategory10. Users can drag the vertical axes to reorder dimensions, triggering smooth transitions with d3.transition(). The visualization uses d3.scalePoint for categorical axis positioning, d3.scaleLinear for value mapping, and axisLeft/axisBottom to render tick marks with SVG.

WWei-Che Chang

93% match

Loading thumbnail…

HW2 : Parallel Coordinate Plots

This visualization displays the classic Iris dataset using a parallel coordinate plot, with each of the four flower measurements (sepal length, sepal width, petal length, petal width) mapped to a vertical axis. Users can exchange the positions of any two axes via dropdown menus and a confirmation button, which triggers a redraw. The plot uses `d3.scaleLinear` for each dimension, `d3.scalePoint` for axis placement, and `d3.line()` to generate the colored polylines, with a legend identifying the three Iris species.

LLSAWB

93% match

Loading thumbnail…

Iris parallel coordinate plot

This interactive parallel coordinate plot visualizes the classic Iris dataset, showing how four flower measurements (petal length, petal width, sepal length, sepal width) vary across three species, each colored red, green, or blue. Users can click and drag any axis label to reorder dimensions, with overlapping axes swapping positions automatically. Built with D3 v4, the SVG rendering uses `d3.scaleLinear` for axes, `d3.drag` for interactivity, and hover highlighting via `d3.transition` to dim non-selected lines, emphasizing the species under the cursor.

方方顗棠

93% match

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

93% match

Loading thumbnail…

Iris Parallel Coordinate Plot

This interactive parallel coordinate plot visualizes the classic Iris dataset, showing how sepal length, sepal width, petal length, and petal width vary across the three Iris species. Each semi-transparent polyline represents a single flower, with its color encoding species membership, making it easy to compare distributions and correlations between the four numeric dimensions. The visualization uses d3.scaleLinear for each axis and d3.line to construct the paths. Users can drag the axis labels left or right to reorder the dimensions, a feature implemented with d3.drag, which triggers smooth animated transitions via the `.transition()` method. The SVG is rendered with a clean, white background and a legend.

Gginnyching

93% match

Loading thumbnail…

Iris Parallel Coordinate Plot_hw2

This interactive parallel coordinate plot visualizes the Iris dataset, displaying four measured attributes (sepal length, sepal width, petal length, petal width) as parallel axes with colored polylines representing three Iris species. Users can click and drag axis labels to reorder the dimensions, with lines smoothly animating to their new positions. The visualization is built with d3.v5, using `scalePoint` and `scaleLinear` for positioning, `axisLeft` for tick marks, and the `drag` interaction module to handle axis movement. Data is loaded from a CSV file via `d3.csv`, and the SVG rendering includes a legend identifying each species by color.

JJuliachien

92% match