Skip to main content
SimilarExport ZIP
100%

Fork of Mexico Map ( D3 & React )

✓ Published2🌍 Public
AAndres de la Garza
Last edited Mar 24, 2021
Created on Mar 22, 2021

This example renders a choropleth-style map of Mexico’s states using a Mercator projection implemented with `d3.geoMercator` and `d3.geoPath`. The SVG marks are drawn from TopoJSON data loaded via `d3.json` and converted with `topojson.feature`, with graticules displayed as background paths. Built as a React component, the visualization fetches state boundaries from a public gist of arcgis.com data, processed with mapshaper. The current center coordinates are set, but the README notes the map still needs alignment on the rendered image.

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

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Mexico map

A choropleth-style SVG map of Mexico renders geographic region boundaries using D3's `geoMercator` projection and `geoPath`. The map displays each state as a green path with yellow strokes, overlaid with blue graticule lines. Geographic data loads from a TopoJSON file via D3's `json` function and `topojson.feature`, while React manages the component state. The visualization also imports multiple alternative projections (`geoEqualEarth`, `geoNaturalEarth1`) though only Mercator is applied.

Nnavyasrimeka9@gmail.com
93% match
Loading thumbnail…

Fork of Mexico map

This example visualizes a map of Mexico using a Mercator projection, displaying state boundaries and graticules. Built with React and D3 v6, the code fetches TopoJSON data from a gist, converts it to GeoJSON features with the `topojson` library’s `feature` function, and renders the paths using `d3.geoPath` and `d3.geoMercator`. The map is centered approximately on [-102, 24] and uses colorful strokes and fills to distinguish land, graticules, and other layers.

SSheela2930
93% match
Loading thumbnail…

Fork of Fork of Mexico Region Map ( D3 & React & TopoJSON )

This example renders a choropleth-style map of Mexican regions using a Mercator projection, with each region filled in teal and separated by white borders. The visualization loads TopoJSON data from a GitHub gist, converts it to GeoJSON via `topojson.feature`, and draws paths with `d3.geoMercator` and `d3.geoPath` inside a React component. The map is displayed as an SVG, with a placeholder tooltip context ready for future interactivity.

AAndres de la Garza
92% match
Loading thumbnail…

Fork of Mexico map

This map displays Mexico with a Mercator projection, showing state boundaries and graticules. Built with React and D3 v6, the visualization uses `geoMercator`, `geoPath`, and `geoGraticule` to render geographic features as SVG paths, with state land in red and graticules in aqua. The data comes from a TopoJSON file fetched via `d3.json` and converted to GeoJSON using `topojson.feature`, sourced from the geoBoundaries release for Mexico.

YYerlan Yeszhanov
92% match
Loading thumbnail…

Fork of Mexico map

This example displays a choropleth map of Mexico rendered in SVG, with country regions filled in green and outlined in yellow, overlaid with blue graticule grid lines. It uses a Mercator projection configured with a center point over Mexico. The visualization loads TopoJSON data from a provided URL and converts it to GeoJSON using the `topojson.feature` API. The map is built with React for UI management, while d3-geo's `geoPath` generates the SVG paths for each region.

GGogineni44
91% match
Loading thumbnail…

Mexico Map ( D3 & React )

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.

AAndres de la Garza
91% match
Loading thumbnail…

Fork of Fork of Mexico Region Map ( D3 & React & TopoJSON )

This map of Mexico displays its regional boundaries using a Web Mercator projection. The visualization layers a graticule and state landmasses as SVG paths, colored with a teal fill and white strokes. Built with D3 v6 and React, it loads TopoJSON data from a GitHub gist, converts it to GeoJSON via the `topojson` feature API, and renders it using `d3.geoPath`. The original data source for the boundaries is attributed to ArcGIS.

SSaikiran2029
90% match
Loading thumbnail…

Mexico Region Map ( D3 & React & TopoJSON )

This example displays a map of Mexico rendered as a single-color choropleth, with state boundaries outlined and a graticule overlay. The visualization uses a Mercator projection via `d3.geoMercator` with the map centered on the country. The geographic data is loaded from a TopoJSON file fetched with `d3.json` and converted to GeoJSON using `topojson.feature`, with the shapes drawn by `d3.geoPath`. The implementation is built with React, managing the asynchronous data fetching through a custom hook and rendering the SVG marks as React components.

AAndres de la Garza
90% match