Public
Edited
Apr 11, 2023
1 fork
Insert cell
Insert cell
<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="stateFuels"></g> <!-- a layer for the fuel pack circles -->
</svg>
Insert cell
map = d3.select(mapContainer) // d3 select the container object and/or layer to draw into
Insert cell
projection = d3.geoAlbers() // set map projection
Insert cell
import {basemaps, drawMapLayer, geoCentroids} with {projection} from "@emfielduva/dvlib_maps" // import library functions
Insert cell
usstates = (await(basemaps.us_states20m.geojson).json()) // get the states basemap from my collection.
Insert cell
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
}
Insert cell
Insert cell
Insert cell
Insert cell
usstateCentroids = {
let usstateCentroids = geoCentroids(usstates.features, "properties.NAME");
usstateCentroids.forEach(d => {
d.lon = d.coord[0];
d.lat = d.coord[1];
});
return usstateCentroids;
}
Insert cell
Insert cell
import {powerplants_2021} from "@emfielduva/dvlib_sampledata"
Insert cell
stateGenTotals = d3.rollup(powerplants_2021, v => d3.sum(v, d => toNum(d["Plant annual net generation (MWh)"])), d => d["Plant state abbreviation"]);
Insert cell
Insert cell
mapLayers["stateFuels"] = map.select("#stateFuels")
.selectAll("g")
.data(usstateCentroids)
.join("g")
.each((d,i,nodes) => {
let stateAbbr = usStateCodes.find(c => c.NAME == d.name).ABBR;
let location = projection([d.lon,d.lat]);
let sizeRadius = rFromArea(stateGenTotals.get(stateAbbr)) * 0.004;
let sizeDiameter = sizeRadius * 2;
let svgX = location[0]-sizeRadius;
let svgY = location[1]-sizeRadius;
let svgCoords = svgX + "," + svgY;
let stateFuels = d3.rollups(powerplants_2021.filter(d=>d["Plant state abbreviation"]==stateAbbr), v => d3.sum(v, d => toNum(d["Plant annual net generation (MWh)"])), d => d["Plant state abbreviation"], d => d["Plant primary fuel category"]);;
let stateFuelsLayoutHierarchy = layoutChildren("pp", stateFuels);
let nodeElem = d3.select(nodes[i]);
dvPackCircles(nodeElem, stateFuelsLayoutHierarchy, sizeDiameter, sizeDiameter,'', {classField: "Plant primary fuel generation category"});
nodeElem.attr("transform", "translate(" + svgCoords + ")");
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

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