Orbits within orbits
Randomly distributed circles orbiting around circles that in turn orbit in circular paths.
{
const width = 1200
const height = 700
const svg = d3.create('svg')
.attr("width",width)
.attr("height",height);
const group = svg.append("g")
const planets = svg.append("g")
const satellites = 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 = width/2
const ypitch = height/2
const rpitch = 15
const elements = 30
const list_radius = Array.from({ length: elements }, () => Math.floor(Math.random() * 15));
for (let qq = 0; qq < elements; qq++) {
const miniradius = 50 + rpitch * qq
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', xpitch)
.attr('cy', ypitch)
.attr('r', miniradius)
.style("stroke", "#333")
.style("fill", "none");
planets
.append('circle')
.attr('cx', xpitch + minithex)
.attr('cy', ypitch + minithey)
.attr('r', 5 + list_radius[qq])
.style('stroke-width', 1)
.style("opacity", 1)
.style("stroke", "none")
.attr("id", "query_" + qq)
.style("fill", function () {
const randc = Math.random()
return d3.rgb(10, 225 - randc*55,255 - randc*55);})
const randnn = Math.ceil(5 * Math.random())
const baseradius = list_radius[qq]
for (let cc = 0; cc < randnn; cc++) {
const microradius = baseradius + 15 + 5 * cc
const microitems = randnn;
const alpharand = Math.random()
const microthex = microradius * Math.cos(2 * alpharand * Math.PI);
const microthey = microradius * Math.sin(2 * alpharand * Math.PI);
satellites
.append("circle")
.attr("cx", xpitch + minithex)
.attr("cy", ypitch + minithey)
.attr("r", baseradius + 15 + 5 * cc)
.attr("fill", "none")
.attr("stroke", "#333")
satellites
.append("circle")
.attr("cx", xpitch + minithex + microthex)
.attr("cy", ypitch + minithey + microthey)
.attr("r", 2)
.attr("opacity", 1)
.attr("stroke", "none")
.style("fill", function () {
const randc = Math.random()
return d3.rgb(10, 225 - randc*35,255 - randc*35);})
}
}
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.
