md`# gen 092020-1b`
// https://www.generativehut.com/post/a-step-by-step-guide-to-making-art-with-observable
svg = {
let height = 600
const svg = DOM.svg(width,height)
let cx = width/2
let cy = height/2
let radius = radiusSlider
let circleCount = circleCountSlider
let circleArray = []
for (let i = 0; i< circleCount; i++){
circleArray[i] = (360/circleCount)*i // 0, 3.6, 7.2, 10.8
}
function toRadians(angle) {
return angle * (Math.PI / 180)
}
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 => cx+Math.sin(toRadians(d))*radius)
.attr("cy", function(d,i) {
if ( i <circleCount / 2) {
return (cy - radius) + Math.cos(toRadians(d))*radius
} else {
return (cy + radius) - Math.cos(toRadians(d))*radius
}
})
return svg
}
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.
