Public
Edited
Oct 13, 2022
Insert cell
### Adding Layers as grouping elements
Insert cell
chart= {
const svg= d3.create('svg').attr("viewBox", [0, 0, width, height]);

const layer1= svg.append("g");
const layer2= svg.append("g");

layer1.append("circle")
.join("circle")
.attr("cx", 10)
.attr("cy", 20)
.attr("r", 10);

layer2.append("rect")
.join("rect")
.attr("x", 65)
.attr("y", 30)
.attr("width", height / 2)
.attr("height", 40)
.attr("fill", color_scale);
return svg.node();
}
Insert cell
Insert cell
color_scale= d3.scaleLinear()
.range(["yellow", "red"])
Insert cell
height= 400
Insert cell
d3= require("d3@6")
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