A9 - Proportional Symbols Map in D3

100%

A9 - Proportional Symbols Map in D3

✓ Published0🌍 Public

Last edited Apr 2, 2024

Created on Apr 1, 2024

This D3.js proportional symbols map visualizes the cost of living index across US states. Gray states are drawn with the `d3.geoAlbersUsa` projection and `d3.geoPath`, while semi-transparent red circles, sized by a square-root scale, are placed at state coordinates derived from an external latitude/longitude source. A legend displays four bubble sizes with corresponding index values. Hovering over a circle reveals a tooltip with the state name and cost index. Data is loaded via `d3.json` and `d3.csv`.

AI-generated description

A proportional symbols map depicting the cost of living index across US States.

Data derived from: https://inkplant.com/code/state-latitudes-longitudes

References:

https://stackoverflow.com/questions/74707350/d3-js-proportional-symbol-map-setting-radius-of-a-circle-based-on-data-value https://observablehq.com/@haileyq0110/proportional-symbol-mapping

MIT Licensed

Similar vizzes

Loading thumbnail…

A9: D3 Proportional Symbol Map

This proportional symbol map shows the relative cost of living across US states using colored circles sized by each state’s cost index, with tooltips on hover. The visualization loads US state boundaries from a TopoJSON file via `d3.json` and `topojson.feature`, then plots the CSV data points using `d3.geoAlbersUsa` and `d3.geoPath`. Circle radius and fill color are scaled with `d3.scaleSqrt` and `d3.scaleLinear`, respectively. It uses D3 v7 with SVG rendering, a color legend, and animated opacity and stroke transitions for interactive highlighting.

Rronnieferrufino4908@gmail.com

93% match

Loading thumbnail…

A9 Proportional Symbols Map in D3

This visualization combines a U.S. state boundary map with red, green, and blue proportional circles to depict cost-of-living indices across states. Circle sizes scale linearly with each state's cost index using `d3.scaleLinear`, while positions are projected with `d3.geoAlbersUsa` and `d3.geoPath`. Data from `expstates.csv` is rendered in an SVG, and the ten highest-cost states are highlighted in green via a tooltip showing state names and indices.

EEric Yao

93% match

Loading thumbnail…

A9-Proportional Symbols Map

This proportional symbols map visualizes the relative cost of living across US states, using the area of each circle to represent its cost index. Hot pink circles mark the top ten most expensive states, while purple circles denote all others. Built with D3 v7 and TopoJSON, it projects state boundaries using an Albers projection via `d3.geoPath` and scales circle radii with `d3.scaleSqrt`. Interactive tooltips appear on hover, displaying each state's name, cost index, and rank. The map overlays state outlines with data from a CSV of state cost indices.

Bbhavi.kenia@gmail.com

91% 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

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 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

90% match

Loading thumbnail…

A9 Proportional Symbols Map D3

This map visualizes the costliness of states across the US, with each state’s centroid marked by a proportional circle whose size reflects its expense rank. The Albers USA projection renders the geographic backdrop, while the circles are colored to highlight distinctions. Built with D3 v7 and the TopoJSON library, it uses `d3.geoAlbersUsa()` and `d3.geoPath()` to draw the map. An interactive tooltip appears on hover, displaying details about each state.

Nnathanjmuljadi@gmail.com

90% match

Loading thumbnail…

[A9] Cost Index per State (Proportional Symbols)

This proportional-symbol map visualizes the cost index for each U.S. state, with circle size encoding the index value and the top 10 states highlighted in black. The visualization uses D3.js v7 with a Mercator projection via `d3.geoPath()` and `d3.geoMercator()`, rendering state boundaries as SVG paths. State coordinates and cost index data are loaded from CSV files, while geographic boundaries come from a GeoJSON source. Circles positioned at state centroids use radius values scaled from the cost index, with tooltips showing exact values.

Cctan13@dons.usfca.edu

89% match