CS360 A10

100%

✓ Published0🌍 Public

Last edited Apr 25, 2022

Created on Apr 25, 2022

A choropleth map of the United States visualizes the average monthly transportation cost by state, with a color scale from light yellow to dark red. The map is rendered using SVG paths projected with `d3.geoAlbersUsa` and `d3.geoPath`, with state boundaries drawn as black strokes. Fill colors are assigned based on the `transportationCost` field from the `StateExp.csv` dataset, mapped through a linear color scale. A horizontal `d3.legendColor` legend displays the cost range, and a hover interaction logs the corresponding state ID to the console.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

A9 Choropleth Map w/ Tooltips D3

A choropleth map of the United States colors each state according to its cost-of-living index from a CSV of expensive states, with tooltips revealing additional cost rank details on hover. The visualization uses D3 v7 and TopoJSON to load and render state boundaries via `d3.geoPath` with an Albers USA projection. A sequential blue color scale maps cost index values, while an interactive tooltip div appears on mouseover to show state-specific data.

Nnathanjmuljadi@gmail.com

80% match

Loading thumbnail…

A9 - Proportional symbols map

This map of the United States visualizes transportation costs by state using proportional green and grey circles, with the ten most expensive states highlighted in brown. A tooltip displays the exact cost when hovering over a circle. The chart is built with D3 v3 and topojson, using an SVG path with `path.pointRadius` to size symbols by a square-root scale. A hand-coded legend, an animated tooltip via `div.transition`, and state boundary paths rendered from TopoJSON complete the interactive display.

DDuc Pham

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

77% match

Loading thumbnail…

USA state Map

A choropleth map of the United States colors states based on a numeric value from a CSV file, with a linear color scale mapping low values to light red and high values to dark red. The map is rendered as SVG using D3 v6 and topojson, with the `d3.geoPath` generator drawing state boundaries and `d3.scaleLinear` adjusting fill colors. States without matching data appear blue. The CSV is loaded via `d3.csv`, and state boundaries come from the us-10m.v1.json TopoJSON file.

VVinay Vemuri

77% match

Loading thumbnail…

A9 Proportional Symbols

This proportional symbols map displays transportation costs for each US state, with the circle size encoding the cost amount and the color indicating whether a state ranks in the top ten most expensive. Rendered as an SVG via D3 v7, the visualization uses the `d3.geoAlbers` projection for the contiguous states, with separate `d3.geoMercator` projections for Alaska and Hawaii. State cost data is loaded from a Gist CSV, and the `topojson.feature` API draws state boundaries while circles are positioned using the `projection` function.

NNoah C.

77% match

Loading thumbnail…

A9-World Chloropleth Map

This map of the United States overlays proportional symbols representing grocery costs by state, with red highlighting for the top ten most expensive states. Built with D3 v3, it uses an Albers USA projection and topojson for state boundaries, while circles are positioned by projecting state coordinates. Data from a CSV file drives the radius scale and tooltip interactions.

Jjrcuster@dons.usfca.edu

76% match

Loading thumbnail…

A9-US Choropleth Map

This animated choropleth map displays the 2020 census population for each U.S. state, using a color scale to encode population values with interactive tooltips. The visualization loads population data from a CSV file and U.S. state boundaries from TopoJSON, then uses `d3.geoAlbersUsa()` for the projection and `d3.geoPath()` to render the SVG paths. State polygons are colored by population via a color scale, with a tooltip showing details on hover.

Bbhavi.kenia@gmail.com

76% match

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

76% match