Skip to main content
SimilarExport ZIP
100%

Circles on a Map

✓ Published0🌍 Public
Hhannahwilson2
Last edited Nov 27, 2020
Created on Nov 27, 2020
Forked from HTML Starter

This visualization displays global population data for 2018 as colored circles positioned on a natural Earth projection map. Countries are shaded with a spectral color scale, while circle size encodes population magnitude using a square-root scale. The code loads CSV and TopoJSON data with d3.csv and d3.json, then renders the map using d3.geoPath and d3.geoNaturalEarth1, with circles placed via d3.geoCentroid and scaled by d3.scaleSqrt.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Circles on a Map

This visualization displays global population data for 2018 as circles on a natural Earth projection map. Countries without data are shown in one color, while those with data use a square-root size scale to encode population magnitude. The code uses d3.geoPath for map rendering, d3.geoCentroid for positioning, and d3.scaleSqrt for circle sizing. Data comes from a CSV file joined with TopoJSON world atlas features, with interactive zoom via the d3.zoom API.

TTaheniataallah
95% match
Loading thumbnail…

Circles on a map

This visualization displays global population data for 2018 using circles overlaid on a natural Earth projection map. The circles, sized with a square root scale, represent population magnitudes, while a legend explains the scaling. A color legend and interactive zooming are also included. The code uses D3 v5 APIs like `geoPath`, `geoNaturalEarth1`, `scaleSqrt`, and `topojson.feature`, with data loaded from a CSV file and a TopoJSON world atlas. The visualization is rendered as an SVG within a React framework.

Vvic126
94% match
Loading thumbnail…

Circles on a Map

This visualization displays global population data for the year 2018, using sized circles positioned on a natural Earth projection map. Countries are colored green or red to indicate whether they have available data. The circles are scaled using `scaleSqrt()` to map population values to radii. The code uses `geoPath` with `geoNaturalEarth1()` for the map projection, and loads data from a CSV file merged with TopoJSON world atlas features.

Ccheeson
94% match
Loading thumbnail…

Circles on a Map

This visualization displays global population data for 2018, using a natural Earth projection with circles sized by population at each country’s centroid. Countries with missing data appear in light red, while mapped regions are gray and populating circles use a teal fill. The map supports zooming via d3.zoom, and the code employs d3.geoPath for rendering country boundaries, d3.scaleSqrt for circle sizing, and d3.scaleOrdinal with a spectral scheme for the color legend. Data comes from a CSV file joined to TopoJSON world geometries, with both size and color legends implemented as reusable D3 modules.

Ffbudwill
94% match
Loading thumbnail…

Circles on a Map

This visualization displays global population data for 2018 by projecting circles onto a natural Earth map, with circle area proportional to each country’s population. Users can pan and zoom, and hovering reveals country names and population values. The code uses `d3.geoNaturalEarth1`, `d3.geoPath`, `d3.geoCentroid`, and `d3.zoom` for the map and interactions. Data comes from a CSV joined with TopoJSON world atlas geometries, and circles are rendered as SVG elements. A square-root scale controls circle sizes, accompanied by custom size and color legends.

Pputrafandy
94% match
Loading thumbnail…

Circles on a Map

This visualization displays global population data for 2018 using circles overlaid on a natural Earth projection map. The area of each circle is proportional to the country’s population, with missing data highlighted in red. Users can pan and zoom via d3.zoom, and hover over countries to see exact population figures. Built with D3 v5, it uses d3.geoPath and d3.geoNaturalEarth1 for map rendering, d3.scaleSqrt for circle sizing, and TopoJSON for world boundaries, with population data joined from a CSV file.

Ggcappadaniel
93% match
Loading thumbnail…

Circles on a Map

This example visualizes global population data for 2018 by coloring countries on a natural Earth projection map, with missing data highlighted in red. It uses D3 v5's `geoNaturalEarth1` and `geoPath` to render the map, `scaleSqrt` for proportional sizing, and `scaleOrdinal` with `schemeSpectral` for color encoding. The visualization supports zooming via `d3.zoom`, and tooltips appear on hover showing region names and population counts. Data comes from a CSV joined with TopoJSON world atlas geometry, loaded through `Promise.all` and processed with `topojson.feature`.

TTaheniataallah
93% match
Loading thumbnail…

Circles on a Map

This visualization displays global population data for 2018 using scaled circles positioned at country centroids on a natural Earth projection map. Circle area encodes population magnitude, while hovering reveals exact population figures and regional names. The map supports pan and zoom interactions through d3.zoom. Built with d3.geoNaturalEarth1 and d3.geoPath for map rendering, it uses d3.scaleSqrt for circle sizing and d3.scaleOrdinal with a spectral scheme for the categorical color legend. Population data comes from a CSV file processed alongside TopoJSON world boundaries.

EElena Dreosti
93% match