Building and Using Tools to See.
UVA Architecture + Data Science. IT Director. Instructor.
<svg id="base" width="1000" height="650">
<g id="layer1"></g>
</svg>
import {powerplants_2019} from "@emfielduva/dvlib_sampledata"
rollupData = d3.rollups(powerplants_2019, v => d3.sum(v, d => toNum(d["Plant annual net generation (MWh)"])), d => d["Plant primary fuel generation category"]).sort((a,b)=>d3.descending(a[1],b[1]));
import {layoutChildren} from "@emfielduva/dvlib_layout"
dataLayout1 = layoutChildren("powerplants",rollupData)
tmElem = d3.select(svgContainer).select("#layer1")
tm1 = dvTreemap(tmElem,dataLayout1,800,600,'',options1)
options1 = ({
textLabelField: 'name'
})
sortedData = d3.sort(powerplants_2019, (a,b) => d3.ascending(a["Plant primary fuel generation category"],b["Plant primary fuel generation category"]))
dataLayout2 = layoutChildren("powerplants", sortedData);
options2 = ({
classField: 'Plant primary fuel generation category'
})
tm2 = dvTreemap(tmElem2,dataLayout2,800,600,"Plant annual net generation (MWh)",options2)
tmElem2 = d3.select(svgContainer2).select("#layer1")
<svg id="base" width="1000" height="650">
<g id="layer1"></g>
</svg>
rollupDataTwoLevel = 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"])
dataLayout3 = layoutChildren("powerplants",rollupDataTwoLevel)
options3 = ({
textLabelField: 'name',
paddingInner: 3
})
tmElem3 = d3.select(svgContainer3).select("#layer1")
tm3 = dvTreemap(tmElem3,dataLayout3,800,600,'',options3)
<svg id="base" width="1000" height="650">
<g id="layer1"></g>
</svg>
import {toNum} from "@emfielduva/dvlib"
import {dvTreemap} from "@emfielduva/dvlib_layout"
<style>
.COAL {fill:#000000; background-color:#000000; color: #dddddd;} /* black */
.BIOMASS {fill:#00ff00; background-color:#00ff00;} /* green */
.HYDRO {fill:#0000ff; background-color:#0000ff; color: #dddddd;} /* blue */
.OIL {fill:#777700; background-color:#777700;} /* brown */
.GAS {fill:#E8BD0C; background-color:#E8BD0C;} /* orange */
.NUCLEAR {fill:#00ffff; background-color:#00ffff;} /* cyan */
.GEOTHERMAL {fill:#A6A277; background-color:#A6A277;} /* brown */
.WIND {fill: #FF66FF; background-color: #FF66FF;} /* pink */
.SOLAR {fill: #ffff00; background-color: #ffff00;} /* yellow */
.OFSL {fill: #888888; background-color: #888888;} /* gray */
.OTHF {fill: #aa0000; background-color: #aa0000;} /* gray */
.OTHRFOSL {fill: #888888; background-color: #888888;} /* gray */
.WSTHTOTPUR {fill: #aa0000; background-color: #aa0000;} /* gray */
.node text {font-size: 12px; fill: white;}
</style>
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.
