Public
Edited
Feb 13
Insert cell
Insert cell
d3 = require("d3@5")
Insert cell
viewof phaseShift = Inputs.range([0, 2*Math.PI], {label: "Phase Shift (radians)", step: 0.01, value: 0, width: 900})
Insert cell
viewof amplitude = Inputs.range([10, 200], {label: "Amplitude (px)", step: 1, value: 156, width: 900})
Insert cell
svg = {
let height = 600;
const svg = DOM.svg(width,height);
let centerX = width/2;
let centerY = height/2;
let circleCount = circleCountSlider;
let radius = 100;
function toRadians(angle) {
return angle * (Math.PI / 180);
};

let circleArray = [];
for (let i = 0; i <= circleCount; i++) {
circleArray[i] = (360/circleCount)*i; // 0,3.6,7.2,10.8...
}
d3.select(svg).selectAll("circle")
.data(circleArray)
.enter()
.append("circle")
.attr("fill","none")
.attr("stroke","black")
.attr("stroke-width",1)
.attr("r",radius)
.attr("cx",d => centerX
+ amplitude * Math.sin((toRadians(d) + phaseShift)) )
.attr("cy",(d,i) => (i < circleCount/2 ? height / 3 : height / 3 * 2)
+ amplitude * Math.cos((toRadians(d) + phaseShift)) );

return svg;
}

Insert cell
import {slider} from '@jashkenas/inputs';
Insert cell
viewof circleCountSlider = slider({
title: "Number of Circles",
value: 100,
min: 4,
max: 400,
step: 1
})
Insert cell

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.
Learn more