Circles on a Map

100%

Circles on a Map

✓ Published0🌍 Public

Last edited Mar 26, 2020

Created on Mar 26, 2020

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.

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 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.

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

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

87% match

Loading thumbnail…

Circles on a Map

This visualization displays population data on a world map using circles sized by a square root scale. The map is rendered with d3.geoPath and a Natural Earth projection, with circles positioned at country centroids via d3.geoCentroid. A size legend and color legend are added using custom d3 modules. The code loads CSV population data and TopoJSON world boundaries, processing them with Promise.all to combine the datasets.

Ffahmijaafar

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

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

76% match

Loading thumbnail…

Circles on a Map

This visualization shows global population by country, with circles positioned at each country’s centroid. Circle area encodes population size, while a size legend communicates the scale; hovering reveals exact values or “missing data.” Users can pan and zoom the map. Built with D3 v5, it uses `d3.geoNaturalEarth1` and `d3.geoPath` for projection, `d3.zoom` for interaction, and `d3.scaleSqrt` for area encoding. Country boundaries come from TopoJSON, with population data loaded via CSV.

LLittledevil7

76% match

Loading thumbnail…

Circles on a Map

This visualization displays the population of countries as circles on a natural Earth projection map, with the area of each circle proportional to the country's 2018 population. It uses d3.geoPath for geographic boundaries and d3.scaleSqrt for sizing circles, while enabling pan and zoom through a zoom event handler. Hovering reveals tooltips with population details via title elements. The visualization sources data from a CSV file merged with TopoJSON geometries, rendering through d3 and SVG, and includes a custom size legend with tick marks for population values.

Nnoura94

76% match