circles on the map

100%

circles on the map

✓ Published0🌍 Public

Last edited May 6, 2020

Created on May 6, 2020

This visualization displays a world map with countries colored green or red based on data from a CSV file, indicating a binary attribute for the year 2020. The map uses the D3.js library with a `d3.geoNaturalEarth1` projection and `d3.geoPath` to render geographic features. TopoJSON data from the visionscarto-world-atlas is merged with the CSV data, and an SVG path is generated for each country. Zoom functionality is enabled via `d3.zoom`.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Circles on a map

This map visualization displays circles sized by a country’s 2018 value, positioned at each country’s centroid using the `geoNaturalEarth1` projection and `geoPath` for rendering the world in SVG. The circles’ radii come from `scaleSqrt`, while countries are colored green or red based on whether they have a value, with a categorical `scaleOrdinal` color legend. Data is loaded from a CSV and TopoJSON via `d3.csv` and `d3.json`, processed with `topojson.feature`, and the SVG supports zooming through `d3.zoom`.

Bbencestubnya

90% match

Loading thumbnail…

Circles on a Map

This visualization displays a world map with semitransparent circles overlaid on each country, sized proportionally to population data from 2018. The map renders using d3.geoNaturalEarth1 projection and d3.geoPath, while circle sizes are scaled with d3.scaleSqrt. Zooming is enabled via d3.zoom. The code includes color and size legends built with reusable functions, and loads data from a CSV and TopoJSON world atlas using d3.csv and topojson.feature.

NNeepaB

88% match

Loading thumbnail…

Circles on a Map

This example displays two choropleth-style encoded variables on a world map. Country polygons are colored green or red based on a 2019 property, while circles sized with a square-root scale represent 2018 population data projected at each country’s centroid. The visualization uses D3 v5’s `geoNaturalEarth1` projection, `geoPath`, and `geoCentroid` to render SVG paths and circles, with TopoJSON from the visionscarto-world-atlas source. A zoom behavior from D3 enables interactive panning and scaling of the entire map group.

Zzenoe

87% match

Loading thumbnail…

Circles on a Map

This example visualizes global population data by coloring each country on a world map based on its 2018 population estimate, with green indicating data availability and red for missing values. It uses D3 v5 with `geoNaturalEarth1` projection and `geoPath` to render the map, while `topojson.feature` converts the world-atlas TopoJSON data. The map supports zooming and panning through `d3.zoom`. A color legend, built with `scaleOrdinal` and `schemeSpectral`, is displayed alongside, and hovering over a country highlights it in red.

AArriannePandaraoan

86% 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

86% match

Loading thumbnail…

circles on a map

This map uses D3 v5 to display country populations in 2020 as circles overlaid on a geographic projection. The base map is drawn with `d3.geoPath` and a natural Earth projection, while circle radii are scaled using `d3.scaleSqrt` based on population data. Countries lacking population data are filled red. Data comes from a United Nations population CSV joined with TopoJSON world map geometry. An interactive zoom feature is implemented via the `d3.zoom` API.

Jjlongwellchc

86% match

Loading thumbnail…

Circles on a map

This visualization shows a world map colored by each country's economy category, with a legend displaying the color scale on the left side. The map uses a natural Earth projection, rendered as SVG paths with a blue ordinal color scheme. The code loads geographic data from world-atlas TopoJSON and country metadata from a TSV file, merging them via ISO country codes. Interaction includes zooming via d3.zoom and a hover effect that turns countries red. The color legend is built with custom d3 selections, circles, and text labels.

Aankita1mit

85% match

Loading thumbnail…

Circles on a map

This visualization displays a natural Earth projection map with circles overlaid on each country, sized proportionally to its 2018 population and colored by data availability. The map uses d3.geoNaturalEarth1 and d3.geoPath for geographic rendering, while d3.scaleSqrt and d3.geoCentroid position the circles. Population data is loaded from a UN CSV file, merged with TopoJSON world geometry via topojson.feature, and filtered for valid values. Zooming is enabled through d3.zoom, and a size legend with formatted tick labels explains the circle scale. Countries missing data appear in red, and hover tooltips display the region and exact population.

ZZ-Richard

85% match