Published
Edited
Oct 3, 2020
md`# Circle Spiro`
svg = {
let height = 600;
const svg = DOM.svg(width,height);
let centerX = width/2;
let centerY = height/2;
let circleCount = circleCountSlider;
let radius = 100;
let circleArray = [];
for (let i=0; i < circleCount; i++) {
circleArray[i] = (360/circleCount)*i;
}
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 + Math.sin(toRadians(d)) * radius)
.attr("cy",function (d,i) {
if (i < circleCount/2) {
return (centerY - radius) + Math.cos(toRadians(d)) * radius;
} else {
return (centerY + radius) - Math.cos(toRadians(d)) * radius;
}
})
// .attr("cy",(d,i) => radius + i*4);
return svg;
}
toRadians = function(angle) {
return angle * (Math.PI / 180);
}
d3 = require("d3@5")
import {slider} from "@jashkenas/inputs"
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.
