{
const size = width/2;
const context = DOM.context2d(size, size);
context.fillStyle = '#222';
context.fillRect(0, 0, size, size);
context.translate(size/2, size/2)
context.beginPath()
const line = d3.line().context(context);
const [u, v] = [5, 7]
const colors = d3.interpolateSpectral
for (let i = 0; i < u; ++i) {
context.save()
context.lineWidth = 2
context.beginPath()
const spiral = d3.range(0, 20*Math.PI, 1/10).map(d => logSpiral(d, params.a, params.k, -i*Math.PI/u*2))
context.strokeStyle = '#78CEE9'
line(spiral)
context.stroke()
context.restore()
}
for (let i = 0; i < v; ++i) {
context.save()
context.lineWidth = 2
context.beginPath()
context.strokeStyle = '#D95F62'
const spiral = d3.range(0, 20*Math.PI, 1/10).map(d => logSpiral(d, params.a, params.k, -i*Math.PI/v*2))
const antispiral = spiral.map(([x, y]) => [-x, y])
line(antispiral)
context.stroke()
context.restore()
}
return context.canvas;
}
function toPolars([x,y]) {
return [Math.sqrt(x*x + y*y), Math.atan(y/x)]
}
function toCartesian([r, θ]) {
return [ r * Math.cos(θ), r * Math.sin(θ)]
}
function logSpiral(θ, a=1, k=1, d=0) {
const r = a * Math.exp(k*θ)
return toCartesian([r, θ+d])
}
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.
