Skip to main content
SimilarExport ZIP
100%

Map

✓ Published0🌍 Public
KKusumaKumariDama@my.unt.edu
Last edited Apr 3, 2024
Created on Apr 3, 2024
Forked from HTML Starter

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.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

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
92% match
Loading thumbnail…

USA Map

This interactive SVG map of the United States displays the 50 states colored purple, darkening to a lighter shade on hover. The visualization is built with React and D3.js, using the `geoAlbersUsaTerritories` projection and `d3.geoPath` to render geographic shapes from a TopoJSON file sourced from `us-atlas`. State interiors are drawn with a black stroke, and the data is loaded asynchronously using D3's `json` function and TopoJSON's `feature` and `mesh` utilities.

66264kusuma@gmail.com
91% match
Loading thumbnail…

USA Country Map

This map of the United States displays all 50 states using a pink fill with white boundaries, and hover interactions change each state’s color to purple. It is rendered as an SVG via React, using D3’s `geoPath` with the `geoAlbersUsaTerritories` projection. Geographic data for state land and interiors is loaded from a TopoJSON file using `useData`, `json`, and TopoJSON’s `feature` and `mesh`. The code imports `d3` and `topojson` packages within a React functional component.

Rrushithareddyy
91% match
Loading thumbnail…

Map

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.

DDINESH SAI BOPPANA
90% match
Loading thumbnail…

USA Map

This visualization displays the 50 U.S. states using a SVG map with land areas filled in olive and state borders in white. It uses the `geoAlbersUsaTerritories` projection and `d3.geoPath` to render geographic features from TopoJSON data sourced from the US Atlas. The map is built with React, employing the `useData` hook to asynchronously load and process the topology. Hovering over a state highlights it in orange, demonstrating interactive feedback.

DDeepa-Murugesan
90% 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
89% match
Loading thumbnail…

USA Country Map

This visualization displays a choropleth map of the 50 US states using a green fill, with white state borders and a purple hover highlight for individual states. It renders geographic data from a TopoJSON file using React and D3's `geoPath` with the `geoAlbersUsaTerritories` projection. The `feature` and `mesh` functions from TopoJSON extract land and interior boundary data, which are drawn as SVG paths within a React component.

BBhavanaGIrni
89% match
Loading thumbnail…

USA country map

This example displays a map of the 50 U.S. states, with each state filled in navy and black borders outlining state boundaries. Hovering over a state changes its fill color to purple. The visualization uses React for component structure and D3’s `geoPath` with the `geoAlbersUsaTerritories` projection to render geographic data as SVG paths. TopoJSON data from the `us-atlas` package is processed via `feature` and `mesh` functions to generate the land and interior boundaries.

HHarshavardhan
89% match