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.
map = {
let map = d3.create("svg").attr("width", w).attr("height", h);
map
.selectAll("path")
.data(contiguous_states.features)
.join("path")
.attr("d", path)
.attr("fill", "lightgray")
.attr("stroke", "#fff")
.attr("stroke-width", 1);
map
.selectAll("circle")
.data(largest_cities)
.join("circle")
.attr("cx", (c) => c.x)
.attr("cy", (c) => c.y)
.attr("r", (c) => 5 * (c.population / largest_cities.max_pop) ** 0.3)
.attr("fill", "black")
.attr("fill-opacity", 0.5)
.attr("stroke", "black")
.attr("data-name", (c) => c.name)
.attr("data-population", (c) => c.population)
.nodes()
.forEach(function (c) {
tippy(c, {
content: `
<div>
<h3>${c.getAttribute("data-name")}</h3>
<div>Population: ${c.getAttribute("data-population")}</div>
</div>`,
theme: "light-border",
allowHTML: true
});
});
return map.node();
}
path = d3.geoPath().projection(projection)
projection = d3.geoAlbers().fitSize([w, h], contiguous_states)
h = 0.625 * w
w = d3.min([width, 1000])
largest_cities = {
let largest_cities = await FileAttachment("largest_cities@1.json").json();
// Here's where we use the projection to translate the lat/lon data to xy
// coordinates. We then simply attach those xy coordinates to our data.
largest_cities.forEach(function (c) {
let xy = projection(c.lonlat);
c.x = xy[0];
c.y = xy[1];
});
largest_cities.max_pop = d3.max(largest_cities.map((c) => c.population));
return largest_cities;
}
// The map data comes from the US Census Bureau:
// https://www.census.gov/geographies/mapping-files/time-series/geo/carto-boundary-file.html
// That data was simplified a bit and converted to TopoJSON using MapShaper:
// https://mapshaper.org
contiguous_states = {
let contiguous_states = await FileAttachment(
"contiguous_states_tigerline.json"
).json();
contiguous_states = topojson.feature(
contiguous_states,
contiguous_states.objects.states
);
return contiguous_states;
}
tippy_style = html`<link style="display: none" rel="stylesheet" href="${await require.resolve(
`tippy.js/themes/light-border.css`
)}">`
tippy = require("tippy.js@6")
largest_cities
largest_cities.map((row) => ({
name: row.name,
population: row.population,
lat: row.lonlat[1],
lon: row.lonlat[0]
}))
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.
