svg`<svg id = "wheel" width=${width} height=${height} viewBox= '${-width * scale/2} ${-height * scale/2} ${width * scale} ${height * scale}'>
<defs>
<linearGradient id="myGradient" gradientTransform="rotate(90)">
<stop offset="50%" stop-color="gold" />
<stop offset="65%" stop-color="red" />
</linearGradient>
</defs>
${(() => {
const paths = []
for(let i = 0; i <= maxNumBlobs; i ++) {
paths.unshift(`<path d = ${radarLine(data[i])} fill="url(#myGradient)" stroke = "white" stroke-width = "0"/>`)
}
return paths.join('')
})()}
</svg>`
now
data = {
let data = []
for (let i = maxNumBlobs; i >= 0; i --) {
let f = Math.sqrt(i / maxNumBlobs) * frequency_scale
let radius = []
for (let theta = 0; theta <= 360 - angleStep; theta += angleStep) {
let x1, y1,r
x1 = Math.cos(theta) + 1 // output [0,2]
y1 = Math.sin(theta) + 1
r = (random.noise3D(x1 * f, y1 * f, Math.cos(i * Math.PI * 2 + now/(speed*1000)) * 5)+1)/2 + i * 0.2 // 后者为distance between blobs
radius.push([r, degToRad(theta)])
// let x = xCenter + r * cos(theta);
// let y = yCenter + r * sin(theta);
}
data[i] = radius
}
return data
}
rScale = d3.scaleLinear()
.domain([0, 1]) // input is a noise2D output
.range([0, maxRadius]) // just the width, i said min(width, height)
radarLine = d3.lineRadial()
.curve(d3.curveCardinalClosed)
.radius(d => rScale(d[0])) // r should be noise, rscale is just what turns noise into pixels
.angle((d, i) => d[1])
d3 = require("d3@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.
