Skip to main content
SimilarExport ZIP
100%

map: MI Admin (from shapefile...not working)

✓ Published1🌍 Public
Zzach b.
Last edited Jan 26, 2021
Created on Nov 26, 2020
Forked from map: NY Counties

This example displays the administrative boundaries of Michigan as an SVG map, rendered using a custom azimuthal equal-area projection. The visualization shows land polygons from a TopoJSON file, which is derived from MapCruzin shapefiles, and includes a graticule and sphere outline for geographic context. It uses `d3.geoPath` to project features, `d3.geoAzimuthalEqualArea` for the projection, and `topojson.feature` to convert the TopoJSON topology into GeoJSON features. The map is built with React, where hovering over a landmass reveals its name via a tooltip.

AI-generated description

shapefiles from mapcruzin.com

MIT Licensed

Similar vizzes

Loading thumbnail…

map mess

This example renders a world map using the Albers USA projection, with landmasses, country borders, and a graticule overlaid on a shaded sphere. A separate mark component attempts to map Michigan voting precincts from a TopoJSON source onto the same space, but the mismatched projections produce a glitchy, unintuitive visual mess. Hovering over the malformed shapes reveals the country-level tooltips from the world map. The visualization uses d3.geoPath, d3.geoGraticule, and d3.geoNaturalEarth1 with React and SVG rendering.

Zzach b.
79% match
Loading thumbnail…

MI

This visualization displays Michigan counties, municipalities, and electoral boundaries on an interactive Leaflet map. It loads GeoJSON data for counties, municipalities, voting precincts, state house and senate districts, and school districts via d3.json, then renders each as a layer toggleable through Leaflet’s control panel. The map uses OSM tiles from OpenStreetMap as its base layer, with Turf.js loaded for potential spatial analysis. Data is fetched asynchronously from Gist-hosted URLs, organized by category in useMiData.js.

Zzach b.
75% match
Loading thumbnail…

Untitled

This example displays a map of the United States with individual state boundaries rendered as SVG paths. The visualization uses TopoJSON data from the us-10m dataset, with states drawn via d3.geoPath and state borders emphasized with a white stroke. The code employs the D3 v4 library and topojson.feature to extract state geometries, while a CSS hover effect turns states red for interactive feedback. The rendering is purely SVG-based within a React framework.

MManh Pham
75% match
Loading thumbnail…

World_Map_ICE_8__BM

This example renders a world map using an azimuthal equal-area projection, coloring landmasses in purple and overlaying blue graticule lines with red interior boundaries. The visualization uses React to manage state and render SVG elements, while D3 utilities like `geoAzimuthalEqualArea`, `geoPath`, and `geoGraticule` handle projection and path generation. Geographic data is loaded from the world-atlas TopoJSON file via `d3.json` and `topojson.feature`, with the sphere outline drawn from D3’s `geoPath`. The map displays a static global view with no interactive elements.

Bbmurill2019
74% match
Loading thumbnail…

Azimuthal Equidistant

This example demonstrates the azimuthal equidistant projection, a map projection that preserves accurate distances from a central point. The map is centered on San Francisco, with the world rendered using outlines and filled landmasses. The visualization uses D3’s `d3.geoAzimuthalEquidistant` projection and `d3.geoPath` to draw the sphere, graticule, and geographic features. Land and boundary data come from a world-atlas TopoJSON file, processed using the `topojson-client` library. The SVG output includes a graticule, a stroked sphere outline, and a white-filled sphere background.

Mmbostock
74% match
Loading thumbnail…

Mexican_TopoJSON

This visualization displays a map of Mexico's states using a Mercator projection, with landmasses filled in teal and graticule lines in gray. It loads TopoJSON data from a GitHub gist, processes it through `topojson.feature`, and renders it with `d3.geoPath`. The React-based code uses `d3.geoMercator`, `d3.geoGraticule`, and SVG paths, pulling state boundaries from ArcGIS data refined with Mapshaper.

UUNTAdityaAnanthula
73% match
Loading thumbnail…

Polar Azimuthal Equal-area

This example visualizes the Earth using the polar azimuthal equal-area projection, with landmasses in black and country boundaries in white against a graticule. The map is centered on the North Pole and rendered as an SVG, with a sphere outline and fill. The code uses `d3.geo.azimuthalEqualArea()` for the projection and `d3.geo.path()` to draw features from a TopoJSON world dataset loaded via `d3.json`.

Mmbostock
73% match
Loading thumbnail…

country map

This example displays a map of the United States with state boundaries, rendered as SVG paths using D3’s `geoAlbers` projection and `geoPath`. It shows land areas in blue, a graticule sphere in purple, and state interiors highlighted with yellow strokes. The map loads US Atlas TopoJSON data from jsdelivr, processes it with `topojson.feature` and `topojson.mesh`, and is built within a React component using the `geoGraticule` API to draw the graticule lines.

PPavaniMangugari
73% match