Public
Edited
Jul 15, 2024
{
const height = 200
const svg = d3
.create("svg")
.attr("viewBox", [0, 0, width, height])
.style("width", "100%")
.style("height", "auto")
const genx = d3.randomInt(0,width)
const geny = d3.randomInt(0,height)
const genr = d3.randomInt(5,40)
const genh = d3.randomInt(0,360)
// Generate some random points
const points = d3.range(70).map(() => {
const hue = genh()
return {
x: genx(),
y: geny(),
r: genr(),
fc: d3.hsl(hue, 0.9, 0.5),
sc: d3.hsl((hue + 180) % 360, 0.4, 0.5),
}
})
// Plot the points
svg.selectAll("circle")
.data(points)
.enter().append("circle")
.attr("cx", d => d.x)
.attr("cy", d => d.y)
.attr("r", d => d.r)
.attr("fill", d => d.fc.formatHsl())
.attr("stroke", d => d.sc.formatHsl())
.attr("stroke-width", d => d.r / 5)
.attr("data-tippy-content", d => html`color: <b>${d.fc.formatHsl()}</b></br>radius: <b>${d.r}</b>`.outerHTML)
.call(d => tippy(d.nodes(), { allowHTML: true }))
return svg.node()
}
tippy = require("tippy.js@6.3.7")
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.
