Published
Edited
Oct 12, 2019
Insert cell
Insert cell
chart = {
return svg.node()
}
Insert cell
d3.schemeOranges.forEach((arr, j) => arr.map((c, i) => dotSwatch(c, i, j)))
Insert cell
function dotSwatch(color, i, j) {
svg.append("circle")
.attr("width", 50)
.attr("height", 50)
.attr("cx", 50 + i * 50)
.attr("cy", 50 + j * 50)
.attr("r", 50)
.style("fill", color)
}
Insert cell
d3 = require("d3@5")
Insert cell
height = 600
Insert cell
svg = d3.create("svg")
.attr("align", "center")
.attr("viewBox", [0, 0, width, height])
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