Skip to main content
SimilarExport ZIP
100%

Points on a map

✓ Published0🌍 Public
MMarco Malvicini
Last edited Apr 19, 2021
Created on Apr 19, 2021

This example displays a world map using a Natural Earth projection, with landmasses rendered in teal and the graticule and country borders drawn as cyan lines over a light gray sphere. The visualization loads GeoJSON data from the world-atlas TopoJSON file using `json()` and converts it with `feature` and `mesh` from topojson. React state stores the loaded data, while `geoNaturalEarth1` and `geoPath` from d3 generate the SVG paths for each geographic feature.

AI-generated description

A program that loads in some data using d3 utilities and use react state to store the data

MIT Licensed

Similar vizzes

Loading thumbnail…

Points on a Map

This example displays a natural Earth projection map with country boundaries, graticules, and city points overlaid as semi-transparent teal circles. The visualization uses d3.geoNaturalEarth1 and d3.geoPath to render landmasses and interior borders from World Atlas TopoJSON data, while a CSV of world cities is mapped through the projection to position each dot. The React component structure manages asynchronous data loading via useWorldAtlas and useCities hooks, with SVG rendering styled through CSS to create a clean, polished aesthetic.

Aaakarsh satyam
92% match
Loading thumbnail…

Points on a map

This example projects the world’s countries as SVG paths onto a Natural Earth projection using the `geoNaturalEarth1` projection and `geoPath` from D3 v7. It displays graticules and sphere outlines alongside landmasses, with a topological mesh of country borders drawn from the `world-atlas` dataset. The React app fetches TopoJSON, converts it to GeoJSON via `topojson.feature` and `topojson.mesh`, and styles the resulting shapes with CSS.

Rrvdv
92% match
Loading thumbnail…

World Map

This example displays a world map using a Natural Earth projection, rendering landmasses in teal with graticules and a light gray sphere background. Country borders appear as thin gray lines, with interiors drawn separately. The visualization loads GeoJSON from the world-atlas TopoJSON source, converting it with topojson’s `feature` and `mesh` APIs. React manages the component structure, while d3’s `geoNaturalEarth1`, `geoPath`, and `geoGraticule` handle projection, path generation, and grid lines. The SVG output is styled via CSS classes, with a loading state before data arrives.

KKtuzinowski
92% match
Loading thumbnail…

World Map

This example displays a world map using a Natural Earth projection, with landmasses rendered in teal and graticules drawn as light gray lines. It shows a sphere outline and country border lines derived from the world-atlas TopoJSON dataset. The visualization uses d3.geoNaturalEarth1 and d3.geoPath to project geographic features into SVG paths, while d3.geoGraticule generates the latitude and longitude grid. React handles rendering through a Marks component, and TopoJSON’s feature and mesh functions extract land polygons and interior boundaries from the source data.

Jj-PGi
92% 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
92% match
Loading thumbnail…

World Map

This example renders a world map using the Natural Earth projection, displaying country boundaries and graticule lines. The visualization shows landmasses filled with a teal color, country interiors outlined, and the sphere background in light gray. The code uses React for component structure and d3-geo functions like `geoNaturalEarth1` and `geoPath` to project and draw geographic features. TopoJSON data from the world-atlas package is loaded and converted to GeoJSON using `feature` and `mesh`.

Jjiro2017
92% match
Loading thumbnail…

World Map

This example displays a world map using the Natural Earth projection, showing landmasses in teal with country borders and graticules overlaid on a light gray sphere. The visualization fetches geographic data from the world-atlas TopoJSON dataset and converts it to GeoJSON using topojson’s `feature` and `mesh` functions. It renders with React and D3 v7, applying `geoNaturalEarth1`, `geoPath`, and `geoGraticule` to draw the map and its decorative overlays in SVG.

BBen Brophy
91% match
Loading thumbnail…

World map

This example displays a world map using a Natural Earth projection, showing landmasses in teal, graticules in gray, and country boundaries as lighter strokes. The visualization renders geographic data from the world-atlas TopoJSON dataset using React and D3 v6, with `d3.geoNaturalEarth1` and `d3.geoPath` projecting the features. The map fills the browser window and is drawn entirely as SVG paths, with a light gray sphere background and an italic Poppins font for the loading message.

BbeauMarko
91% match