function makeArt() {
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", () => colors[0]);
let leaf = svg
.selectAll("g")
.data(data)
.join("circle")
.attr("r", (d) => d.r)
.attr("fill", (d) => d.fill)
.attr("transform", (d, i) => `translate(${d.x},${d.y})`);
return svg.node();
}
scale = width / 30
data = d3.range(50).flatMap((i) => {
return d3.range(10).map((j) => {
let x = 50 + i * scale;
let y = 50 + j * scale;
let value = simplex.noise3D(x, y, z);
// let r = chance.integer({ min: 10, max: 50 });
let r = value * 50;
let fill = colors[Math.round(i * 0.5)];
return {
fill,
r,
i,
j,
x,
y,
value: value + 1 // add 1 just to avoid negative values
};
});
})
colors = {
const paletteName = chance.pickone(Object.keys(palettes));
return chance.pickone(palettes[paletteName]);
}
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.
