Skip to main content
SimilarExport ZIP
100%

ICE8_CountryMap

✓ Published0🌍 Public
Ssrividya-bachina
Last edited Mar 30, 2023
Created on Mar 30, 2023
Forked from ICE8_WorldMap

This example renders a choropleth-style map of the United States using React and SVG. It loads US state topology from a remote TopoJSON file via `d3.json`, then converts it to GeoJSON features and an interior mesh using `topojson.feature` and `topojson.mesh`. The map is drawn with `d3.geoPath` and the custom `geoAlbersUsaTerritories` projection, styling land areas cyan and state boundaries black, with a green hover effect on individual states.

AI-generated description

An example showing the capabilities of VizHub:

  • Loads D3 via UNPKG.
  • Demonstrates use of import from "d3".
  • Demonstrates use of import from local ES6 modules.
MIT Licensed

Similar vizzes

Loading thumbnail…

ICE-8 country map

This example displays a choropleth-style map of US states rendered as an SVG using React and D3 v5. The map shows state boundaries with sky-blue land fills and green interior borders, built from a TopoJSON file fetched via `d3.json`. The code uses `geoAlbersUsaTerritories` for projection and `d3.geoPath` to generate paths, while `topojson.feature` and `topojson.mesh` extract land and interior outlines from the dataset.

Ssumitradevipolina
95% match
Loading thumbnail…

ICE8_CountryMap

This example renders a choropleth-style map of the United States using D3 v4 and TopoJSON, with each state drawn as a blue SVG path with cyan strokes on an orange background. The code loads state boundaries from the us-atlas TopoJSON dataset, converts them to GeoJSON features via `topojson.feature`, and projects them using `d3.geoAlbersUsa`—a projection that repositions Alaska below the contiguous states. SVG paths are generated through `d3.geoPath`, with explicit margin settings and a translate transform to center the map within the viewport.

RRahulSai05
93% match
Loading thumbnail…

ICE-8 country map

This example displays a choropleth-style map of the United States using an Albers USA projection with territories via `geo-albers-usa-territories`. The visualization renders land polygons in sky blue and state boundary interiors in green, with the path geometries generated by `d3.geoPath`. React manages the component structure, while `d3.json` loads the TopoJSON data and `feature` and `mesh` from the `topojson` library extract the land and interior boundaries. The map focuses on geographic shape rather than quantitative values, using a simple two-color scheme for clear visual separation.

SSharmilaChowdhari
93% match
Loading thumbnail…

ICE-8 USA Map

This example displays a choropleth-style map of the United States with state boundaries and a blue spherical background. The visualization uses `d3.geoAlbers` and `d3.geoPath` to project and render geographic features from a TopoJSON dataset loaded via `d3.json` from the us-atlas repository. State interiors are drawn as red mesh lines using `topojson.mesh`, while the land mass appears in light green. The React component `CountryMap` constructs the SVG paths, with the map rendered at 1800 by 550 pixels.

PPallaviManupati
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…

ICE8 - USA Map

This example renders a polished map of the United States using D3’s `geoAlbers` projection and `geoPath` to draw state boundaries and graticules. TopoJSON data from the US Atlas (`states-10m.json`) is loaded via `d3.json`, with `feature` and `mesh` extracting land and interior borders. React manages the SVG output, styling the land in white, sphere in blue, and interiors in red. The visualization highlights geographic boundaries with a clean, minimal aesthetic.

Sshabbab01
92% match
Loading thumbnail…

ICE8 - USA Map

This example renders a polished map of the United States using D3’s `geoAlbers` projection and `geoPath` to draw state boundaries and graticules. TopoJSON data from the US Atlas (`states-10m.json`) is loaded via `d3.json`, with `feature` and `mesh` extracting land and interior borders. React manages the SVG output, styling the land in white, sphere in blue, and interiors in red. The visualization highlights geographic boundaries with a clean, minimal aesthetic.

Sshabbab01
92% 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
92% match