md`# Setting up D3`
//{
// const svg = html`<svg viewBox="0 0 ${width} ${height}"></svg>`;
// const selSvg = d3.select(svg);
// D3 code goes here
// selSvg.append("circle").attr("r", 50).attr("fill", "steelblue");
// return svg;
//}
{
const width = 500, height = 500;
const svg = html`<svg viewBox="0 0 ${width} ${height}" width="${width}" height="${height}"></svg>`;
const selSvg = d3.select(svg);
selSvg
.append("circle")
.attr("r", 50)
.attr("cx", width / 2)
.attr("cy", height / 2)
.attr("fill", "steelblue");
return svg;
}
{
const selSvg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
// D3 code goes here
return selSvg.node();
}
height = width * 0.6
d3 = require("d3-selection@2")
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.
