MLB Payroll Treemap

A look at the relative sizes of MLB team payrolls. The first split is by League (AL/NL) then by division.

Based on Nest Treemap by @mbostock

forked from cjburgoyne's block: MLB Payroll Treemap

<!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.Actor; })
      .key(function (d) { return d.Title; });
    
    var treemap = d3.treemap()
      .size([width, height])
      .padding(1)
      .round(true);
    
    var format = d3.format("$,d");
    
    d3.csv("treemapTest.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.Gross; })
        .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.Title + "\n" + format(d.Gross); })
      		.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.Title + d.data.Actor); });
      
      node.append("div")
      	.attr("class", "node-label")
      	.text(function(d) { return d.data.Actor; });
      
      node.append("div")
      	.attr("class", "node-value")
      	.text(function(d) { return format(d.Title); });
    });
    
    function type(d) {
      d.total_payroll = +d.total_payroll;
      return d;
    }    
  </script>
</body>

https://cdnjs.cloudflare.com/ajax/libs/d3/4.1.0/d3.min.js