Skip to main content
SimilarExport ZIP
100%

Dataviz 8 - World map

✓ Published0🌍 Public
RRyAlpha
Last edited Nov 25, 2021
Created on Nov 25, 2021

This example shows a world map rendered as an SVG, displaying country land masses in teal with graticule lines and country borders in contrasting colors. The visualization uses the Natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath` to draw the spherical Earth and its features. Geographic data comes from the world-atlas TopoJSON dataset, processed with `feature` and `mesh` from topojson. The React component `Marks` iterates over land features, while the sphere, graticules, and interiors are each rendered as distinct SVG paths with CSS-defined fills and strokes.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

World map

This example displays a static world map rendered with SVG, showing landmasses in teal, graticules as light gray lines, and country borders as strokes. The map uses the `geoNaturalEarth1` projection and `geoPath` from D3 v6, with land and interior boundary data derived from the world-atlas TopoJSON dataset. The visualization is built as a React component that loads the data via the `useData` hook and renders the map through the `Marks` component.

BbeauMarko
91% match
Loading thumbnail…

Dataviz 2020_Ep29 - 22. World Map

This example presents a world map in an SVG using the Natural Earth projection. The visualization shows landmasses in teal, a light gray sphere, and additional graticule and interior boundary lines. It translates TopoJSON data from the world-atlas package into GeoJSON features using the `topojson` feature and `mesh` functions, which are then rendered with `d3.geoPath` and `d3.geoGraticule`. Built with React and D3 v6, the map adapts to the full browser window size.

MMinwoo Pak
91% match
Loading thumbnail…

World Map

This example displays a world map rendered as SVG paths, showing landmasses in teal with country borders in darker teal, overlaid on a graticule grid and pale sphere background. It uses D3’s `geoNaturalEarth1` projection, `geoPath`, and `geoGraticule` to generate the geometric shapes, with TopoJSON `feature` and `mesh` extracting land and interior boundaries from the world-atlas dataset. The React component `Marks` maps each land feature to a path element, while the sphere and graticules are drawn first as base layers.

Aalexandermodell
91% match
Loading thumbnail…

World Map

This example shows a stylized world map rendered as an SVG, displaying land masses in teal with country borders drawn as interior lines, overlaid on a light gray sphere with graticule grid lines. It uses the `geoNaturalEarth1` projection and `geoPath` from d3-geo, with geographic data loaded from the World Atlas TopoJSON file via `topojson.feature` and `topojson.mesh`. The visualization is built with React, managing the data-fetching lifecycle in a custom `useData` hook and rendering the final map through the `Marks` component.

Ttharuta
91% match
Loading thumbnail…

World map

This example displays a world map using a natural Earth projection, rendering land masses, graticules, country borders, and the sphere outline as SVG paths. The visualization loads geographic data from the World Atlas TopoJSON using `d3.json` and converts it with TopoJSON’s `feature` and `mesh` utilities. React manages the fetched data through a custom `useData` hook, while the `Marks` component applies `geoNaturalEarth1`, `geoPath`, and `geoGraticule` from D3 to generate the map geometry. Styling via CSS distinguishes the land, sphere, interiors, and graticule layers.

Kkbrookshire420
90% match
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
90% match
Loading thumbnail…

World Map

This example presents a world map rendered as an SVG using a Natural Earth projection. Landmasses are filled in teal, country borders are drawn as interior mesh lines, and graticules overlay the sphere for geographic reference. The visualization loads topological data from the world-atlas package via `d3.json` and `topojson`, then converts it into GeoJSON features using `feature` and `mesh`. React manages the component lifecycle, while `d3.geoPath` and `geoNaturalEarth1` handle the projection and path generation for all map elements.

LLaura Johnson
90% match
Loading thumbnail…

World Map

This example shows a world map rendered with a Natural Earth projection, displaying landmasses in teal with graticule lines and country borders overlaid. The map is drawn as SVG paths using `d3.geoNaturalEarth1` and `d3.geoPath`, with geographic data loaded from the world-atlas TopoJSON dataset via `d3.json` and processed through `topojson.feature` and `topojson.mesh`. A React component orchestrates the visualization, applying CSS styling for the sphere, land, and boundary strokes.

AAmir
89% match