Skip to main content
SimilarExport ZIP
100%

Fork of ICE 8 - Country Map

✓ Published0🌍 Public
GGalineeharika
Last edited Apr 10, 2023
Created on Apr 10, 2023

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.

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

Fork of Fork of ICE8 - USA Map

This example displays a choropleth-style map of the United States with state boundaries and graticules, rendered as SVG. The map uses a geoAlbers projection with d3.geoPath and d3.geoGraticule, while React manages the component state. Data comes from a TopoJSON file loaded via d3.json and processed with topojson.feature and topojson.mesh. The visualization shows state interiors in blue, land masses in green, and a light sphere background.

SShivaPriyad
94% match
Loading thumbnail…

Fork of ICE8 USA Map

This example renders a choropleth-style map of the United States using React and D3 v5. It displays land areas as red paths, state borders as green strokes, and a blue circle mark, all projected with the Albers equal-area projection (_geoAlbers_). The map loads TopoJSON data from the us-atlas states-10m.json dataset via _d3.json_, then converts it to GeoJSON features using the _topojson.feature_ and _topojson.mesh_ functions. The SVG output is generated through _d3.geoPath_ within a React component.

NNaimisha-M
94% match
Loading thumbnail…

Fork of ICE8 - USA Map

This choropleth-style map displays the United States with state boundaries and a shaded landmass, rendered as SVG paths within a React component. The visualization uses `d3.geoAlbers` and `d3.geoPath` to project and draw geographic features from TopoJSON data loaded via `d3.json` from the us-atlas repository. State borders are derived using `topojson.mesh`, while the land and sphere shapes are filled in contrasting colors. The map is displayed at 1000 by 600 pixels, with loading state handled through React hooks.

Bbhargavarathod
94% match
Loading thumbnail…

Fork of ICE8 - USA Map

This example displays a choropleth-free map of the United States rendered as SVG, using a light gray sphere background with white landmasses and dark interior borders. It loads TopoJSON data from a GitHub gist, converting it to GeoJSON via `feature` and `mesh` from topojson. The visualization employs React for component structure and state management, while D3’s `geoAlbers` projection and `geoPath` generate the geographic paths. The code also defines a graticule but does not render it in the final output.

GGalineeharika
94% match