Skip to main content
SimilarExport ZIP
100%

Fork of ICE 8 - Country Map_AK

✓ Published1🌍 Public
Aamulyakannam
Last edited Jul 10, 2022
Created on Jul 10, 2022

This example displays a map of the United States, rendered with orange state boundaries against a blue ocean background. The visualization uses D3 v4’s `d3.geoPath` and `d3.geoAlbersUsa` projection to draw the states from TopoJSON data loaded via `topojson.feature`. The map is positioned within an SVG container, with styling applied through CSS. The code reads the us-atlas states-10m dataset from a CDN and draws each state as a separate path element.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of ICE 8 - Country Map

This example displays a map of the United States with individual states rendered as green filled paths on a light blue background. It uses D3 v4 with the `d3.geoPath` and `d3.geoAlbersUsa` projection to convert TopoJSON data from the us-atlas package into SVG paths. The code loads state boundaries from a CDN, applies them via `topojson.feature`, and styles each state with a stroke and fill.

Aamiralitah
94% match
Loading thumbnail…

Fork of Fork of ICE 8 - Country Map

This example displays a static map of the United States using state boundaries rendered as green SVG paths on a light blue background. The code employs D3 v4 with `d3.geoPath` and `d3.geoAlbersUsa` for projection, and reads TopoJSON data from the us-atlas package via `topojson.feature`. State shapes are drawn with stroke styling, and the map is centered using a manual translation offset within an SVG container.

Aamiralitah
93% match
Loading thumbnail…

Fork of ICE 8 - Country Map

This fork of ICE 8 displays a map of the United States using SVG, with each state filled in green and outlined in dark gray against a light blue ocean background. The visualization loads US Atlas TopoJSON data via `d3.json` and converts it to GeoJSON features with `topojson.feature`. It projects the map using `d3.geoPath` with the `d3.geoAlbersUsa` projection, which centers the contiguous states while placing Alaska and Hawaii in insets. The code is built with D3 v4 and React.

Yyasmeenha
93% match
Loading thumbnail…

Fork of ICE 8 - Country Map

This example renders a choropleth-style map of the United States, showing state boundaries as green polygons on a light blue background. It uses d3.geoPath with a d3.geoAlbersUsa projection to draw the map, and topojson-client’s topojson.feature to extract state geometries from the us-atlas states-10m dataset. The SVG output is positioned with margins and styled entirely via embedded D3 attributes, with no interactive or hover behavior.

GGalineeharika
92% match
Loading thumbnail…

Fork of ICE 8 - Country Map

This example displays a static map of the United States with all states filled in red, rendered as SVG paths on a light green background. The map is generated using D3.js version 4, employing the `d3.geoPath` projection with the `d3.geoAlbersUsa()` projection function to properly center the contiguous states and Alaska. It loads GeoJSON state boundaries from the us-atlas dataset via `d3.json` and processes them with the topojson-client library to extract the state features. The visualization is a simple, non-interactive choropleth without additional data encodings.

GGalineeharika
92% match
Loading thumbnail…

Fork of ICE 8 - Country Map

This choropleth map of the United States displays state boundaries as green paths with dark gray strokes on a blue SVG canvas, emulating an ocean backdrop. The visualization uses `d3.json` to load state geometries from the us-atlas states-10m dataset, then projects them with `d3.geoAlbersUsa()` and renders paths via `d3.geoPath()`. Built with D3 v4 and topojson-client, it also uses the React framework for layout.

VVReddy913
91% match
Loading thumbnail…

Fork of ICE8-Country map

This map of the United States displays all 50 states using an orange fill, with black state borders, and highlights individual states in green on hover. It renders geographic data from a TopoJSON us-atlas file using React and D3, applying the `geoAlbersUsaTerritories` projection and `d3.geoPath` to draw the land and interior boundaries. The visualization uses SVG for rendering and loads data asynchronously via a custom React hook with `useState` and `useEffect`.

GGalineeharika
91% match
Loading thumbnail…

Fork of ICE8 - USA Map

This example displays a stylized map of the United States, showing state boundaries and graticules over a colored sphere. The visualization uses React with D3 v5 to fetch TopoJSON data from the us-atlas package, converting it to map features via the `d3.feature` and `topojson.mesh` APIs. It renders land masses in teal, interiors in blue, and graticule lines in gray using SVG paths generated by `d3.geoPath` and the `geoAlbers` projection.

Bbhargavarathod
91% match