Building and Using Tools to See.
UVA Architecture + Data Science. IT Director. Instructor.
gridMapLayer = d3.select(svgContainer).select("#gridmap") // put this on the gridmap layer
import {gridMap} from "@emfielduva/dvlib_maps"
usGridMapData = FileAttachment("usGridMapData.json").json()
gridOptions = ({
boxSize: 50,
labelField: "code"
})
myGridMap = gridMap(gridMapLayer,"usgrid",usGridMapData,gridOptions)
rollupData = 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"]);
donutLayer = d3.select(svgContainer).select("#donuts") // put this on the donuts layer
donuts = {
let donutGroups = donutLayer.selectAll("g")
.data(rollupData)
.join("g")
.attr("id", d => d[0])
.attr("transform", d => {
let stateAbbr = d[0];
let xLoc = usGridMapData.filter(d => d.code == stateAbbr)[0].col * gridOptions.boxSize;
let yLoc = usGridMapData.filter(d => d.code == stateAbbr)[0].row * gridOptions.boxSize;
return "translate(" + xLoc + " " + yLoc + ")";
});
donutGroups.each(function (d,i,nodes) {
let thisData = d;
let thisSVGGroup = d3.select(this); // this state <g> element in the donuts layer
let thisStateFuelData = d[1]; // the data associated with just this state, as we run through the full set.
let thisStateFuelDataSorted = d3.sort(thisStateFuelData, (a,b) => d3.descending(a[1],b[1])); // sort it
//let donut = dvDonut(thisSVGGroup, thisStateFuelDataSorted, 25, 12);
// size the donuts to their relative generation
let thisStateSumGeneration = d3.sum(thisStateFuelData, d => d[1]); // total the values for this state.
let scaleThisStateDonut = scaleDonuts(thisStateSumGeneration); // scale that for size on the map
let donut = dvDonut(thisSVGGroup, thisStateFuelDataSorted, scaleThisStateDonut, 5);
// recalculate the shift for each one to center the donuts.
thisSVGGroup.attr("transform", d => {
let xLoc = (usGridMapData.filter(d => d.code == thisData[0])[0].col * gridOptions.boxSize) + (gridOptions.boxSize/2 - scaleThisStateDonut);
let yLoc = (usGridMapData.filter(d => d.code == thisData[0])[0].row * gridOptions.boxSize) + (gridOptions.boxSize/2 - scaleThisStateDonut);
return "translate(" + xLoc + " " + yLoc + ")";
})
})
}
stateTotals = d3.rollup(powerplants_2019, v => d3.sum(v, d => toNum(d["Plant annual net generation (MWh)"])), d => d["Plant state abbreviation"]);
stateMax = d3.max(stateTotals, d => d[1])
scaleDonuts = d3.scaleLinear().domain([0,stateMax]).range([10,25])
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.