Untitled

100%

✓ Published0🌍 Public

Last edited Jun 23, 2022

Created on Jun 20, 2022

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.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Untitled

This interactive parallel coordinate plot visualizes the Iris flower dataset, showing the relationships between numerical measurements (sepal width, sepal length, petal width, petal length) across three species. Each flower is represented as a polyline colored by species (setosa, versicolor, virginica) using an ordinal color scale, with a legend indicating the categories. Built with D3 v3, the visualization uses `d3.svg.axis` and `d3.svg.line` for rendering SVG, and supports axis dragging via `d3.behavior.drag` to reorder dimensions, while the background context lines fade during interaction. The data is loaded from an external CSV file.

Ppychen01

91% match

Loading thumbnail…

Untitled

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.

Nnikki81140

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

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

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

89% match

Loading thumbnail…

Iris Parallel Coordinate Plot

This interactive parallel coordinate plot displays the classic Iris dataset, with each flower’s sepal and petal measurements drawn as a polyline across four vertical axes. Lines are colored by species (setosa, versicolor, virginica) and rendered with SVG. Users can drag any axis to reorder the dimensions, with d3.drag handling the interaction and d3.transition animating the axes and paths into their new positions. The code uses d3.scalePoint, d3.scaleLinear, d3.axisLeft, and d3.line to construct the visualization.

Aannie520143

89% 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…

Iris Parallel Coordinate Plot

This interactive parallel coordinate plot visualizes the classic Iris dataset, showing four floral measurements for three species. Each semi-transparent polyline represents one sample, colored by species (orange for setosa, teal for versicolor, purple for virginica), with draggable axes that reorder via `d3.drag` and animated transitions. A dropdown toggles the y-axis scale between a fixed union range (0–8) and per-axis extents computed with `d3.extent`. The SVG renders axes via `d3.axisLeft` and lines via `d3.line`, with species colors mapped through a custom function.

Nnomiaro

89% match