d3 proportional symbols map

100%

d3 proportional symbols map

✓ Published0🌍 Public

Last edited Apr 2, 2024

Created on Apr 2, 2024

A proportional symbols map visualizes transportation costs across US states, with larger circles representing higher expenses. Hovering a symbol highlights it and displays a tooltip with the exact state name and cost. The visualization uses D3 v3 with topojson for state boundaries and pre-computed state centroids from a JSON file, while CSV data supplies the cost values. Circle size is scaled linearly, and the top ten most expensive states are colored distinctly. The map animates opacity transitions on hover and applies a dark theme.

AI-generated description

A proportional symbols map in D3

BTW: The data was simplified to help with creating this visualization.

Link to original dataset: https://www.cs.usfca.edu/~apjoshi/cs360/data/expensive-states.csv https://inkplant.com/code/state-latitudes-longitudes

MIT Licensed

Similar vizzes

Loading thumbnail…

Proportional Symbols Map in D3

A proportional symbols map visualizes transportation cost indices across U.S. states using D3.js and the topojson library. Each state is rendered as a gray polygon with a circular symbol whose size corresponds to its cost value. The visualization employs an Albers equal-area projection via `d3.geoAlbersUsa` and `d3.geoPath`, with state centroids hardcoded to position the proportional circles. Interactive tooltips appear on hover, while symbols animate on load. The map is drawn in SVG with data fetched from a CSV hosted on GitHub.

Kkfhujosefsson@dons.usfca.edu

93% match

Loading thumbnail…

Proportional Symbol Maps

This proportional symbol map displays transportation costs across U.S. states, with circles sized by cost and colored purple for the top 10 most expensive states or violet otherwise. Hovering reveals a tooltip with the state name and exact cost. Built with D3 v3, it uses d3.geo.path for map rendering, d3.scale.sqrt for circle radii, and topojson to draw state boundaries. The visualization includes a legend showing cost values and employs queue.js to load GeoJSON, centroid data, and a CSV of state costs.

PPranay Matalia

92% match

Loading thumbnail…

A9 Proportional Symbols Map

This proportional symbols map displays transportation costs for U.S. states, with circle size scaled by each state’s cost index and red circles highlighting the top ten most expensive states. It renders via D3.js v7 using `d3.geoAlbersUsa`, `d3.geoPath`, and `topojson-client` to draw state boundaries, while `d3.scaleSqrt` maps cost values to circle radii. Hovering reveals a tooltip with the state name and cost. The legend indicates cost ranges, and the underlying CSV data provides geographic coordinates.

Hhxu51@usfca.edu

92% match

Loading thumbnail…

D3 - Proportional Symbols

A proportional symbol map displays the relative housing costs across U.S. states, with circle size scaled by cost and red highlighting the top ten most expensive states. The visualization uses D3 v3 with `d3.geo.path` to render state boundaries from TopoJSON, while centroid points are drawn as scaled circles using `d3.scale.sqrt`. Hovering reveals a tooltip with state name and cost. The code loads external JSON and CSV data via `queue()`, and renders in SVG with animated transitions for the tooltip. The legend shows circle radii corresponding to cost values.

CChandana Srinivas

91% match

Loading thumbnail…

A9 - Proportional symbols map

This map of the United States visualizes transportation costs by state using proportional green and grey circles, with the ten most expensive states highlighted in brown. A tooltip displays the exact cost when hovering over a circle. The chart is built with D3 v3 and topojson, using an SVG path with `path.pointRadius` to size symbols by a square-root scale. A hand-coded legend, an animated tooltip via `div.transition`, and state boundary paths rendered from TopoJSON complete the interactive display.

DDuc Pham

91% match

Loading thumbnail…

D3 Proportional Symbols Map

This proportional symbols map displays the cost index of US states using circles positioned by geographic coordinates, with the ten most expensive states highlighted in red. The visualization uses D3 v7 with `d3.geoAlbersUsa` projection and topojson to render state boundaries, while a `d3.scaleSqrt` size scale maps cost index values to circle radii. Hover interactions reveal tooltips, and a legend explains the symbol scaling. Data is loaded from CSV and US Atlas TopoJSON sources.

Rragregory@dons.usfca.edu

90% match

Loading thumbnail…

A9 Proportional Symbols

This proportional symbols map displays transportation costs for each US state, with the circle size encoding the cost amount and the color indicating whether a state ranks in the top ten most expensive. Rendered as an SVG via D3 v7, the visualization uses the `d3.geoAlbers` projection for the contiguous states, with separate `d3.geoMercator` projections for Alaska and Hawaii. State cost data is loaded from a Gist CSV, and the `topojson.feature` API draws state boundaries while circles are positioned using the `projection` function.

NNoah C.

90% match

Loading thumbnail…

Proportional Symbols Map

A Proportional Symbols Map displays the cost index for each U.S. state, with larger circles indicating higher costs and the top ten states highlighted in red. The visualization uses a Mercator projection via `d3.geoMercator` and `d3.geoPath` to render state boundaries from a GeoJSON file. Circle radii are scaled from CSV data, and `d3.scaleThreshold` with `d3.schemeBlues` provides color encoding. The map is drawn in SVG with D3 v6, using `join()` to bind data points to circle elements and tooltips showing state names and cost values.

AAllen Ho

90% match