slightly cleaner

mbostock · mbostock · commit d415ae62f206 · 2025-07-04T16:42:53.000-04:00
diff --git a/docs/ex/d3/zoomable-pack.html b/docs/ex/d3/zoomable-pack.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<notebook>
+<notebook theme="air">
   <title>Zoomable circle packing</title>
   <script id="1" type="text/markdown">
     # Zoomable circle packing
@@ -16,20 +16,23 @@
         .range(["hsl(152,80%,80%)", "hsl(228,30%,40%)"])
         .interpolate(d3.interpolateHcl);
 
-    // Compute the layout.
-    const pack = (data) => d3.pack()
+    // Create the pack layout.
+    const pack = d3.pack()
         .size([width, height])
-        .padding(3)
-      (d3.hierarchy(data)
+        .padding(3);
+
+    // Compute the hierarchy from the JSON data; recursively sum the
+    // values for each node; sort the tree by descending value; lastly
+    // apply the pack layout.
+    const root = pack(d3.hierarchy(data)
         .sum((d) => d.value)
         .sort((a, b) => b.value - a.value));
-    const root = pack(data);
 
     // Create the SVG container.
     const svg = d3.create("svg")
-        .attr("viewBox", `-${width / 2} -${height / 2} ${width} ${height}`)
         .attr("width", width)
         .attr("height", height)
+        .attr("viewBox", [-width / 2, -height / 2, width, height])
         .attr("style", `height: auto; background: ${color(0)}; cursor: pointer;`);
 
     // Append the nodes.
