Published
Edited
Apr 13, 2021
33 forks
Insert cell
md`# Setting up D3`
Insert cell
{
const svg = html`<svg viewBox="0 0 ${width} ${height}"></svg>`;

const selSvg = d3.select(svg);

// D3 code goes here
selSvg
.append("circle")
.attr("r", 30)
.attr("fill", "steelblue");

return svg;
}
Insert cell
{
const selSvg = d3.create("svg").attr("viewBox", [0, 0, width, height]);

// D3 code goes here

return selSvg.node();
}
Insert cell
height = width * 0.6
Insert cell
d3 = require("d3-selection@2")
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