Building and Using Tools to See.
UVA Architecture + Data Science. IT Director. Instructor.
<!-- here is the original static svg object set, with some styles -->
<svg id="baroque" width="800" height="500">
<style>
#baroque {background-color: red;}
#baroque circle {fill: white; opacity: 0.6;}
</style>
<line x1="300" y1="175" x2="500" y2="175" style="stroke:#fff;" />
<line x1="235" y1="200" x2="575" y2="200" style="stroke:#fff;" />
<line x1="305" y1="225" x2="495" y2="225" style="stroke:#fff;" />
<line x1="325" y1="250" x2="475" y2="250" style="stroke:#fff;" />
<line x1="250" y1="275" x2="550" y2="275" style="stroke:#fff;" />
<line x1="290" y1="300" x2="510" y2="300" style="stroke:#fff;" />
<line x1="340" y1="325" x2="460" y2="325" style="stroke:#fff;" />
<circle id="leftcircle" r="5" cx="400" cy="250" transform="rotate(0 250 250)" />
<circle id="leftcircle2" r="5" cx="400" cy="250" transform="rotate(180 250 250)" />
<circle id="rightcircle" r="5" cx="700" cy="250" transform="rotate(0 550 250)" />
<circle id="rightcircle2" r="5" cx="700" cy="250" transform="rotate(180 550 250)" />
</svg>
// a function to turn the circles. Each one is rotated about the center used in the original svg, based on the time value.
function turn() {
d3.select("#leftcircle").attr("transform", () => {return "rotate(" + (10+time)*-2 +" 250 250)";});
d3.select("#leftcircle2").attr("transform", () => {return "rotate(" + (10+90+time)*-2 +" 250 250)";});
d3.select("#rightcircle").attr("transform", () => {return "rotate(" + (10+45+time)*2 +" 550 250)";});
d3.select("#rightcircle2").attr("transform", () => {return "rotate(" + (10+135+time)*2 +" 550 250)";});
}
// a generator for a time ticker. time is referenced in the turn() function.
// notice that time is constantly moving on.
time = {
let i = 0;
while (true) {
yield Promises.delay(20, ++i);
}
}
// a function to change the length of the strings. Here it creates random lengths, but could be controlled by data.
// each <line> object gets a new x1 and x2 pushing in and out from the center of 400.
function stringLength() {
var strings = d3.selectAll("line")
.each(function(){
var rand = Math.random()*150;
d3.select(this)
.transition().duration(1000)
.attr("x1", () => 400-rand)
.attr("x2", () => 400+rand)
});
}
// this code block checks the time to see if it hits an interval,
// and then calls the stringLength() function to change the strings at that time interval.
// this doesn't return anything (undefined) but runs on every tick of time, because time is referenced here.
{
if ((time + 45) % 45 === 0) {stringLength();}
}
// this cell simply calls the turn(function), but since turn() is dependent on time (references time)
// it will run again on every tick of time, which is constantly moving, so turn() keeps running.
turn()
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.