Published
Edited
Oct 23, 2021
3 forks
Insert cell
Insert cell
Insert cell
Insert cell
function makeArt() {
more;
const height = width * 0.8;
let svg = d3.create("svg").attr("width", width).attr("height", height);

let bg = svg
.append("rect")
.classed("bg", true)
.attr("width", width)
.attr("height", height)
.attr("fill", () => chance.pickone(colors));

let node = svg
.selectAll("g")
.data([0, 1, 2])
.join("circle")
.attr("fill", () => chance.pickone(colors))
.attr("r", () => chance.integer({ min: 10, max: 100 }))
.attr(
"transform",
(d, i) => `translate(${width / 2},${height / 2.8 + i * 100})`
);

return svg.node();
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
palettes
Insert cell
colors = {
const paletteName = chance.pickone(Object.keys(palettes));
return chance.pickone(palettes[paletteName]);
}
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