Skip to main content
SimilarExport ZIP
100%

dv2020-ep29-viz29 - world map 01

✓ Published1🌍 Public
Zzach b.
Last edited Mar 20, 2023
Created on Mar 20, 2023

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.

AI-generated description

world map using world atlas, natural earth map data.

Episode 29

MIT Licensed

Similar vizzes

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

World map

This example shows a world map rendered as an SVG with countries filled in green, oceans in light blue, graticules as light gray lines, and interior borders in dark gray. The visualization uses the D3 geoNaturalEarth1 projection with d3.geoPath to draw the sphere, graticule, land, and country boundaries from TopoJSON data sourced from the world-atlas package. The React component fetches the TopoJSON with d3.json and converts it using the topojson feature and mesh functions.

TTaylor
88% match
Loading thumbnail…

World Map

This example presents a world map rendered as SVG, showing continents as filled green shapes against a light gray sphere, with graticule lines and country borders drawn in subtle gray and teal strokes. The map uses the `d3.geoNaturalEarth1` projection and `d3.geoPath` to draw geographic features, while `topojson` and the `json` API load and convert the World Atlas TopoJSON data. All visual elements are styled via CSS classes within the React-based rendering.

OOleg Zhernovoy
88% match
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
88% 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
88% match
Loading thumbnail…

World map less. 29

A world map rendered in SVG displays landmasses in teal, with interiors highlighted in cyan and graticules in gray over a light blue sphere. The visualization loads GeoJSON from the World Atlas TopoJSON dataset, converting it via `topojson.feature` and `topojson.mesh`. Using React hooks and `d3.geoPath` with a `geoNaturalEarth1` projection, the map draws countries and boundary lines through the `Marks` component, with styling applied via CSS classes.

Ssurikmeetr
87% match
Loading thumbnail…

react d3 world map

This example renders a natural Earth projection world map using React and D3 v7. It displays landmasses in teal, country borders as interior lines, graticules, and a blue sphere background, all drawn as SVG paths via `d3.geoNaturalEarth1`, `d3.geoPath`, and `d3.geoGraticule`. Geographic data comes from the World Atlas TopoJSON dataset, processed with TopoJSON’s `feature` and `mesh` functions. The React component loads the data asynchronously and conditionally renders the map once available.

MMalcolm Mead
87% match
Loading thumbnail…

World Map

This example shows a world map rendered as an SVG using React and D3. The map displays land masses in blue, interiors in a lighter stroke, and a graticule grid over a pale sphere. It sources TopoJSON country data from the world-atlas package, then uses d3.geoPath with a geoNaturalEarth1 projection to draw the features. The visualization highlights the contrast between land areas, interior boundaries, and the graticule lines, creating a clean, stylized representation of the Earth.

SShuyu Zheng
87% match