Public
Edited
Apr 14, 2023
1 fork
2 stars
CTR = containers();
doGrow = {
grow;
const a = growBars(45);
return a;
}
init = () => {
CTR.cv.remove();
const minDist = d3.min(data.map( d => calculateDistance(d,[d.x,0])));
const dots = CTR.s;
dots.append("g")
.attr("class","circon")
.attr("opacity", 1)
.selectAll("circle")
.data(data)
.enter().append("circle")
.attr("class", "small-circle")
.attr("r", config.radius)
.attr("cx", (d, i) => x(d.x))
.attr("cy", (d, i) => height-margin.bottom-config.radius)
.attr("fill", d => d.color)
.attr("opacity", "1")
.transition()
.duration(700)
.delay((d,i) => (calculateDistance(d,[d.x,0])-minDist)*3+250)
.ease(t => d3.easeElasticOut(t,0.8,0.3))
.attr("cx", d => x(d.x))
.attr("cy", d => y(d.y));
// .style("mix-blend-mode","hue");
}
function * growBars(n=45) {
const ctx = CTR.cx;
const inds = d3.range(hist.count.length);
const rangeFcn = d3.interpolate(hist.dims.h,hist.scale(d3.max(hist.count)));
for (const g of grower(n)) {
yield g.then((yMax) => {
ctx.clearRect(0,0,hist.dims.w,hist.dims.h);
ctx.lineWidth = 1;
ctx.strokeStyle = "black";
inds.forEach( i => {
let currentBin = hist.bins[i];
let currentHeight = d3.max([yMax,hist.scale(currentBin.length)]);
let currentWidth = Math.abs(x(currentBin.x1)-x(currentBin.x0));
if (currentWidth > 0) {
ctx.save();
// if colorize, use hist.members[i].color, otherwise use d.color
ctx.fillStyle = hist.members[i].color;
ctx.beginPath();
ctx.rect(x(currentBin.x0),currentHeight,currentWidth,hist.scale(0));
ctx.fill();
ctx.restore();
}
});
return ctx.canvas;
});
}
}
collectPoints = () => {
//transitionGoo(1000);
for (var i = 0; i < 64; ++i) simulation.tick();
const dgr = dodger(config.radius*2+pad);
// Transition points to a hist-like pile
d3.selectAll(".small-circle")
.transition()
.duration(600)
.ease(d3.easeBounce)
.on("end", growBars)
.delay((d,i) => calculateDistance(d,[d.x,0])/10)
.attr("cx", d => x(d.x))
.attr("cy", d => height - margin.bottom - dgr(x(d.x)) - config.radius - pad)
// Grab the circle container and fade the opacity as an independent transition
d3.select(".circon")
.transition()
.duration(600)
.delay(height*2 + Math.sqrt(n/10))
.attr("opacity", 0);
// grow histogram
growBars();
}
groupPoints = (flag) => {
// select points and transition color
d3.selectAll(".small-circle")
.transition()
.duration(300)
.style("fill", (d,i) => {return (flag ? colors[i] : d.color)} );
}
drawBins = () => {
const lineGen = d3.line()
.defined( d => !isNaN(d))
.x(d => x(d) )
.y((d,i) => y(domain[i]) );
const lns = CTR.b.append("g")
.attr("class", "bin-lines")
.attr("opacity",1)
.attr("fill", "none")
.attr("stroke", "#727272")
.attr("stroke-width", 1.2)
.attr("stroke-dasharray","9,4")
.selectAll("path")
.data(hist.edges.map( d => [d,d] ))
.enter().append("path")
.attr("d", d => lineGen(d));
}
n = 300
offset = 17
domain = [0,20];
groupColors = d3.scaleOrdinal(d3.schemeSet3);
vals = d3.range(15).map( v => [v,(v**2 + v + 1)/((14)**2+(14)+1)])
vals.map( d => opacityFcn(d[1]) )
348/6
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.
