Skip to main content
SimilarExport ZIP
100%

Ep. 36 - Points on a Map

✓ Published1🌍 Public
YYee Han
Last edited Feb 6, 2022
Created on Dec 31, 2020
Forked from Ep. 29 - World Map

This visualization displays global city populations as scaled circles on a natural Earth projection, with a graticule, landmasses rendered in light gray, and semi-transparent teal points. It uses d3.geoNaturalEarth1 and d3.geoPath to project land and graticule features, while d3.scaleSqrt maps population values to circle radii. The map is built with React and SVG, fetching world atlas topology via d3.json and topojson, and city data from a CSV loaded with d3.csv. The rendering is set in a React component, styled via CSS classes.

AI-generated description

A scatter plot of Data Canvas Sense Your City Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Points on a Map

This visualization maps global cities as points on a natural Earth projection, with circle size encoding population. It uses React for rendering SVG elements, D3 v5 for geographical projections and scales, and loads world atlas TopoJSON data plus city CSV data from external URLs. The code employs d3.geoPath, d3.geoNaturalEarth1, and d3.geoGraticule to draw landmasses, graticules, and sphere outlines, while d3.scaleSqrt maps population values to circle radii.

LLawrence Liu
93% match
Loading thumbnail…

Points on a Map

This example visualizes global population distribution by plotting cities as semi-transparent points on a natural Earth projection map. The map includes graticules, landmasses, and country borders, with each circle’s radius scaled proportionally to its city’s population using `d3.scaleSqrt`. The visualization uses `d3.geoNaturalEarth1`, `d3.geoPath`, and `d3.geoGraticule` for geographic rendering, with React managing state and SVG elements for drawing. The underlying city data comes from the Data Canvas Sense Your City dataset, loaded via `d3.csv`, while world topology is fetched from the World Atlas TopoJSON file and processed with `topojson.feature` and `topojson.mesh`.

AAudrey
92% match
Loading thumbnail…

Points on a Map

This map visualization plots world city populations using circles projected onto a Natural Earth base. It uses D3 v5’s `geoNaturalEarth1` and `geoPath` to render landmasses, graticules, and country interiors, while a sqrt scale maps population values to circle radii. The React-based component loads city data from a CSV and renders SVG marks, using a world atlas TopoJSON for geographic context.

Ttrissentety
91% match
Loading thumbnail…

Points on a Map

This interactive map displays global city populations as semi-transparent circles on a natural Earth projection, with country boundaries and graticules. The visualization uses d3.geoPath to render the sphere, graticules, and landmasses from the World Atlas TopoJSON. City coordinates are projected using d3.geoNaturalEarth1, with circle radii scaled by d3.scaleSqrt based on population data from a CSV file. The map is built as a React application using SVG for rendering.

Ttharuta
91% match
Loading thumbnail…

Points on a Map

This visualization displays a world map with cities plotted as scaled circles representing population. The map uses the Natural Earth projection with graticules, country boundaries, and interiors rendered via D3's `geoPath` and `geoNaturalEarth1` projection. City positions come from a CSV file, and circle radii are scaled using D3's square-root scale (`scaleSqrt`) based on population data. The visualization is built with React and renders SVG marks, including land masses, a sphere outline, and graticule lines, all styled with a clean grayscale aesthetic.

Ccshm407
91% match
Loading thumbnail…

Points on a Map

This visualization displays a world map with circles representing the populations of cities, scaled using a square root scale from D3. The map, rendered as SVG in a React app, uses the D3 `geoNaturalEarth1` projection to place points. Geographic data comes from the world-atlas TopoJSON via `topojson.feature` and `topojson.mesh`, while city data loads from a CSV. The graticule, sphere, and land outlines are styled via CSS, and the semi-transparent teal circles have opacity set to 0.3.

Vvmonney
91% match
Loading thumbnail…

Points On A Map

This example displays global population data as scaled circles on a world map. Using the D3.js projection API `geoNaturalEarth1` and `geoPath`, it renders landmasses, graticules, and country interiors, while city points are positioned via the projection and sized with a square-root scale tied to population values. The visualization is built with React, uses the World Atlas TopoJSON dataset, and loads city data from a CSV file.

Tthomasjungcoe
91% match
Loading thumbnail…

Points on a Map

This visualization layers city population data onto a world map using a natural Earth projection. Semi-transparent green circles, sized with a square-root scale, represent each city’s population, with larger circles indicating more populous urban centers. The map includes geographic graticules, land masses, and country interiors rendered via `d3.geoNaturalEarth1` and `d3.geoPath`. The React app loads TopoJSON world-atlas data and CSV city coordinates through custom hooks, with map features styled distinctly in light grays.

Ww.fukuyama@gmail.com
91% match