Building and Using Tools to See.
UVA Architecture + Data Science. IT Director. Instructor.
<svg width="600" height="600">
<g id="packCircles"></g>
<g id="donuts"></g>
</svg>
rollupData = d3.rollups(powerplants_2019, v => d3.sum(v, d => toNum(d["Plant annual net generation (MWh)"])), d => d["Plant state abbreviation"]).sort((a,b) => d3.descending(a[1],b[1]))
dataLayout = layoutChildren("powerplants", rollupData);
pcLayer = d3.select(svgContainer).select("#packCircles")
packCircles = dvPackCircles(pcLayer,dataLayout,600,600,'',options)
options = ({
padding: 1,
textLabelField: "Plant state abbreviation"
})
donutLayer = d3.select(svgContainer).select("#donuts")
stateFuels = d3.rollups(powerplants_2019, v => d3.sum(v, d => toNum(d["Plant annual net generation (MWh)"])), d => d["Plant state abbreviation"], d => d["Plant primary fuel generation category"])
pcLayer.selectAll("circle").each((d,i,nodes) => {
if (packCircles) {} // a dummy dependency to have it wait until the packCircles is done.
if (Array.isArray(d.data)) {
let thisState = d.data[0];
let thisX = d.x; // just to call these out specifically to understand what we're doing.
let thisY = d.y;
let thisR = d.r;
let thisStateData = stateFuels.find(s => s[0] == thisState)[1];
let donutGroup = donutLayer.select("g[id=d_thisState]").node()
? donutLayer.select("g[id=d_thisState]")
: donutLayer.append("g").attr("id","d_"+thisState);
donutGroup.attr("transform", "translate(" + thisX + " " + thisY + ")");
let options = {
translateXY:{x:0,y:0}
}
let donut = dvDonut(donutGroup, thisStateData, thisR, thisR/2,options);
}
})
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.
