Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Mexico Map ( D3 & React )

Public visualization

Viewing a saved revision (read-only)

815709fe7a8c41a18e120a04360968de

Mexico Map ( D3 & React )

0 stars1🌍 Public
AAndres de la Garza
Last edited Mar 22, 2021
Created on Mar 9, 2021

This example displays a map of Mexico with its state boundaries, rendered as SVG paths using a Mercator projection. The visualization loads GeoJSON data from a gist, which was originally sourced from ArcGIS and processed with Mapshaper to extract state polygons. Using D3 v6 within a React component, the code applies `geoMercator` for projection and `geoPath` to generate the path data for each state feature. The map is centered on Mexico using coordinates [-102, 24], and the styling fills the states with a teal color while using light gray strokes for borders, with fonts sourced from Google's Poppins family.

AI-generated description

used arcgis.com data for plotting states and boundaries mapshaper.org to create JSON of states witin mexico using mercator projection Still need to center on the rendered image