simple circle packing

forked from fogonwater's block: simple circle packing

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/chroma-js/1.3.4/chroma.min.js"></script>
  <style>
    body { margin:0;top:0;right:0;bottom:0;left:0; }
    svg { font-family: Courier; }
    .annotation-note-title, text.title { font-weight: bold; }
    text.title { font-size: 1.2em; }
  </style>
</head>
<body>
  <svg width="960" height="960">
    <text class="title" x=40 y=50>simple d3.pack()</text>
    <g transform="translate(1,1)"></g>
</svg>
  
<script>
const svg   = d3.select("svg"),
  		width = +svg.attr("width"),
  		height= +svg.attr("height"),
      color = chroma
    				.scale(['#ED9367','#FAE8CB'])
    				.mode('lch')
    				.colors(3)

const g = svg.append("g")

const layout = d3.pack()
  			.size([width - 2, height - 2])
				.padding(6)

// Get the data from our CSV file
d3.csv('data.csv', function(error, data) {
  
  data.sort(function(x, y){ return d3.ascending(x.size, y.size) })
	if (error) throw error;
	
  const stratData = d3.stratify()(data),
				root = d3.hierarchy(stratData)
    			.sum(function (d) { return d.data.size })
        	.sort(function(a, b) { return b.value - a.value }),
  			nodes = root.descendants()
  	
  layout(root)
  
  const slices = g.selectAll('circle')
  	.data(nodes)
  	.enter()
  	.append('circle')
  	.attr('cx', function (d) { return d.x; })
    .attr('cy', function (d) { return d.y; })
    .attr('r', function (d) { return d.r; })
  	.style("fill", function(d) { return color[d.depth]; })

});

</script>
</body>

https://d3js.org/d3.v4.min.js

https://cdnjs.cloudflare.com/ajax/libs/chroma-js/1.3.4/chroma.min.js