Skip to main content
SimilarExport ZIP
100%

Colored Histogram with Brushing

✓ Published0🌍 Public
CCurran Kelleher
Last edited Aug 14, 2024
Created on Aug 14, 2024
Forked from Colored Histogram

This example shows the distribution of unemployment rates across U.S. counties in August 2016, using a colored histogram with interactive brushing. The bars are colored with an inferno scale, and brushing a range highlights the selected bins while dimming the rest. The visualization uses `d3.bin` to create 40 bins, `d3.scaleLinear` for axes, and `d3.brushX` to capture user selections, which update a state-driven brushed interval. Data comes from the Bureau of Labor Statistics.

AI-generated description

An example of a histogram with brushing. Shows unemployment rate by U.S. county, August 2016. Data: Bureau of Labor Statistics.

See also:

MIT Licensed

Similar vizzes

Loading thumbnail…

Colored Histogram

This example visualizes the distribution of unemployment rates across U.S. counties in August 2016, using data from the Bureau of Labor Statistics. A histogram with 40 bins displays the frequency of rates, with each bar colored according to its value using `d3.scaleQuantile` and `interpolateInferno`. The visualization is rendered with D3, employing `d3.bin`, `d3.scaleLinear` for axes, and SVG rectangles. The dark gray background and color gradient make the skewed distribution of county-level unemployment rates immediately apparent.

CCurran Kelleher
85% match
Loading thumbnail…

Choropleth with Histogram Brushing

This interactive data visualization displays the unemployment rate by U.S. county for August 2016. A choropleth map uses a quantile color scale with four bins, rendered via `d3.geoPath` and the `geo-albers-usa-territories` projection. A linked histogram below the map, built with `d3.bin` and `d3.brushX`, allows users to brush a range of values, which highlights matching counties on the map while dimming others. The visualization also supports zooming through the `d3.zoom` utility, with map rendering optimized using memoization.

CCurran Kelleher
84% match
Loading thumbnail…

Fork of Choropleth with Histogram Brushing

This example visualizes August 2016 unemployment rates across U.S. counties, combining a choropleth map with a brushable histogram. Users can brush the histogram to filter the map, highlighting only counties whose rates fall within the selected interval while dimming others. The map uses `geoAlbersUsaTerritories` projection with `d3.geoPath`, and the color scale is a quantile scale with four custom colors. Brushing is implemented via `d3.brushX`, and the code leverages `d3-rosetta` for DOM manipulation and zooming, with data from the `@oabouhas/unemployment` package.

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

Fork of Choropleth with Histogram Brushing

This interactive visualization displays the August 2016 unemployment rate for U.S. counties on a choropleth map, using a quantile color scale with d3.scaleQuantile and the Inferno interpolator. A brushable histogram below the map, built with d3.bin and d3.brushX, allows filtering highlighted counties by rate, with non-selected areas grayed out via d3-rosetta utilities. The map supports zooming, uses topojson-client for county boundaries, and renders with d3.geoPath and the geo-albers-usa-territories projection.

GGuan
81% match
Loading thumbnail…

Fork of Choropleth with Histogram Brushing

This visualization shows the unemployment rate for U.S. counties in 2022 using a choropleth map paired with a brushable histogram. The map colors each county by quantile, while brushing a range on the histogram highlights matching counties and dims others. Built with vanilla JavaScript and D3, it uses `d3.geoPath` for map rendering from `us-atlas` TopoJSON data and `d3.scaleQuantile` for color mapping, with zooming via `d3-rosetta`.

Oomniaabouhassan@gmail.com
79% match
Loading thumbnail…

Histogram

This histogram displays the distribution of unemployment rates across U.S. counties as of August 2016, using data from the Bureau of Labor Statistics. It shows the frequency of counties falling into different rate intervals, with the tallest bars indicating the most common unemployment levels. The visualization uses D3’s `bin` and `scaleLinear` APIs to group the data into 40 bins and map those bins to screen coordinates. Each county’s rate is loaded from a CSV file and cast to a number before being passed to the histogram component, which renders SVG rectangles for each bin.

CCurran Kelleher
78% 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
78% match