25:["$","title",null,{"children":"Interactive tutorial: Visualizing Big Tech Acquisitions | Holger Stitz | Observable"}] 49:T4bb,top5_chart_scales = { const total_height = height + margin.top + margin.bottom; const svg = d3.create("svg") .attr("viewBox", [0, 0, width, total_height]) .attr("width", width) .attr("height", total_height) .attr("style", "max-width: 100%; height: auto;"); const chart = svg.append("g") .attr("transform", `translate(${margin.left},${margin.top})`); chart.append("g") .call(d3.axisTop(x)); chart.append("g") .call(d3.axisLeft(y)); const rectangles = chart.selectAll("rect") .data(top5) .join((enter) => { const rectangles_enter = enter.append("rect"); rectangles_enter.append("title"); return rectangles_enter; }) .attr("x", x(0)) // Start at the "0" of the scale (usually 0) .attr("y", d => y(d["Acquired Company"])) .attr("height", y.bandwidth()) .attr("width", d => x(d["Acquisition Price"])) // <--- FIXED: Use Linear Scale! .attr("fill", d => color(d["Parent Company"])); rectangles.select("title") .text((d) => `${d["Parent Company"]} acquired ${d["Acquired Company"]} for ${d3.format("$.2s")(d["Acquisition Price"])} in ${d["Acquisition Year"]}.`); return svg.node(); }4a:T72a,circle_pack_chart = { const svg = d3.create("svg") .attr("viewBox", [0, 0, pack_chart_width, pack_chart_height]) .attr("width", pack_chart_width) .attr("height", pack_chart_height) .attr("style", "max-width: 100%; height: auto; font: 10px sans-serif;") .attr("text-anchor", "middle"); // We use a so we can move the circle and text together const node_groups = svg.selectAll("g") .data(nodes) .join("g") .attr("transform", d => `translate(${d.x},${d.y})`); // Position the group using calculated x/y // 1. Draw Circles node_groups.append("circle") .attr("r", d => d.r) // Dynamic Fill: Gray for container bubbles, Color for actual companies .attr("fill", d => { if (d.depth === 0) return "white"; // Root if (d.depth === 1) return "#f3f3f3"; // Parent Container (e.g. "Google") return color(d.parent.data[0]); // Leaf (e.g. "YouTube") }) // Add a stroke to parents to define the boundary .attr("stroke", d => d.depth === 1 ? "#ccc" : "none") .attr("opacity", d => d.depth === 2 ? 0.9 : 1); // Make leaves slightly transparent // 2. Add Labels (Condition: Only if radius > 20px) node_groups.append("text") .style("pointer-events", "none") // Let clicks pass through to the circle .text(d => { // If it's a leaf, show Company Name. If it's a parent, hide label return d.data["Acquired Company"] || d.data[0]; }) .attr("dy", "0.35em") // Vertical center align .attr("fill", "#111") .attr("opacity", d => d.r > 20 ? 1 : 0); // Hide label if circle is tiny // 3. Simple Tooltip node_groups.append("title") .text(d => `${d.data["Acquired Company"] || d.data[0]}\nValue: ${d3.format("$,.2f")(d.value)}`); return svg.node(); }4b:T6ff,{ // 1. Select the Canvas const svg = d3.select(svg_canvas); const t = svg.transition().duration(250); // 3. The Data Join svg.selectAll("g") .data(filtered_nodes, d => d.data["Acquired Company"] || d.data[0]) // Unique Key .join( // ENTER: New circles arrive (e.g. dragging slider forward) enter => { const g = enter.append("g") .attr("transform", d => `translate(${d.x},${d.y})`) // Fixed Position .attr("opacity", 0); // Start invisible g.append("circle") .attr("r", d => d.r) // Full size immediately .attr("fill", d => { if (d.depth === 0) return "white"; if (d.depth === 1) return "#f3f3f3"; return color(d.parent.data[0]); }) .attr("stroke", d => d.depth === 1 ? "#ccc" : "none"); g.append("text") .style("pointer-events", "none") .attr("dy", "0.35em") .attr("text-anchor", "middle") .style("font", "10px sans-serif") .text(d => d.data["Acquired Company"] || d.data[0]) // Only show label if bubble is big enough .attr("opacity", d => d.r > 20 ? 1 : 0); g.append("title") .text(d => `${d.data["Acquired Company"] || d.data[0]}\nValue: ${d3.format("$,.2f")(d.value)}`); // Animate Opacity 0 -> 1 return g.transition(t).attr("opacity", d => d.depth === 2 ? 0.9 : 1); }, // UPDATE: Existing circles (Do nothing, they just stay there) update => update, // EXIT: Circles leaving (e.g. dragging slider backward) exit => exit.transition(t) .attr("opacity", 0) // Fade out .remove() // Then delete from DOM ); return svg.node(); }4c:T43a,# Fullscreen Dashboard In Observable, making a single element fullscreen can be a bit tricky. When a dashboard enters fullscreen, the browser window dimensions change. This triggers Observable's reactive width variable, causing it to automatically redraw the charts to fit the new space. If we put the dashboard

directly into fullscreen, that redraw would destroy the original

and instantly cancel the fullscreen mode! To solve this, we use a combination of JavaScript and a neat CSS trick: 1. The JavaScript: Instead of targeting the dashboard, the button requests fullscreen for the entire notebook document (`document.documentElement`). Because the document itself isn't destroyed during a redraw, the fullscreen mode stays active. 2. The CSS Magic: We use the `:fullscreen` CSS pseudo-class to detect when the browser enters this mode. When it does, our CSS kicks in and grabs the `#full-dashboard` element. It applies position: fixed and a high `z-index` to pin the dashboard over the rest of the notebook, stretching it to fill the screen (`100vw` and `100vh`).4d:T523,fullscreen = { const btn = htl.html``; btn.onclick = () => { // Request fullscreen on the ENTIRE document instead of the specific element const docEl = document.documentElement; if (!document.fullscreenElement && !document.webkitFullscreenElement) { if (docEl.requestFullscreen) { docEl.requestFullscreen(); } else if (docEl.webkitRequestFullscreen) { docEl.webkitRequestFullscreen(); } } else { if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.webkitExitFullscreen) { document.webkitExitFullscreen(); } } }; return btn; }4e:[{"id":"9166d925cd1e6379b8eed9a16db3d6983821fca5b71e5cf37d7badc1736b1511540d5ee38f54ee083613d11f2263aa156e8455eec1cce39373eb422f506a041e","href":"https://static.observableusercontent.com/files/9166d925cd1e6379b8eed9a16db3d6983821fca5b71e5cf37d7badc1736b1511540d5ee38f54ee083613d11f2263aa156e8455eec1cce39373eb422f506a041e","name":"Merger and Acquisitions by Tech Companies.csv","type":"text/csv","lastModified":1767736499615.74,"size":103561}] 29:{"id":"92b2466e6b0baa75","slug":null,"title":"Interactive tutorial: Visualizing Big Tech Acquisitions","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2026-01-06T21:53:48.515Z","update_time":"$D2026-04-15T06:53:10.499Z","view_time":null,"first_public_time":"$D2026-01-14T10:15:23.679Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"b64674701dbe64fd","login":"thinkh","name":"Holger Stitz","avatar_url":"https://avatars-next.observableusercontent.com/1b74b09f1ed1ce117943306134846461dafeaeaab7ac62e48a53fb0d1e1b4f25","tier":"starter_2024","bio":"Working as Lead researcher @datavisyn on information visualization in life sciences. Lecturer. Web Developer. ","followed_by_you":false,"follows_you":false},"version":711,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"63ff338e67435064","login":"thinkh","name":"Holger Stitz","avatar_url":"https://avatars-next.observableusercontent.com/1b74b09f1ed1ce117943306134846461dafeaeaab7ac62e48a53fb0d1e1b4f25","tier":null,"bio":"Working as Lead researcher @datavisyn on information visualization in life sciences. Lecturer. Web Developer. ","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"63ff338e67435064","login":"thinkh","name":"Holger Stitz","avatar_url":"https://avatars-next.observableusercontent.com/1b74b09f1ed1ce117943306134846461dafeaeaab7ac62e48a53fb0d1e1b4f25","tier":null,"role":"editor"},{"type":"team","id":"b64674701dbe64fd","login":"thinkh","name":"Holger Stitz","avatar_url":"https://avatars-next.observableusercontent.com/1b74b09f1ed1ce117943306134846461dafeaeaab7ac62e48a53fb0d1e1b4f25","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"088f23cf3297756c","slug":"module-c-charting-with-d3","title":"Module C: Bespoke visualizations with D3","owner":{"id":"b64674701dbe64fd","login":"thinkh","name":"Holger Stitz"}},"type":"notebook","body":{"titling":"auto","title":"Interactive tutorial: Visualizing Big Tech Acquisitions","cells":[{"id":0,"value":"# Interactive tutorial: Visualizing Big Tech Acquisitions\n\nFor the remainder of this module, we will work with a single, rich dataset: [Merger and Acquisitions by Tech Companies from Kaggle](https://www.kaggle.com/datasets/shivamb/company-acquisitions-7-top-companies/).\n\nOver the last 30 years, companies like Apple, Google (Alphabet), Amazon, Meta (Facebook), and Microsoft have shaped the digital world not just by building products, but by buying other companies. From Instagram to LinkedIn, from GitHub to Whole Foods—these acquisitions tell the history of the modern tech ecosystem.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"## The Dataset\n\nWe have a dataset containing over 1,000 acquisitions with the following key columns:\n\n* **Parent Company:** The buyer (e.g., \"Microsoft\").\n* **Acquired Company:** The company being bought (e.g., \"LinkedIn\").\n* **Business:** The industry of the target (e.g., \"Social Network\").\n* **Acquisition Year:** When the deal happened.\n* **Acquisition Price:** The cost of the acquisition (in USD).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":11,"value":"data = FileAttachment(\"Merger and Acquisitions by Tech Companies.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"data","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":127,"value":"Let's get the top 5","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":9,"value":"## The dashboard\n\nThe final dashboard will include:\n\n1. A range slider to select the maximum year of acquisition\n2. Bar chart of the top 5 most expensive companies until the max year\n3. A \"circle packing\" diagram showing the ecosystem of each tech giant\n4. Changing the year will smoothly animate the circles, letting us see how the ecosystems evolved over time","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":418,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":416,"value":"## Range slider and data filter\n\nWe create a range slider to select the maximum year and filter and sort the input data.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":280,"value":"year_slider = Inputs.range(d3.extent(data, (d) => d[\"Acquisition Year\"]), {step: 1, value: 2010, label: \"Year\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":493,"value":"Use the Observable keyword `viewof` to constantly update the selected maximum year","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":404,"value":"viewof max_year = year_slider","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":527,"value":"top5 = data\n .filter((d) => !isNaN(d[\"Acquisition Price\"]) && d[\"Acquisition Year\"] <= max_year) // filter for numeric values only\n .sort((a, b) => b[\"Acquisition Price\"] - a[\"Acquisition Price\"]) // sort descending\n .slice(0, 5); // take top 5","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":19,"value":"## Data join\n\nYou have learned the core functionality of D3: the data join. Now, let's apply this to our Tech Acquisitions dataset and visualize the top 5 most expensive acquisitions as simple rectangles.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":35,"value":"top5_basic = {\n const height = 200; // 5 bars * 40px height\n \n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height])\n .attr(\"width\", width)\n .attr(\"height\", height)\n .attr(\"style\", \"max-width: 100%; height: auto;\");\n \n const rectangles = svg.selectAll(\"rect\")\n .data(top5)\n .join((enter) => {\n const rectangles_enter = enter.append(\"rect\");\n rectangles_enter.append(\"title\");\n return rectangles_enter;\n })\n .attr(\"x\", 0)\n .attr(\"y\", (d, i) => i * 40) // stack them every 40px\n .attr(\"height\", 30)\n .attr(\"width\", d => d[\"Acquisition Price\"]) // <--- PROBLEM HERE!\n .attr(\"fill\", \"#69b3a2\");\n\n rectangles.select(\"title\").text((d) => `${d[\"Parent Company\"]} accquired ${d[\"Acquired Company\"]} for ${d[\"Acquisition Price\"]} in ${d[\"Acquisition Year\"]}.`);\n\n \n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"**The problem: \"data space\" vs. \"screen space\"**\n\nLook at the result above. It likely looks broken or huge. Why?\n\nBecause we map the acquisition cost directly to the bar width, which results in a bar with 404.000.000 pixels. This is way too big and rarely works. Hence, we need a translator between the data space and the screen space that knows how to map billions of dollars to 800 pixels.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":60,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":65,"value":"## Scales and axes","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":75,"value":"margin = {\n return {top: 20, right: 20, bottom: 40, left: 100}\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"height = 200","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"x-scale maps money to pixels:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":69,"value":"x = d3.scaleLinear()\n .domain([0, d3.max(top5, d => d[\"Acquisition Price\"])])\n .range([0, width - margin.left - margin.right])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"y-scale maps categories to pixels:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":84,"value":"y = d3.scaleBand()\n .domain(top5.map(d => d[\"Acquired Company\"]))\n .range([0, height])\n .padding(0.1) // 10% spacing between bars","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"colorScale = d3.scaleOrdinal()\n .domain([\"Apple\", \"Amazon\", \"Google\", \"Microsoft\", \"Facebook\"])\n .range(d3.schemeTableau10); // A nice built-in palette","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":247,"value":"// Color Scale based on Parent Company\ncolor = d3.scaleOrdinal()\n .domain([\"Apple\", \"Amazon\", \"Google\", \"Microsoft\", \"Facebook\"])\n .range(d3.schemeTableau10)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"$49","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"For comparison, this is how the Observable plot bar chart looks like:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":151,"value":"Plot.plot({\n marginLeft: 100,\n width: width,\n height: 200,\nmarks: [\n Plot.auto(top5, {x: \"Acquisition Price\", y: \"Acquired Company\", color: \"#ffc850\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":149,"value":"**What's next?**\n\n- Visualizing the top 5 is nice but visualizing 1000 rows in a bar chart doesn't scale\n- We need to use a different visualization to encode the hierarchy","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":184,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":186,"value":"## D3 Circle Pack layout\n\nSo far, we calculated x and y manually using D3 scales. D3 layouts are algorithms that calculate the x, y, and radius for you. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":214,"value":"### Data preparation\n\nWe need to bring the rows of the \"flat\" CSV file into a nested hierarchy structure. We use `d3.group()` to group by \"Parent Company\" and return a map (e.g., \"Apple\" -> [List of Apple's acquisitions], \"Google\" -> [...]).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":198,"value":"grouped_data = d3.group(data, d => d[\"Parent Company\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":221,"value":"We also create the hierarchy root and calculate the sizes of the parents and its children accordingly.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":216,"value":"root = d3.hierarchy(grouped_data)\n .sum(d => d[\"Acquisition Price\"]) // size circles by price\n .sort((a, b) => b.value - a.value) // sort so biggest circles are in the center","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":225,"value":"### D3 Pack layout\n\nNow for the \"magic.\" We create a Packer. This function doesn't draw anything; it just does the heavy geometry math. It calculates exactly where every circle needs to sit to fit inside a 600x600 box without overlapping.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":232,"value":"pack_chart_width = 600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":235,"value":"pack_chart_height = pack_chart_width","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":230,"value":"// Configure the layout engine\npack = d3.pack()\n .size([pack_chart_width, pack_chart_height])\n .padding(3)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":239,"value":"// apply it to our data -> this MUTATES 'root' by adding x, y, and r properties to every node!\npacked_root = pack(root)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":242,"value":"### Rendering the chart\n\nNow we have a list of circles with coordinates. We use the exact same `selectAll().data().join()` pattern from the beginning to render the chart.\n\nWe will add a few styling rules to improve the readability of the chart:\n\n1. Parents (depth 1): gray background bubbles\n2. Leaves (depth 2): colored bubbles (the actual acquisitions)\n3. Labels: only show text if the circle is big enough (r > 20)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":326,"value":"// Get a flat list of all nodes (parents and leaves)\nnodes = packed_root.descendants();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"$4a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":266,"value":"We now have a powerful static visualization showing the entire ecosystem. It uses complex geometry, yet the code is surprisingly short because D3 did the math for us.\n\nBut... nothing moves. In a real dashboard, data changes. Maybe we want to filter this view to only show acquisitions after 2015?\n\n**What's next?**\n\nD3 transitions updates the position smoothly when the data updates.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":270,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":272,"value":"## Filtering and transitions\n\nNext, we want to filter the circle pack based on the selected year.\n\nSteps:\n\n1. Create year range slider\n2. Filter the data based on the selected year\n3. Separate creating the SVG element from the update logic\n4. Use the D3 key function to provide a unique ID for every data point\n5. Explicitly handle the data join stages\n6. Transitions to animate the bubbles\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":278,"value":"First, let's create the controls. We want to filter our acquisitions by year.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":286,"value":"svg_canvas = {\n const width = 600;\n const height = 600;\n \n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, pack_chart_width, pack_chart_height])\n .attr(\"width\", pack_chart_width)\n .attr(\"height\", pack_chart_height)\n .attr(\"style\", \"max-width: 100%; height: auto; font: 10px sans-serif;\")\n .attr(\"text-anchor\", \"middle\");\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":320,"value":"filtered_nodes = nodes.filter(d => {\n if (d.depth < 2) return true; // Always show parents\n return d.data[\"Acquisition Year\"] <= max_year; // Only show acquisitions up to this year\n});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":288,"value":"$4b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":357,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":354,"value":"## Dashboard\n\nAt this point we have all the charts available to compose them into an interactive dashboard using some HTML Grid.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":348,"value":"

\n ${year_slider}\n

\n ${top5_chart_scales}\n

\n\n

\n ${svg_canvas}\n

","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":678,"value":"$4c","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":705,"value":"**How to modify it for your own projects:**\n\n- To target a different dashboard: Simply change the ID in the CSS block from `#full-dashboard` to whatever ID you are using (e.g., `#my-new-chart`).\n- To change how it looks in fullscreen: You can tweak the styles inside the `:fullscreen` CSS block. For example, you can change the `background` color to dark mode, adjust the `padding`, or even add new `grid-template-columns` rules to change how the charts are arranged when you have more screen space.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":689,"value":"$4d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":695,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":684,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W4e","stdlib":"1"}} 24:null