Building and Using Tools to See.
UVA Architecture + Data Science. IT Director. Instructor.
dvlib_layout OverviewLine graphsArea graphsSparklineDonut or PieTreemapPack 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
Pixel Matrix
<svg id="base" width="1000" height="500">
<g id="layer1"></g>
</svg>
import {powerplants_2019} from "@emfielduva/dvlib_sampledata"
sorteddata = d3.sort(powerplants_2019,(a,b)=>d3.ascending(a["Plant primary fuel generation category"],b["Plant primary fuel generation category"]));
colors=({"COAL":"#000000", "BIOMASS":"#00ff00", "HYDRO":"#0000ff", "OIL":"#777700", "GAS":"#E8BD0C", "NUCLEAR":"#00ffff", "GEOTHERMAL":"#A6A277", "WIND":"#FF66FF", "SOLAR":"#ffff00", "OFSL":"#888888", "OTHF":"#aa0000", "OTHRFOSL":"#888888", "WSTHTOTPUR":"#aa0000"})
import {dvPixelMatrix} from "@emfielduva/dvlib_layout"
pmElem1 = d3.select(svgContainer).select("#layer1")
pm = dvPixelMatrix(pmElem1,sorteddata,70,5,colors,"Plant primary fuel generation category");
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.
