Building and Using Tools to See.
UVA Architecture + Data Science. IT Director. Instructor.
sampleSVG = FileAttachment("ai export for svg.svg").text()
import {importSVGnode} from "@emfielduva/dvlib"
<div id="vizContainer">
<div id="controls">
<button id="moveBlue">move blue</button><br />
<button id="moveYellow">move yellow</button><br />
<button id="moveRed">move red</button><br />
<br />
<button id="reset">reset</button><br />
</div>
<style>
#controls {position: absolute; right: 40px; top: 100px}
#controls button {background-color: #fff; border: 1px solid #ccc; border-radius: 5px; cursor: pointer;}
</style>
</div>
svg = vizContainer.appendChild(importSVGnode(sampleSVG))
d3.select(svg).select("#redDot").transition().duration(1000).attr("cx", 500)
{
let controls = d3.select(vizContainer).select("#controls");
controls.select("#moveBlue").on("click", () => moveToLocation("#blueDot",50,100));
controls.select("#moveYellow").on("click", () => moveToLocation("#yellowDot",900,200));
controls.select("#moveRed").on("click", () => moveToLocation("#redDot",800,50));
controls.select("#reset").on("click", () => resetLocations());
}
moveToLocation = (id,x,y) => {
d3.select(svg).select(id).transition().duration(1000).attr("cx",x).attr("cy",y); //for circles
}
resetLocations = () => {
// back to their original locations, or wherever we specify
moveToLocation("#blueDot",800,200);
moveToLocation("#yellowDot",400,600);
moveToLocation("#redDot",500,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.
