Skip to main content
SimilarExport ZIP
100%

Colored Histogram

✓ Published2🌍 Public
CCurran Kelleher
Last edited Aug 14, 2024
Created on Aug 14, 2024
Forked from 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.

AI-generated description

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

See also:

MIT Licensed

Similar vizzes

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
90% match
Loading thumbnail…

Colored Histogram with Brushing

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.

CCurran Kelleher
85% match
Loading thumbnail…

US Unemployment Rate Histogram

This chart displays the distribution of unemployment rates across U.S. states in 2022 using a histogram with bars colored by rate via an inferno color scale. It employs the `d3.bin` and `scaleLinear`/`scaleQuantile` APIs to bin data and map colors, with `axisBottom`/`axisLeft` for axes. Each bar shows counts of states per bin, and hovering highlights a bar and reveals a tooltip. Data comes from the `@oabouhas/unemployment` package.

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

Map

This visualization presents a choropleth map of U.S. county-level unemployment rates, where each county is colored according to its rate using a quantile color scale from the Inferno palette. The map uses D3's `geoPath` and `geoAlbersUsaTerritories` projection to render county and state boundaries from TopoJSON data. A linked histogram at the bottom allows for interactive brushing to highlight counties within a selected unemployment rate interval. The example demonstrates the D3 General Update Pattern for dynamic styling and attribute updates.

BBashir Gulistani
78% match
Loading thumbnail…

Map

A choropleth map displays U.S. county unemployment rates for August 2016, colored with a quantile scale and the d3.interpolateInferno palette. A brushable histogram below the map visualizes the rate distribution; brushing it highlights matching counties on the map with d3.brushX. Pan and zoom interactions rely on d3.zoom and d3.geoPath with a geoAlbersUsaTerritories projection. The map renders via SVG using TopoJSON county boundaries from the us-atlas dataset.

BBashir Gulistani
78% 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
77% 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
77% match