Skip to main content
SimilarExport ZIP
100%

MI

✓ Published0🌍 Public
Zzach b.
Last edited Feb 24, 2022
Created on Feb 23, 2022
Forked from GR

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.

AI-generated description

a stump viz for turf.js

using this tutorial:
Advance Spacial Analysis in Leaflet, Turf, Tekson

MIT Licensed

Similar vizzes

Loading thumbnail…

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

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.

Zzach b.
75% match
Loading thumbnail…

GR

This interactive map overlays four geographic layers for Grand Rapids, Michigan: city commission wards, neighborhoods, neighborhood associations, and population data by block. Each layer uses Leaflet’s `L.geoJSON` to render GeoJSON data, with D3’s `d3.json` fetching the files from GitHub Gists. Wards are colored with fixed hues, while neighborhoods and associations use a custom `randomRGB` function to generate varied colors. A Leaflet layer control toggles visibility for each set, with popups showing ward numbers, neighborhood names, association names, and resident counts.

Zzach b.
75% match
Loading thumbnail…

GR MI ZIP Codes

This visualization shows Grand Rapids, Michigan ZIP codes as choropleth-style regions, with population density encoded through fill opacity and color intensity. The map uses a customized azimuthal equal-area projection via `d3.geoPath` and `geoAzimuthalEqualArea`, rotated to focus on the city. ZIP code boundaries render from a GeoJSON source, while population data from city-data.com drives a `scaleLinear` mapping to opacity. Hover tooltips display each ZIP code and its population, and the map includes Michigan administrative outlines for context. React manages component state, with D3 v6 handling data loading and path generation.

Zzach b.
70% match
Loading thumbnail…

D3 + Leaflet

This example combines D3.js and Leaflet to create an interactive map of U.S. states with a hover effect. It uses a Leaflet tile layer from OpenStreetMap as the base, with D3 rendering state boundaries as SVG paths overlaid on the map. The code loads GeoJSON data from a gist and projects it using a custom `d3.geo.transform` that converts coordinates to Leaflet’s layer points. The `d3.geo.path` draws the states, and hover fills them brown. The map’s `viewreset` event triggers a reset function to reposition and rescale the SVG overlay.

JJn1532
69% match
Loading thumbnail…

MI ZIP Code Pop.

This visualization shows the population distribution across Michigan ZIP codes, with each ZIP code region colored and opacified based on its population density. The map uses an azimuthal equal-area projection, rendering ZIP code boundaries and administrative land features as SVG paths via `d3.geoPath`. Population data from michigan-demographics.com drives a linear opacity scale (`d3.scaleLinear`), mapping lower populations to more transparent regions and higher populations to more opaque ones. Hovering over a region reveals the ZIP code and its population in a tooltip.

Zzach b.
68% match
Loading thumbnail…

Fork of Fork of Leaflet + D3 Map

This visualization combines Leaflet and D3 to display geographic data on an interactive Esri World Imagery map. It uses Leaflet’s tile layer and SVG overlay, with D3’s geoPath and a custom geoTransform projection to render polygon and MultiLineString features from embedded GeoJSON data. The map shows hand-drawn lane boundaries and pincode areas, with polygons that respond to mouseover by changing color. The plot also includes a separate circles.json file containing coordinate points, though these are not referenced in the main HTML script.

NNita
67% match
Loading thumbnail…

MI ZIP Codes

A map of Michigan ZIP code boundaries highlights Grand Rapids ZIP codes in pink against yellow regions. The visualization uses d3.geoPath with an azimuthal equal-area projection rotated to center on Grand Rapids, rendering topojson data from a GitHub repository. React manages the component structure while d3 handles geographic path generation, with hover states and tooltips showing ZIP codes.

Zzach b.
67% match
Loading thumbnail…

map: NY Counties

This interactive map displays New York State counties using a glitchy, layered rendering technique. The visualization uses D3’s geoAlbersUsa projection and geoPath to render county boundaries from a TopoJSON source, with hover effects that highlight individual counties. The map also includes world landmasses and graticules, creating an overlapping collage effect where the state’s counties appear superimposed on global geography. React manages the component state while D3’s json and topojson.feature APIs load and parse the geographic data for SVG rendering. The stylized CSS uses semi-transparent fills and hover states to emphasize the experimental aesthetic.

Zzach b.
67% match