109550187_HW2

100%

✓ Published1🌍 Public

Last edited Oct 2, 2023

Created on Oct 2, 2023

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`.

AI-generated description

A program that loads in some data using D3 utilities, and uses REACT state to keep track of the data.

MIT Licensed

Similar vizzes

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_Parallel coordinate plot

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.

JJames Huang

92% match

Loading thumbnail…

HW2_old

This example shows an interactive parallel coordinate plot of the Iris dataset, where users can reorder the four displayed axes (sepal length/width, petal length/width) via dropdown menus. Each of the 150 flowers is drawn as a semi-transparent polylined path, colored by species (setosa, versicolor, virginica). The visualization uses React and D3 v5, employing `scalePoint` for axis positioning, `scaleLinear` for value mapping, and `axisLeft` to render tick marks. A static legend distinguishes the three species, while SVG rendering handles all drawing.

Rravencyan

91% match

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

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…

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

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

91% match

Loading thumbnail…

HW2_example

This interactive parallel coordinate plot visualizes the Iris dataset, displaying 150 samples across four dimensions: sepal length, sepal width, petal length, and petal width. Each polyline represents a single flower, color-coded by species (setosa, versicolor, virginica) using a fixed color map. Users can drag the vertical axes to reorder dimensions, dynamically updating the line paths and axis positions with smooth transitions. Built with D3 v5 and React, the visualization uses `select`, `scalePoint`, `scaleLinear`, `line`, and `drag` APIs to render SVG paths and support the reordering interaction.

SSandyWu7179290504

90% match