D3 Examples - d3js | enclosing diagram

xxxxxxxxxx
 
<!DOCTYPE html>
<title>d3js | enclosing diagram | circle pack</title>
<link href="//npmcdn.com/basscss@8.0.2/css/basscss.min.css" rel="stylesheet">
<link href='dist.css' rel='stylesheet' />
<body>
  <header class="fixed top-0">
    <p class="">Number of clusters: <span id="slider-amount">27</span></p>
    <input type="range" id="cluster-amount" value="27">
  </header>
​
  <svg width="960" height="800">
    <g id="vis"></g>
  </svg>
  <script src='https://d3js.org/d3.v4.min.js'></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.7.1/d3-tip.min.js"></script>
  <script src='dist.js'></script>
  <script>
    // set a min and max to to the range slider
    document.getElementById('cluster-amount').max = '50'
    document.getElementById('cluster-amount').min = '1'
    // change frame height for bl.ocks
    d3.select(self.frameElement).style('height', '800px')
</script>
</body>
​
    