Skip to main content
SimilarExport ZIP
100%

Brushable Scatterplot/Choropleth

✓ Published0🌍 Public
TThanaporn-sk
Last edited Mar 9, 2017
Created on Mar 9, 2017

A brushable scatterplot shows adult obesity rates versus median household income for U.S. states, with each state represented as a colored dot. The plot uses d3.brush to let users select a region, which filters the adjacent choropleth map to highlight only the selected states. The map, rendered with d3.geoPath and d3.geoAlbersUsa, colors states by their obesity rate using a d3.scaleThreshold. Data comes from the State of Obesity project and the 2014 ACS, with interactions updating both charts via shared callbacks.

AI-generated description

Block-a-Day #2. A brush interaction on a scatterplot filters a choropleth showing the Y axis variable.

Data Sources: State of Obesity and 2014 ACS.

What I Learned: This is kinda a quickie as I ran into an issue with the planned block, but I had never used D3-brush before.

What I'd Do With More Time: I'd probably add a mouseover to the map so the association between the charts is two-way.

Block-a-Day

Just what it sounds like. For fifteen days, I will make a D3.js v4 block every single day. Rules:

  1. Ideas over implementation. Do something novel, don't sweat the details.
  2. No more than two hours can be spent on coding (give or take).
  3. Every. Single. Day.

Previously

forked from <a href='http://bl.ocks.org/cmgiven/'>cmgiven</a>'s block: <a href='http://bl.ocks.org/cmgiven/abca90f6ba5f0a14c54d1eb952f8949c'>Brushable Scatterplot/Choropleth</a>

forked from <a href='http://bl.ocks.org/wqm9425/'>wqm9425</a>'s block: <a href='http://bl.ocks.org/wqm9425/5fd92b24e5e1c23b5bdf9ea5e5e2aa28'>Brushable Scatterplot/Choropleth</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Fork of Data visualizations

This scatterplot visualizes the correlation between poverty and obesity rates across U.S. states. Each state is represented by a circle labeled with its abbreviation, plotted along axes for poverty and obesity percentages. The chart uses D3.js to load CSV data, create scales, and render the SVG elements. A tooltip, built with the d3-tip library, appears on click, showing the state name, poverty, and obesity values. The accompanying text highlights observed clusters and trends in the data.

JJoshua chirchir
78% match
Loading thumbnail…

D3 DataBinding

The example maps U.S. adult obesity rates from CDC 2008 data by projecting state boundaries and scaling each state’s area according to its value. It uses D3 v5 with `d3.geo.path()` to render TopoJSON features, applying a centroid-based transform that proportionally enlarges states with higher obesity ratios while adjusting stroke width inversely. The visualization appears twice on the page, with the second instance likely reusing the same logic. Data is embedded as an array of per-state values, and the map relies on TopoJSON’s `topojson.feature` to extract geometries.

663anp3ca
78% match
Loading thumbnail…

Fork of D3Times

This visualization shows the correlation between poverty and obesity rates across U.S. states using a scatter plot from the D3Times dataset. A circle represents each state, with its horizontal position based on poverty percentage and vertical position based on obesity percentage; the axes are scaled to focus on the higher ranges common in the data. The chart reveals a general trend where states with higher poverty rates, such as Arkansas and West Virginia, also exhibit higher obesity rates, while states with lower poverty, like Colorado and Massachusetts, show lower obesity. Implemented with D3.js version 5.5, the code loads CSV data from a remote GitHub repository, uses `d3.scaleLinear` for axes, draws circles with appended state abbreviations, and incorporates d3-tip tooltips that display state details on click. The SVG rendering is constructed within a Bootstrap container, with axis labels and an accompanying article explaining the observed correlation.

JJoshua chirchir
77% match
Loading thumbnail…

Demers Cartogram

This visualization shows obesity rates across U.S. states as a pseudo-cartogram, encoding each state’s value as a square whose area is proportional to the obesity ratio. Rather than preserving adjacency between states, the layout uses a force simulation with `d3.forceSimulation`, applying `d3.forceX` and `d3.forceY` to pull each square toward its original Albers USA projection centroid while a custom collide force prevents overlap. The obesity data is drawn from CDC 2008 estimates and rendered as SVG rectangles, colored uniformly gray.

Mmbostock
76% match
Loading thumbnail…

Dorling Cartogram

A pseudo-cartogram maps obesity rates across U.S. states, using circles sized by value and positioned near their geographic origins. The visualization employs D3.js (v3) with an Albers USA projection and a `d3.layout.force` simulation to resolve overlaps while preserving locality. Circle radii are scaled via `d3.scale.sqrt` from CDC 2008 data, rendered as SVG shapes.

Mmbostock
76% match
Loading thumbnail…

Demers Cartogram

This visualization shows a pseudo-Demers cartogram of U.S. adult obesity rates, with each state represented by a square whose area encodes the prevalence of BMI ≥ 30. The squares are initially placed at their geographic centroids and then shifted via a d3.layout.force simulation with custom gravity and collision functions to avoid overlap while preserving approximate locality. The code uses d3.geo.albersUsa() for projection and d3.geom.quadtree for collision detection, rendering as SVG rectangles. Data comes from CDC 2008 values embedded as an array, with state centroids loaded from an external JSON file.

SSpaceActuary
75% match
Loading thumbnail…

Demers Cartogram

This interactive SVG cartogram visualizes U.S. adult obesity rates from CDC 2008 data, representing each state as a square whose size scales with the prevalence of BMI ≥ 30. The map preserves approximate geographic locality—squares stay near their original positions—rather than maintaining adjacency between states. A custom collision force iteratively pushes overlapping rectangles apart while d3.forceSimulation with d3.forceX and d3.forceY pulls each square toward its projected Albers USA centroid. The code uses a manual collide function with four iterations per tick to separate the rect elements.

深深度碎片
75% match
Loading thumbnail…

Dataset from Center for Societal Benefit through Healthcare

This example maps county-level health and sociodemographic data from the Center for Societal Benefit through Healthcare’s CSV files. It uses D3.js to draw an interactive choropleth of the United States, with counties colored by a selected risk measure such as COVID-19 cases or chronic disease prevalence. A brush and zoom tool enables panning and scaling via d3.zoom. Hovering over a county updates a tooltip with its values, while a legend and dropdown filter allow users to switch between indicators like obesity, insurance coverage, or healthcare provider access.

CCurran Kelleher
73% match