D3 Examples - Treemap of MBTI statistics

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
​
<style>
​
body {
  font-family:  "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin:       auto;
  position:     relative;
  width:        960px;
}
​
form {
  position:     absolute;
  right:        10px;
  top:          10px;
}
​
.node {
  border:       solid 1px white;
  font:         10px sans-serif;
  line-height:  17px;
  overflow:     hidden;
  position:     absolute;
  text-indent:  3px;
}
</style>
​
<form>
  <label><input type="radio" name="mode" value="M" checked >Male</label>
  <label><input type="radio" name="mode" value="F"         >Female</label>
  <label><input type="radio" name="mode" value="T"         >Total</label>
</form>
​
<script src="https://d3js.org/d3.v3.min.js"></script>
​
<script>
// Script adapted from https://bl.ocks.org/mbostock/4063582
// by Rich Morin, rdm@cfcl.com
//
// Myers-Briggs Type Indicator (MBTI) frequency statistics from:
//   https://www.theanconas.com/MBTI/mfstats.htm
​
​
var margin  = {top: 40, right: 10, bottom: 10, left: 10},
    width   = 960 - margin.left - margin.right,
    height  = 500 - margin.top  - margin.bottom;
​
var color   = d3.scale.category20c()
                .domain([ 1,  2,  3,  4,  5,  6,  7,  8,  9, 10,
                         11, 12, 13, 14, 15, 16, 17, 18, 19, 20]);
​
var treemap = d3.layout.treemap()
    .size([width, height])
    .sticky(true)
    .value(function(d) { return d.sizes[0]; });
​
var div = d3.select("body").append("div")
    .style("position", "relative")
    .style("width",   (width  + margin.left + margin.right)  + "px")
    .style("height",  (height + margin.top  + margin.bottom) + "px")
    .style("left",    margin.left + "px")
    .style("top",     margin.top  + "px");
​
var input   = "MBTI_3.json";
​
var ndx_tbl = { "M": 0, "F": 1, "T": 2 };
                
d3.json(input, function(error, root) {
  var node = div.datum(root).selectAll(".node")
      .data(treemap.nodes)
    .enter().append("div")
      .attr("class", "node")
      .call(position)
      .style("background", function(d) { return color(d.n); })
      .text(function(d) { return d.children ? null : d.name; });
​
  d3.selectAll("input").on("change", function change() {
    var val_i = ndx_tbl[this.value];
    var val_f = function(d) { return d.sizes[val_i]; };
​
    node
        .data(treemap.value(val_f).nodes)
      .transition()
        .duration(1500)
        .call(position);
  });
});
​
function position() {
  this.style("left",    function(d) { return d.x + "px"; })
      .style("top",     function(d) { return d.y + "px"; })
      .style("width",   function(d) { return Math.max(0, d.dx - 1) + "px"; })
      .style("height",  function(d) { return Math.max(0, d.dy - 1) + "px"; });
}
​
</script>
​
    