Skip to main content
SimilarExport ZIP
100%

Fork of Centered US Map

✓ Published0🌍 Public
Hhusseng96
Last edited Mar 26, 2023
Created on Mar 26, 2023
Forked from Centered US Map

This example displays a stylized map of the United States with state boundaries, rendered in an SVG using React. It loads geographic data from the US Atlas TopoJSON via `d3.json` and uses `topojson.feature` and `topojson.mesh` to extract land and interior borders. The `d3.geoAlbers` projection and `d3.geoPath` draw the shapes, with `d3.geoGraticule` defined but unused in the final marks. The map is colored with teal land, a light blue sphere, and purple state boundaries, showcasing a clean, polished visual style.

AI-generated description

A US map showing states boundaries from US Atlas TopoJSON, polished for visual style, including graticules.

MIT Licensed

Similar vizzes

Loading thumbnail…

Centered US Map

This example displays a centered map of the United States with state boundaries, rendered as an SVG using React. It loads geographic data from the US Atlas TopoJSON and projects it with `d3.geoAlbers` and `d3.geoPath`, while `d3.geoGraticule` draws latitude and longitude grid lines. The map includes a blue sphere background, green landmasses, and state interiors highlighted with a contrasting stroke, all styled via CSS classes. The code initializes the visualization with a `useUsAtlas` hook that fetches and processes TopoJSON features and meshes.

Yyuzhang21
92% match
Loading thumbnail…

Fork of USA Map

This example displays a filled map of the United States with orange sphere background, green land areas, and black state borders. It uses React with D3 v5 to load US Atlas TopoJSON data and render SVG paths through `d3.geoPath` with an Albers projection. The code applies `d3.geoGraticule` for grid lines and `topojson.mesh` to draw interior boundaries between states.

Bbhargavarathod
90% match
Loading thumbnail…

Fork of Polished World Map

This example displays a map of U.S. states filled with a teal color, rendered as SVG paths inside a React component. It uses the `d3.geoAlbersUsa` projection and `d3.geoPath` to convert TopoJSON state boundaries from the `us-atlas` dataset into visible shapes. The map is drawn within a React app that loads the data asynchronously via `useEffect` and the D3 `json` function, while the `topojson.feature` API extracts the state geometries.

Hhasti khajeh
90% match
Loading thumbnail…

Fork of Country map

This example displays a map of the United States with its individual states filled in sky blue and state boundaries drawn in teal. It uses the `geoAlbersUsaTerritories` projection and `geoPath` from d3 to render geographic shapes as SVG paths, with data from the US Atlas TopoJSON. React manages the component state, loading the topology via `useData` and `topojson.feature` and `topojson.mesh` to extract land and interior boundaries.

SSaiSree0122
89% match
Loading thumbnail…

Centered US Map

This example displays a centered map of the United States with state boundaries highlighted in blue over a green landmass, set against a graticule grid and a light blue spherical backdrop. Using React and D3 v5, the visualization loads US Atlas TopoJSON data and converts it to GeoJSON features via topojson’s `feature` and `mesh` functions. The map is rendered through SVG paths generated by `d3.geoPath` with a `geoAlbers` projection, while `geoGraticule` creates the background grid lines.

Yyuzhang21
89% match
Loading thumbnail…

Fork of USA Country Map

This example displays a choropleth-style map of the 50 US states, rendered as an SVG where each state boundary is drawn using D3’s `geoPath` and a custom `geoAlbersUsaTerritories` projection. The map initially fills each state with a teal color, and hovering over a state highlights it in magenta. Data is loaded asynchronously from the US Atlas TopoJSON file (`states-10m.json`) using React hooks (`useState`, `useEffect`) and processed with TopoJSON’s `feature` and `mesh` functions to generate land and interior borders. The visualization is built with React 16 and D3 v5, with styling defined in an external CSS file.

Ttejaswikalluri05
89% match
Loading thumbnail…

Centered US Map

This map of the United States uses a centered Albers projection, colored land and interior state boundaries against a graticule-filled sphere. The visualization is built with React, using D3's `geoAlbers`, `geoPath`, and `geoGraticule` functions to render the SVG paths. Topological data is loaded from the `us-atlas` package, and the `topojson` library's `feature` and `mesh` functions extract the nation and state-boundary geometries for display.

Yyuzhang21
88% match
Loading thumbnail…

Centered US Map

This map of the United States uses a centered Albers projection, colored land and interior state boundaries against a graticule-filled sphere. The visualization is built with React, using D3's `geoAlbers`, `geoPath`, and `geoGraticule` functions to render the SVG paths. Topological data is loaded from the `us-atlas` package, and the `topojson` library's `feature` and `mesh` functions extract the nation and state-boundary geometries for display.

Yyuzhang21
88% match