Skip to main content
SimilarExport ZIP
100%

Mass Map 3

✓ Published3🌍 Public
Wwenleicao
Last edited Oct 5, 2019
Created on Oct 5, 2019
Forked from Mass Map 2

A choropleth of Massachusetts is rendered as an enlarged SVG map using a custom d3.geoAlbers projection with adjusted center, rotation, and parallels for regional focus. The code loads TopoJSON from a GitHub gist, converts it to GeoJSON via topojson.feature, and draws each polygon with d3.geoPath. Individual county paths appear in white with teal strokes, emphasizing the state’s borders. The React app fetches and displays the map within a fixed 960×500 viewport, providing a clean, minimalist view of the geography.

AI-generated description

Massachusetts Map enlarged

MIT Licensed

Similar vizzes

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
92% 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
91% match
Loading thumbnail…

Mass Map Chrolopleth map

This example displays a purple choropleth map of Massachusetts, enlarged to emphasize the state's geometry. The map is rendered using SVG paths, with the projection configured through D3’s `geoAlbers` and `geoPath` functions, which use specific center, rotation, and parallels to zoom in on the region. The geographic data is loaded from a remote JSON file, and the map is built within a React application.

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

Mass Map 2

This map displays Massachusetts school districts as geographic regions, using an equal Earth projection to draw each district boundary. The visualization loads TopoJSON data from a GitHub source, then converts it to GeoJSON using the `feature` function before rendering paths with `d3.geoPath`. The map is built with React components and D3 v5, with SVG paths styled using teal strokes and fills from the associated CSS file.

Wwenleicao
86% match
Loading thumbnail…

Massachussets

This example visualizes Massachusetts school districts as a choropleth map, with each town randomly assigned one of three colors from a categorical scale. The geographic boundaries are rendered using a conic conformal projection through `d3.geoPath`, while React manages the component structure. Data is loaded from a local TopoJSON file containing town boundaries, and the color mapping is applied via `d3.scaleLinear`. The map is displayed as SVG paths with black strokes highlighting district borders.

11993-INDALKAR
86% match
Loading thumbnail…

Massachusetts Chrolopleth map with interactive legend

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.

Wwenleicao
84% match
Loading thumbnail…

Mass School District Boundaries

A choropleth map displays Massachusetts school district boundaries as gray polygons with teal outlines. The visualization uses a topojson data source loaded via `d3.json` and converted to GeoJSON features with `topojson.feature`. React manages the component state while `d3.geoPath` with a `geoIdentity` projection renders the shapes, using `reflectY(true)` to correctly orient the map coordinates. The SVG output is scaled to fit a 960×500 viewport using `projection.fitExtent`.

Ddavid-cv2
84% match