Mutliple bubble maps for CSV data / 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 20, 2022

Fork of Bubble Map

•

2 forks

1 star

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("fill", "#eee")

.attr("stroke", "black")

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

// Compute the centroids and associate those results with a country identifier

let centroid_map = new Map();

countries.features.forEach(function (c) {

let centroid = path.centroid(c);

if (!isNaN(centroid[0])) {

centroid_map.set(c.properties.NAME, centroid);

}

});

// The names of the countries in one file don't necessarily agree with

// the names in the other. You can manually set the centroid for a

// name in the CSV file to the value in the GEO file as follows:

centroid_map.set(

"United States",

centroid_map.get("United States of America")

);

centroid_map.set("Cote d Ivorie", centroid_map.get("Côte d'Ivoire"));

// Draw the bubbles.

let p = parameter.toLowerCase().replace(" ", "_");

let max = d3.max(country_data.map((o) => +o[p]));

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

bubble_group

.selectAll("circle")

.data(country_data.filter((o) => centroid_map.has(o.CountryName)))

.join("circle")

.attr("cx", (d) => centroid_map.get(d.CountryName)[0])

.attr("cy", (d) => centroid_map.get(d.CountryName)[1])

.attr("r", (d) => 20 * Math.sqrt(+d[p] / max))

.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 < 1200 ? width : 1200

// Convert the TopoJSON to GeoJSON

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

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

country_data = d3.csvParse(await fetch("https://raw.githubusercontent.com/SandeshDhungel/datadoc/main/countries.csv").then(d => d.text()))

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.

Learn more