Concentric Circles
Concentric circles distributed on a regular grid.
{
const width = 950
const height = 450
const svg = d3.create('svg')
.attr("width",width)
.attr("height",height);
const group = svg.append("g")
const xpitch = 100
const ypitch = 90
for (let thx = 0; thx < 12; thx++) {
for (let thy = 0; thy < 8; thy++) {
let check = thy % 2
if (check == 0) { var shift = 0 }
else { var shift = 50 }
for (let ff = 10; ff > 0; ff--) {
group
.append('circle')
.attr('cx', thx * xpitch + shift)
.attr('cy', thy * ypitch)
.attr('r', 2 + 6 * ff)
.style("stroke", "#999")
.style("fill", function () {
const randc = Math.random()
return d3.rgb(10, 225 - randc*155,255 - randc*155);
})
}
}
}
return svg.node();
}
d3 = require("d3@6")
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.
