Skip to main content
SimilarExport ZIP
100%

Mass Crime Map with circle size corresponding to crime/population ratio

✓ Published2🌍 Public
Wwenleicao
Last edited Oct 12, 2019
Created on Oct 6, 2019

This example displays a choropleth-style map of Massachusetts where each circle’s radius encodes the crime-to-population ratio, allowing quick comparison of crime rates across counties. The map uses a `geoAlbers` projection with `geoPath` to render the state boundary, while circles are positioned via `projection` and sized with `scaleSqrt`. Data comes from a CSV file and a TopoJSON file, loaded using `d3.csv` and `d3.json`. The visualization is built with React and D3 v5, rendering in SVG.

AI-generated description

Massachusetts Map enlarged

MIT Licensed

Similar vizzes

Loading thumbnail…

Mass Crime Map with circle size corresponding to crime/population ratio

An interactive choropleth of Massachusetts overlays crime statistics as circles atop geographic boundaries, with circle radius scaled to the crime/population ratio per municipality. The visualization uses `d3.geoAlbers` projection and `d3.geoPath` to render the state map, while `d3.scaleSqrt` maps crime rates to circle sizes. Data comes from CSV and TopoJSON sources, processed through React hooks and rendered as SVG elements with tooltips listing city, county, and percentage crime rate.

OOlivier Caron
96% match
Loading thumbnail…

Mass Crime Map with circle size corresponding to crime total count

A choropleth map of Massachusetts overlays crime data as scaled circles, with each circle's radius proportional to the total crime count per location. The visualization uses a React component with D3 v5’s `geoAlbers` projection and `geoPath` to render state boundaries from TopoJSON, while circles are positioned via the same projection and sized with a `scaleSqrt` function. Crime statistics are loaded from a CSV file, and the SVG rendering is handled through D3 selections within the React framework.

Wwenleicao
93% match
Loading thumbnail…

Mass Crime Map with circle size corresponding to crime/population ratio

This map of Massachusetts towns shows crime rates as circles overlaid on geographic boundaries, with circle size scaled to each town's crime-to-population ratio. Using React and D3 v5, the visualization projects GeoJSON features onto an SVG canvas via d3.geoPath with a geoAlbers projection, while d3.scaleSqrt maps crime rates to circle radii. Crime data comes from the FBI’s 2016 table, and geographical boundaries derive from MassGIS shapefiles converted to TopoJSON. Hovering reveals city, county, and exact crime rate in the tooltip.

Wwenleicao
93% match
Loading thumbnail…

Mass Crime Map with circle size corresponding to crime total count

This map shows the total crime count for each township in Massachusetts, with circle size proportionally scaled to the crime total using d3.scaleSqrt. The visualization combines town boundary paths rendered via d3.geoPath with a d3.geoAlbers projection, overlaid with crime data points positioned by longitude and latitude. Tooltips display city name, county name, and formatted crime counts. The crime data originates from FBI 2016 statistics, while geographic boundaries come from MassGIS shapefiles converted to Topojson. The visualization is built with React, D3 v5, and SVG rendering.

Wwenleicao
89% match
Loading thumbnail…

Mass Map 3 add points

This visualization shows a map of Massachusetts with individual crime locations overlaid as small circular points. The map uses the `geoAlbers` projection and `geoPath` to render state boundaries from TopoJSON data. Crime data is loaded from a CSV using `d3.csv`, with each record plotted via `projection([d.lon, d.lat])` into SVG circle elements. The React component structure manages loading states and renders the map with `d3`-powered geographic utilities, displaying points with a distinct fill color against the state's geometry.

Wwenleicao
88% match
Loading thumbnail…

Mass Map 3 add points

This visualization shows a map of Massachusetts with individual crime locations overlaid as small circular points. The map uses the `geoAlbers` projection and `geoPath` to render state boundaries from TopoJSON data. Crime data is loaded from a CSV using `d3.csv`, with each record plotted via `projection([d.lon, d.lat])` into SVG circle elements. The React component structure manages loading states and renders the map with `d3`-powered geographic utilities, displaying points with a distinct fill color against the state's geometry.

Wwenleicao
88% match
Loading thumbnail…

Mass Map Chrolopleth map

This example displays a choropleth map of Massachusetts, with each county rendered as a purple SVG path. The map uses a custom `d3.geoAlbers` projection, centered and rotated to focus on the state, with a high scale factor for magnification. County boundaries are drawn from TopoJSON data using `d3.geoPath` and `topojson.feature`. The visualization is built with React, which loads the geographic data asynchronously and passes it to SVG path elements.

Wwenleicao
82% match
Loading thumbnail…

Mass Map 2

This example renders a choropleth map of Massachusetts using the Albers equal-area conic projection. It displays the state’s geographic boundaries as SVG paths, colored with a teal stroke and fill. The visualization uses React to manage state and rendering, calling `d3.geoPath` with `d3.geoAlbers` to project the GeoJSON data fetched from a GitHub gist via `d3.json`. The `topojson` library’s `feature` function converts the TopoJSON structure into GeoJSON features for plotting.

Wwenleicao
81% match