Fork of Fork of Parallel Coordinates

100%

Fork of Fork of Parallel Coordinates

✓ Published0🌍 Public

Last edited Jan 14, 2021

Created on Jan 14, 2021

Forked from Fork of Parallel Coordinates

This example shows a parallel coordinates plot of leaf measurements from a CSV dataset, with each row representing a specimen and each vertical axis a feature such as eccentricity, aspect ratio, and solidity. Lines are colored by leaf class, with a legend distinguishing three classes in blue, yellow, and red. The visualization uses D3 v4 with SVG and animation, building scales via `d3.scalePoint` and `d3.scale.linear`, rendering paths with `d3.line`, and supporting interactive dragging of axes through `d3.behavior.drag`. Brushing is applied to the background paths for context, while foreground paths highlight selected data.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Parallel Coordinates

A fork of the classic parallel coordinates example displays leaf shape measurements from a CSV dataset across multiple numeric axes, with each of the three leaf classes drawn as a colored line (blue, yellow, red) and a legend identifying the classes. Users can drag axis labels to reorder dimensions, triggering animated transitions of the polylines. The visualization is built with D3 v3 using `d3.svg.line` for the paths, `d3.svg.axis`, ordinal and linear scales, and `d3.behavior.drag` for interactive axis reordering. A legend, rendered manually with SVG circles and text, indicates the class colors.

HHugo-Dominguez

93% match

Loading thumbnail…

Parallel Coordinate Plot

A parallel coordinate plot displays 40 leaf specimens across 14 numeric traits, with each specimen drawn as a stroked path. Users can drag axis labels to reorder the dimensions, and the paths and axes animate smoothly during reordering. The visualization uses D3 v5 with SVG rendering, relying on `d3.scalePoint`, `d3.scaleLinear`, `d3.axisLeft`, and `d3.drag` to handle interactivity. Data comes from a CSV file that includes leaf shape and texture measurements.

HHugo-Dominguez

86% match

Loading thumbnail…

Forked

This example uses a scatterplot matrix to compare four leaf trait measurements—Solidity, StochasticConvexity, AspectRatio, and Elongation—across different leaf classes. It constructs multiple small multiples, each visualizing the relationship between two traits from the provided `data.csv` dataset. The code loads the data with `d3.csv`, creates scales with `scaleLinear`, and appends axes using `axisBottom` and `axisLeft`. Circles represent individual specimens, and the SVG layout dynamically positions each cell based on its row and column.

HHugo-Dominguez

82% match

Loading thumbnail…

Fork of Fork of Parallel Coordinate Plot

This visualization uses a parallel coordinate plot to display the Iris Dataset, showing how three numeric attributes (RestingBP, Cholesterol, MaxHR) vary across different classes. Each polyline represents a single data point, colored by its categorical class using a custom color mapping. The code employs d3.csv to load the data, then uses d3.scalePoint, d3.scaleLinear, and d3.line to construct the axes and paths, with d3.axisLeft for tick marks. The SVG rendering includes a manually positioned legend and title, while d3.select and d3.append manage the DOM structure.

AAishwarya Manjunath

80% match

Loading thumbnail…

Fork of Fork of Parallel Coordinate Plot

The visualization uses a parallel coordinate plot to display Fisher’s Iris dataset, with each flower sample drawn as a semi-transparent polyline across four axes for sepal length, sepal width, petal length, and petal width. The lines are colored by species, with a legend distinguishing setosa, versicolor, and virginica. The code uses d3.scaleLinear, d3.scalePoint, and d3.line for rendering, with SVG paths and axes built via d3.axisLeft. Data is loaded as CSV and numeric values are converted using the unary plus operator.

Aalan489671

80% match

Loading thumbnail…

Fork of Fork of Parallel Coordinate Plot

This parallel coordinate plot visualizes the Iris dataset, showing four measured features for three flower species. Each sample appears as a semi-transparent polyline linking its values across vertical axes, colored by species. Users can drag axis labels horizontally to reorder dimensions, which re-sorts the data columns and animates the polylines to reflect the new axis sequence using smooth transitions. The visualization is built with D3 v5, using `scalePoint` for axis positioning, `line` for creating the polylines, and custom drag handlers to manage interactive reordering.

Aalan489671

80% match

Loading thumbnail…

Fork of Parallel Coordinate Plot

This visualization displays the classic Iris dataset as a parallel coordinate plot, with each flower sample drawn as a polyline connecting its sepal and petal measurements across four vertical axes. The lines are colored by species (setosa, versicolor, virginica) using a predefined color scale, and a legend identifies each class. The code uses D3 v5 APIs including `scalePoint`, `scaleLinear`, `axisLeft`, and `line` to position axes and render the paths as SVG elements, with data loaded via `d3.csv` from a remote GitHub source.

Aa1153724

80% match

Loading thumbnail…

Fork of Parallel Plot

This interactive parallel coordinates plot visualizes the Iris dataset, with each of the 150 flowers represented as a colored polyline tracing sepal and petal measurements across four vertical axes. Species are distinguished by color—setosa in green, versicolor in red, and virginica in blue—using `d3.line`, `d3.scaleLinear`, and `d3.scalePoint`. Below the SVG, draggable attribute labels let users reorder the dimensions via mouse events, triggering a redraw that repositions the axes and recomputes all paths.

RRachel Chen

80% match