Skip to main content
SimilarExport ZIP
100%

World Map

✓ Published0🌍 Public
SShmuel Leider
Last edited Jun 6, 2021
Created on Jun 6, 2021

This example displays a world map with country land masses in teal, political borders in lighter strokes, and graticules over a gray sphere. It visualizes geographic boundaries from the world-atlas TopoJSON dataset, rendered as SVG paths using D3’s `geoNaturalEarth1` projection and `geoPath`. React manages the component state and data fetching via a custom hook, while TopoJSON’s `feature` and `mesh` methods prepare the land shapes and interior borders for display.

AI-generated description

A scatter plot of Data Canvas Sense your City Dataset using D3 utilities, and uses React render the data.

MIT Licensed

Similar vizzes

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

World Map

This example visualizes world countries with a natural Earth projection, displaying landmasses in teal, graticules as light gray lines, and country borders in a darker teal. The SVG rendering uses React state to load geographic data from the World Atlas TopoJSON file via `json` and `feature`/`mesh` from TopoJSON, then draws the sphere, graticule, land polygons, and interior borders with `geoNaturalEarth1`, `geoPath`, and `geoGraticule` from D3.

Yyejichun@naver.com
94% match
Loading thumbnail…

World Map

This example displays a world map rendered with SVG, showing landmasses, country borders, graticules, and a sphere outline. The visualization uses D3’s `geoNaturalEarth1` projection and `geoPath` to draw geographic features, with data loaded from the TopoJSON world-atlas dataset via `topojson.feature` and `topojson.mesh`. React manages the asynchronous data loading, and CSS styling separates land, interiors, graticules, and sphere appearances.

NNikita Toropov
93% match
Loading thumbnail…

World Map

A world map displays Earth’s landmasses in teal and grey, with country borders drawn as interior lines. The visualization uses a natural Earth projection via `d3.geoNaturalEarth1` and renders geometric paths with `d3.geoPath`, including graticules and a sphere outline. Geographic data comes from the World Atlas TopoJSON file, processed with `feature` and `mesh` from the topojson library. React manages the component structure, while D3 handles the SVG path generation within a fixed 960×500 viewport.

KK3zter
93% match
Loading thumbnail…

World Map

A world map visualization displays countries as teal landmasses with lighter graticules and interiors, rendered in SVG within a React component. It uses the `geoNaturalEarth1` projection via `d3.geoPath` to convert GeoJSON features, with `topojson.feature` and `topojson.mesh` processing the world-atlas TopoJSON data. Graticule lines and sphere outlines are drawn from D3’s `geoGraticule`, while CSS classes style the distinct map layers.

Uubik-valis
93% 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
93% 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
93% match