Public
Edited
Nov 13, 2023
d3 = require("d3@5")
svg = {
let height = 600;
const svg = DOM.svg(width,height);
function toRadians(angle) {
return angle * (Math.PI / 180);
};
let centerX = width/2;
let centerY = height/2;
let circleCountSlider = 100;
let radius = 100;
let circleArray = [];
for (let i = 0; i < circleCountSlider; i++) {
circleArray[i] = (360/circleCountSlider)*i;
}
d3.select(svg).selectAll("circle")
.data(circleArray)
.enter()
.append("circle")
.attr("fill","none")
.attr("stroke","blue")
.attr("stroke-width",1.2)
.attr("r",radius)
.attr("cx",d => centerX + Math.sin(toRadians(d))*radius)
.attr("cy",function(d,i) {
if (i < circleCountSlider/2) {
return (centerY-radius) + Math.cos(toRadians(d))*radius;
} else {
return (centerY+radius) - Math.cos(toRadians(d))*radius;
}
});
return svg;
}
import {slider} from "@jashkenas/inputs"
viewof circleCountSlider = slider({
title: "Number of Circles",
value: 100,
min: 4,
max: 400,
step: 1
})
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.
