Published
Edited
Jul 16, 2020
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
example1 = {
const el = this || html`<div></div>`;

const t = d3.transition().duration(1000);

const div = d3.select(el);

div
.selectAll("div")
.data(data)
.join("div")
.property("_current", d => d)
.transition(t)
.textTween(function(d) {
const i = d3.interpolateRound(this._current, d);
return function(t) {
return (this._current = i(t));
};
});

return el;
}
Insert cell
Insert cell
example2 = {
const el = this || html`<div></div>`;

const div = d3.select(el);

const t = d3.transition().duration(1000);

div
.selectAll("div")
.data(data)
.join("div")
.transition(t)
.textTween(function(d) {
const i = d3.interpolateRound(this._current | 0, d);
return function(t) {
return (this._current = i(t));
};
})
.on("end", function(d) {
d3.select(this).property("_current", d);
});

return el;
}
Insert cell
example3 = {
const el = this || html`<div></div>`;

const t = d3.transition().duration(1000);

const div = d3.select(el);

div
.selectAll("div")
.data(data)
.join(
enter =>
enter
.append("div")
.property("_current", d => d)
.text(d => d),
update =>
update.transition(t).textTween(function(d) {
const i = d3.interpolateRound(this._current, d);
return function(t) {
return (this._current = i(t));
};
})
);

return el;
}
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more