chart = { const height = 600; // Canvas height const context = DOM.context2d(width, height); // Create a 2D canvas // Create particles from data const particles = data.map((d) => ({ x: Math.random() * width, // Random starting x position y: Math.random() * height, // Random starting y position vx: ((Math.random() - 0.5) * 1) / d.Weight, // Random velocity x vy: ((Math.random() - 0.5) * 1) / d.Weight, // Random velocity y tt_weight: d.Weight * 100, //tooltip weight due_date: d["Due Date"], course: d.Course, // Course label deliverable: d.Deliverable, // Deliverable label size: d.Weight * 200, dtype: d["Deliverable Type"], })); // Tooltip element const tooltip = document.createElement("div"); Object.assign(tooltip.style, { position: "absolute", background: "white", padding: "5px", border: "1px solid black", borderRadius: "5px", display: "none", pointerEvents: "none", zIndex: "10", }); document.body.appendChild(tooltip); // Mousemove event for tooltip handling context.canvas.addEventListener("mousemove", (event) => { const { offsetX, offsetY } = event; let found = false; for (const p of particles) { const distance = Math.sqrt((p.x - offsetX) ** 2 + (p.y - offsetY) ** 2); if (distance < p.size) { // Display tooltip with particle details tooltip.style.left = `${event.pageX + 10}px`; tooltip.style.top = `${event.pageY + 10}px`; tooltip.style.display = "block"; tooltip.innerHTML = ` `; found = true; break; } } if (!found) { tooltip.style.display = "none"; } }); // Mouseout event to hide tooltip context.canvas.addEventListener("mouseout", () => { tooltip.style.display = "none"; }); while (true) { context.clearRect(0, 0, width, height); // Clear the canvas for (const p of particles) { // Update position p.x += p.vx; p.y += p.vy; // Bounce off the walls if (p.x < 0 || p.x > width) p.vx *= -1; if (p.y < 0 || p.y > height) p.vy *= -1; // Draw the particle context.beginPath(); context.arc(p.x, p.y, p.size, 0, 2 * Math.PI); // Particle size context.fillStyle = courseColors.get(p.course); // Color based on course context.fill(); } yield context.canvas; // Render the frame } }