The avatar for @99percentcocoa
Saarang Rajguru
Published
Edited
Aug 14, 2021
Fork of Beeswarm Plot
Importers
1
Insert cell
md`# Timeline Beeswarm`
Insert cell
Insert cell
Insert cell
viewof height = slider({min: "150", max: 200, step:10, title: "Height:"})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
md`# Utils`
Insert cell
radius = 3
Insert cell
padding = 1
Insert cell
xScale = d3.scaleLinear()
.domain(d3.extent(pcmData, d => d.value))
.range([margin.left, width - margin.right])
Insert cell
xAxis = g => g
.attr('transform', `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(xScale))
Insert cell
names = Array.from(new Set(pcmData.map(d => d.name)))
Insert cell
pcmColor = d3.scaleOrdinal()
.domain(names)
.range(["lightblue", "orange", "purple", "lightgreen", "red", "pink", "teal"])
Insert cell
simulation = {
const simulation = d3.forceSimulation(pcmData)
.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
}
Insert cell
Insert cell
Insert cell
pcmData = d3.tsv("https://docs.google.com/spreadsheets/d/e/2PACX-1vSzfkQQjNKFYV9fZe1YdXN1rxTVVOD3250DjaGkS2pgsl2L5zmLKKOTDjYcR7uHTi4PvMWVAPCAh704/pub?gid=1643947269&single=true&output=tsv", (d) => ({
name: d.name,
value: Number(d.year),
index: Number(d.index)
}))
Insert cell
md`# Library`
Insert cell
d3 = require("d3@6")
Insert cell
scaleCluster = require("d3-scale-cluster")
Insert cell
import {slider, radio, text, select, color} from '@jashkenas/inputs'
Insert cell
import {legend} from "8feb97c258656538"
Insert cell
md`## Reference
`
Insert cell

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.
Learn more