Skip to main content
SimilarExport ZIP
100%

Assignment 9 Proportional Symbols Map

✓ Published0🌍 Public
Aahuynh8@dons.usfca.edu
Last edited Apr 1, 2024
Created on Apr 1, 2024

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.

AI-generated description

CS 360 Assignment 9 Proportional Symbols Map

Annie Huynh

MIT Licensed

Similar vizzes

Loading thumbnail…

Assignment 9: Proportional Map

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.

Aamrubal
92% 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…

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
90% 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
88% 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
88% 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
88% match
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
87% 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
87% match