Skip to main content
100%

Oaxaca map

✓ Published0🌍 Public
Aamundo
Last edited May 7, 2014
Created on May 7, 2014

The map displays the municipalities of the Mexican states of Oaxaca, Puebla, and Guerrero, with each municipality rendered as a dark polygon that highlights orange on hover. State boundaries appear as solid white lines, while municipality boundaries use thinner, semi-transparent white strokes. The visualization uses D3.js to load TopoJSON data and projects it client-side with a conic conformal projection, applying rotation, centering, and scale to position Mexico appropriately. Municipality and state boundary meshes are drawn from the TopoJSON topology, and hovering over a municipality reveals its name via a tooltip.

AI-generated description

Trying to build a map of Oaxaca, Puebla, and Guerrero.

Based on Mike Bostock's Mexico map.

Like the other Mexican municipalities map, but projecting in the client. In response to a Stack Overflow question.

Similar vizzes

Loading thumbnail…

Mexico

This map of Mexico displays all municipalities as dark gray polygons with white state and municipal boundaries. Hovering highlights a region in orange, and a tooltip shows its name. The visualization uses D3 v3’s `d3.geo.path` with a null projection to render pre-projected TopoJSON data, created from INEGI shapefiles via TopoJSON’s command-line tool. Municipality and state boundaries are drawn from the same TopoJSON mesh.

Mmbostock
79% match
Loading thumbnail…

Mexico

Mexico’s municipalities are displayed as a dark choropleth map, using a conic conformal projection applied client-side. The visualization renders each municipality as an SVG path, with hover highlighting in orange; state and municipality boundaries are drawn as white lines. The code uses D3’s `d3.geo.path`, `d3.geo.conicConformal`, and `topojson` to create the map from the preprocessed `mx.json` TopoJSON file. The underlying data derives from INEGI’s 2010 municipal geographic database, simplified and converted via `ogr2ogr` and the TopoJSON build script.

Mmbostock
77% match
Loading thumbnail…

Municipalities of Mexico

A map of Mexico displays all municipalities as fine gray lines and state boundaries as thicker outlines, rendered with SVG. The visualization uses `d3.geoPath` to project TopoJSON data containing both municipality and state geometry. The geographic data is sourced from INEGI shapefiles and processed into a quantized TopoJSON format via the command-line preprocessing script.

Mmbostock
76% match
Loading thumbnail…

Municipalities of Mexico II

This example displays the municipalities and states of Mexico, using a Mercator projection. The map is rendered with SVG paths; municipalities are drawn with a thin stroke to distinguish internal boundaries, while state boundaries are overlaid as thicker lines. The visualization is generated from a TopoJSON file and rendered using D3’s geo path, with the projection fit to the map dimensions.

AAlan McConchie
73% match
Loading thumbnail…

Municipalities of Mexico II

This example displays a map of Mexico with two layered vector paths: municipalities rendered with thin strokes and states overlaid with thicker outlines. It uses a TopoJSON file that was preprocessed from INEGI shapefiles using command-line tools and visualizes the data with D3’s `d3.geoMercator` projection and `d3.geoPath`. The map is drawn as SVG, with the paths selected and bound to the TopoJSON features via `topojson.feature` and `d3.json`.

Mmbostock
70% match
Loading thumbnail…

mexico map

This visualization displays a map of Mexico highlighting its internal state boundaries and graticule lines, rendered using an SVG projection. The map uses a Mercator projection centered on the country and geoJSON data sourced from ArcGIS, processed through mapshaper. The React app loads topojson data via d3.json and converts it to GeoJSON using topojson.feature, while d3.geoPath generates the geographic paths. Each state is drawn as a teal landmass with white borders against a light graticule overlay.

Ssrivalliwuyyuru
70% match
Loading thumbnail…

Mexico map

A choropleth-style map of Mexico's regions rendered as SVG paths using a Mercator projection, with each state outlined in yellow against a blue graticule grid. The visualization loads geographic data from a TopoJSON file hosted as a GitHub gist, processed with the `topojson.feature` API, while D3's `geoPath` and `geoMercator` handle the projection and path generation. The React component fetches the data asynchronously and displays a loading message until the map is ready, with styled fill and stroke colors applied via CSS classes.

VVAbhiram99
69% match
Loading thumbnail…

Mexico map

This example displays a map of Mexico, rendering the country’s regions as purple landmasses outlined in yellow, set against a blue graticule grid. The visualization uses a Mercator projection configured with `geoMercator`, scaling and centering the map over the country. Geographic data is loaded as TopoJSON from a GitHub gist and converted to GeoJSON using `feature` from the `topojson` library. The map is drawn with `d3.geoPath` into an SVG within a React component, with styling applied via CSS classes.

Hhm0421
69% match