canvasChart = {
const context = DOM.context2d(width, height);
let text = "Stage 1";
const centerX = width / 2;
const centerY = height / 2;
const spaceBetweenBubbles = 3;
let radiusScale = (d) => {
return fundingScale(d.funding_2022);
};
let xScale = (d) => {
return xScale_stage_1(d);
};
const newData = [...combined_data_ranked];
const simulation = d3
.forceSimulation(newData)
.alphaTarget(0.5)
.velocityDecay(0.8)
.force("charge", d3.forceManyBody().strength(-width / 100))
.force("x", d3.forceX().strength(0.1))
.force("y", d3.forceY().strength(0.1))
.force(
"collide",
d3
.forceCollide()
.radius((d) => radiusScale(d) + spaceBetweenBubbles)
.iterations(10)
)
.on("tick", ticked);
switch (stage) {
case "one":
text = "Stage 1";
simulation
.force(
"x",
d3
.forceX()
.strength(0.1)
.x((d) => xScale(d) * width)
)
.force(
"y",
d3
.forceY()
.strength(0.1)
.y(height / 2)
);
break;
case "two":
text = "Stage 2";
xScale = (d) => {
return xScale_stage_2(d);
};
simulation
.force(
"x",
d3
.forceX()
.strength(0.2)
.x((d) => xScale(d) * width)
)
.force(
"y",
d3
.forceY()
.strength(0.15)
.y(height / 2)
);
break;
case "three":
text = "Stage 3";
xScale = (d) => {
return xScale_stage_3(d);
};
simulation
.force(
"x",
d3
.forceX()
.strength(0.2)
.x((d) => xScale(d) * width)
)
.force(
"y",
d3
.forceY()
.strength(0.15)
.y(height / 2)
);
break;
case "four":
text = "Stage 4";
xScale = (d) => {
return xScale_stage_4(d);
};
simulation
.force(
"x",
d3
.forceX()
.strength(0.2)
.x((d) => xScale(d) * width)
)
.force(
"y",
d3
.forceY()
.strength(0.15)
.y(height / 2)
);
break;
default:
break;
}
invalidation.then(() => simulation.stop()); // a promise to stop the simulation when the cell is re-run
function ticked() {
context.clearRect(0, 0, width, height);
context.textAlign = "center";
context.textBaseline = "middle";
for (const d of newData) {
let radius = radiusScale(d);
context.beginPath();
context.moveTo(d.x + radius, d.y);
context.arc(d.x, d.y, radius, 0, 2 * Math.PI);
context.fillStyle = colorScale(d.gender);
context.fill();
if (showDiseaseNames) {
context.font = "10px Arial";
context.fillStyle = "#000000";
context.fillText(d.disease, d.x, d.y);
}
}
context.font = "30px Arial";
context.fillStyle = "#000000";
context.fillText(text, centerX, centerY);
}
return context.canvas;
}