28:null 29:["$","title",null,{"children":"Bubble scatter | dduyg | Observable"}] 2e:T4c0,viewof dataPoints = Inputs.table( [ { metric: "Active Users", value: 1200, category: "Users" }, { metric: "New Signups", value: 450, category: "Users" }, { metric: "Monthly Revenue ($k)", value: 320, category: "Revenue" }, { metric: "Website Sessions", value: 1500, category: "Traffic" }, { metric: "Mobile App Sessions", value: 800, category: "Traffic" }, { metric: "Support Tickets", value: 90, category: "Support" }, { metric: "Completed Orders", value: 720, category: "Orders" }, { metric: "Pending Orders", value: 150, category: "Orders" }, { metric: "Product Reviews", value: 230, category: "Engagement" }, { metric: "App Downloads", value: 500, category: "Growth" }, { metric: "Churned Users", value: 75, category: "Users" }, { metric: "Referral Signups", value: 120, category: "Growth" }, { metric: "Customer Feedback", value: 45, category: "Support" }, { metric: "Feature Requests", value: 60, category: "Engagement" } ], { columns: ["metric", "value", "category"], header: { metric: "Metric", value: "Value", category: "Category" }, width: { metric: 200, value: 100, category: 150 } } )2f:Tfcd,{ const categoryColors = { Users: "#500030", Revenue: "#bf8519", Traffic: "#007BBE", Support: "#FF2EC4", Orders: "#d47b1c", Engagement: "#FF3B30", Growth: "#005F73" }; // Responsive sizing const width = Math.min(500, window.innerWidth - 40); const isMobile = window.innerWidth < 768; const height = 500; const container = html`

`; const tooltip = container.querySelector(".tooltip"); const actualWidth = container.offsetWidth || width; // Unique categories const categories = [...new Set(dataPoints.map((d) => d.category))]; const categoryCount = categories.length; // Bubble size const maxValue = Math.max(...dataPoints.map((d) => d.value)); const baseSize = isMobile ? 50 : 55; const maxBubbleSize = baseSize + (isMobile ? 50 : 65); const paddingPercent = 0.05; const horizontalPadding = actualWidth * paddingPercent + maxBubbleSize / 2; const verticalPadding = height * paddingPercent + maxBubbleSize / 2; const plotWidth = actualWidth - horizontalPadding * 2; const plotHeight = height - verticalPadding * 2; const minValue = Math.min(...dataPoints.map((d) => d.value)); const valueRange = maxValue - minValue; // Position bubbles const bubbles = dataPoints.map((d) => { const categoryIndex = categories.indexOf(d.category); const categoryWidth = plotWidth / categoryCount; const categoryCenter = categoryIndex * categoryWidth + categoryWidth / 2; const jitterX = (Math.random() - 0.5) * categoryWidth * 0.7; const x = horizontalPadding + categoryCenter + jitterX; const normalizedValue = (d.value - minValue) / (valueRange || 1); const y = verticalPadding + plotHeight - normalizedValue * plotHeight; const jitterY = (Math.random() - 0.5) * 50; const size = baseSize + (d.value / maxValue) * (isMobile ? 50 : 65); return { ...d, x: x, y: y + jitterY, size: size }; }); // Create orbs bubbles.forEach((d) => { const orb = document.createElement("img"); orb.src = "https://cdn.jsdelivr.net/gh/dduyg/LiminalLoop@shelf/0-6/blobs/scd-ball.svg"; orb.style.cssText = ` position: absolute; border-radius: 50%; transition: transform 1s, filter 1s; cursor: pointer; `; orb.style.left = d.x - d.size / 2 + "px"; orb.style.top = d.y - d.size / 2 + "px"; orb.style.width = d.size + "px"; orb.style.height = d.size + "px"; const hue = categoryColors[d.category] || "#ffffff"; orb.style.filter = `drop-shadow(0 0 15px ${hue})`; orb.addEventListener("mouseenter", () => { orb.style.transform = "scale(1.4) rotate(720deg)"; orb.style.zIndex = "10"; }); orb.addEventListener("mouseleave", () => { orb.style.transform = ""; orb.style.filter = `drop-shadow(0 0 15px ${hue})`; orb.style.zIndex = "1"; }); // Tooltip orb.addEventListener("mousemove", (e) => { const rect = container.getBoundingClientRect(); tooltip.style.left = e.clientX - rect.left + 10 + "px"; tooltip.style.top = e.clientY - rect.top + 10 + "px"; tooltip.innerHTML = ` ${d.metric}

Value: ${d.value}
Category: ${d.category}

`; tooltip.style.opacity = 1; }); orb.addEventListener("mouseleave", () => { tooltip.style.opacity = 0; }); container.appendChild(orb); }); return container; }30:[] 2c:{"id":"434e7ba38b9d908f","slug":"bubble-dash","title":"Bubble scatter","thumbnail":"25cb39f0324479e78703d080c5585b737e5f1273851ad3733628f7c9337d419a","access_level":"public","create_time":"$D2025-11-14T20:24:52.618Z","update_time":"$D2026-05-17T17:18:32.021Z","view_time":null,"first_public_time":"$D2025-11-14T20:24:52.618Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"1fa0c77b14fd90d0","login":"dduyg","name":"","avatar_url":"https://avatars-next.observableusercontent.com/8922701a2d973be0158565df96ce0b2fe9ffd55df053350d59973a811bac06af","tier":"starter_2024"},"version":287,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"248f116c85e550e3","login":"dduyg","name":"Duygu Dağdelen","avatar_url":"https://avatars-next.observableusercontent.com/ca098eb30fb37c129368c39d70e98a9a8444cfaa7496c72781905ac410af8cad","tier":null}],"members":[{"type":"team","id":"1fa0c77b14fd90d0","login":"dduyg","name":"","avatar_url":"https://avatars-next.observableusercontent.com/8922701a2d973be0158565df96ce0b2fe9ffd55df053350d59973a811bac06af","tier":"starter_2024","role":"editor"},{"type":"individual","id":"248f116c85e550e3","login":"dduyg","name":"Duygu Dağdelen","avatar_url":"https://avatars-next.observableusercontent.com/ca098eb30fb37c129368c39d70e98a9a8444cfaa7496c72781905ac410af8cad","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Bubble scatter","cells":[{"id":0,"value":"# Bubble scatter\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":8,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"▇ bubble.scatterplot","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":271,"value":"> bubble.scatterplot","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2d:"$2c:body"