Orbital
Sequence of circles randomly placed in different orbits.
{
const width = 1200
const height = 600
const svg = d3.create('svg')
.attr("width",width)
.attr("height",height);
const group = svg.append("g")
group
.append("rect")
.attr("x", 0)
.attr("y", 0)
.attr("height", height)
.attr("width", width)
.attr("fill", "#117BA4")
.attr("stroke", "none");
const xpitch = 120
const ypitch = 80
for (let thx = 0; thx < 20; thx++) {
for (let thy = 0; thy < 20; thy++) {
const check = thy % 2
if (check == 0) { var shift = 0 }
else { var shift = 50 }
const randr = Math.ceil(Math.random() * 6)
for (let ff = 0; ff < randr; ff++) {
const miniradius = 2 + 6 * ff
const alpharand = Math.random()
const minithex = miniradius * Math.cos(2 * alpharand * Math.PI);
const minithey = miniradius * Math.sin(2 * alpharand * Math.PI);
group
.append('circle')
.attr('cx', thx * xpitch + shift)
.attr('cy', thy * ypitch)
.attr('r', 2 + 6 * ff)
.style('stroke-width', 1)
.style("stroke", "white")
.style("fill", "none")
.style('opacity',0.2)
group
.append('circle')
.attr('cx', thx * xpitch + shift + minithex)
.attr('cy', thy * ypitch + minithey)
.attr('r', 2)
.style('stroke-width', 1)
.style("stroke", "none")
.style("fill", function () {
const randc = Math.random()
return d3.rgb(10, 225 - randc*55,255 - randc*55);
})
}
}
}
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.
