Skip to main content
SimilarExport ZIP
100%

ICE-8 World Map and USA Maps

✓ Published1🌍 Public
SSanjib Paudel
Last edited Apr 9, 2023
Created on Apr 8, 2023
Forked from React Starter

This interactive map viewer displays world countries, U.S. states, and U.S. counties, letting the user switch between geographic scales via buttons. It renders dynamic SVG paths using React's `useState` and `useEffect` hooks, fetching GeoJSON from `us-atlas` and `world-atlas` via TopoJSON. The visualization applies distinct projections—`geoNaturalEarth1` for the world map and `geoAlbersUsa` for U.S. views—through `d3.geoPath`, with a deep blue background. Map features are drawn as white-filled, black-stroked paths, providing a clean comparison of administrative boundaries across scales.

AI-generated description

React Starter code.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of ICE-8 World Map and USA Maps

This interactive example lets users switch between a world map, US states, and US counties. The React component fetches TopoJSON data from the `world-atlas` and `us-atlas` CDNs, converts it to GeoJSON with `topojson.feature`, and renders SVG paths using `d3.geoPath` and either `d3.geoNaturalEarth1` or `d3.geoAlbersUsa` projections. Buttons toggle the active dataset and map type, with the SVG clearing and redrawing on each change.

EEeshwarReddy
90% match
Loading thumbnail…

ICE8 - USA Map

This interactive visualization displays the United States as a graticule-covered globe, with state boundaries drawn as interior lines against a landmass filled in white. It uses a React component with GeoJSON data from the us-atlas package, which is processed by topojson’s `feature` and `mesh` functions. The map is rendered using `d3.geoAlbers` and `d3.geoPath` to project the sphere and land features, with the sphere and interiors styled in a muted pink-gray.

Bbrindapotluri
88% match
Loading thumbnail…

ICE8 - USA Map

This example renders a polished map of the United States using D3’s `geoAlbers` projection and `geoPath` to draw state boundaries and graticules. TopoJSON data from the US Atlas (`states-10m.json`) is loaded via `d3.json`, with `feature` and `mesh` extracting land and interior borders. React manages the SVG output, styling the land in white, sphere in blue, and interiors in red. The visualization highlights geographic boundaries with a clean, minimal aesthetic.

Sshabbab01
88% match
Loading thumbnail…

ICE8 - USA Map

This example renders a polished map of the United States using D3’s `geoAlbers` projection and `geoPath` to draw state boundaries and graticules. TopoJSON data from the US Atlas (`states-10m.json`) is loaded via `d3.json`, with `feature` and `mesh` extracting land and interior borders. React manages the SVG output, styling the land in white, sphere in blue, and interiors in red. The visualization highlights geographic boundaries with a clean, minimal aesthetic.

Sshabbab01
88% match
Loading thumbnail…

Fork of World_Map_ICE_8_2

This interactive map displays the United States with a focus on state boundaries, rendered in SVG with a clean, minimal style. The example lets users toggle between different geographic scales—states, counties, or world countries—by fetching TopoJSON data from the us-atlas and world-atlas CDNs. Built with React and D3 v5, it uses `d3.geoAlbersUsa` and `d3.geoNaturalEarth1` projections with `d3.geoPath` to draw the shapes, clearing and redrawing the SVG when the map type changes.

CChandrashekharRamamuthi
88% match
Loading thumbnail…

ICE8 - USA Map

This example renders a choropleth-style map of the United States using an Albers equal-area conic projection. The visualization displays state boundaries and interior borders overlaid on a light blue sphere, with pink landmasses. A React component loads US Atlas TopoJSON data via `d3.json` and `topojson.feature` and `topojson.mesh`, while `d3.geoPath` and `d3.geoGraticule` generate SVG paths for land, interiors, and the sphere. The map updates asynchronously, showing a loading message until the data arrives.

KKande2011
88% match
Loading thumbnail…

ICE8 - USA Map

This example renders a map of the United States using an Albers projection and SVG paths. It shows state boundary lines overlaid on a landmass shape, with a gray sphere background. The code uses `d3.geoAlbers`, `d3.geoPath`, and `d3.geoGraticule` to project and draw the geography, while `topojson.feature` and `topojson.mesh` extract land and interior boundaries from the US Atlas dataset. React manages the component state to load the data asynchronously via `d3.json`.

AAditya Pujari
87% match
Loading thumbnail…

ICE 8: Region Map - USA

This example displays a choropleth-style region map of the United States, rendered as SVG paths within a React component. The map shows state boundaries as purple interior lines over a teal sphere, with land masses filled in dark blue. The code loads geographic data from the us-atlas TopoJSON file and uses d3.geoAlbers, d3.geoPath, and d3.geoGraticule for projection and rendering, along with topojson.feature and topojson.mesh to process the topology. React manages the data loading via useEffect and useState.

NNITIN0601
87% match