Map Loupe

100%

✓ Published0🌍 Public

Last edited Oct 21, 2018

Created on Oct 20, 2018

This example shows a choropleth map of U.S. county unemployment rates on the left, with a magnified view of the same data on the right. The main map uses an Albers USA projection, while the right panel uses the same projection at a much larger scale, creating a loupe effect. Moving the mouse over the left map repositions the right map's transform to show the corresponding zoomed-in region, effectively magnifying the area beneath the cursor. County colors are assigned via a quantile scale, and state boundaries are overlaid in white. The visualization is built with D3 and TopoJSON, rendered as SVG.

AI-generated description

Hover over map on left to see zoomed in area on right.

forked from <a href='http://bl.ocks.org/syntagmatic/'>syntagmatic</a>'s block: <a href='http://bl.ocks.org/syntagmatic/0613ee9324e989a6fb6b'>Map Loupe</a>

forked from <a href='http://bl.ocks.org/dataning/'>dataning</a>'s block: <a href='http://bl.ocks.org/dataning/f81f3e87113b709693b4fe072bc6733e'>Map Loupe</a>

forked from <a href='http://bl.ocks.org/63anp3ca/'>63anp3ca</a>'s block: <a href='http://bl.ocks.org/63anp3ca/5dc6c1fa08751acd85eea8d79da49154'>Map Loupe</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Map Loupe

This example pairs two synchronized map views: a standard-size choropleth of U.S. county unemployment rates on the left, and a magnified version on the right. Hovering over the left map updates the right view, which uses a larger-scale Albers USA projection to show a zoomed-in area. The maps use an identical quantile color scale, with counties and state boundaries rendered as SVG paths via TopoJSON. The magnification effect is achieved by translating the right map based on the mouse position, creating a "loupe" that reveals local detail while preserving geographic context.

663anp3ca

94% match

Loading thumbnail…

Projected Choropleth

A choropleth map shows unemployment rates by U.S. county, using a blue sequential color scale with nine quantized classes for rates from 0 to 15 percent. State boundaries appear as white lines, while counties are drawn as SVG paths. The map uses pre-projected TopoJSON data, created via the `topojson` command-line tool with the `d3.geo.albersUsa()` projection, and renders using `d3.geo.path()`. County geometries and unemployment rates are joined into a single file during preprocessing, eliminating separate data loads. This variation of the classic unemployment choropleth simplifies the workflow by embedding the projection and data join directly into the TopoJSON generation step.

Mmbostock

79% match

Loading thumbnail…

Choropleth

This choropleth maps U.S. county-level unemployment rates from 2008, encoding values with a d3.scaleQuantize that bins rates from 0 to 15% into nine color classes. Rendered with SVG, the map uses a white state boundary overlay to delineate county borders, while the quantized color scale (from light blue to dark navy) visually distinguishes unemployment ranges. The visualization is built with D3 v4 and TopoJSON, and it includes a resize handler to scale the map responsively.

EEvertLagerberg

78% match

Loading thumbnail…

Gist d8a8c52a3d98232cd513f1f5364a6e5c

This example displays a choropleth map of U.S. county unemployment rates, using a blue sequential color scale ranging from light to dark shades. The map is rendered as SVG paths via `d3.geo.path` with an Albers USA projection, while county data is joined to `d3.map` values from an external TSV. State boundaries are drawn as a white mesh overlay using TopoJSON. The code relies on `queue`, `d3.json`, `d3.tsv`, and `d3.scale.quantize` to bin rates into nine classes.

JJn1532

78% match

Loading thumbnail…

Choropleth map

This choropleth map displays U.S. county-level unemployment rates as of August 2016, using a threshold scale with a blue sequential color scheme. The map is rendered as SVG with `d3.geoPath` and TopoJSON data from the Census Bureau and the Bureau of Labor Statistics. A legend with a linear axis shows the percentage ranges, and hovering over a county reveals its exact rate via a tooltip. The code also demonstrates preprocessing the raw fixed-width text data into a TSV using command-line utilities like `dsv2dsv`.

EEleonore9

78% match

Loading thumbnail…

d3 chorplath map

This choropleth map of the United States displays county-level unemployment rates using a quantized color scale. The visualization renders counties as SVG paths, colored from light to dark blues based on rates from 0 to 15 percent, with state boundaries overlaid in white. Built with D3 v3, it uses `d3.geo.albersUsa` and `d3.geo.path` for projection, TopoJSON for US county and state geodata, and a queue to load JSON and TSV data asynchronously.

JJn1532

77% match

Loading thumbnail…

Gist 7bcb7bfb170746a20c14

This choropleth maps U.S. county-level unemployment rates from 2008, encoding values from 0 to 15% using a quantize scale with nine discrete color classes. The SVG visualization uses a Mercator projection and TopoJSON data for county and state boundaries. Unemployment data is loaded from a TSV file and joined to county IDs via a `d3.map`, with each county’s fill class (q0-9 through q8-9) assigned by the quantized rate, producing a blue sequential palette from light to dark. County boundaries are stroked in white and state borders in white with rounded joins, while the background remains transparent. The example highlights the use of quantize scales for continuous-to-discrete mapping and suggests a threshold scale as an alternative for arbitrary ranges.

11wheel

76% match

Loading thumbnail…

Gist 5665764

This choropleth maps U.S. county-level unemployment rates from 2008 using a quantize scale, which assigns each county to one of nine color classes based on rates from 0 to 15%. The map is rendered with SVG paths for counties, colored via CSS classes q0-9 through q8-9, and includes state boundary outlines overlaid for context. The data is loaded from an external TSV file, and clicking a county or hovering over a state logs the element or feature to the console.

11wheel

76% match