Skip to main content
SimilarExport ZIP
100%

ICE8 USA Map

✓ Published0🌍 Public
Ggeethikal
Last edited Apr 10, 2023
Created on Apr 10, 2023
Forked from HTML Starter

A choropleth-style map of the United States renders each state as an SVG path, colored with a categorical scale and labeled with its name at the centroid. Hovering turns a state red via CSS. The code loads TopoJSON state boundaries from the us-atlas package and uses `d3.geoAlbersUsa` for projection, `d3.geoPath` to generate paths, and `d3.scaleOrdinal` with `schemeCategory10` for fill colors.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE8 USA Map

This example shows a choropleth-style map of the United States, with each state rendered as a red path that turns blue on hover and includes a tooltip with the state name. The map is drawn using D3’s `geoAlbersUsa` projection and `geoPath` generator, fed by TopoJSON state boundaries from the `us-atlas` dataset. The code uses `d3.json` to load the data, `topojson.feature` to extract geometries, and appends SVG paths with CSS-based hover styling.

SSyed Araib Karim
95% match
Loading thumbnail…

ICE8 USA Map

This visualization displays a choropleth map of the United States, with state boundaries drawn as SVG paths. The code uses D3 v5’s `geoAlbersUsa` projection and `geoPath` to render geographic features from TopoJSON data loaded from the us-atlas repository. Each state shape is colored with a default fill, and hovering changes the fill color via CSS. State names appear as tooltips using SVG `title` elements, sourced from the TopoJSON feature properties.

BBVNPK001
94% match
Loading thumbnail…

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

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

ICE8 USA Map

This example displays a choropleth-style map of the United States, with each state filled in green and outlined in a semi-transparent orange. It shows the geographic boundaries of all 50 states, highlighting them in red on hover. The visualization uses the D3 v5 library with `d3.geoPath` and `geoAlbersUsa` projection, rendering the map as SVG paths from TopoJSON data loaded from the us-atlas repository. The `states-10m.json` file provides the geographic features, and the `geo-albers-usa-territories` plugin enables territory inclusion.

AAmanullah007
93% match
Loading thumbnail…

ICE8 - USA Map

This example displays a choropleth-style map of the United States with state boundaries and graticules rendered as SVG paths. The map uses the Albers USA projection via `d3.geoAlbers` and `d3.geoPath`, with `d3.geoGraticule` for the background grid. Data comes from the US Atlas TopoJSON file, processed with `feature` and `mesh` from topojson to create land and interior state borders. React manages the component state and rendering, while CSS styles the land as green and the interior borders as red.

AArv1228
93% match
Loading thumbnail…

ICE 8 United States Map

This example renders a choropleth-style United States map using SVG paths generated from TopoJSON data. It uses D3’s `geoAlbersUsa` projection and `geoPath` to convert geographic features into drawable paths, with light blue fills and grey borders. The map is built within a React application, though the visualization itself is handled imperatively by D3 v5, which appends the SVG elements directly to the document body. The source JSON comes from a remote gist containing US state boundaries.

Ddivyageethanjali
93% match
Loading thumbnail…

ICE 8 - Country Map

This example displays a choropleth map of the United States, rendering each state as a green SVG path against a light blue background to represent the ocean. The map is generated using React and D3 v4, employing `d3.geoPath` with a `d3.geoAlbersUsa` projection to position states accurately, including Alaska. State boundaries are drawn from TopoJSON data loaded from the us-atlas package via `topojson.feature`. The SVG is styled with a stroke for borders and a consistent fill color for all states.

DDaniel Mata
93% match