ICE8 - USA Map

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

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

ICE8 - USA Map

Sshabbab01

ICE8 - USA Map

This example displays a choropleth-style map of the United States, using green landmasses against a pale blue sphere and bright blue state boundaries. It renders the nation’s exterior and internal state borders as SVG paths, with a graticule overlay for geographic reference. The visualization is built with React, pulling TopoJSON data from the us-atlas package, and relies on d3’s geoAlbers, geoPath, and geoGraticule APIs to project and draw the map.

LLakshmiVandanaNunna

ICE8 - USA Map

This example shows a map of the United States with state boundaries, rendered as SVG paths colored pink, a light green sphere backdrop, and grey interior borders. It loads TopoJSON data from the us-atlas package and projects it using d3.geoAlbers with d3.geoPath. The React component uses d3.json to fetch data and topojson.feature and topojson.mesh to extract land and interior boundaries. A graticule is generated via d3.geoGraticule but is not explicitly rendered in the output.

AAnanyaSamala

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

ICE8 - USA Map

This map of the United States uses an Albers equal-area projection to show state boundaries and landmasses. The visualization renders a static SVG using D3’s `geoAlbers`, `geoPath`, and `geoGraticule`, with React managing the component lifecycle. It loads topoJSON data from the us-atlas package, using `feature` for the nation outline and `mesh` for interior state borders. The land layer is filled with green, the sphere backdrop is pale blue, and state boundaries appear as black strokes, with styling defined in CSS.

TTharun Reddy

ICE-8 USA Map

This example shows a choropleth-style map of the United States, where land areas are filled in purple over a light blue sphere, with red state boundaries drawn on top. Using the Albers equal-area conic projection from d3.geoAlbers and rendering paths with d3.geoPath, the visualization displays both the nation outline and the mesh of state borders. The data is loaded from the us-atlas TopoJSON file, with geoGraticule available for graticule overlays, and the component is built with React and rendered as SVG.

Ssowmyanagula@my.unt.edu