Fork of World_Map_ICE_8_2

100%

Fork of World_Map_ICE_8_2

✓ Published0🌍 Public

Last edited Apr 13, 2023

Created on Apr 13, 2023

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.

AI-generated description

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

92% 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

90% match

Loading thumbnail…

World_Map_ICE_8

This example displays an interactive world map using the Eckert III projection, rendered as an SVG with React and D3 v5. It fetches geographic data from the world-atlas TopoJSON file and uses `d3.geoNaturalEarth1` with `fitSize` to project the map, while `d3.geoPath` draws the country boundaries. The code also includes support for switching to a U.S. counties view, using `d3.geoAlbersUsa` and the us-atlas dataset, though only the world map is activated by default.

CChandrashekharRamamuthi

90% match

Loading thumbnail…

Fork of ICE8 - USA Map

This choropleth-style map displays the United States with state boundaries and a shaded landmass, rendered as SVG paths within a React component. The visualization uses `d3.geoAlbers` and `d3.geoPath` to project and draw geographic features from TopoJSON data loaded via `d3.json` from the us-atlas repository. State borders are derived using `topojson.mesh`, while the land and sphere shapes are filled in contrasting colors. The map is displayed at 1000 by 600 pixels, with loading state handled through React hooks.

Bbhargavarathod

90% match

Loading thumbnail…

Fork of ICE8 - USA Map

This example renders a choropleth-style map of the United States using SVG, displaying state boundaries and national landmasses over a graticule grid. The visualization loads US Atlas TopoJSON data via `d3.json` and processes it with `topojson.feature` and `topojson.mesh` to extract land and interior borders. React components manage state and rendering, while `d3.geoAlbers` and `d3.geoPath` project the geographic coordinates. The map uses custom styling with distinct fills for land, sphere, and interiors, and includes a graticule layer for spatial reference.

RRamakanth771

89% 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

89% match

Loading thumbnail…

Fork of Fork of ICE8 USA Map

SSweetierams

89% match

Loading thumbnail…

Fork of Fork of ICE 8 - Country Map

This example displays a static map of the United States using state boundaries rendered as green SVG paths on a light blue background. The code employs D3 v4 with `d3.geoPath` and `d3.geoAlbersUsa` for projection, and reads TopoJSON data from the us-atlas package via `topojson.feature`. State shapes are drawn with stroke styling, and the map is centered using a manual translation offset within an SVG container.

Aamiralitah

89% match