Fork of World_Map_ICE_8_2

100%

Fork of World_Map_ICE_8_2

✓ Published0🌍 Public

Last edited Apr 13, 2023

Created on Apr 13, 2023

This example renders a world map using the Eckert III projection, showing country boundaries as simple white-filled polygons with black outlines on a gray background. The visualization is built with React, which manages state and fetches GeoJSON country data from a CDN-hosted world atlas. D3.js version 5 handles the map projection and drawing through the `geoNaturalEarth1` and `geoPath` APIs, while the TopoJSON client converts the raw data into geographic features. The SVG output is styled with the Poppins font and presented in a fixed 900×500 viewport.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

World_Map_ICE_8

This example displays an interactive world map using the Eckert III projection, rendered as an SVG with React and D3 v5. It fetches geographic data from the world-atlas TopoJSON file and uses `d3.geoNaturalEarth1` with `fitSize` to project the map, while `d3.geoPath` draws the country boundaries. The code also includes support for switching to a U.S. counties view, using `d3.geoAlbersUsa` and the us-atlas dataset, though only the world map is activated by default.

CChandrashekharRamamuthi

92% match

Loading thumbnail…

Fork of World_Map_ICE_8

This example displays a world map rendered as an SVG using the Natural Earth projection. The visualization shows landmasses in a purple fill with red country borders and blue graticule lines over a white sphere, all generated with d3.geoPath. The code loads geographic data from a TopoJSON world atlas using d3.json and processes it with topojson.feature and topojson.mesh. React manages the component state through hooks, while the Marks component structures the SVG paths for each geographic layer.

SsreepavanKothapalli

91% match

Loading thumbnail…

Fork of World_Map_ICE_8

SsreepavanKothapalli

91% match

Loading thumbnail…

Fork of World_Map_ICE_8

This example renders a world map using the Natural Earth projection. Country borders are shown as yellow stroke lines, with landmasses filled in green on a white sphere with graticules drawn in black. The visualization uses D3’s `geoNaturalEarth1` and `geoPath` for geographic projections, and topojson’s `feature` and `mesh` to process world-atlas data from unpkg. React manages the SVG output, with marks defined in a dedicated `Marks.js` component.

Nnavyasrimeka9@gmail.com

91% match

Loading thumbnail…

Fork of World_Map_ICE_8

This is a world map visualization rendered with SVG, depicting country borders and interior boundaries. The map uses an Eckert III projection, with landmasses filled in a light purple and graticules drawn in blue. It displays countries from the world-atlas TopoJSON dataset, with internal boundaries between countries highlighted in red. The visualization is built using React and D3, employing `d3.geoNaturalEarth1`, `d3.geoPath`, and `d3.geoGraticule` for geographic projections and path rendering, while `topojson.feature` and `topojson.mesh` process the spatial data.

VVAbhiram99

91% match

Loading thumbnail…

Fork of World Map - ICE-8

This example shows a world map rendered in an SVG, with each country outlined in yellow against a blue background. It uses d3.geoPath with a geoNaturalEarth1 projection to convert geographic data into SVG paths. The country boundaries come from the world-atlas TopoJSON dataset, loaded via d3’s json function and processed with the topojson feature API. The map is static, displaying only land outlines without additional styling or interaction.

NNHRK555

90% match

Loading thumbnail…

Fork of ICE8 World Map

This example renders a world map using a Natural Earth projection via d3.geoNaturalEarth1 and d3.geoPath. Country boundaries are drawn as SVG paths from TopoJSON data loaded from a GitHub gist, with each country filled in teal and outlined with a faint red stroke. A light blue sphere path forms the globe’s background. The code uses d3.select, d3.json, and topojson.feature to process the geographic features.

KKolliTeja

89% match

Loading thumbnail…

Fork of World Map ICE 8

This example displays a world map with countries rendered in red on a yellow sphere, using a natural Earth projection. It loads world geography data from a JSON file via `d3.json` and processes the TopoJSON with `feature` from the `topojson` library. The map is drawn as SVG paths using `d3.geoPath` and `d3.geoNaturalEarth1`. The visualization is built with D3 v5 and React, with styling applied through CSS classes for the sphere and country paths.

Ssathwikrajidi

89% match