Building and Using Tools to See.
UVA Architecture + Data Science. IT Director. Instructor.
dvlib_layout OverviewLine graphsArea graphsSparklineDonut or PiePixel MatrixTreemapPack CirclesDendogramClustersWord CloudClusters - dynamic movementPack Circles - dynamic movementTreemap - dynamic movementNetwork Graph - nodes and edgesCombining Layouts - Donuts on GridMapRadarRings - 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
Sunburst
<svg id="base" width="1000" height="800">
<g id="layer1"></g>
<style>
.burstpath {fill:#bbb; stroke: #ccc}
.undefined {fill:none;}
.node text {font-family: Arial, Helvetica, sans-serif; font-size: 12px; fill: white; text-anchor: middle}
.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 */
</style>
</svg>
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"])
import {layoutChildren} from "@emfielduva/dvlib_layout"
dataLayout = layoutChildren("powerplants", rollupData)
sbElem = d3.select(svgContainer).select("#layer1").attr("transform","translate(400 400)") // center it
sunburst = dvSunburst(sbElem,dataLayout,800)
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.
