Skip to main content
SimilarExport ZIP
100%

0616027.html

✓ Published0🌍 Public
JJepyagg
Last edited Oct 18, 2020
Created on Oct 18, 2020
Forked from Hello VizHub

This example presents an interactive parallel coordinates plot of the Iris dataset, with each of the three flower species colored distinctly (setosa in purple, versicolor in green, virginica in yellow). The visualization uses D3 v3 with SVG rendering, allowing users to drag axes to reorder dimensions and brush along any axis to filter the displayed lines. The code builds the chart with `d3.svg.axis`, `d3.scale.linear`, and `d3.svg.brush`, while animated transitions via `d3.transition` support smooth axis reordering during drag interactions.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

0616027.html

This example presents an interactive parallel coordinates plot of the Iris dataset, with each flower species (setosa, versicolor, virginica) colored distinctly in purple, green, or yellow. Users can drag dimension axes to reorder them and use brush controls on each axis to filter the displayed lines. The visualization uses D3.js v3 with SVG rendering, built on a React framework. The code employs d3.svg.axis, d3.behavior.drag, and d3.svg.brush to enable these interactions, while the foreground paths are colored via an ordinal scale mapping species to the viridis color palette.

Ttim310579
95% match
Loading thumbnail…

0616027.html

This visualization presents the classic Iris dataset as an interactive parallel coordinates plot, with each of the 150 flowers represented as a colored polyline. The chart displays four numerical dimensions (sepal length/width, petal length/width) on vertical axes, while the three species are distinguished by color: setosa in purple, versicolor in teal, and virginica in yellow. Using D3 v3 with SVG, the code employs `d3.svg.axis()`, `d3.behavior.drag()`, and `d3.svg.brush()` to let users reorder axes by dragging and filter lines by brushing along any dimension. A legend below the chart identifies the species color mapping.

Cchungmin-yu
93% 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
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
90% match
Loading thumbnail…

00000000000

This example presents an interactive parallel coordinates plot of the Iris dataset, with each polyline colored by flower species (setosa, versicolor, or virginica) using an ordinal color scale. Users can drag dimension axes to reorder them and brush along any axis to filter highlighted lines. The visualization uses D3 v3 with SVG paths for both background and foreground lines, d3.svg.brush for filtering, and d3.behavior.drag for axis manipulation. Data loads from a remote CSV, with axes normalized to a 0–9 scale rather than their natural extents.

JJepyagg
90% match
Loading thumbnail…

916

This interactive parallel coordinate plot visualizes the classic Iris dataset, displaying four measured attributes for three flower species. Built with D3 v5, it renders each flower as a colored polyline across vertical axes, with colors distinguishing Iris setosa, versicolor, and virginica. Users can drag any y-axis label to reorder the axes, dynamically repositioning the corresponding coordinate lines. The implementation uses `d3.scaleLinear` and `d3.axisLeft` for axes, with `d3.drag()` handling the interactive reordering and `d3.transition()` animating the axis shifts.

Ssunnyshih0312@gmail.com
90% match
Loading thumbnail…

Iris parallel coordinate plot ref 3

This interactive parallel coordinate plot visualizes the Iris dataset, with each line representing a flower and colored by species (setosa, versicolor, virginica). Users can hover over lines to highlight a selected species while dimming others, and drag the axis titles to reorder dimensions. Built with D3 v4, it uses `d3.scaleLinear`, `d3.scalePoint`, `d3.axisLeft`, and `d3.drag` to handle axis repositioning, while `d3.line` generates the polylines. The SVG rendering includes static axis labels and color-coded legend swatches.

Eexchoco
90% match
Loading thumbnail…

Iris parallel coordinate plot

This interactive parallel coordinate plot visualizes the Iris dataset, encoding each flower's measurements across four dimensions as colored polylines. Users can drag any axis to reorder the dimensions, with the visualization smoothly animating the transition. Built using D3 v5 within a React framework, the code leverages `scalePoint`, `scaleLinear`, and `axisLeft` to construct the axes, while custom drag logic from `d3.drag` handles axis repositioning. The SVG rendering uses `line()` to generate paths and `transition()` for animated updates, with a legend mapping Iris species to distinct colors.

Aa15923647
89% match