Published
Edited
Dec 21, 2021
Importers
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
// This cell does not re-run when data2 changes
shell = {
// At first, just create the basic SVG
const sel = d3.create("svg")
.attr("width", options.width)
.attr("height", options.height)

const container = sel.append("g")
.attr("id", "container").attr("transform", `translate(${options.margins.left}, ${options.margins.top})`)

// Return the SVG node and attach an update method
return Object.assign(sel.node(), {
update: render.bind(container)
});
}
Insert cell
data = {
while (true) {
yield Array(Math.ceil(Math.random() * 6))
.fill()
.map((d) => [Math.ceil(Math.random() * 6), Math.ceil(Math.random() * 6)]);
await Promises.delay(2000);
}
}
Insert cell
render = function(data) {
//NOTE: this functino expects to be bound to an svg.node()
//this is done above in the graph cell
// 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] * 10})`)
.transition()
.attr("transform", (d) => `translate(0, ${d[1] * 10})`)
.attr("fill", `#090`)
.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] * 10})`)
.attr("fill", `#333`)
,
// Removed items fade out to the right
(exit) =>
exit
.attr("fill", `#900`)

.transition()
.attr("transform", (d) => `translate(50, ${d[1] * 10})`)
.attr("opacity", 0)
.remove()
);
}
Insert cell
options = ({
height: 150,
width: 300,
margins: {
left: 10,
top: 10,
right: 10,
bottom: 10
}
})
Insert cell
{
// This cell re-runs each time data changes; it passes data to graph’s update method, which runs the join code without destroying and recreating all of graphic
shell.update(data)

return md`
## This secret sauce
This cell re-runs each time data changes; it passes 'data' to graph’s update method, which runs the join code without destroying and recreating all of graphic

<code> shell.update(data) </code>
`
}
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