Building and Using Tools to See.
UVA Architecture + Data Science. IT Director. Instructor.
<svg width="1000" height="500">
<style>
#usstates path {fill: #eee; stroke: #ddd; opacity: 0.5;}
</style>
<g id="usstates"></g> <!-- a layer for the map base -->
<g id="rings"></g> <!-- a layer for the gap rings -->
</svg>
map = d3.select(mapContainer) // d3 select the container object and/or layer to draw into
projection = d3.geoAlbers() // set map projection
import {basemaps, drawMapLayer, geoCentroids} with {projection} from "@emfielduva/dvlib_maps" // import library functions
usstates = (await(basemaps.us_states20m.geojson).json()) // get the states basemap from my collection.
mapLayers = {
let mapLayers = []; // collection of layers
mapLayers["usstates"] = drawMapLayer(map,"usstates",usstates.features,"properties.NAME"); // draw the base layer
return mapLayers; // return them for use later
}
usstateCentroids = {
let usstateCentroids = geoCentroids(usstates.features, "properties.NAME");
usstateCentroids.forEach(d => {
d.lon = d.coord[0];
d.lat = d.coord[1];
});
return usstateCentroids;
}
data = FileAttachment("covid19_vaccinations_in_the_united_states@1.csv").csv()
data.forEach(d => d.population = +d["Residents with at least one dose"] * 100 / +d["Percent of total pop with at least one dose"])
mapLayers["rings"] = map.select("#rings")
.selectAll("g")
.data(usstateCentroids)
.join("g")
.each((d,i,nodes) => {
let nodeElem = d3.select(nodes[i]);
let location = projection([d.lon,d.lat]);
let svgCoords = location[0] + "," + location[1];
nodeElem.attr("transform", "translate(" + svgCoords + ")");
nodeElem.attr("id", (d,i) => "ring"+i);
if (d.name == "New York") {d.name = "New York State"} // handle naming exception in the data.
let dataThisState = data.find(s => s["Jurisdiction (State/Territory) or Federal Entity"] == d.name);
let rScale = .01;
let innerRad = rFromArea(dataThisState["Residents with a completed primary series"]) * rScale;
let outerRad = rFromArea(dataThisState["population"]) * rScale;
dvRing(nodeElem,outerRad,innerRad);
})
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.
