Multidimensional Filtering

100%

Multidimensional Filtering

✓ Published3🌍 Public

Last edited Mar 13, 2026

Created on Aug 20, 2024

Forked from Histograms in Parallel Coordinates with Brushing

This example demonstrates multidimensional filtering, or crossfiltering, on the Iris dataset. Four histograms, one for each flower measurement, display the data distribution in a neutral tone, with a highlighted overlay showing the subset of data that passes all active brush filters. Users brush ranges on any histogram to filter the other charts dynamically. The visualization uses D3’s `bin`, `brushX`, and `scaleLinear` for rendering, while the `d3-rosetta` library manages state and transitions.

AI-generated description

An example of multidimensional filtering (crossfiltering) using histograms and brushing. Shows the Iris dataset. Leverages d3-rosetta.

MIT Licensed

Similar vizzes

Loading thumbnail…

Multidimensional Filtering with Overlaps

This example demonstrates multidimensional filtering (crossfiltering) on the Iris dataset using four histograms, one per measurement column. Brushing a histogram highlights data points matching the filter in that dimension, with color intensity indicating how many active brushes a data point satisfies—lightest for none, darkest for all. Overlapping brush combinations produce intermediate shades via a cubehelix color interpolator. The visualization uses D3’s `brushX`, `bin`, and `scaleLinear` APIs, plus the d3-rosetta `StateField` and `one` helpers for reactive state and DOM management. Histogram bars animate smoothly via transitions with staggered delays during layer updates.

CCurran Kelleher

92% match

Loading thumbnail…

Fork of React & D3 Starter

This example demonstrates multidimensional filtering (crossfiltering) of the Iris dataset using four synchronized histograms. Users brush along any histogram’s x-axis to filter the data, and the other histograms update their highlighted bins proportionally to the selection, revealing correlations between flower measurements. Built with React and d3.v7, the visualization renders SVG bars with animated transitions (70ms fast updates, 750ms enter/exit delays) and uses d3-rosetta utilities for streamlined join operations. Brushing relies on d3.brushX, and filtered data is recomputed via React’s useState and useMemo.

CCurran Kelleher

85% match

Loading thumbnail…

WIP Multidimensional Filtering in React

This example shows the Iris dataset rendered as four linked histograms, one for each numeric column. Brushing any histogram cross-filters the other charts, with highlighted bars showing data points that fall within all active brush selections. The visualization is built with React managing state and lifecycle via `useState` and `useEffect`, while D3 v7 handles SVG rendering, `brushX` interactions, and animated bar transitions. A `ResizeObserver` hook tracks container dimensions for responsive re-rendering.

CCurran Kelleher

83% match

Loading thumbnail…

Histograms in Parallel Coordinates with Brushing

This interactive parallel coordinates plot visualizes the Iris dataset, using brushing to filter multidimensional data across four quantitative axes and one categorical axis. Histograms display the distribution of filtered data along each axis, while lines fade and transition when brushes change. Built with D3 modules like `brushY`, `scaleLinear`, `scalePoint`, `scaleOrdinal`, and `line`, the visualization uses `transition` for smooth animations and supports responsive resizing via `observeResize`. The implementation separates concerns into modules for axes, brushes, histograms, and lines, using a memoization helper to optimize filtered data recomputation.

CCurran Kelleher

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

78% match

Loading thumbnail…

Parallel Coordinates with Brushing

This parallel coordinates plot visualizes the Iris dataset, enabling multidimensional filtering through brushing on each axis. The visualization uses D3 scales, line generators, and brushY interactions, with transitions that fade lines in and out as filters change. Color encoding distinguishes species via scaleOrdinal with a hue shift applied to the default scheme. The chart is responsive, adapting to container resizing through observeResize, and uses mix-blend-mode for overlapping line rendering.

CCurran Kelleher

78% match

Loading thumbnail…

Brushable Scatterplot

This interactive scatterplot matrix displays the Iris dataset, showing pairwise relationships between four floral measurements. Each off-diagonal cell contains a scatterplot of data points colored by species, while diagonal cells display histograms of individual feature distributions. Users can brush rectangular regions across any plot to highlight corresponding points in all other cells, enabling rapid comparison of multi-dimensional correlations. The visualization is built with D3 v4, using d3.brush for the linked selections, d3.scaleLinear for axes, and d3.axisBottom/Left for tick marks, rendered as SVG.

Cchingching17

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

77% match