Interactive Demo: Circle Packing with D3.js

This post demonstrates how to embed a JavaScript-based interactive visualization directly in a blog post. The demo below uses D3.js to animate a circle packing layout.

The mathematics behind circle packing connects to the Apollonian gasket and the Descartes Circle Theorem. For four mutually tangent circles with curvatures $k_1, k_2, k_3, k_4$, Descartes showed:

$$\left(k_1 + k_2 + k_3 + k_4\right)^2 = 2\left(k_1^2 + k_2^2 + k_3^2 + k_4^2\right)$$

Live Demo

Click Regenerate to produce a new random packing.

How to Embed Your Own Visualization

To add an interactive demo to any post, follow this pattern:

<!-- 1. An HTML container -->
<div class="demo-container">
  <canvas id="my-canvas" width="500" height="400"></canvas>
</div>

<!-- 2. Load your library from CDN -->
<script src="https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js"></script>

<!-- 3. Your visualization code -->
<script>
  // Write vanilla JS here. The DOM is ready.
  const canvas = document.getElementById("my-canvas");
  // ...
</script>

The .demo-container CSS class adds a subtle border and handles overflow for you. No build step or bundler is needed — just drop the script tags into your Markdown.