Building and Using Tools to See.
UVA Architecture + Data Science. IT Director. Instructor.
dvlib_layout OverviewLine graphsArea graphsSparklineDonut or PiePixel MatrixTreemapPack CirclesSunburstDendogramClustersWord CloudClusters - dynamic movementPack Circles - dynamic movementTreemap - dynamic movementNetwork Graph - nodes and edgesCombining Layouts - Donuts on GridMapRings - 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
Radar
<svg width="500" height="200">
<g id="layer1"></g> <!-- one at a time -->
<g id="layer2" transform="translate(300,0)"></g> <!-- all together -->
</svg>
viewof track = Inputs.range([0, 4], {label: "Track", step: 1, value: 0})
data = FileAttachment("trackFeatures_sample.csv").csv()
fields = ["danceability","energy","speechiness","liveness","valence"]
onetrack = [data[track]] // just one record out of the set. "track" index chosen from range slider above
radarElem = d3.select(svgContainer).select("#layer1") // the svg element to put the radar in
radar = dvRadar(radarElem2,data,fields,200,options)
options = ({
maxValue: 1,
idField: "id",
transitionMS: 1000,
axisLabelShow: true
})
radarElem2 = d3.select(svgContainer).select("#layer2") // the svg element to put the radar in
radar2 = dvRadar(radarElem,onetrack,fields,200,options)
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.
