D3 Examples - Circle Packing layouts

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
    <style>
​
    body {
        background: #EEE;
    }
​
    .container {
        border: thin solid red;
    }
​
    .node {
        fill: white;
        stroke: #3d8b40;
        stroke-width: 2px;
    }
​
    .label {
      font: 11px "Helvetica Neue", Helvetica, Arial, sans-serif;
      text-anchor: middle;
      text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff, 0 -1px 0 #fff;
    }
​
    .fixed {
        stroke: red !important;
    }
​
    .label,
    .node--root,
    .node--leaf {
      pointer-events: none;
    }
​
    .node--root {
        fill: #4caf50 !important;
    }
 
​
    html { height: 100%; }
    body { height: 100%; }
    .viz { width: 100%; height: 100%; position: absolute; }
    </style>
</head>
<body></body>
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script type="text/javascript" src="graph.js"></script>
</html>
    