Published
Edited
Mar 25, 2020
md`# Study Case 1`
md`A sparkline ${sparkline([
0,
8,
9,
2,
6,
5,
1,
9
])} is a chart inline with prose.`
function sparkline(values, width = 64, height = 17) {
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 context = DOM.context2d(width, height);
const line = d3.line().x((d, i) => x(i)).y(y).context(context);
context.beginPath(), line(values), context.stroke();
return context.canvas;
}
canvas
values = FileAttachment("values@1.json").json()
md`# Appendix`
height = 300
import {canvas} with {height} from "@mbostock/connected-particles-iii"
d3 = require("d3@5");
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.
