TreeMap

by Mariya Gnitetckaya

HTML

<div class='chart'></div> 

<script src="https://d3js.org/d3.v4.min.js"></script>

JavaScript

var data = [{
	title: 'One',
  children: [{
  	title: 'One_one',
    children:[{title: 'One_one_one', children:[]}]
  },{
  	title:'One two',
    children:[{title:'One two one', children:[]}]
  }]
},{
	title: 'Two',
  children: [{
  	title: 'One_one',
    children:[{title: 'One_one_one', children:[]}]
  },{
  	title:'One two',
    children:[{title:'One two one', children:[]}]
  }]
},{
	title: 'Three',
  children: [{
  	title: 'One_one',
    children:[{title: 'One_one_one', children:[]}]
  },{
  	title:'One two',
    children:[{title:'One two one', children:[]}]
  }]
},{
	title: 'Four',
  children: [{
  	title: 'One_one',
    children:[{title: 'One_one_one', children:[]}]
  },{
  	title:'One two',
    children:[{title:'One two one', children:[]}]
  }]
}]

var width = 500;
var height = 400;
var chartWidth, chartHeight;
var margin = 24;
var svg = d3.select(".chart").append("svg")

var fader = function(color) { return d3.interpolateRgb(color, "#fff")(0.2); },
    color = d3.scaleOrdinal(d3.schemeCategory20.map(fader)),
    format = d3.format(",d");
    
var treemap = d3.treemap()
    .tile(d3.treemapResquarify)
    .size([width, height])
    .round(true)
    .paddingInner(1);
    
var root = d3.hierarchy(data)
      .eachBefore(function(d,i) { d.id = (d.parent ? d.parent.id + "." : "") + d.title; })
      .sort(function(a, b) { return b.height - a.height || b.value - a.value; });
      
treemap(root);

var cell = svg.selectAll("g")
    .data(root.leaves())
    .enter().append("g")
      .attr("transform", function(d) { return "translate(" + d.x0 + "," + d.y0 + ")"; });
      
  cell.append("rect")
      .attr("id", function(d) { return d.id; })
      .attr("width", function(d) { return d.x1 - d.x0; })
      .attr("height", function(d) { return d.y1 - d.y0; })
      .attr("fill", function(d) { return color(d.parent.id); });

  cell.append("clipPath")
      .attr("id", function(d) { return "clip-" + d.id; })
    .append("use")
      .attr("xlink:href", function(d) {...