World population bubble map / Mark McClure

I'm a professor of mathematics at the University of North Carolina Asheville. I've also done a fair amount of consulting work over the years focusing on scientific and data visualization. I'm happy to be part of the first Observable Ambassador's cohort.

Workspace

Published

Edited

Jul 19, 2022

4 forks

Importers

5 stars

Maps

NC Congressional Districts Trivariate choropleth for racial composition in the US Racial distribution in NC WNC Zoom 3D Choropleth for NC County Populations NC Counties Triangulated Canadian Provinces (separate)Triangulated NC Counties An X3D Globe Canadian Elections 3D WNC Surround Electoral Results Tilegram The new Electoral College Electoral Map GPX rides with Leaflet and OSM Old encoded polyline rides with Leaflet GPX rides with Maplibre and Maptiler Buncombe county voting The NC Congressional redistricting battle Hexapolis 538 Zillow Home Prices Setting up Hexapolis COVID curves Thirty day Map Challenge - Day 1 Simple grid cartogram 2020 Census Apportionment Tilegram Mass shootings in the US HBCUs NC State Legislative Elections 2022 Hierarchical Structure of the US Regions Indigenous territories of the Southeast D3.force to desired position Population Choropleth for the Contiguous US States Plotting a few points on a map Mutliple bubble maps for CSV data

World population bubble map

Reproductive rights and ... ??Gerrymandering Hexapolis by hand Visualizations of gun ownership data Income inequality in North Carolina

Also listed in…

Forum responses

map = {

// We're going to draw the map on the following SVG.

let svg = d3.create("svg").attr("width", w).attr("height", h);

// Draw the graticule

svg

.append("path")

.attr("d", path(d3.geoGraticule10()))

.attr("fill", "none")

.attr("stroke", "#333")

.attr("stroke-width", 0.4);

// Draw the countries

let country_group = svg.append("g");

country_group

.selectAll("path")

.data(countries.features)

.join("path")

.attr("d", path)

.attr("data-pop", (d) => console.log(d.properties.POP_EST))

.attr("fill", "#eee")

.attr("stroke", "black")

.attr("stroke-width", 1);

// Draw the bubbles.

let max_pop = d3.max(countries.features.map((o) => o.properties.POP_EST));

let bubble_group = svg.append("g");

bubble_group

.selectAll("circle")

.data(countries.features)

.join("circle")

.attr("cx", (d) => path.centroid(d)[0])

.attr("cy", (d) => path.centroid(d)[1])

.attr("r", (d) => 20 * Math.sqrt(d.properties.POP_EST / max_pop))

.attr("fill", "lightblue")

.attr("stroke", "black");

return svg.node();

}

path = d3.geoPath().projection(projection)

projection = d3.geoNaturalEarth1().fitSize([w + 20, h], countries)

h = 0.625 * w

w = width < 1100 ? width : 1100

// Convert the TopoJSON to GeoJSON

countries = topojson.feature(map_data, map_data.objects.countries)

map_data = FileAttachment("countries.json").json()

One platform to build and deploy the best data apps

Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.

Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.

Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.

Learn more