Building and Using Tools to See.
UVA Architecture + Data Science. IT Director. Instructor.
dvlib_layout OverviewLine graphsArea graphsSparklinePixel MatrixTreemapPack CirclesSunburstDendogramClustersWord 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
Donut or Pie
<svg id="base" width="1000" height="500">
<g id="layer1"><text x="0" y="390" style="fill:black">Unsorted</text></g>
<g id="layer2" transform="translate(450 0)"><text x="0" y="390" style="fill:black">Sorted Descending</text></g>
</svg>
<style>
svg {font-family: Arial, Helvetica, sans-serif;}
#layer1 text, #layer2 text {font-family: Arial, Helvetica, sans-serif; font-size: 12px; fill: white}
.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>
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"]);
graph1Elem = d3.select(svgContainer).select("#layer1")
donut = dvDonut(graph1Elem,rollupData,200,50);
graph2Elem = d3.select(svgContainer).select("#layer2")
rollupSorted = d3.sort(rollupData, (a,b) => d3.descending(a[1],b[1]));
donut2 = dvDonut(graph2Elem,rollupSorted,200,100);
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.
