Skip to main content
SimilarExport ZIP
100%

testingTer

✓ Published0🌍 Public
Zzeeeeem
Last edited Jan 3, 2023
Created on Jan 3, 2023

This example demonstrates a choropleth-style map of US state boundaries projected using the `geo-albers-usa-territories` projection from the `geo-albers-usa-territories` library. State outlines are rendered as SVG paths via `d3.geoPath`, with interior borders highlighted in a contrasting stroke color. The underlying data comes from US Atlas TopoJSON (states-10m.json), fetched and processed with `topojson.feature` and `topojson.mesh`. The React app loads the data asynchronously using a custom `useData` hook and displays a loading message until the map is ready.

AI-generated description

A demo of the geo-albers-usa-territories projection showing US State boundaries from US Atlas TopoJSON.

MIT Licensed

Similar vizzes

Loading thumbnail…

state map

This example displays a map of US state boundaries using the geo-albers-usa-territories projection, which extends the standard Albers USA projection to include US territories. The map renders state land areas in teal with lighter interior mesh lines separating adjacent states, drawn as SVG paths via `d3.geoPath`. React components manage the visualization, with `useData` fetching TopoJSON from the US Atlas repository and converting it to GeoJSON using `topojson.feature` and `topojson.mesh`. The code also defines a graticule with `d3.geoGraticule` for reference lines.

Bbhargavarathod
85% match
Loading thumbnail…

USA Map

This example displays a choropleth-style map of the 50 US states using the `geoAlbersUsaTerritories` projection from the `geo-albers-usa-territories` library. The visualization renders geographic data from `us-atlas@3.0.0` TopoJSON via `d3.geoPath` within a React component, using `feature()` and `mesh()` from `topojson` to generate land and interior boundaries. States are filled with a yellow color and outlined in black, while hovering on a state highlights it in green, as defined in the accompanying CSS. The map is drawn as SVG at 960×600 resolution, with a loading state displayed until data is fetched.

Aaashrithd4
85% match
Loading thumbnail…

Geo Albers with Territories Demo

This demo renders a map of US state boundaries using the geo-albers-usa-territories projection, which extends the standard Albers projection to include overseas territories. The visualization displays land areas in teal and state borders as thin strokes, with a graticule overlay available for geographic reference. The code loads TopoJSON data from the us-atlas package, converts it to GeoJSON using `topojson.feature` and `topojson.mesh`, then draws the paths with `d3.geoPath`. React manages the component state and rendering, while D3 handles data fetching and projection calculations.

CCurran Kelleher
84% match
Loading thumbnail…

Country Map

This example displays a choropleth map of the 50 US states, rendered as SVG paths with a blue fill and black state borders. The visualization uses the `geoAlbersUsaTerritories()` projection and `d3.geoPath()` to draw geographic features, while `useData` fetches TopoJSON data from the `us-atlas` package. State boundaries are generated via the `feature()` and `mesh()` functions from TopoJSON, and hovering highlights a state blue.

Rrakeshkommineni
83% match
Loading thumbnail…

GeoAlbers with Territories

This example displays US state boundaries using the geo-albers-usa-territories projection, which extends the standard Albers projection to include Alaska, Hawaii, and US territories. The map renders state outlines and interior borders as SVG paths, with land filled in teal and boundaries in a lighter contrasting stroke. The code loads US Atlas TopoJSON data and converts it to GeoJSON using `topojson.feature` and `topojson.mesh`. It builds the visualization with React components, `d3.geoPath` for projection and path generation, and `d3.geoGraticule` for the background graticules.

Ddanrhymes
83% match
Loading thumbnail…

Country Map

This example displays a choropleth-style map of the United States, with each state rendered as a green filled path and internal borders drawn in teal. It uses the `geoAlbersUsaTerritories` projection from the `geo-albers-usa-territories` package to show all states including territories. The geographic data comes from the `us-atlas` TopoJSON file, processed through TopoJSON’s `feature` and `mesh` functions. The visualization is built with React and D3’s `geoPath`, rendering purely as SVG elements within a 960x500 viewport.

Cchandrakalavanukuri
83% match
Loading thumbnail…

map: usa, counties

This example renders a choropleth-style map of the United States, displaying county and state boundaries overlaid on landmasses, with graticules and a sphere outline. It uses a React component with `d3.geoAlbersUsa` for projection and `d3.geoPath` for drawing geometries. Data comes from the US Atlas TopoJSON (`us-atlas@3.0.0/counties-10m.json`), processed with `topojson.feature` and `topojson.mesh`. Interactive tooltips show county and state names on hover. The SVG output is styled with semi-transparent fills and distinctive boundary strokes.

Zzach b.
83% match
Loading thumbnail…

Fork of USA Country Map

This example displays a choropleth-style map of the United States with state boundaries rendered as white lines on a black background. It uses the `geoAlbersUsaTerritories` projection from the `geo-albers-usa-territories` library to include U.S. territories, with state polygons and interior borders derived from the US Atlas TopoJSON files. The React component fetches the data via `useData`, converts it with `feature` and `mesh` from TopoJSON, and draws the map using `d3.geoPath` in an SVG.

Bbhargavarathod
82% match