UX Designer, aspiring front-end developer and data visualisation enthusiast.
data = Array.from({ length: count }).map((_, i) => {
const PHI = 1.61803398875
const turns = i * PHI * Math.PI * 2;
const x = Math.cos(turns);
const y = Math.sin(turns);
return { x, y, turns };
})
Plot.plot({
height: 400,
width: 400,
inset: 100,
x: { axis: false, domain: [-1, 1] },
y: { axis: false, domain: [-1, 1] },
color: {
type: "cyclical",
scheme: "Rainbow",
range: [0, 1]
},
marks: [
Plot.dot([{ x: 0, y: 0 }], { x: "x", y: "y", r: 120, fill: "#f0f0f0" }),
Plot.dot([{ x: 0, y: 0 }], { x: "x", y: "y", r: 80, fill: "white" }),
Plot.dot(data, {
x: "x",
y: "y",
r: 5,
fill: (d, i) => {
console.log(d.turns % 1);
return d.turns % 1;
}
})
]
})
viewof count = Inputs.range([3, 100], { step: 1, label: "Count" })
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.
