World Map v2

100%

✓ Published1🌍 Public

Last edited Nov 5, 2021

Created on Nov 5, 2021

This example displays a world map with cities plotted as points, using a natural Earth projection to render country boundaries, graticules, and a sphere outline. The visualization loads geographic data from a TopoJSON world atlas and city coordinates from a CSV file, then projects them using d3.geoNaturalEarth1 and d3.geoPath. React manages the component state and rendering, while d3.csv and d3.json fetch the datasets. The map is drawn entirely in SVG, with each city represented as a small circle positioned by its longitude and latitude.

AI-generated description

A program that uses data to render scatter plot graph of Iris sepal and petal data

MIT Licensed

Similar vizzes

Loading thumbnail…

World Map with City Points

This example displays a world map with cities plotted as points using a Natural Earth projection. The visualization renders landmasses, country borders, graticules, and a sphere outline, with semi-transparent teal circles representing city locations. Built with React and D3 v5, it uses `geoNaturalEarth1` and `geoPath` for geographic projection, TopoJSON for world atlas data, and CSV-loaded city coordinates. City points are positioned through `d3.geoPath`'s projection function, converting latitude and longitude into SVG circle positions.

SSam Hege

92% match

Loading thumbnail…

World Map

This example displays a natural Earth projection world map with graticule lines, country borders, and interior boundaries. City populations are plotted as semitransparent circles with radii scaled by the square root of population using `d3.scaleSqrt`. The visualization uses React hooks to load world atlas TopoJSON data and a CSV of global cities, converting them into GeoJSON features via `topojson.feature` and `topojson.mesh`. D3’s `geoNaturalEarth1` projection and `geoPath` render the SVG shapes.

Iiblub

92% match

Loading thumbnail…

World Map

This example presents a stylized world map rendered as an SVG. It displays country boundaries, graticules, and the Earth’s sphere, with city locations plotted as translucent points. The visualization uses the D3.js `geoNaturalEarth1` projection, `geoPath`, and `geoGraticule` APIs, along with React for component management. Geographic data is sourced from the World Atlas TopoJSON, and city coordinates are loaded from a CSV file. The map is styled with a clean, minimal aesthetic, highlighting land masses and interiors.

RRay Yang

91% match

Loading thumbnail…

World Map

This visualization displays a world map with city locations overlaid as semi-transparent dots. The map uses the Natural Earth projection via `d3.geoNaturalEarth1`, with graticules, land polygons, and country boundaries rendered through `d3.geoPath` and TopoJSON data from the world-atlas package. City coordinates from a CSV file are projected and drawn as SVG circles. The React component manages data loading with custom hooks, while D3 v5 handles geo and CSV parsing.

BBhavanaGIrni

91% match

Loading thumbnail…

Points on Map

This example displays a world map with city points overlaid, using a Natural Earth projection. The map shows country boundaries, graticules, and a sphere outline, with city locations plotted as circles. It uses d3.geoNaturalEarth1, d3.geoPath, and d3.geoGraticule to render the geographic features, while city data is loaded from a CSV via d3.csv. The visualization is built with React, rendering SVG elements, and uses TopoJSON from the World Atlas for country polygons and interior borders.

MMark Lam

91% match

Loading thumbnail…

Points on a Map

This example displays a world map with points marking cities, rendered as an SVG using D3’s geoNaturalEarth1 projection and geoPath. The map shows landmasses, graticules, and country borders from the world-atlas TopoJSON, while city locations from a CSV file are plotted as semi-transparent circles. React manages the component state, fetching the data with useWorldAtlas and useCities hooks, and the d3.geoPath calculates the projected coordinates for each circle.

Rrstrauss127

91% match

Loading thumbnail…

Worldmap with cities

This example displays a world map using a Natural Earth projection, with the landmasses rendered as gray polygons and graticules overlaid. City locations are plotted as semi-transparent circles, with their radius scaled by the square root of each city's population. Built with React, the visualization uses D3.js modules `geoNaturalEarth1`, `geoPath`, and `geoGraticule` for the map projections and graticule, while `scaleSqrt` maps population values to circle sizes. City data is loaded from a CSV file, and world atlas geometries are fetched as TopoJSON, which is processed through `topojson` functions.

DDaniel Zsido

91% match

Loading thumbnail…

Points on a map

This example displays a natural Earth projection world map with city locations plotted as semi-transparent teal circles. It loads world geography from the World Atlas TopoJSON and city coordinates from a CSV file. Using React hooks, it fetches both datasets and renders them as SVG elements. The map includes graticules, country boundaries, and interior borders, with cities positioned via the `d3.geoNaturalEarth1` projection and `d3.geoPath`. The visualization is built with D3 v6, React, and uses `d3.geoGraticule` for the background grid.

Ssurikmeetr

90% match