I love to build dataviz for insight discovery. I also love to put technology to the service of humanity
Public
Edited
Apr 6, 2023
1 star
{
var n = 4002;
var whiteblue = d3.interpolateRgb("#eee", "steelblue"),
blueorange = d3.interpolateRgb("steelblue", "orange"),
orangewhite = d3.interpolateRgb("orange", "#eee");
const target = htl.html`<div><style>
#target {
max-width: 960px;
min-height: 550px;
margin: 1px;
}
#target > div {
width: 10px;
height: 10px;
margin: 1px 0 0 1px;
float: left;
background: #eee;
display: inline-block;
}
</style>
<div id="target"></div>
</div>`;
const chart = d3
.select(target)
.select("#target")
.selectAll("div")
.data(d3.range(n))
.join("div")
.transition()
.delay(function (d, i) {
return i + (Math.random() * n) / 4;
})
.ease(d3.easeLinear)
.on("start", function repeat(d, i) {
d3.active(this)
.styleTween("background-color", function () {
return whiteblue;
})
.transition()
.delay(1000)
.styleTween("background-color", function () {
return blueorange;
})
.transition()
.delay(1000)
.styleTween("background-color", function () {
return orangewhite;
})
.transition()
.delay(n)
.on("start", repeat);
});
return target;
}
{
await visibility();
const height = width * 0.3;
const svg = d3
.create("svg")
.attr("viewBox", [0, 0, width, height])
.attr("width", "width")
.attr("height", height);
const circle = svg
.append("circle")
.attr("r", 10)
.attr("cx", 100)
.attr("cy", 100);
circle
.transition()
.duration(1000)
.attr("cx", 200)
.transition() //nested transition
.duration(500)
.attr("cy", 200);
return svg.node();
}
{
await visibility();
const height = width * 0.3;
const svg = d3
.create("svg")
.attr("viewBox", [0, 0, width, height])
.attr("width", "width")
.attr("height", height);
const circle = svg
.append("circle")
.attr("r", 10)
.attr("cx", 100)
.attr("cy", 100);
const t1 = circle.transition().duration(1000).attr("cx", 200);
circle.transition(t1).transition().duration(500).attr("cy", 200); // nested
return svg.node();
}
{
await visibility();
const height = width * 0.3;
const svg = d3
.create("svg")
.attr("viewBox", [0, 0, width, height])
.attr("width", "width")
.attr("height", height);
const circle = svg
.append("circle")
.attr("r", 10)
.attr("cx", 100)
.attr("cy", 100);
async function animate() {
const t1 = circle.transition().duration(1000).attr("cx", 200);
await t1.end(); // wait for the first transition to finish
circle.transition().duration(500).attr("cy", 200);
}
animate();
return svg.node();
}
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.
