Map

100%

✓ Published0🌍 Public

Last edited Jul 9, 2022

Created on Jul 9, 2022

This map displays the United States with each state filled in orange on a blue background. Using the Albers equal-area conic projection, the visualization renders state boundaries from the us-atlas TopoJSON dataset via `d3.geoPath` and `topojson.feature`, with the SVG drawn inside a React application. The map uses a thin gray stroke for state borders and is centered within the viewport through a translate transform.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Map

This map displays the 50 states of the USA, using a purple fill for each state with black borders and a hover effect that turns states pink. It renders geographic data with `d3.geoPath` and the `geoAlbersUsaTerritories` projection, processing TopoJSON from the `us-atlas` package. The visualization is built with React and D3 v5, using `useData` to fetch and transform the data, and renders as an SVG via the `Marks` component.

KKusumaKumariDama@my.unt.edu

90% match

Loading thumbnail…

Country Map

This interactive map visualizes the fifty United States using a pink fill for each state and black borders, with a hover effect that changes the fill color to purple. Built with React and D3 v5, it renders geographic data as SVG paths using `d3.geoPath()` with the `geoAlbersUsaTerritories` projection. The code loads US state boundaries from a TopoJSON file via `us-atlas@3.0.0`, applying `feature()` and `mesh()` from TopoJSON to extract land polygons and interior borders.

TTejucmandava

89% match

Loading thumbnail…

US MAP

This interactive visualization displays a choropleth-style map of the United States, rendered as an SVG using React and D3 v5. The map shows state boundaries through purple interior lines, with land areas filled in green against a dark blue sphere background. The code employs `d3.geoAlbers` for the Albers equal-area projection, `d3.geoPath` to generate SVG paths, and `d3.geoGraticule` for grid lines. Geographic data comes from the `us-atlas` TopoJSON file, processed through `feature` and `mesh` from topojson library.

Ssiddu7147

89% match

Loading thumbnail…

US_Map

A choropleth-style map displays the contiguous United States with state boundaries, rendered in SVG using React. The visualization uses `d3.geoAlbers` for projection and `d3.geoPath` to draw geographic features, with `d3.geoGraticule` generating graticule lines. Land areas are filled pink, interiors stroked darkblue, and the sphere background is yellow, styled via CSS. Geographic data comes from the US Atlas TopoJSON, processed with `topojson.feature` and `topojson.mesh`.

AAkrutiKhurana2103

89% match

Loading thumbnail…

US Map

This example displays a map of the 50 US states, with each state filled in red and white borders separating them. The visualization uses the `geoAlbersUsaTerritories` projection and the `d3.geoPath` API to render geographic shapes as SVG paths. The map is generated from TopoJSON data loaded from a remote US atlas source, and it enhances interactivity by changing each state’s color to green when the pointer hovers over it.

Fferneyhoughedward@gmail.com

88% match

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

88% match

Loading thumbnail…

country map

This example displays a map of the United States with state boundaries, rendered as SVG paths using D3’s `geoAlbers` projection and `geoPath`. It shows land areas in blue, a graticule sphere in purple, and state interiors highlighted with yellow strokes. The map loads US Atlas TopoJSON data from jsdelivr, processes it with `topojson.feature` and `topojson.mesh`, and is built within a React component using the `geoGraticule` API to draw the graticule lines.

PPavaniMangugari

88% match

Loading thumbnail…

Country Map

This example displays a purple map of the United States with orange state boundaries. The visualization uses the `geoAlbersUsaTerritories` projection and `d3.geoPath` to render geographic features from a TopoJSON file. Built with React and D3 v5, the map is drawn as an SVG and hovered states change color from purple to blue-violet. The TopoJSON data is processed using `feature` and `mesh` from the TopoJSON library.

LLakshmipriya-kalapala

88% match