Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.
Published
Edited
May 26, 2020
2 forks
Importers
37 stars
initialData = {
const data = [];
let value = 0;
for (let i = 500; i > 0; --i) {
data.push({date: new Date(Date.now() - i * 1000), value: value += Math.random() - 0.5});
}
return data;
}
liveData = {
const data = initialData.slice();
let value = data[data.length - 1].value;
while (true) {
data.shift();
data.push({date: new Date(Date.now()), value: value += Math.random() - 0.5});
yield data;
await Promises.tick(1000);
}
}
vegalite({
mark: "line",
data: {values: liveData},
encoding: {
x: {field: "date", type: "temporal", axis: {title: false}},
y: {field: "value", type: "quantitative", axis: {title: false}}
},
width,
height: 200,
autosize: {type: "fit-x", contains: "padding"}
})
viewof view = vegalite({
mark: "line",
data: {name: "values", values: initialData},
encoding: {
x: {field: "date", type: "temporal", axis: {title: false}},
y: {field: "value", type: "quantitative", axis: {title: false}}
},
width,
height: 200,
autosize: {type: "fit-x", contains: "padding"}
})
view.data("values", liveData).run()
vegalite = require("@observablehq/vega-lite@0.3")
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.
