fresh block

Choropleth with Animated Stripes

This choropleth visualizes the poverty rate for families with children in Maryland counties, with animated striped overlays expressing the margin of error. The map uses D3 v4’s `d3.geoPath`, `d3.geoMercator`, and `topojson` to render county shapes, while a stripe pattern and mask animate fill colors between the upper and lower confidence bounds using chained transitions. Users toggle between one-year and five-year ACS estimates. Data comes from the 2014 American Community Survey.

89% match

From US Atlas, drawing MD Counties

This example displays a choropleth map of Maryland counties from the US Atlas TopoJSON data, with hover highlighting that turns each county red and logs its FIPS ID to the console. It uses d3.geoPath to render SVG paths of county boundaries, while a threshold color scale applies a sequential OrRd scheme. The county borders are drawn as a separate white mesh for contrast. The code loads the topojson feature collection and removes non-Maryland tracts, though the data lacks population values, so the color encoding remains visually uniform.

78% match

MD Counties 4

An interactive choropleth map of Maryland counties displays population density using a sequential color scale, with hover effects revealing county details. A donut chart in the corner dynamically updates to show population, land area, and density proportions for the selected county. Built with D3 v4, the visualization uses `d3.geoConicConformal` for projection, `d3.geoPath` for rendering shapes, and `d3.pie`/`d3.arc` for the chart. Population data is sourced from JSON files, while county boundaries come from TopoJSON.

77% match

MD Counties

A choropleth map of Maryland counties colors each county by population density using a threshold scale and the d3.schemeOrRd color scheme, with county boundaries derived from a TopoJSON file. Hovering over a county highlights it with a thicker stroke, displays its name, population, land area, and density in an info box, and renders a small pie chart using d3.pie and d3.arc showing the county's population, land area, and density. The map uses a d3.geoConicConformal projection, along with topojson-client to parse geographic data and d3-scale-chromatic for colors.

76% match

fresh block

A choropleth map of U.S. county unemployment rates colors each county with a blue gradient from a threshold scale, using `d3.geoPath` to render TopoJSON boundaries. The visualization includes a horizontal legend with a linear axis, showing rates from 1% to 10%, plus white state borders. Unemployment data loads from a TSV file and matches each county by ID. The map uses `d3.scaleThreshold`, `d3.schemeBlues[9]`, and `d3.axisBottom`.

JJEddy92

A9 - Choropleth

This choropleth maps 2021 poverty rates by U.S. county, coloring each county on a blue sequential scale where rates are multiplied by five for stronger visual contrast. The visualization loads county and state geometries from the us-atlas TopoJSON file, then joins them with USDA Economic Research Service poverty estimates via FIPS codes. It renders using d3.geoPath inside an SVG, with state boundaries drawn as white meshes and county tooltips showing the county name, state, and exact poverty percentage. The code uses d3.json and d3.csv for data loading, along with d3.scaleSequential and d3.interpolateBlues for color encoding.

AAndrew Blakeslee Moore

Choropleth Map of County Data

A choropleth map of U.S. counties visualizes poverty rates as filled paths, with a color legend and axis labeling the percentage scale. Built with d3.v5, it loads TopoJSON county boundaries and a CSV of poverty data, then uses d3.geoPath to render SVG shapes and d3.scaleThreshold with d3.schemeGreens for the color encoding. State borders are drawn as white mesh lines, and hover tooltips show each county’s exact rate.

Yyqinolive

Choropleth Map of County Data

A choropleth map shades U.S. counties by poverty rate, with a color legend and state boundaries overlaid. The visualization loads GeoJSON topology and CSV data via promises, then uses `d3.geoPath` and TopoJSON to render county shapes, while `d3.scaleThreshold` and `d3.schemeGreens` map poverty percentages to fill colors. County paths include tooltips showing the exact rate, and an axis below the map labels the legend’s tick values.

YYash G