Sized Points on a Map

100%

Sized Points on a Map

✓ Published0🌍 Public

Last edited Dec 4, 2019

Created on Nov 18, 2019

This example displays a world map with circles sized and colored according to the number of cultural heritage objects associated with each country. The code uses `d3.geoMercator` for projection, `d3.geoPath` to render country boundaries, and `d3.scaleSqrt` for circle radii based on data from a SPARQL query. Hovering enlarges a circle and shows a tooltip with the country name and object count, while a dropdown filters by material category. A legend and zoom functionality are also included.

AI-generated description

A world map showing cities with population greater than 50,000. City data from Simplemaps: World Cities Database.

Country boundaries from World Atlas TopoJSON, polished for visual style, including graticules.

MIT Licensed

Similar vizzes

Loading thumbnail…

Sized Points on a Map

This example displays a world map with circles sized by population for cities exceeding 50,000 residents. It uses a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath` to render landmasses, graticules, and interiors. City data is loaded from a CSV using `d3.csv`, with circle radii scaled by a square root scale (`d3.scaleSqrt`). The visualization is built with React and rendered as SVG, styled with soft teal, semi-transparent points.

SSam

82% match

Loading thumbnail…

Sized Points on a Map

This example displays a world map with circles sized proportionally to city populations, using data from the Simplemaps World Cities Database. The map renders geographic features with d3.geoNaturalEarth1, d3.geoPath, and d3.geoGraticule, while country boundaries load from World Atlas TopoJSON. City points are placed via projection coordinates and scaled with d3.scaleSqrt, all built within a React component using SVG. The visualization includes graticules and styled land, sphere, and interior paths for a polished cartographic look.

GGustavoRiveraM

82% match

Loading thumbnail…

Sized Points on a Map

This example displays a world map with circles sized proportionally to city populations, using a square root scale to encode population values. The visualization renders geographic landmasses, graticules, and interiors via D3’s `geoNaturalEarth1` projection and `geoPath`, while city points are positioned with the same projection. Data comes from a Simplemaps CSV of cities with populations over 50,000, and country boundaries from TopoJSON’s world-atlas. React manages the component state, and SVG circles use a max radius of 15 pixels with a teal fill.

RRochelle

81% match

Loading thumbnail…

Sized Points on a Map

This visualization shows a world map with cities as sized points, where each circle’s radius reflects population using a `scaleSqrt` in d3. It renders a natural Earth projection with `geoNaturalEarth1` and `geoPath` for country boundaries, interior borders, and graticules. City coordinates are projected from longitude and latitude, with population data loaded via `d3.csv` from a Simplemaps dataset. The React-based code uses reusable `Marks` components, while SVG circles are semi-transparent to reveal overlapping urban areas.

GGiovanni Kaaijk

81% match

Loading thumbnail…

Sized Points on a Map

This visualization displays a world map with circles sized proportionally to city populations, using data from Simplemaps and country boundaries from World Atlas TopoJSON. The map is rendered with SVG and React, employing d3.geoNaturalEarth1 and d3.geoPath for geographic projections, while a d3.scaleSqrt maps population values to circle radii. The visualization includes graticules and land/interior boundaries, with semi-transparent teal circles marking cities with populations over 50,000.

Ggilbertlmw

81% match

Loading thumbnail…

Sized Points on a Map

This visualization displays a world map with circles sized by city population, using a square-root scale to encode magnitude. The map includes landmasses, graticules, and country interiors rendered via d3.geoPath and a geoNaturalEarth1 projection. City coordinates and population data come from a CSV dataset, with React managing the component lifecycle and d3.v5 handling data loading and scaling. Semi-transparent teal circles are positioned using the projection and scaled up to a maximum radius of 15 pixels.

KKhalid

81% match

Loading thumbnail…

Visualizing transformed data

A world map visualizes geographic locations of cultural heritage objects, with each country’s data points appearing as colored circles that animate onto the map with a bouncing effect. The visualization queries a SPARQL endpoint for latitudinal and longitudinal coordinates, cleans and nests the data by country using `d3.nest`, and renders the map with `d3.geoPath` and `topojson.feature`. Circle positions are projected via `d3.geoNaturalEarth1`, while ordinal scales and transitions control color and staggered entry timing.

RRoyCsuka

81% match

Loading thumbnail…

Sized Points on a Map

This visualization shows a world map with cities colored by population, using sized points where larger circles represent more populous cities. The map displays graticules, sphere outlines, and country boundaries with interior borders for clarity. Built with React and D3 v5, it uses `geoNaturalEarth1` projection and `geoPath` for rendering the map, while a `scaleSqrt` function maps city populations to circle radii. City data comes from Simplemaps World Cities Database, with country boundaries from World Atlas TopoJSON, all rendered as SVG elements.

Ssophburke

81% match