Circles on a Map

100%

Circles on a Map

✓ Published2🌍 Public

Last edited Mar 26, 2020

Created on Mar 26, 2020

This visualization displays UK higher education providers as circles on a world map, with circle area representing the number of students with known disabilities. The visualization uses d3.geoNaturalEarth1 projection with d3.geoPath to render country boundaries, while d3.scaleSqrt maps population values to circle radii. Users can pan and zoom the map using d3.zoom, and hovering over country patches highlights them, though circles have pointer events disabled. Data comes from a CSV dataset joined to TopoJSON world geometry, with a size legend showing population scale and a separate color legend for categories.

AI-generated description

Visualizing HE Providers of UK using circles on a map! The area of each map corresponds to the providers it represents. You can also pan & zoom, and hover over each patch for more information.

MIT Licensed

Similar vizzes

Loading thumbnail…

Circles on a Map

This visualization maps higher education providers across the UK, using circles positioned at geographic centroids to represent the number of students with known disabilities. The circle area scales with this population value via a square-root scale, and a size legend with formatted ticks clarifies the mapping. Users can pan and zoom with d3.zoom, while hovering over region paths highlights them. The code uses d3.geoNaturalEarth1 for projection, d3.geoPath for rendering, and loads data from a CSV describing provider characteristics joined to TopoJSON world boundaries.

Wwaqastufail

97% match

Loading thumbnail…

Circles on a Map

This visualization maps UK higher education providers as circles on a natural Earth projection, with circle area proportional to each provider’s student population. Users can pan and zoom the map and hover over country paths to see tooltips. The code combines `d3.geoPath` for geographic outlines, `d3.geoCentroid` for positioning circles, and `d3.scaleSqrt` for sizing, while `d3.zoom` enables interaction. Data comes from a CSV joined to world-atlas TopoJSON, with a custom size legend built using D3 scales.

Wwaqastufail

94% match

Loading thumbnail…

UK HE Providers

This visualization of UK Higher Education Providers uses a natural Earth projection to map the geographic distribution of institutions. It displays each provider as a circle positioned by its centroid coordinates, with circle size encoding the population attribute and color representing other categorical data. The visualization incorporates interactive zooming functionality through `d3.zoom`, enabling users to explore the map at different scales. Rendering employs `d3.geoPath` for country boundaries and `d3.scaleSqrt` for proportional symbol sizing, with a size legend and color legend using `d3.scaleOrdinal` and `d3.schemeSpectral`. Data is loaded from external CSV and TopoJSON sources, processed via `d3.csv` and `topojson.feature`.

Wwaqastufail

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

79% match

Loading thumbnail…

Circles on a Map

This example displays a natural Earth projection world map with semi-transparent teal circles sized by each country’s 2018 population estimate, using d3.geoNaturalEarth1, d3.geoPath, and d3.geoCentroid to position circles at country centers. A d3.scaleSqrt maps population values to circle radii, and a custom size legend shows graduated tick marks. Countries missing data appear pink, and hovering highlights them turquoise. The visualization loads UN population CSV data and TopoJSON world geometry via d3.csv and d3.json, renders SVG paths and circles, and supports zooming through d3.zoom.

KKazushige Okuma

79% match

Loading thumbnail…

Circles on a Map

This example visualizes global population by country, with circle area encoding 2018 population values on a natural Earth projection. Users can pan and zoom the map, and hovering over countries reveals more details via tooltips. The visualization uses d3.geoPath for map rendering, d3.scaleSqrt for proportional circle sizing, and d3.zoom for interactive navigation. Data comes from a CSV file joined with TopoJSON world geometry, while d3.scaleOrdinal and size legends explain the visual encoding.

Ssophburke

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

79% match

Loading thumbnail…

Circles on a Map

This example visualizes population by country using circles on a world map, with circle area proportional to 2018 population data. Users can pan and zoom the map, and hover over countries to see detailed figures. The visualization uses d3.geoNaturalEarth1 projection with d3.geoPath for map outlines, d3.scaleSqrt for circle sizing, and a custom size legend. Population data is loaded from a CSV file, while country boundaries come from TopoJSON, and map interactions are enabled through d3.zoom.

Hhannahwilson2

78% match