Skip to main content
SimilarExport ZIP
100%

World_Map_ICE_8

✓ Published0🌍 Public
Pprathyusha-reddy-arch
Last edited Apr 12, 2023
Created on Apr 12, 2023
Forked from HTML Starter

This example displays a world map using the Natural Earth projection, with landmasses filled in purple, a blue sphere background, graticules drawn in blue, and black lines marking country borders. The visualization is built with React and D3 v5, using `d3.geoNaturalEarth1` for projection and `d3.geoPath` to generate SVG paths. Geographic data comes from the World Atlas TopoJSON file, processed with `feature` and `mesh` from TopoJSON to render land and interior boundaries. The page includes a centered title and uses the Poppins font.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

World_Map_ICE_8

This example renders a world map using the Natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath` in an SVG. It displays land masses in light blue, graticules in blue, and country borders as black interior lines, all over a white sphere background. The map is generated from TopoJSON data loaded from the world-atlas package, with land features and country meshes extracted using `topojson.feature` and `topojson.mesh`. The visualization is built with React, where the data is fetched asynchronously and passed to a Marks component for rendering.

Ggayathrikavya
95% match
Loading thumbnail…

World_Map_ICE_8

This visualization renders a world map using the Natural Earth projection via d3.geoNaturalEarth1 and d3.geoPath, displaying land masses in purple, graticules in blue, and international borders in red. The map is drawn as SVG paths within a React component, with geographic data loaded from the world-atlas TopoJSON dataset and converted using topojson.feature and topojson.mesh. A white sphere background and graticule overlay provide cartographic context, while the React app manages asynchronous data loading with hooks.

Ssaishashank
93% match
Loading thumbnail…

World Map ICE 8

This example shows a world map rendered with a natural Earth projection, using a pink fill for landmasses and a dark blue sphere with cyan graticules. The map is built with React and D3, using `d3.geoNaturalEarth1` and `d3.geoPath` to project and draw geographic features. TopoJSON features are sourced from the `world-atlas` package, and interior borders are computed via its `mesh` function. The visualization displays both land features and internal country boundaries as SVG paths.

SSravyaAnnadi
93% match
Loading thumbnail…

World Map

This example displays a world map using the Natural Earth projection via D3.js (v5) and React. The visualization renders landmasses, a sphere outline, graticule lines, and interior boundaries as SVG paths, with D3’s `geoNaturalEarth1` projection and `geoPath` generating the geometry. The map is styled with a purple land fill and teal graticule/interior strokes, while the underlying data comes from the `world-atlas` package’s countries-50m GeoJSON topology, processed using `topojson`’s `feature` and `mesh` functions.

Bbsolomon103
92% match
Loading thumbnail…

World_Map

This example displays a world map using the Natural Earth projection, rendered with SVG paths. It visualizes landmasses in beige, ocean in blue, and includes graticule lines and country borders in contrasting colors. The visualization uses `d3.geoNaturalEarth1` and `d3.geoPath` to project geographic data loaded from the world-atlas TopoJSON dataset, with `topojson.feature` and `topojson.mesh` extracting land and interior boundaries. The map is built as a React component, with marks drawn using D3 v5.

SSurikanti Swathi
92% match
Loading thumbnail…

ICE-8 World map

This example displays a world map using the Natural Earth projection via d3.geoNaturalEarth1 and d3.geoPath. Landmasses are filled in DarkCyan, with graticules rendered in LightBlue and country borders drawn in black. The map is built with React, loading geographic data from world-atlas TopoJSON, using topojson.feature and topojson.mesh to extract land and interior boundaries. The visualization is rendered as SVG, with a Poppins font and an Eckert III projection noted in the HTML.

Vvagdevi-369
92% match
Loading thumbnail…

World Map - ICE8

This example presents a world map using the Natural Earth projection, rendered as an SVG with D3.js. Countries are drawn as paths using `d3.geoPath` and a `geoNaturalEarth1` projection, with a distinct sphere path representing the globe. The map is interactive, allowing users to zoom and pan via the `d3.zoom` API. Geographic data is loaded from a remote JSON file containing TopoJSON, which is converted to GeoJSON features using the `topojson` library. The visualization employs a brown background and a dark green sphere fill, with countries styled in a light beige.

Ggayuvurukuti@gmail.com
92% match
Loading thumbnail…

World map

This example displays a world map using the Natural Earth projection, with landmasses filled in blue and country borders drawn as interior lines. A gray graticule grid overlays the sphere, and the entire map is rendered as SVG. The visualization uses React to manage the component structure, D3’s `geoNaturalEarth1`, `geoPath`, and `geoGraticule` to compute projections and paths, and TopoJSON to convert country and land topology from the world-atlas dataset into GeoJSON features.

Rrvdv
92% match