Published
Edited
Jun 3, 2020
Insert cell
md`# HTML`
Insert cell
html`<p>I am a <i>paragraph</i> element!</p>`
Insert cell
md`I like Markdown for prose, but ${tex`\KaTeX`} for math.`
Insert cell
d3 = require("d3@5")
Insert cell
{
// Create a square <svg> 128px by 128px.
const svg = DOM.svg(128, 128);

// Compute various radii 128, 120, 112, 104 etc.
const radii = d3.range(128, 0, -8);
// Create a sequential color scale (dark for small radii, bright for large).
const color = d3.scaleSequential(d3.interpolateViridis).domain([0, 128]);
// Use D3’s data join to create circles.
d3.select(svg)
.selectAll("circle")
.data(radii)
.join("circle")
.attr("fill", radius => color(radius))
.attr("r", radius => radius);
return svg;
}
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