viewof rings = slider({
min: 3,
max: 10,
step: 1,
value: 5,
title: "rings"
})
viewof outerCircles = slider({
min: 50,
max: 100,
step: 10,
value: 100,
title: "outer ring number"
})
width = 800
outerR = width/2 - 100
radius = outerR * Math.sin(Math.PI / outerCircles)
{
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
const g = svg.append("g")
g.attr("transform", `translate(${width/2}, ${height/2})`);
d3.range(rings).forEach((ring,index) => {
const numberCircles = outerCircles - 7 * index
const angle = Math.PI / numberCircles
const packR = radius / Math.sin(angle)
const xRadial = d3.scaleLinear()
.domain([0, numberCircles])
.range([0, 2 * Math.PI])
g.append('g').selectAll("circle")
.data(d3.range(numberCircles))
.join("circle")
.attr("cx", (d,i) => d3.pointRadial(xRadial(i), packR)[0])
.attr("cy", (d,i) => d3.pointRadial(xRadial(i), packR)[1])
.attr("r", radius-5)
.attr("fill", (d,i) => xRadial(i)>Math.PI/2 ? 'black': 'gray')
})
return svg.node()
}
data = d3.range(100)
function getRandom(min, max) {
return Math.random() * (max - min) + min;
}
https://observablehq.com/@d3/collision-detection?collection=@d3/d3-force
https://wattenberger.com/blog/spirals
numNodes = 100
nodes = d3.range(200).map(function(d) {
return {radius: 10}
})
// simulation = d3.forceSimulation()
// .force("center", d3.forceCenter().x(width / 2).y(height / 2)) // Attraction to the center of the svg area
// .force("charge", d3.forceManyBody().strength(0.5)) // Nodes are attracted one each other of value is > 0
// .force("collide", d3.forceCollide().strength(.01).radius(30).iterations(1))
height = width
import {slider, text, number, color, checkbox} 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.
