treemap

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    .node {
  border: solid 1px white;
  font: 10px sans-serif;
  line-height: 12px;
  overflow: hidden;
  position: absolute;
  text-indent: 2px;
}
  </style>
</head>

<body>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
    var width=960,height=600; 
    
    var color = d3.scaleOrdinal().range(d3.schemeCategory20c);
    
    var capitalisation = function(d) { return d["percentage"]; };
		var revenue    = function(d) { return d["revenue"]; };
    
    var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height)
    
    var treemap = d3.treemap()
    .tile(d3.treemapSquarify.ratio(1.6))
    .size([width, height])
    .paddingOuter(3)
    .paddingTop(15)
    .paddingInner(1)
    .round(true);
    
   d3.csv("data.csv", function(error,data) {
      if (error) throw error;
       
    var groupings = {}
    
    groupData(groupings, data, "demographics");
    groupData(groupings, revenueData, "revenue");
	     
    });

</script>
</body>

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