md`# Beeswarm Plot`
viewof clusters = slider({min: 3, max:9, step:1, title: "Number of clusters"})
viewof height = slider({min: "150", max: 200, step:10, title: "Height:"})
md`# Utils`
colorScale = ({
quantileScale,
quantizeScale,
clusterScale
})
quantileScale = d3.scaleQuantile()
.domain(data.map(d => d.value))
.range(d3.schemeRdYlBu[clusters]);
quantizeScale = d3.scaleQuantize()
.domain(d3.extent(data.map(d => d.value)))
.range(d3.schemeRdYlBu[clusters]);
clusterScale = scaleCluster()
.domain(data.map(d => d.value))
.range(d3.schemeRdYlBu[clusters]);
radius = 3
padding = 1
xScale = d3.scaleLinear()
.domain(d3.extent(data, d => d.value))
.range([margin.left, width - margin.right])
xAxis = g => g
.attr('transform', `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(xScale))
simulation = {
const simulation = d3.forceSimulation(data)
.force("x", d3.forceX(d => xScale(d.value)).strength(1))
.force("y", d3.forceY(height / 2))
.force("collide", d3.forceCollide(radius + padding))
.stop()
for (let i = 0; i < 120; ++i) {
simulation.tick();
}
return simulation
}
md`# Library`
d3 = require("d3@6")
scaleCluster = require("d3-scale-cluster")
import {slider, radio, text, select, color} from '@jashkenas/inputs'
md`## Reference
`
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.
