HW2_Parallel coordinate plot

100%

HW2_Parallel coordinate plot

✓ Published0🌍 Public

Last edited Oct 1, 2023

Created on Sep 27, 2023

This interactive parallel coordinate plot visualizes the Iris dataset, showing how sepal and petal measurements vary across three iris species. Users can reorder the four axes via dropdown menus, and hovering over any line highlights all lines of the corresponding species while fading others. The visualization uses React for UI state management and D3 v5 for scales, axes, and SVG path generation, with the data loaded as CSV and colored by species using a categorical scale.

AI-generated description

312554037_Data Visualization and Visual Analytics_HW2_Parallel Coordinate Plot

A Parallel Coordinate Plot of The Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

HW2_Parallel coordinate plot_test

This example shows an interactive parallel coordinate plot of the Iris dataset, with four axes for sepal length, sepal width, petal length, and petal width. Users can reassign which measurement appears on each axis using React dropdown menus through ReactDropdown. The plot renders polylines as SVG paths using d3.line, with each species colored via a d3.scaleOrdinal. Hovering over a line highlights all lines of the same species by transitioning their stroke and opacity with d3 transitions, while other lines fade to grey.

JJames Huang

94% 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…

HW2 : Parallel Coordinate Plots

This example visualizes the Iris dataset using a parallel coordinate plot, where each flower’s measurements are drawn as a colored line across four vertical axes representing sepal length, sepal width, petal length, and petal width. The lines are color-coded by species using a d3.scaleOrdinal with a custom purple-to-yellow palette. Two dropdown menus and a button let users swap the order of any two axes, rebuilding the chart via d3.line and d3.scalePoint. The visualization is rendered with SVG and uses d3.axisLeft for tick marks.

LLSAWB

93% match

Loading thumbnail…

HW2

This interactive parallel coordinates plot visualizes the Iris dataset, displaying four flower measurements (petal and sepal length/width) across three species. Built with React and D3.v4, it renders SVG paths with animated transitions that highlight a selected species while dimming others on hover. Color-coded legends map species to distinct hues, and the chart’s axes are adjustable via radio buttons, allowing users to reassign features to each dimension. The visualization uses `d3.scaleLinear` and `d3.scalePoint` for coordinate mapping and `d3.line()` to construct the polylines.

YYI-CHENG-SHIH645

92% match

Loading thumbnail…

HW2

This interactive parallel coordinate plot visualizes the Iris dataset, with four axes representing sepal length, sepal width, petal length, and petal width. Users can change the attribute mapped to each axis via dropdown menus using ReactDropdown. Hovering over color legend entries filters the displayed lines. The visualization uses D3.js scaleLinear and scaleOrdinal to map data values, with lines rendered as SVG paths via the d3.line generator.

Ping-Yu Yang

92% match

Loading thumbnail…

HW2 Iris Parallel Coordinate Plot

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.

JJuliachien

92% match

Loading thumbnail…

109550187_HW2

This interactive parallel coordinates plot displays the Iris dataset, showing each flower’s sepal length, sepal width, petal length, and petal width as colored polylines grouped by class. Using React state with dropdown menus, users can reorder the four axes. Hovering over the color legend highlights lines of a selected species while fading others. The visualization is rendered as SVG using D3 v7 scales for axes and line generation, with data loaded via `d3.csv`.

Ppatricknicholas27@gmail.com

92% match

Loading thumbnail…

Parallel Coordinate Plot

This interactive parallel coordinate plot visualizes the Iris dataset, displaying four numeric attributes (sepal length, sepal width, petal length, petal width) as vertical axes connected by colored polylines, with each line representing an individual flower and color encoding its species. Users can change which attribute appears on each axis via dropdown menus, and hovering over the color legend highlights all lines belonging to that species while fading others. The visualization uses React state to manage attribute selections and hover interactions, while D3’s `scaleLinear`, `scaleOrdinal`, and `line` APIs handle axis scaling, color mapping, and path generation, with data loaded via `d3.csv` and rendered as SVG.

Sstephanie0215

91% match