Multidimensional Filtering with Overlaps

100%

Multidimensional Filtering with Overlaps

✓ Published0🌍 Public

Last edited Aug 28, 2024

Created on Aug 28, 2024

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.

AI-generated description

An example of multidimensional filtering (crossfiltering) using histograms and brushing, where the sets of data that match various numbers of filters are highlighted. The lightest color matches no filters, the darkest matches all filters. If you have two brushes, there is a mid-range color that shows the data that matches either of the two filters, and so on as you add more brushes. Shows the Iris dataset. Leverages d3-rosetta.

MIT Licensed

Similar vizzes

Loading thumbnail…

Multidimensional Filtering

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.

CCurran Kelleher

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

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

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

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

75% match

Loading thumbnail…

Multidimensional Filtering on US County Facts

This example demonstrates multidimensional filtering on US county demographic data using a series of interactive histograms. Each histogram represents a quantitative attribute such as racial composition, foreign-born population, or poverty rate. Brushing over any histogram filters the subset of counties highlighted across all others, revealing correlations between variables. The visualization implements this crossfiltering using `d3.bin`, `d3.brushX`, and `d3.scaleLinear`, with data loaded from CSV files via `d3.csv`. The `d3-rosetta` library manages state and resizing transitions, animating histogram bars with `transition.attrTween`.

CCurran Kelleher

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

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

74% match