Symbol Map

100%

✓ Published0🌍 Public

Last edited Mar 18, 2016

Created on Mar 18, 2016

A symbol map of the United States encodes each state’s population as the area of a translucent steelblue circle centered on the state’s centroid, with larger circles for more populous states like California and Texas. The map uses `d3.geo.path` to render state boundaries from TopoJSON and a square-root scale to map population values to circle radii. Population centroids and demographic data come from a separate GeoJSON file, and the code sorts features by population before drawing symbols with `topojson` and D3 v3.

AI-generated description

The area of each circle in this symbol map is proportional to the population of the associated state.

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/4342045'>Symbol Map</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Symbol Map

A symbol map displays the population of each U.S. state as a circle centered on the state’s centroid, with circle area proportional to population via a square-root scale. The visualization overlays these circles on a gray state map rendered with `d3.geo.path`, using TopoJSON for state boundaries and GeoJSON for state centroids. The code loads both datasets with the queue library, sorts states by population, and draws each symbol as an SVG path with a white stroke and semi-transparent steelblue fill.

Mmbostock

94% match

Loading thumbnail…

Symbol map

This symbol map shows the population of each U.S. state and the District of Columbia using circles sized proportionally to population, overlaid on a geographic outline of the country. The visualization sorts the states by population and uses a square-root scale to determine circle radius, ensuring areas are proportional to population values. It is built with D3 v3, TopoJSON for the state boundaries, and a queue to load the GeoJSON centroid data. Rendering uses SVG with a `d3.geo.path` projection and `pointRadius` to size each symbol.

EEleonore9

91% match

Loading thumbnail…

State Map with Population

This choropleth map visualizes U.S. state populations, filling each state with a blue color scale from light to dark based on its population value. It uses d3.geoAlbersUsa for projection and d3.geoPath to render TopoJSON state and nation outlines from the us-atlas dataset. Population data is loaded from a separate text file and parsed into a lookup table, with tooltips appearing on hover. The visualization is built with D3 v7 and rendered as SVG.

Sson.sultan@yahoo.com

81% match

Loading thumbnail…

World Map

A choropleth map of the United States colors individual states by population using a D3 threshold scale, with darker shades representing higher population values. The visualization loads geographic boundaries from a TopoJSON file via the `us-atlas` package and converts them to GeoJSON using `topojson.feature`. A `d3.geoAlbersUsa` projection is fitted to the SVG dimensions, and `d3.geoPath` renders each state as an SVG path. Population data for ten states is provided inline as a Map, with states lacking data shown in the lightest color.

KKOLLIPATI NIKHIL

79% match

Loading thumbnail…

usapopulation_map

This choropleth map of the United States visualizes estimated 2020 state populations in millions, using a blue sequential color scale to encode values. Built with D3 v7 and the TopoJSON library, it projects state boundaries with an Albers USA projection through `d3.geoPath`. The map reads population data from a hardcoded JavaScript object and renders an interactive SVG where hovering over a state displays its name and population in a tooltip.

CCharith Kapuluru

78% match

Loading thumbnail…

County Circles

This symbol map displays every U.S. county as a circle centered on its geographic centroid, with the circle’s radius scaled so its area matches the county’s actual land area. The visualization encodes area quantitatively through the circle size, using a stroke-only rendering in steelblue against a white background. The code loads TopoJSON county boundaries from a remote gist, converts them to GeoJSON with `topojson.feature`, and positions each circle via `d3.geo.path().centroid`. Circle radii are computed from `path.area` using the square-root formula for proportional area scaling, all rendered as SVG elements with d3.v3.

Mmbostock

78% match

Loading thumbnail…

Population Circles on US Map with D3.js!

This interactive map of the United States visualizes county-level population data as circles. It uses the D3.js library (v5) to render an SVG graphic, employing `d3.geoPath` and a map projection sourced from a TopoJSON file. County centroids are calculated with `d3.geoCentroid` to position each circle. The visualization reads population figures from a local CSV file, and includes a zoom feature via `d3.zoom` for user interaction.

Aacrasto-tibco

78% match

Loading thumbnail…

Proportional Symbols Map

This visualization shows a proportional symbols map of U.S. states, where circle size encodes each state’s cost index and the top nine highest-cost states appear in red. It uses D3 v7 with SVG rendering, a `d3.geoAlbersUsa` projection, and `d3.geoPath` for both state boundaries and symbol placement. A `d3.scaleSqrt` maps cost indices to circle radii. The code loads state polygons from us-states.json and point data from expensive-states.json, adding tooltips on mouse events.

Eeranyoung

77% match