Published
Edited
Oct 23, 2020
3 stars
Insert cell
Insert cell
Insert cell
Insert cell
data = [0, 8, 3, 2, 6, 5, 1,9,9,21]
Insert cell
width = 100
Insert cell
height = 17
Insert cell
Insert cell
function sparkline(values, width = 64, height = 17) {
const context = DOM.context2d(width, height);
const x = d3.scaleLinear().domain([0, values.length - 1]).range([0.5, width - 0.5]);
const y = d3.scaleLinear().domain(d3.extent(values)).range([height - 0.5, 0.5]);
const line = d3.line().x((d, i) => x(i)).y(y).context(context);
context.beginPath(), line(values), context.stroke();
return context.canvas;
}
Insert cell
Insert cell
d3 = require("d3@5")
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