Treemap of MBTI statistics

The Myers-Briggs Type Indicator (MBTI) assesses personality attributes, using a set of 16 bins (eg, INTJ). The bins are not equally populated, either in the general population or when gender is taken into account. This page shows some distribution statistics, using a Treemap.

<!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>

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";

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);
  });
});

</script>

Modified http://d3js.org/d3.v3.min.js to a secure url

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