Maps and Chartjunk for @nprapps
config = ({
seat:0.5*height,
start: 7552,
startLimit: 0,
radius: 0.6,
new_fall_delay: 2000,
circles_per_fall: 227,
exitAmt: 207,
duration: 31,
rectHeight:height,
rectWidth:width
});
{
var {seat,start,startLimit,radius,new_fall_delay,circles_per_fall,exitAmt,duration} = config;
// starting
var iterations = 0;
// var midStart = 3*width/8;
var padding = radius*3;
var data = dataGenerator();
const rectCircles = pack(Array.from({length: (start-startLimit)}, () => ({r: radius*2 })),padding);
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
var sim = d3.forceSimulation(data)
.force("y",d3.forceY(d => {
return d.side === "down" ? seat : -height+Math.random()*height-10;
}))
.force("collide", d3.forceCollide(padding))
// .force("limits", forceLimit.forceLimit().radius(radius).y1(seat).x0(width/4).x1(width*3/4))
sim.on('tick', function() {
svg
.selectAll(".sim-circles")
.attr('cx', d => d.x)
.attr('cy', d => d.y)
.style('fill', d => color(d.x))
.style('stroke', d => color(d.x));
});
function draw_circles() {
svg
.selectAll(".sim-circles")
.data(data)
.join(
enter => enter.append("circle")
.attr("class","sim-circles")
.attr("cx", d => d.x)
.attr("cy", d => d.y)
.attr("r", radius),
exit => exit.remove()
);
}
function add_circles() {
if (iterations < duration) {
data = data.filter(d => d.side != "up");
if (iterations > 0) {
// var righties = [...data].filter(d => d.side !== "up").sort((a,b) => a.x - b.x).slice(-exitAmt);
var righties = [...data].filter(d => d.side !== "up").slice(0,exitAmt);
righties.forEach(function(d,i){
d.side = "up";
});
}
for (let i = 0; i < circles_per_fall; ++i) {
// Start location of new balls
data.push({
x: randn_bm()*width/2+width/4,
y: height+(height*0.9*Math.random()),
vx: 0,
vy: 0,
side:"down"
});
}
draw_circles();
sim.nodes(data).alpha(0.9).velocityDecay(0.4);
}
iterations++;
}
// Rectangle size is determined by number of pixels desired/(width/2) to determine height.
// The area represents the height of the
// svg.append("rect")
// .attr("class","populationRect")
// .attr("width",width/2)
// .attr("height",(start-startLimit)*10/(width/2))
// .attr("x",width/4)
// .attr("y",seat)
// .attr("fill","#ddd")
// svg.selectAll('.static-circle')
// .data(rectCircles).join(
// enter => enter.append("circle")
// .attr("cx",d=>d.x+midStart)
// .attr("cy",d=>d.y+seat+seat/2)
// .attr("r",d=>d.r)
// .style('fill', d => color(d.x+midStart))
// );
draw_circles();
d3.interval(add_circles, new_fall_delay);
return svg.node();
}
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.
