Skip to main content
SimilarExport ZIP
100%

Dataviz 2020_Ep37 - 29. Using Size

✓ Published1🌍 Public
MMinwoo Pak
Last edited Jul 21, 2021
Created on Jul 21, 2021

This visualization displays global city populations using circles overlaid on a world map, with area encoding population size. The map uses natural Earth projection with graticules and land boundaries from TopoJSON. The data comes from a CSV of world cities with latitude, longitude, and population values. React manages the component state while d3.scaleSqrt maps population to circle radius, and d3.geoPath renders the geographic features. SVG circles are drawn with semi-transparent teal fill, and the rendering uses d3.json and d3.csv for data loading.

AI-generated description

A program that loads in some data about CSS named colors using D3 utilities, and uses React to render the data.

MIT Licensed

Similar vizzes

Loading thumbnail…

dv2020-ep37-viz39 - points on a map, using size

This visualization displays world cities as circles on an interactive map, with circle size encoding population using a square-root scale. The map uses a natural Earth projection rendered via `d3.geoPath`, with country borders, shorelines, and graticules from World Atlas TopoJSON data. City coordinates come from a Simplemaps CSV, filtered to populations above 50,000. React manages the component state, while D3 handles geographic projections, scaling, and SVG rendering.

Zzach b.
89% match
Loading thumbnail…

Using Size

This visualization displays a world map with circles sized by city population, using a square-root scale to encode magnitude with area. The map renders landmasses, interiors, graticules, and the sphere via d3.geoNaturalEarth1 and d3.geoPath, while d3.scaleSqrt maps population values to circle radii up to 15 pixels. Data comes from a CSV of world cities loaded with d3.csv, and the map uses TopoJSON from world-atlas. React manages the SVG rendering, with circles styled semi-transparent teal.

NNikhil Reddy Manda
89% match
Loading thumbnail…

Dataviz 10 - Points on map with sizes

A world map displays global cities with populations over 50,000, using circle size to encode each city’s population. The visualization uses a Natural Earth projection via `geoNaturalEarth1` and `geoPath` to render landmasses, country interiors, graticules, and a sphere backdrop. City coordinates are projected onto the map, and circle radii are scaled with `scaleSqrt` based on population data from Simplemaps. Built with React and d3.v5, the SVG rendering includes styled land, sphere, and interior boundary paths for a polished cartographic appearance.

RRyAlpha
89% match
Loading thumbnail…

City sizes on a Map

This visualization displays global city populations using circles plotted on a world map, with dot radius scaled by the square root of population via d3.scaleSqrt. It uses d3.geoNaturalEarth1 projection and d3.geoPath to render landmasses, graticules, and country interiors. React manages component state, while d3.csv and d3.json load city data from a gist and world-atlas TopoJSON. Circle opacity and fill are styled via CSS, showing cities over 50,000 inhabitants.

LLove Wessman
88% match
Loading thumbnail…

Sized Points on a Map

This visualization displays global cities with populations over 50,000 as semi-transparent circles on a natural Earth projection. Circle radius encodes population magnitude using a square-root scale, making larger metropolitan areas visually prominent. The map renders country boundaries, graticules, and sphere outlines via d3.geoNaturalEarth1, d3.geoPath, and d3.geoGraticule, while React manages the SVG markup. City data originates from Simplemaps, loaded through d3.csv, and geographical boundaries come from World Atlas TopoJSON, processed with topojson.feature and topojson.mesh.

MMari Roberts
87% match
Loading thumbnail…

Sized Points on a Map

This visualization displays global cities with populations exceeding 50,000 as semi-transparent circles sized proportionally to population using a square-root scale. The map uses a natural Earth projection, with country boundaries, interiors, and graticules rendered via d3.geoPath from TopoJSON world-atlas data. City coordinates are projected using d3.geoNaturalEarth1, with population data loaded from a Simplemaps CSV. The React component applies the size scale to each circle’s radius, creating an immediate visual comparison of urban population distribution across continents.

FFelipe Oyarzún Ramos
86% match
Loading thumbnail…

Sized Points on a Map

This example visualizes global population distribution by rendering sized circles for cities with populations exceeding 50,000. The visualization uses a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath` to draw countries, graticules, and interiors from World Atlas TopoJSON data. City positions are projected from latitude and longitude coordinates, with circle radii scaled by population using `d3.scaleSqrt`. The React component fetches city data from a Simplemaps World Cities CSV.

CClement Yan
86% match
Loading thumbnail…

Using Size

A world map displays cities with populations over 50,000, using circle size to encode population magnitude with a square-root scale. The map includes country boundaries, graticules, and a sphere outline, rendered as SVG via React. It uses `d3.geoNaturalEarth1` and `d3.geoPath` for projection, with data from the Simplemaps World Cities Database and World Atlas TopoJSON, processed through `topojson.feature` and `mesh`.

MMichael Bergerson
85% match