Skip to main content
SimilarExport ZIP
100%

Untitled

✓ Published0🌍 Public
Nnikki81140
Last edited Oct 17, 2022
Created on Oct 17, 2022
Forked from HTML Starter

This interactive parallel coordinates plot, built with React and D3 v4, visualizes the Iris dataset across four user-selectable dimensions (sepal and petal length/width). Each of the 150 flower specimens is drawn as an SVG path, colored red, green, or blue by species (setosa, versicolor, virginica). Four dropdown menus and a "Go!" button allow reordering or replacing the axes, triggering a recomputation of the line geometry through `d3.line()` and `d3.scalePoint()` on the raw CSV data.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

This interactive parallel plot visualizes the Iris dataset, displaying four flower measurements across parallel vertical axes. Each line represents a sample, colored by species (setosa, versicolor, virginica) using a d3.scaleOrdinal with a viridis palette. Hovering a line triggers a d3 transition that dims all other lines to light grey and reduces their opacity to 0.2 while highlighting the selected species in full color. The visualization uses d3.scaleLinear for each dimension, d3.scalePoint for axis positioning, and d3.axisLeft for tick rendering, with SVG paths created via d3.line.

114Hazel
90% match
Loading thumbnail…

309708015.html

This interactive parallel coordinates plot visualizes the Iris flower dataset, displaying four numeric attributes (sepal length, sepal width, petal length, and petal width) as polylines colored by species—setosa, versicolor, and virginica—using a categorical color scale. Users can drag axes to reorder dimensions and use brush interactions on each axis to filter the displayed lines. Built with D3 v3, the SVG rendering uses d3.svg.line, d3.svg.axis, d3.svg.brush, and d3.behavior.drag for manipulation. The data is loaded as CSV from a GitHub repository, with axis labels and a color legend included.

SSUNDARRAJAN MUGUNTHAN
89% match
Loading thumbnail…

Untitled

This interactive scatterplot displays the Iris dataset, with each point colored by species (setosa, versicolor, or virginica) and sized by petal length. The visualization cycles through four feature pairs on the x-axis every few seconds, while the y-axis remains fixed on sepal length. Built with React and D3 v4, it uses `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom` to render axes and SVG circles, with a legend and axis labels added dynamically.

GGogineni44
89% 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
89% match
Loading thumbnail…

Fork of Parallel Coordinate Plot

This interactive parallel coordinate plot visualizes the Iris dataset, letting viewers explore relationships between sepal and petal measurements across three flower species. Using React state, each of the four axes features a dropdown menu that swaps its corresponding attribute, dynamically updating the scales and line data via custom helper functions. The SVG renderings use D3 scales like `scaleLinear` for each dimension and `scaleOrdinal` for species coloring, while a color legend filters lines on hover with opacity modifiers. The code also relies on D3’s `csv` loader and contributes `line` generators for path creation.

TTiado Kollender
89% match
Loading thumbnail…

Fork of Parallel Coordinate Plot

This interactive parallel coordinate plot visualizes the Iris dataset, encoding four flower measurements (sepal length, sepal width, petal length, petal width) as vertical axes with each observation drawn as a colored polyline. Users can change which attribute maps to each axis via react-dropdown menus, and hover over the color legend to highlight all lines of a selected species. Built with D3 v7 for scaling and line generation, and React for state management, the SVG renders axes via custom tick components and supports data filtering through D3’s `scaleOrdinal` for categorical colors.

PPenguin-jpg
89% match
Loading thumbnail…

Untitled

This interactive scatter plot displays the Iris flower dataset, allowing users to explore relationships between sepal and petal measurements. Two dropdown menus let viewers select which attribute appears on the x- and y-axes, updating the plot and axis labels accordingly. Data points are colored by species using a categorical scale. The visualization is built with React and D3 v5, using `d3.csv` to load data, `d3.scaleLinear` for axes, and SVG circles for marks. Axes and tick marks are drawn with custom React components.

HHsu0208
89% match
Loading thumbnail…

Iris Parallel Coordinates

This interactive parallel coordinates chart explores the classic Iris dataset, plotting four measured features—sepal length, sepal width, petal length, and petal width—as linked polygonal lines. Each line represents one flower, colored by its species (setosa, versicolor, or virginica) using semi-transparent circles, with legend entries shown at right. The visualization allows dynamic reordering of the four vertical axes via dropdown menus, recomputing the D3 linear scales and redrawing the SVG axes and paths accordingly. It uses D3 v5 functions such as `scaleLinear`, `scalePoint`, `axisLeft`, and `selection.merge`, with React managing the dropdown state.

MMing Chang
89% match