Skip to main content
SimilarExport ZIP
100%

Colm Lang | A9 Proportional Symbols

✓ Published0🌍 Public
CColm Lang
Last edited Apr 14, 2022
Created on Apr 14, 2022

A proportional symbols map displays the relative housing cost index for U.S. states, using circles sized with a quantized scale and positioned at state centroids. Built with D3.js, it loads CSV and GeoJSON data, projects geometries via `d3.geoAlbersUsa` and `d3.geoPath`, and renders SVG paths for state outlines. The circles are added with `d3.selectAll`, and a legend is generated using `d3.legendSize` to map cost values to circle radii.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

A9 - Proportional Symbols Map in D3

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

RRiya Mathur
85% 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
85% match
Loading thumbnail…

Assignment 9 Proportional Symbols Map

This proportional symbols map displays housing costs for U.S. states using circles overlaid on a geographic map. The visualization uses D3 v6 with d3.geoPath and d3.geoAlbers for map projection, along with d3.legendSize for the size legend. Data is loaded from a CSV file hosted on GitHub, with circle colors distinguishing top-ten ranked states (blue) from others (green). Interactive tooltips appear on mouseover to show the precise housing cost for each state.

Aahuynh8@dons.usfca.edu
85% match
Loading thumbnail…

Proportional symbols map

A proportional symbol map displays the relative housing cost index for each U.S. state, with circle size scaled by the square-root of the housing cost value and the top ten most expensive states highlighted in red. The visualization uses D3 v3 with `d3.geo.path` to render state boundaries from TopoJSON and U.S. state centroids, overlaid with circles sized via `d3.scale.sqrt`. Hovering over a symbol reveals a tooltip with the state name and its housing cost.

Mmariahdiaz
85% 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
85% 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
84% 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
84% 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
84% match