HW2

100%

✓ Published0🌍 Public

Last edited Oct 19, 2022

Created on Oct 19, 2022

Forked from HW1

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.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

hw2

This interactive parallel coordinates plot uses the classic Iris dataset, displaying each flower as a polyline across four quantitative dimensions (sepal length/width and petal length/width with a fixed 0–8 scale). Each species is color-coded via a D3 ordinal scale. Users can drag axis labels to reorder dimensions, and brush any axis to filter foreground lines. Built with D3 v3, it uses SVG paths for rendering, with animation for smooth transitions during axis reordering.

Aaddword527

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

93% match

Loading thumbnail…

HW2 v2

This interactive parallel coordinate plot visualizes the Iris dataset, with each polyline representing a flower and color-coded by species. Users can drag the four axes (sepal length, sepal width, petal length, petal width) horizontally to reorder dimensions, with smooth transitions animating the paths and axes into their new positions. The visualization is built using React and D3 v5, leveraging `scalePoint`, `scaleLinear`, `axisLeft`, and `line` for rendering, while `drag` and `event` handle the interaction. A legend and side panel identify the three species, and the SVG output includes hover cursors and opacity styling for the polylines.

Nnathanowen06

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

93% match

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

93% match

Loading thumbnail…

HW2 v1

This interactive parallel coordinate plot visualizes the Iris dataset, showing each flower as a line connecting four attribute axes. The tool provides dropdown menus to reassign attributes to each axis, and hovering over a species in the color legend highlights the corresponding lines. Built with React and D3 v7, the SVG rendering uses `scaleLinear` for axes and `scaleOrdinal` for species colors, with state managed via React hooks for data filtering.

Nnathanowen06

93% match

Loading thumbnail…

HW2

This interactive parallel coordinate plot visualizes the Iris dataset, showing four flower measurements across vertical axes colored by species. Hovering a line highlights all lines of that species while dimming others, using D3 v4’s scaleOrdinal for colors and path generation via d3.line. Users can drag axis labels to reorder dimensions, with d3.drag updating axis positions and adjusting the x-scale point mapping. The SVG renders 149 data rows from iris.csv, excluding one duplicate, with axes built using d3.axisLeft.

Aanna960073@gmail.com

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

93% match