Skip to main content
SimilarExport ZIP
100%

Dataviz 2020_Ep29 - 22. World Map

✓ Published1🌍 Public
MMinwoo Pak
Last edited Jul 16, 2021
Created on Jul 16, 2021

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.

AI-generated description

A program that loads in some data about CSS named colors using D3 utilities, and uses React to render the data.

MIT Licensed

Similar vizzes

Loading thumbnail…

Ep. 29 - World Map

This example shows a world map rendered with a Natural Earth projection, displaying landmasses in teal with interior borders and a graticule overlay. It uses React with D3 v6, specifically `geoNaturalEarth1` for projection and `geoPath` for drawing SVG paths. The map data comes from the world-atlas TopoJSON dataset, processed with topojson’s `feature` and `mesh` functions to extract land polygons and country boundaries. The visualization is styled with a soft gray sphere background and contrasting land and graticule strokes.

YYee Han
91% match
Loading thumbnail…

Dataviz 8 - World map

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.

RRyAlpha
91% 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
89% match
Loading thumbnail…

World map

This example displays a world map using the Natural Earth projection, rendered as a static SVG. The visualization presents landmasses in a teal color over a light gray sphere, with graticule lines and interior boundaries drawn in contrasting strokes. Built with React and D3’s geoNaturalEarth1, geoPath, and geoGraticule functions, it layers the sphere, graticules, land features, and interior meshes. The data is sourced from the world-atlas TopoJSON, processed using the topojson library’s feature and mesh functions.

AAlex Stulov
89% match
Loading thumbnail…

world map

This example displays a world map rendered as an SVG using the Natural Earth 1 projection. Land masses appear in coral with pink country borders, while graticules and the sphere outline provide geographic context. The visualization fetches TopoJSON data from the World Atlas and converts it to GeoJSON using `topojson.feature` and `topojson.mesh`. React manages the component structure, while D3 utilities like `geoNaturalEarth1`, `geoPath`, and `geoGraticule` handle the projection and path generation. The code also loads data asynchronously via `d3.json`.

Aadapavaishnavi12
89% 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
Loading thumbnail…

World Map

This example renders a world map using a Natural Earth projection and SVG paths. The visualization displays landmasses in teal, national borders as thin lines, graticules, and a light gray sphere background. Data comes from the world-atlas TopoJSON dataset, processed with topojson.feature and topojson.mesh. The React component uses D3’s geoPath and geoGraticule to generate the geographic shapes, while the app dynamically sizes the SVG to fit the browser window.

Mmbooch22
89% match
Loading thumbnail…

dv2020-ep29-viz29 - world map 01

This example renders a world map using world-atlas TopoJSON data, converted to GeoJSON and drawn as SVG paths. The map shows countries filled in green, with red borders, blue shorelines, a glowing blue sphere, and semi-transparent red graticule lines. It uses d3.geoNaturalEarth1 for projection, d3.geoPath for path generation, and d3.geoGraticule for the grid, with projection.fitSize to scale the map to the viewport. React manages the component state and rendering.

Zzach b.
89% match