Skip to main content
SimilarExport ZIP
100%

Fork of Parallel Coordinates with Brushing

✓ Published0🌍 Public
NNicola Pezzotti
Last edited Nov 21, 2025
Created on Nov 21, 2025

This interactive parallel coordinates visualization displays the Iris dataset across five dimensions, including sepal and petal measurements and species. Users can brush along individual axes to filter the displayed lines, with brushed intervals stored in state and updated through the brushY API. The visualization uses d3.scaleLinear, d3.scalePoint, and d3.scaleOrdinal for scaling, while d3.line generates the polylines. Data filtering and opacity transitions are memoized and animated with d3.transition, ensuring responsive updates when brush selections change.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Parallel Coordinates with Brushing

This interactive parallel coordinates visualization displays the Iris Dataset across five dimensions—sepal length, sepal width, petal length, petal width, and species—using D3.js. Users brush along any axis to filter lines, with transitions animating the fading of excluded data. The implementation uses d3.scaleLinear, d3.scalePoint, d3.brushY, and d3.line, with color encoding via d3.scaleOrdinal and a hue-shifted color scheme. The SVG renders data lines with screen blending, and state management supports responsive resizing through observed container dimensions.

SSabbachina
95% match
Loading thumbnail…

Fork of Parallel Coordinates with Brushing

This interactive parallel coordinates visualization displays the Iris dataset across five dimensions, including four quantitative measurements and species. Users can brush along any axis to filter the displayed lines, with filtered data updating via smooth fade transitions. The example uses D3 scales, axes, brushY, and line generators within a custom parallelCoordinates module, while the Iris dataset flows through a state-driven rendering loop with memoized filtering.

JJacky
94% match
Loading thumbnail…

Fork of Parallel Coordinates with Brushing

This interactive parallel coordinates plot visualizes the Iris dataset, encoding each flower's measurements across four quantitative axes and one categorical axis. Users can brush along any axis to filter the displayed lines, with multiple brush interactions compositing to refine the multidimensional selection. The visualization uses D3.js for scales, line generation, axes, and color mapping, while the `d3-rosetta` library handles declarative SVG construction and transition-based animations. Brushed intervals trigger live updates to the filtered data, and path opacity animates smoothly during transitions.

Bbaconmc@mail.gvsu.edu
94% match
Loading thumbnail…

Fork of Parallel Coordinates with Brushing

This interactive parallel coordinates visualization explores the Iris dataset across four quantitative measurements and species classification. Users brush along any axis to filter multidimensional data, with fading transitions on the D3.js line paths and a mix-blend-mode for overlapping strokes. The visualization uses d3.scalePoint, d3.scaleLinear, d3.brushY, and d3.axisBottom, with reactive resizing and state management for brushed intervals.

MMichael Halpern
93% match
Loading thumbnail…

Fork of Parallel Coordinates with Brushing

An interactive parallel coordinates plot visualizes the Iris dataset, with each line representing a flower sample across four quantitative measurements and its categorical species. Users can brush along any vertical axis to filter the displayed lines across all dimensions. The visualization implements responsive resizing and animated transitions between filter states. Built with React, it uses the D3.js library’s `scalePoint`, `scaleLinear`, `scaleOrdinal`, `line`, and `brushY` APIs, alongside CSS `mix-blend-mode` for line rendering.

TT E Simon
92% match
Loading thumbnail…

Fork of Parallel Coordinates with Brushing

This interactive parallel coordinates plot visualizes the Iris dataset, using color to encode species and enabling multidimensional filtering through Y-axis brushing. Built with D3.js, it employs `scaleLinear` and `scalePoint` for axes, `line` for path generation, and `brushY` for interactive interval selection. The visualization incorporates smooth transitions via `transition().duration(500)` and dynamically filters displayed lines based on user-selected ranges across multiple dimensions.

Ggragors123@gmail.com
92% match
Loading thumbnail…

Fork of Parallel Coordinates with Brushing

This interactive parallel coordinates visualization enables multidimensional filtering of the Iris Dataset through brushing on any axis. Users select ranges along each dimension to highlight matching data points, with smooth fade transitions animating the filtered lines. The visualization uses D3.js scales, line generators, and brush components, with state managed through React-like memoization for efficient recomputation. Colors distinguish the three iris species using an ordinal scale with shifted category hues.

Vvinovolly9@gmail.com
92% match
Loading thumbnail…

Fork of Fork of Fork of Parallel Coordinates with Brushing

This example demonstrates an interactive parallel coordinates plot of the Iris dataset, where each flower is represented as a polyline across four quantitative axes and one categorical species axis. Users can brush vertically along any axis to filter the dataset, with brushed intervals stored in component state and applied to recompute the displayed lines. The visualization animates filtered lines with opacity transitions using D3’s `transition` and `easeLinear`, while color encodes species via `scaleOrdinal` and `schemeCategory10`. Brushing and axes are rendered with `brushY` and `axisLeft`/`axisRight`, all managed through the d3-rosetta `one` helper.

Bbarberna@mail.gvsu.edu
92% match