Skip to main content
SimilarExport ZIP
100%

Fork of ICE-8 World Map and USA Maps

✓ Published0🌍 Public
EEeshwarReddy
Last edited Apr 10, 2023
Created on Apr 10, 2023

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.

AI-generated description

React Starter code.

MIT Licensed

Similar vizzes

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
92% match
Loading thumbnail…

ICE-8 World Map and USA Maps

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.

SSanjib Paudel
90% match
Loading thumbnail…

Fork of ICE8 - USA Map

This example displays a map of the United States using state boundaries and graticules, rendered as SVG via React. It shows the nation’s outline as a colored sphere with state interiors highlighted in red. The code uses `d3.geoAlbers`, `d3.geoPath`, and `d3.geoGraticule` to project and draw the geographic features, while `topojson.feature` and `topojson.mesh` extract land and interior boundaries from the us-atlas TopoJSON. Data loads asynchronously using `d3.json`.

Sshabbab01
88% match
Loading thumbnail…

Fork of Fork of ICE8 USA Map

This example renders a map of the United States using D3’s `geoAlbers` projection and `geoPath` to draw both national land boundaries and state interiors. TopoJSON data from `us-atlas@3` is loaded with `d3.json` and converted via `feature` and `mesh` from the topojson library. The SVG output, styled with CSS, fills land in red, state borders in green, and includes a blue circle mark. React manages the component state and data loading through the `useState` and `useEffect` hooks.

SSweetierams
88% match
Loading thumbnail…

Fork of Fork of ICE8 USA Map

This example renders a map of the United States using D3’s `geoAlbers` projection and `geoPath` to draw both national land boundaries and state interiors. TopoJSON data from `us-atlas@3` is loaded with `d3.json` and converted via `feature` and `mesh` from the topojson library. The SVG output, styled with CSS, fills land in red, state borders in green, and includes a blue circle mark. React manages the component state and data loading through the `useState` and `useEffect` hooks.

SSweetierams
88% match
Loading thumbnail…

Fork of ICE-8 USA Country Map

This fork of the ICE-8 example displays a map of the United States with state boundaries, rendered as SVG paths inside a React component. The visualization uses d3.geoPath and d3.geoAlbers to project and draw the map, while d3.geoGraticule adds a graticule overlay. Land and interior borders are styled via CSS classes, and the map data is loaded from the US Atlas TopoJSON dataset using the topojson library's feature and mesh functions.

SsreepavanKothapalli
88% match
Loading thumbnail…

Fork of ICE8 - USA Map

This example displays a choropleth-style map of the United States, rendering land areas in purple and internal state boundaries in red on a silver sphere. It uses React to manage the component lifecycle, while d3-geo’s `geoAlbers` projection and `geoPath` generate the SVG paths. TopoJSON loads US Atlas data from a CDN, with `feature` and `mesh` extracting the nation outline and state borders. The map is static, showing the geographic layout without interactive elements.

DDeekshithVemula
88% match
Loading thumbnail…

Fork of ICE8 USA Map

This example renders a choropleth-style map of the United States using React and D3 v5. It displays land areas as red paths, state borders as green strokes, and a blue circle mark, all projected with the Albers equal-area projection (_geoAlbers_). The map loads TopoJSON data from the us-atlas states-10m.json dataset via _d3.json_, then converts it to GeoJSON features using the _topojson.feature_ and _topojson.mesh_ functions. The SVG output is generated through _d3.geoPath_ within a React component.

NNaimisha-M
88% match