Assignment 9: Proportional Map

100%

Assignment 9: Proportional Map

✓ Published0🌍 Public

Last edited Apr 13, 2022

Created on Apr 13, 2022

This map of the United States uses green circles of proportional size to depict the relative housing cost index for each state, with a legend indicating values of 100, 200, and 300. The visualization renders the state outlines as an SVG path from TopoJSON data, while the data-driven symbols are drawn from a centroid point layer. The code employs d3.geo.path and d3.scale.sqrt for the projection and proportional scaling, loading the dataset from a CSV file to define the circle radii.

AI-generated description

reference: https://blocks.lsecities.net/YuhangWu/2efe335cdeac12d86c0efca1843ec9ab

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

86% 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…

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

84% match

Loading thumbnail…

Colm Lang | A9 Proportional Symbols

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.

CColm Lang

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

82% match

Loading thumbnail…

Proportional symbols map

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.

Pprateekvasi

82% match

Loading thumbnail…

Symbol map

This symbol map shows the population of each U.S. state and the District of Columbia using circles sized proportionally to population, overlaid on a geographic outline of the country. The visualization sorts the states by population and uses a square-root scale to determine circle radius, ensuring areas are proportional to population values. It is built with D3 v3, TopoJSON for the state boundaries, and a queue to load the GeoJSON centroid data. Rendering uses SVG with a `d3.geo.path` projection and `pointRadius` to size each symbol.

EEleonore9

78% match

Loading thumbnail…

homework 9

This visualization displays a zoomable map of the United States with OpenStreetMap tiles as the basemap, overlaid with red state boundaries. The map uses the d3-tile library to load and render raster tiles, while d3.geoMercator and d3.geoPath project the TopoJSON boundaries of US states from external JSON data. User interactions via d3.zoom adjust the tile scale and translate the projection to sync vector features with the changing raster view.

AAnaMal08

76% match