D3 Examples - MLB Payroll Treemap

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.1.0/d3.min.js"></script>
  <style>
    body {
      position:relative;
      font:12px sans-serif;
    }
    
    .node {
      box-sizing: border-box;
      line-height: 1em;
      overflow: hidden;
      position: absolute;
      white-space: pre;
      background: #ddd;
    }
    
    .node-label,
    .node-value {
      margin: 4px;
    }
    
    .node-value {
      margin-top: -2px;
    }
    
    .node-value {
      font-weight: bold;
    }       
  </style>
</head>
​
<body>
  <script>
    var width = 960,
      height = 1060;
    
    var color = d3.scaleOrdinal()
      .range(d3.schemeCategory10
             .map(function(c) { c = d3.rgb(c); c.opacity = 0.6; return c; }));
    
    var nest = d3.nest()
      .key(function (d) { return d.league; })
      .key(function (d) { return d.division; });
    
    var treemap = d3.treemap()
      .size([width, height])
      .padding(1)
      .round(true);
    
    var format = d3.format("$,d");
    
    d3.csv("mlb_payroll.csv", type, function (error, data) {
      if (error) throw error;
      
      var root = d3.hierarchy({values: nest.entries(data)},
                              function(d) { return d.values; })
        .sum(function(d) { return d.total_payroll; })
        .sort(function(a, b) { return b.value - a.value; });
      
      treemap(root);
      
      var node = d3.select("body")
        .selectAll(".node")
        .data(root.leaves())
        .enter().append("div")
            .attr("class", "node")
            .attr("title", function(d) { return d.data.team + "\n" + format(d.value); })
            .style("left", function(d) { return d.x0 + "px"; })
            .style("top", function(d) { return d.y0 + "px"; })
            .style("width", function(d) { return d.x1 - d.x0 + "px"; })
            .style("height", function(d) { return d.y1 - d.y0 + "px"; })
            .style("background", function(d) {
            return color(d.data.league + d.data.division); });
      
      node.append("div")
        .attr("class", "node-label")
        .text(function(d) { return d.data.team; });
      
      node.append("div")
        .attr("class", "node-value")
        .text(function(d) { return format(d.value); });
    });
    
    function type(d) {
      d.total_payroll = +d.total_payroll;
      return d;
    }    
  </script>
</body>
​
    