D3 Examples - Circle Packing

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
​
​
</style>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
​
  var margin = 10;
  var width = 800;
  var height = 800;
  
  var canvas = d3.select("svg")
    .append()
    .attr("width", width)
    .attr("height", height)
​
  
  var color = d3.scaleSequential(d3.interpolateVirridis)
  .domain([-4,4]);
  
  var pack = d3.pack()
    .size([width - margin, height - margin])
    .padding(2);
  
  d3.json("flare.json", function(error, root){
  
    if(error) throw error;
    
    root = d3.hierarchy(root)
        .sum(function(d){return d.size;})
        .sort(function (a,b) {return b.value - a.value;})
  })
  
  
  
  
​
    
​
​
​
</script>
​
    