Skip to main content
SimilarExport ZIP
100%

Multidimensional Filtering on US County Facts

✓ Published0🌍 Public
CCurran Kelleher
Last edited Aug 23, 2024
Created on Aug 21, 2024

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`.

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 Color By Overlaps PoC

Two linked histograms show unemployment and education rates for U.S. counties, with the choropleth map color encoding the number of metrics where a county falls within the brushed ranges. Brushing either histogram filters the map, while hovering highlights individual counties. The visualization uses d3-geoPath for map rendering, d3-brushX for histogram selection, d3-scaleQuantile for color mapping, and reads county data from BLS and USDA CSV files loaded into d3.js.

CCurran Kelleher
79% match
Loading thumbnail…

Choropleth with Multidimensional Filtering

A choropleth map of unemployment rates by U.S. county is linked to two interactive histograms, one for unemployment and one for educational attainment. Brushing a histogram filters the map to highlight counties within the selected range, while hovering over a county reveals its values in both histograms. The visualization uses D3’s `geoPath`, `scaleQuantile`, and `brushX` with data from the BLS and USDA.

CCurran Kelleher
78% match
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
76% match
Loading thumbnail…

Fork of Choropleth with Multidimensional Filtering

This interactive visualization links a choropleth map of U.S. county unemployment rates from the BLS with a brushed histogram of the same metric. Brushing the histogram filters the map, dimming counties outside the selected range while highlighting those within it. Users can hover over counties to see their exact values. The implementation uses d3.geoPath with a geoAlbersUsaTerritories projection, d3.scaleQuantile with an inferno color scale, and d3.brushX for the histogram’s interactive interval selection. Data comes from a JSON dataset of unemployment rates for August 2016.

Oomniaabouhassan@gmail.com
76% match
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
75% match
Loading thumbnail…

Fork of Choropleth with Histogram Brushing

This fork of the D3 Choropleth example visualizes U.S. county unemployment rates from August 2016, with a brushable histogram below the map that filters highlighted counties. Brushing the histogram dims counties outside the selected rate range using a quantile color scale interpolated with d3.interpolateInferno. The map uses d3.geoPath with geoAlbersUsaTerritories projection and topojson-client for county boundaries. The implementation leverages d3-rosetta’s memoization helpers and d3.brushX for interactive filtering, with zoom support via d3.zoom.

Oomniaabouhassan@gmail.com
74% match
Loading thumbnail…

CV: Scatter Plot with US County Facts

This interactive dashboard visualizes demographic and economic indicators across US counties as a scatter plot, with dropdowns to change the X, Y, and color encodings. Points appear with staggered transitions using D3 v7, and clicking a circle displays detailed county facts in a side panel. The dark-themed interface uses React for layout and state management, with a ResizeObserver to handle responsive dimensions and D3 scales, axes, and color interpolation to render the SVG.

CCurran Kelleher
74% match
Loading thumbnail…

Bivariate Choropleth with Histograms

This interactive visualization combines a bivariate choropleth map of U.S. counties with coordinated histograms to explore the relationship between unemployment rates and education levels. Using d3.geoPath with a TopoJSON atlas, the map colors each county by a 3x3 bivariate color scale, while brushing on either histogram filters the map and highlights counties in the selected range. Hovering over a county reveals its name in a label and marks its position in both histograms with vertical indicator lines. The visualization uses d3.brushX, d3.scaleQuantile, and smooth transitions to animate state changes between the coordinated views.

CCurran Kelleher
74% match