Published
Edited
Jan 10, 2021
Importers
Insert cell
md`# Using Mutable Chart in Observable

This notebook shows how one can use charts which update in observable.
The key idea is to use <code>viewof</code> of the SVG node and attach the chart object to the <code>value</code> of the viewof variable.

`
Insert cell
viewof chart = {
const chartObj = new ChartObj(200, margin);
//chartObj.init();
const container = chartObj.svg.node();
container.value = chartObj;
yield container;
}
Insert cell
chart.update(new Array(5).fill(1).map(d => 10 + d3.randomNormal()()), true)
Insert cell
data = {
chart.reset();
const rng = d3.randomInt(5, 20);
const rng2 = d3.randomNormal();
for (let i = 0; i < 10; i++) {
const l = rng();
const data = new Array(l).fill(1).map(d => 10 + rng2());
yield data;
await Promises.tick(1000);
}
}
Insert cell
Insert cell
chart.update(data)
Insert cell
//chart.update([1, 11, 3, 2, 11, 23, 12])
Insert cell
chart2.update([1, 11, 3, 2, 11, 23, 12])
Insert cell
Insert cell
margin = ({ top: 20, right: 30, bottom: 30, left: 40 })
Insert cell
d3 = require("d3")
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