Circles on a Map

100%

Circles on a Map

✓ Published0🌍 Public

Last edited Mar 26, 2020

Created on Mar 26, 2020

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.

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

95% match

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

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

90% match

Loading thumbnail…

Circles on a Map

This visualization uses a natural Earth projection to display the population of each country as a circle, where the circle's area is proportional to the country's 2018 population. Users can pan and zoom the map, and hovering over a country reveals its name and population in a tooltip. The D3 code loads data from a UN CSV and a TopoJSON world atlas, computing circle sizes with `d3.scaleSqrt` and rendering the map using `d3.geoPath`. A size legend and a color legend for missing data are also included.

Ddtd-amiele

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

79% match

Loading thumbnail…

Circles on a Map

This visualization uses a natural Earth projection to display country boundaries and population data. Circles sized with `d3.scaleSqrt` are positioned at each country's centroid using `d3.geoCentroid`, with circle area proportional to 2018 population estimates from the UN. Users can pan and zoom via `d3.zoom`, while hovering reveals a tooltip with country name and population. The code employs `d3.geoPath`, `topojson.feature`, and a custom size legend rendered in SVG.

CCurran Kelleher

79% match

Loading thumbnail…

Circles on a Map

This visualization displays the population of each country as a circle on a natural Earth projection map, with the circle’s area proportional to the 2018 population data. Hovering over a country reveals its name and population, while pan and zoom are enabled. The map is rendered as SVG using `d3.geoPath` with a `geoNaturalEarth1` projection, and population data is joined from a CSV to country geometries using `topojson`. A square-root size scale, implemented with `d3.scaleSqrt`, drives the circle radii, and a legend is built through custom `sizeLegend` and `colorLegend` functions.

Hhannahwilson2

79% match