Building and Using Tools to See.
UVA Architecture + Data Science. IT Director. Instructor.
dvlib_layout OverviewLine graphsArea graphsDonut or PiePixel 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
Sparkline
Sparkline
<svg id="base" width="500" height="250">
<style>
.sparkline {fill:none; stroke: blue; stroke-width: 3; }
</style>
<g id="layer1" transform="translate(20 50)"></g>
<g id="layer2" transform="translate(20 150)"></g>
</svg>
import {world_gdp_growth_pivot} from "@emfielduva/dvlib_sampledata"
sortedData = world_gdp_growth_pivot.sort((a,b)=>d3.ascending(toNum(a["Year"]),toNum(b["Year"])));
scaleX = d3.scaleLinear().domain([1960,2012]).range([10,300])
scaleY = d3.scaleLinear().domain([-20,20]).range([50,0])
graph1Elem = d3.select(svgContainer).select("#layer1")
graph2Elem = d3.select(svgContainer).select("#layer2")
mySparkLine1 = dvSparkline(graph1Elem,sortedData,"Year","USA",scaleX,scaleY);
mySparkLine2 = dvSparkline(graph2Elem,sortedData,"Year","CHN",scaleX,scaleY);
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.
