Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Multidimensional Filtering with Overlaps

Public visualization

Viewing a saved revision (read-only)

39d69660bfd94836947f6b320d7cd805

Multidimensional Filtering with Overlaps

0 stars0🌍 Public
CCurran Kelleher
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.