Public
Edited
Jul 4, 2023
1 star
chart1 = {
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
.style("font", "16px sans-serif")
.style("font-weight", "bold");
/* const g = svg.append("g")
.attr("transform", `translate(${width / 2},${height / 2}) rotate(${-rangeArc / 2 + rangeRotation})`); */
const arc = d3.arc()
.innerRadius(innerRadius)
.outerRadius(outerRadius)
.cornerRadius((outerRadius - innerRadius) / 2)
.startAngle(0)
.endAngle(d => degreesToRadians(arcScale(normalizeNoise(noise(d, offsetNoise)))));
svg.selectAll("path")
.data(points)
.enter()
.append("path")
/* .attr("transform", d => `translate(${d[0]},${d[1]}) rotate(${-(arcScale(perlin3(d[0] * noiseScale, d[1] * noiseScale, rangeRotation * noiseScale + offsetDriver))) / 2 + (toDegree(perlin3(d[0] * noiseScale, d[1] * noiseScale, rangeRotation * noiseScale + offsetDriver)))})`) */
.attr("transform", d => `translate(${d[0]},${d[1]}) rotate(${-(arcScale(normalizeNoise(noise(d, offsetNoise)))) / 2 + (arcScale(normalizeNoise(noise(d, 0))))})`)
//.attr("transform", d => `translate(${d[0]},${d[1]}) rotate(${0})`)
.attr("d", arc)
.attr("fill", d => color(normalToDegree(normalizeNoise(noise(d, 0)))))
.attr("opacity", d => opacity(arcScale(normalizeNoise(noise(d, offsetNoise)))))
svg.selectAll("circle")
.data(points)
.enter()
.append("circle")
.attr("cx", d => d[0])
.attr("cy", d => d[1])
.attr("r", innerRadius / 2)
.attr("fill", "black");
return svg.node();
}
noise = (d, offset) => perlin3(d[0] * noiseScale, d[1] * noiseScale, noiseScale + offsetDriver + offset)
normalizeNoise = (d) => (d + 1) / 2
offsetNoise = 100;
radialScale = d3.scaleRadial()
.domain([360, 0])
.range([0, 1])
/* color = d3.scaleSequential([360, 0], d3.interpolateRdPu); */
color = d3.scaleSequential([360, 0], d3.interpolateSinebow);
opacity = d3.scaleLinear().domain([0, 360]).range([1, 0])
normalToDegree = d3.scaleLinear().domain([0, 1]).range([0, 360])
arcScale = d3.scaleLinear().domain([0, 1]).range([0, 360])
height = Math.min(width, 500);
innerRadius = outerRadius / 2
outerRadius = rangeSize
radius = Math.min(width, height) / 2
data = [0.5]
points = [...poissonDiscSampler(width / 8, height / 8, width * 7 / 8, height * 7 / 8, outerRadius * 2)]
import {poissonDiscSampler} from "@mbostock/the-delaunays-dual"
import {octave, perlin3} from "@mbostock/perlin-noise"
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.
