Published
Edited
Dec 20, 2021
newgraph = shell
newData = {
while (true) {
yield Array(Math.ceil(Math.random() * 8))
.fill()
.map((d) => [Math.ceil(Math.random() * 8), Math.ceil(Math.random() * 8)]);
await Promises.delay(2000);
}
}
function newRender(data) {
// Run the join code with the data passed to the update method
const teams = d3.select(this)
.selectAll("text")
.data(data)
.join(
(enter) =>
// New items fade in from the left
enter
.append("text")
.attr("opacity", 0)
.text((d) => d[0])
.attr("transform", (d) => `translate(-50, ${d[1] * 30})`)
.transition()
.attr("transform", (d) => `translate(0, ${d[1] * 30})`)
.attr("opacity", 1),
// Existing items update their text and transition to their new vertical position
(update) =>
update
.text(d => d[0])
.transition()
.attr("transform", (d) => `translate(0, ${d[1] * 30})`),
// Removed items fade out to the right
(exit) =>
exit
.transition()
.attr("transform", (d) => `translate(50, ${d[1] * 30})`)
.attr("opacity", 0)
.remove()
);
}
shell.update(newData)
options = Object.assign({
height:200,
width:400
})
import {shell} with {newRender as render, options as options} from "@petroleumjelliffe/dynamic-graph-shell"
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.
