Skip to main content
SimilarExport ZIP
100%

Massachusetts Chrolopleth map with interactive legend

✓ Published1🌍 Public
Wwenleicao
Last edited Oct 23, 2019
Created on Oct 22, 2019

This interactive choropleth map of Massachusetts displays county boundaries, with each town colored according to its county. A legend on the right uses an ordinal color scale and responds to mouse hover, dimming non-matching map regions and highlighting the selected county. Built with React and D3 v5, it uses `d3.geoAlbers` and `d3.geoPath` to project and render TopoJSON features converted from Massachusetts town boundary shapefiles via mapshaper. County assignments come from a CSV mapping file, and the legend uses `d3.scaleOrdinal` for color encoding.

AI-generated description

This Map show county boundry of Massachusetts

Geo Shape file are from here

The download Shape file did not contain coordination. Therefore, it is first converted to geojson by ogr2ogr

Geojson then reprocessed by mapshaper to Topojson.

Topojson file is loaded to Github gist

City to County map csv is loaded to gist

legend is added and make it interactive with mouse movement

MIT Licensed

Similar vizzes

Loading thumbnail…

Massachusetts Chrolopleth map with interactive legend

This choropleth map shows Massachusetts town boundaries colored by county, with an interactive legend that highlights matching regions on hover. The visualization uses React with d3.v5, including `d3.geoAlbers` for projection and `d3.geoPath` for rendering SVG paths from TopoJSON data. A CSV file maps towns to counties, and the legend employs `d3.scaleOrdinal` with a custom `ColorLegend` component. Hovering a legend value dims non-matching towns via reduced opacity while brightening the selected county.

Wwenleicao
98% match
Loading thumbnail…

Massachusetts Chrolopleth map with interactive legend and viewbox

This choropleth map displays Massachusetts town boundaries colored by county, with an interactive legend that highlights matching regions on hover. The visualization uses React with D3 v5 APIs including `geoAlbers`, `geoPath`, and `scaleOrdinal` to project and render the TopoJSON geometries. A viewBox crops the map to the state, while legend hover states adjust fill opacity for focused counties. Town-to-county mappings come from a CSV gist, and geographic data originates from MassGIS shapefiles converted through ogr2ogr and mapshaper.

Wwenleicao
97% match
Loading thumbnail…

Massachusetts Chrolopleth map with interactive legend

A choropleth map of Massachusetts displays town boundaries colored by county, with an interactive legend that highlights towns in the selected county on mouse hover. Built with React and D3 v5, it uses `d3.geoAlbers` projection with custom rotation and scale via `d3.geoPath` for rendering SVG paths. The legend, implemented with HTML circles and text, updates a hovered value state to filter which towns receive the highlight. Town-county mappings come from a CSV, with geoJSON spatial data from a gist.

Wwenleicao
97% match
Loading thumbnail…

Massachusetts Chrolopleth map add legend

This choropleth map displays Massachusetts towns colored by county, with a color legend positioned on the left side of the canvas. The map uses a geoAlbers projection centered on the state and renders each town as an SVG path with a stroke. County assignments come from a CSV file that maps towns to counties, while the geographic boundaries come from a TopoJSON file. The ordinal color scale assigns distinct colors to each county, and the legend lists its domain values vertically. The visualization is built with React and D3 v5, using d3.geoPath for geometry and d3.scaleOrdinal for coloring.

Wwenleicao
94% match
Loading thumbnail…

Massachusetts Chrolopleth map

This choropleth map displays the counties of Massachusetts, with each town colored according to its assigned county via a categorical color scale. A conic conformal projection (d3.geoConicConformal) is used to render the state’s boundaries, while d3.geoPath draws the polygons from a TopoJSON source. Town-to-county mappings are loaded from a CSV file, and the color scale is a d3.scaleOrdinal. The visualization is built with React, using d3.v5 for geographic and data processing, and outputs as SVG paths.

Wwenleicao
90% 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
89% match
Loading thumbnail…

Massachusetts Chrolopleth map

This choropleth map of Massachusetts displays town boundaries and highlights the town of Worcester in red, with the state’s counties distinguished by a categorical color scale. The visualization uses a React-based SVG renderer with D3’s `geoAlbers` projection, `geoPath`, and `scaleOrdinal` for color mapping. Town-to-county associations come from a CSV file loaded via `d3.csv`, while geographic boundaries are derived from a TopoJSON file parsed using `topojson.feature`. The map shows only one town colored, leaving remaining towns white.

Wwenleicao
87% match
Loading thumbnail…

d3 Choropleth Map

This example displays Massachusetts town boundaries as a choropleth map using two different projections: a U.S.-oriented Albers projection and a Massachusetts-specific conic conformal projection. The code loads TopoJSON geographic data and renders map outlines with `d3.geoPath` and `d3.geoConicConformal`. A color legend module (`colorLegend`) adds a visual key with circles and text, while hover interactions highlight regions via CSS. The visualization uses SVG rendering with D3 v5 and TopoJSON utilities.

NNilla
86% match