Skip to main content
SimilarExport ZIP
100%

Proportional Symbols Map

✓ Published0🌍 Public
AAllen Ho
Last edited Apr 2, 2024
Created on Apr 2, 2024
Forked from Hello HTML

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.

AI-generated description

Source: https://d3-graph-gallery.com/graph/bubblemap_basic.html https://eric.clst.org/tech/usgeojson/

MIT Licensed

Similar vizzes

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
94% 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
92% match
Loading thumbnail…

Proportional Symbols Map - Expensive States

This proportional symbols map displays each U.S. state’s cost-of-living index, with circle size scaled to the numeric index and colored uniformly in blue. It uses D3.js 7.8.5 to load GeoJSON state boundaries, project them with `d3.geoAlbersUsa()`, and render the map as SVG paths via `d3.geoPath()`. A separate GeoJSON file of state centroids feeds the proportional symbols. A legend with four circles communicates the radius-to-value mapping. The visualization emphasizes differences in regional expense, highlighting states like Hawaii and California as the most costly.

EEunice Tu
92% match
Loading thumbnail…

Proportional symbols map

This proportional symbols map overlays circles on a U.S. state map to visualize grocery cost indices, with the ten most expensive states highlighted in red and a legend showing cost values. The visualization uses D3 v3’s `d3.geo.path`, TopoJSON, and a queue to load map boundaries, state centroids, and cost data. Point radii are scaled with `d3.scale.sqrt`, and hovering a circle triggers a tooltip, dims other symbols, and uses an SVG transition for emphasis.

Vvishusikka
92% 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
92% 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

A proportional symbol map displays the cost-of-living rank for U.S. states using circles positioned by latitude and longitude. Circle size inversely reflects cost rank through a d3.scaleSqrt, with the most expensive state highlighted in red. The visualization is built with d3.v7, using a d3.geoAlbersUsa projection, and includes an interactive tooltip on mouseover. The underlying data comes from expensive_states.csv, and the chart renders as SVG.

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