Data Engineer and aspiring Data Visualization Journalist, you can reach me at rjhontomin@gmail.com
Public
Edited
Aug 26, 2023
function mapRange (value, a, b, c, d) {
// first map value from (a..b) to (0..1)
value = (value - a) / (b - a);
// then map it from (0..1) to (c..d) and return it
return c + value * (d - c);
}
function degrees_to_radians(degrees)
{
var pi = Math.PI;
return degrees * (pi/180);
}
let noiseMax = slider.value();
for (let a = 0; a < TWO_PI; a += radians(5)) {
let xoff = map(cos(a + phase), -1, 1, 0, noiseMax);
let yoff = map(sin(a + phase), -1, 1, 0, noiseMax);
let r = map(noise(xoff, yoff, zoff), 0, 1, 100, height / 2);
let x = r * cos(a);
let y = r * sin(a);
vertex(x, y);
}
endShape(CLOSE);
phase += 0.003;
zoff += 0.01;
{
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height);
const margin = {
left: 20,
right: 20
}
const xScale = d3.scaleLinear()
.domain([0, numCircles - 1])
.range([margin.left, width - margin.right])
while (true) {
svg.selectAll("circle")
.data(updateData(),(d,i) => i)
.join(
enter => enter.append("circle")
.attr("cx", (d,i) => xScale(i))
.attr("cy", height / 2)
.attr("r", (width - margin.left - margin.right) / numCircles / 2)
.attr("stroke", "black")
.attr("fill", d => d.status == "occupied" ? "black" : "white"),
update => update
.transition().duration(1000)
.attr("fill", d => d.status == "occupied" ? "black" : "white")
)
yield svg.node();
await Promises.tick(3000);
}
}
height =300
numCircles=100
updateData = function(){
return d3.range(numCircles).map(d => ({
status: Math.round(Math.random()) % 2 == 0 ? 'occupied' : 'empty'
}))
}
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.
