Building and Using Tools to See.
UVA Architecture + Data Science. IT Director. Instructor.
dvlib_layout OverviewLine graphsArea graphsSparklineDonut or PiePixel MatrixTreemapPack CirclesSunburstDendogramClustersWord CloudClusters - dynamic movementPack Circles - dynamic movementTreemap - dynamic movementNetwork Graph - nodes and edgesRadarRings - circle with hole maskBeeswarm - Force DiagramHeatmapPack Circles with Donuts insideUS map with Powerplant Pack CirclesRing plot on Map - Trust Gap?Force Directed clustering along a pathFixed location Network GraphRadial bar / lineFitness ringsCurves / distance color gradientSVG distance along path / curveFilled Arc Polygon BandsConnecting multiple visuals in one spaceSankey / Alluvial / Parallel Sets
Combining Layouts - Donuts on GridMap
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])
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.
