Skip to main content
SimilarExport ZIP
100%

0616027_hw2

✓ Published1🌍 Public
Yyixinxu2020
Last edited Oct 18, 2020
Created on Oct 13, 2020
Forked from 0616027.html

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.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

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

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