HW2_move1

100%

✓ Published0🌍 Public

Last edited Oct 19, 2022

Created on Oct 19, 2022

Forked from Iris Parallel Coordinate Plot

This interactive parallel coordinate plot visualizes the Iris dataset, showing four measured attributes for three flower species. Users can drag any vertical axis horizontally to reorder the dimensions, with all data lines smoothly animating to reflect the new arrangement. Built with D3 v5 in React, the visualization uses SVG paths with `d3.line` and `d3.scalePoint`, while drag interactions rely on the `d3.drag` behavior. The axes re-sort via `d3.scalePoint` domain updates, and transitions use D3’s `transition` method for animated re-rendering.

AI-generated description

React Starter code.

MIT Licensed

Similar vizzes

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

92% 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_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

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…

hw2

This interactive parallel coordinate plot visualizes the Iris dataset, displaying four measured features for three flower species. Users can drag any vertical axis horizontally to reorder the dimensions, and the polyline paths connecting each flower’s measurements update in real time. The visualization uses d3.scalePoint for axis positioning, d3.drag for interactivity, and d3.line for path generation, with data loaded from a remote CSV. Axes are labeled, and a color-coded legend distinguishes the three Iris species.

Yyujun12689

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

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

91% match

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

90% match