Skip to main content
SimilarExport ZIP
100%

Proportional symbols map

✓ Published0🌍 Public
Pprateekvasi
Last edited Apr 12, 2022
Created on Apr 12, 2022
Forked from HTML Starter

This proportional symbols map visualizes grocery costs across US states, with circles positioned at state centroids sized by cost and colored red for the most expensive states. The visualization is built with D3 v3, using `d3.geo.path` for the map, `d3.scale.sqrt` for circle sizing, and `d3.csv` to load the cost data. Interactive tooltips appear on mouseover, and a legend displays cost values. The SVG rendering includes animated opacity transitions for symbols and a static map base from topojson data.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

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

A proportional symbol map shows the average grocery cost per state across the U.S., with circle area scaled to cost and states in the top ten for cost highlighted in red. Built with D3 v3, it uses the `d3.geo` Albers projection and `topojson` for the state outlines, while `d3.scale.sqrt` maps cost values to circle radii. Hovering a circle reveals a tooltip with the state name and cost, and the underlying data is loaded from a CSV file.

Jjrcuster@dons.usfca.edu
91% 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
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
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
90% 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
89% match
Loading thumbnail…

d3 proportional symbols map

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.

AAndrew
89% match