Skip to main content
SimilarExport ZIP
100%

World Map

✓ Published0🌍 Public
TTousifAhamed
Last edited Sep 23, 2021
Created on Sep 22, 2021

This visualization shows a world map with landmasses in teal, graticules, and country interiors outlined in a lighter shade. It uses the Natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath` to render geographic features. The data is loaded from the World Atlas TopoJSON file using `d3.json` and processed with `topojson.feature` and `topojson.mesh` to distinguish land from country borders. Render is done with React in SVG, applying distinct CSS classes for land, sphere, graticules, and interiors.

AI-generated description

A scatter plot of Data Canvas Sense Your City Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

World map

This visualization presents a world map with landmasses filled in teal, displayed on a light gray sphere with subtle graticule lines, and highlighted country borders. It is constructed with React, using d3’s `geoNaturalEarth1` projection and `geoPath` to draw the geographic features. The data comes from a TopoJSON file loaded from the world-atlas package, processed with the topojson `feature` and `mesh` functions. The map is rendered as an SVG, with styles defined in CSS for the land, sphere, and graticules.

MmohitPassan
96% match
Loading thumbnail…

World Map

This visualization displays a world map using an SVG projection, with landmasses filled in teal, graticules in light gray, and country borders drawn as interior lines. The map is rendered with React and D3 v5, using `d3.geoNaturalEarth1` for the projection, `d3.geoPath` to generate paths, and `d3.geoGraticule` for the grid. Geographic data comes from the World Atlas TopoJSON file, which is loaded via `d3.json` and processed with `topojson.feature` and `topojson.mesh`. A subtle sphere outline frames the map against a neutral background.

Vvmonney
95% match
Loading thumbnail…

World Map

This visualization displays a world map using the Natural Earth projection, showing landmasses in teal with graticules and country borders overlaid in contrasting strokes. The example demonstrates geographic mapping with React and D3 v5, utilizing `geoNaturalEarth1` for projection and `geoPath` for rendering shapes. Data comes from the World Atlas TopoJSON dataset (countries-50m.json), processed through `topojson.feature` and `topojson.mesh` to extract land polygons and interior boundaries. The SVG output includes a sphere outline, graticule grid, land fills, and interior borders, with a loading state while fetching data.

LLuke Hayes
95% match
Loading thumbnail…

World Map

This example shows a world map rendered with landmasses in teal and country borders in a lighter teal, overlaid with graticules and a sphere outline. The visualization uses a Natural Earth projection via `geoNaturalEarth1` and `geoPath` from D3 to draw geographic features. TopoJSON data from the world-atlas package is loaded with `d3.json` and converted to GeoJSON using `feature` and `mesh`. React manages the component structure, and the map is rendered as SVG elements styled with CSS.

CCarlos Caballero
95% match
Loading thumbnail…

World Map

This visualization displays a world map using the Natural Earth projection, with land masses rendered in teal and graticules shown as subtle gray lines. The code uses `d3.geoNaturalEarth1` for the projection, `d3.geoPath` to render geographic features, and `d3.geoGraticule` for the grid. Country borders are drawn as interior lines using TopoJSON’s `mesh` function. The map loads geographic data from the world-atlas TopoJSON file and renders it as SVG within a React component, styled to focus on land versus ocean contrast.

Aaakarsh satyam
95% match
Loading thumbnail…

World Map

This world map visualization displays global landmasses and interiors using a natural Earth projection, with graticule and sphere outlines for context. The example leverages React and D3 v7, specifically `d3.geoNaturalEarth1` for projection and `d3.geoPath` for rendering paths, while `topojson` features and meshes supply the geographic data. Land areas are filled in teal, with interior boundaries in a lighter shade, all rendered as SVG paths. The data originates from the World Atlas TopoJSON dataset.

JJun Suzuki
95% match
Loading thumbnail…

World Map

This visualization displays a world map using a natural Earth projection, with landmasses rendered in teal against a light gray sphere and graticule grid lines. The map also highlights country borders through interior mesh strokes. Built with React and D3 v7, the code uses d3.geoNaturalEarth1, d3.geoPath, and d3.geoGraticule to project and draw geographic features. TopoJSON data from the world-atlas package is loaded and processed with topojson.feature and topojson.mesh to extract land polygons and interior boundaries.

Aahora
95% match
Loading thumbnail…

World map

This example visualizes a world map with landmasses in teal, graticules in gray, and country interiors highlighted with a contrasting stroke. The map is rendered as an SVG using React components. The data is sourced from the world-atlas TopoJSON dataset, and the code utilizes d3's `geoNaturalEarth1` projection, `geoPath`, and `geoGraticule` to generate the geographic shapes and grid lines. The `topojson` library's `feature` and `mesh` functions extract the land and interior boundaries from the topology. The visualization also includes a sphere background to frame the map.

BBenjamín Salas Sadler
95% match