height = width/1.6;
viewof period = Inputs.range([-4, 4], {label: "Period (in radians ✖️2π)", step: 0.1, value: 1, width: 900})
viewof phaseShift = Inputs.range([0, 2*Math.PI], {label: "Phase Shift (radians)", step: 0.01, value: 0, width: 900})
viewof amplitude = Inputs.range([10, 200], {label: "Amplitude (px)", step: 1, value: 156, width: 900})
viewof circles = Inputs.range([50, 200], {label: "Circle count", step: 1, value: 100, width: 900})
viewof radius = Inputs.range([50, 200], {label: "Circle radius", step: 1, value: 100, width: 900})
{
const svg = DOM.svg(width,height);
let centerX = width/2;
let centerY = height/2;
function toRadians(angle) {
return angle * (Math.PI / 180);
};
let circleArray = [];
for (let i = 0; i <= circles; i++) {
circleArray[i] = (360/circles)*i; // 0,3.6,7.2,10.8...
}
d3.select(svg).append("g").attr("transform", `translate(${width/3}, ${-height/2}) rotate(45)`).selectAll("circle")
.data(circleArray)
.enter()
.append("circle")
.attr("fill","none")
.attr("stroke","red")
.attr("stroke-width",1)
.attr("r",radius)
.attr("cx",d => centerX
+ amplitude * Math.sin(period * (toRadians(d) + phaseShift)) )
.attr("cy",(d,i) => (i < circles/2 ? height / 3 : height / 3 * 2)
+ amplitude * Math.cos(period * (toRadians(d) + phaseShift)) );
return svg;
}
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.
