Treemap

.block

border: no
height: 600
license: gpl-3.0

README.md

The first names of all MPs elected since 1935.

Jupyter notebook for data is here.

forked from mbostock's block: Treemap

flare.json

{ "name": "MPs", "children": [ {"name": "men", "children": [{"name":"John","size":261},{"name":"David","size":134},{"name":"William","size":116},{"name":"George","size":90},{"name":"James","size":84},{"name":"Robert","size":73},{"name":"Michael","size":72},{"name":"Peter","size":65},{"name":"Richard","size":61},{"name":"Edward","size":45},{"name":"Charles","size":43},{"name":"Ian","size":39},{"name":"Arthur","size":38},{"name":"Tom","size":36},{"name":"Thomas","size":36},{"name":"Andrew","size":35},{"name":"Henry","size":33},{"name":"Alan","size":33},{"name":"Paul","size":33},{"name":"Frank","size":32},{"name":"Stephen","size":31},{"name":"Mark","size":30},{"name":"Geoffrey","size":26},{"name":"Chris","size":25},{"name":"Walter","size":24},{"name":"Anthony","size":24},{"name":"Joseph","size":24},{"name":"Harry","size":23},{"name":"Harold","size":22},{"name":"Frederick","size":22},{"name":"Patrick","size":22},{"name":"Christopher","size":21},{"name":"Alfred","size":20},{"name":"Norman","size":20},{"name":"Roger","size":20},{"name":"Ernest","size":20},{"name":"Jim","size":19},{"name":"Eric","size":19},{"name":"Hugh","size":19},{"name":"Martin","size":18},{"name":"Douglas","size":18},{"name":"Mike","size":17},{"name":"Donald","size":17},{"name":"Nigel","size":17},{"name":"Reginald","size":16},{"name":"Tony","size":16},{"name":"Albert","size":16},{"name":"Gordon","size":16},{"name":"Bob","size":16},{"name":"Malcolm","size":16},{"name":"Neil","size":16},{"name":"Ronald","size":15},{"name":"Jack","size":14},{"name":"Brian","size":14},{"name":"Philip","size":14},{"name":"Nick","size":14},{"name":"Simon","size":14},{"name":"Nicholas","size":13},{"name":"Keith","size":13},{"name":"Bill","size":13},{"name":"Kenneth","size":13},{"name":"Colin","size":13},{"name":"Percy","size":13},{"name":"Tim","size":12},{"name":"Leslie","size":12},{"name":"Cyril","size":12},{"name":"Alex","size":11},{"name":"Derek","size":11},{"name":"Ben","size":11},{"name":"Julian","size":10},{"name":"Gerald","size":10},{"name":"Herbert","size":10},{"name":"Iain","size":10},{"name":"Graham","size":10},{"name":"Oliver","size":10},{"name":"Stanley","size":10},{"name":"Alexander","size":9},{"name":"Jeremy","size":9},{"name":"Maurice","size":9},{"name":"Adam","size":9},{"name":"Roy","size":9},{"name":"Dennis","size":8},{"name":"Daniel","size":8},{"name":"Steve","size":8},{"name":"Ralph","size":8},{"name":"Andy","size":8},{"name":"Samuel","size":8},{"name":"Francis","size":8},{"name":"Fred","size":8},{"name":"Jonathan","size":8},{"name":"Matthew","size":8},{"name":"Dan","size":7},{"name":"Willie","size":7},{"name":"Phil","size":7},{"name":"Barry","size":7},{"name":"Gerry","size":7},{"name":"Robin","size":7},{"name":"Denis","size":7},{"name":"Terence","size":7},{"name":"Bernard","size":7},{"name":"Other men","size":870}]}, {"name": "women", "children": [{"name":"Margaret","size":11},{"name":"Anne","size":11},{"name":"Helen","size":10},{"name":"Joan","size":9},{"name":"Angela","size":9},{"name":"Caroline","size":8},{"name":"Ann","size":8},{"name":"Jo","size":7},{"name":"Sarah","size":7},{"name":"Ray","size":6},{"name":"Mary","size":6},{"name":"Julie","size":5},{"name":"Emma","size":5},{"name":"Liz","size":5},{"name":"Barbara","size":5},{"name":"Fiona","size":5},{"name":"Patricia","size":5},{"name":"Lucy","size":5},{"name":"Pat","size":4},{"name":"Kate","size":4},{"name":"Janet","size":4},{"name":"Laura","size":4},{"name":"Maria","size":4},{"name":"Judith","size":4},{"name":"Ruth","size":4},{"name":"Diana","size":3},{"name":"Karen","size":3},{"name":"Julia","size":3},{"name":"Rebecca","size":3},{"name":"Betty","size":3},{"name":"Lynda","size":3},{"name":"Evelyn","size":3},{"name":"Edith","size":3},{"name":"Hilary","size":3},{"name":"Alice","size":3},{"name":"Claire","size":3},{"name":"Christine","size":3},{"name":"Anna","size":3},{"name":"Michelle","size":3},{"name":"Jenny","size":3},{"name":"Carol","size":3},{"name":"Rosie","size":3},{"name":"Elizabeth","size":3},{"name":"Sheila","size":3},{"name":"Linda","size":3},{"name":"Jane","size":3},{"name":"Rachel","size":3},{"name":"Jackie","size":3},{"name":"Gillian","size":3},{"name":"Louise","size":3},{"name":"Alison","size":3},{"name":"Mervyn","size":3},{"name":"Victoria","size":3},{"name":"Vicky","size":2},{"name":"Maureen","size":2},{"name":"Marsha","size":2},{"name":"Marion","size":2},{"name":"Harriet","size":2},{"name":"Tessa","size":2},{"name":"Melanie","size":2},{"name":"Catherine","size":2},{"name":"Florence","size":2},{"name":"Lisa","size":2},{"name":"Susan","size":2},{"name":"Elaine","size":2},{"name":"Dawn","size":2},{"name":"Sally","size":2},{"name":"Theresa","size":2},{"name":"Andrea","size":2},{"name":"Lynne","size":2},{"name":"Heidi","size":2},{"name":"Seema","size":2},{"name":"Irene","size":2},{"name":"Charlotte","size":2},{"name":"Shirley","size":2},{"name":"Joyce","size":2},{"name":"Amanda","size":2},{"name":"Sue","size":2},{"name":"Kerry","size":2},{"name":"Thelma","size":2},{"name":"Eleanor","size":2},{"name":"Muriel","size":2},{"name":"Beverley","size":2},{"name":"Meg","size":2},{"name":"Sandra","size":2},{"name":"Jessica","size":2},{"name":"Jean","size":2},{"name":"Jacqui","size":2},{"name":"Valerie","size":2},{"name":"Teresa","size":2},{"name":"Bridget","size":2},{"name":"Jill","size":1},{"name":"Kirsten","size":1},{"name":"Wera","size":1},{"name":"Mhairi","size":1},{"name":"Eveline","size":1},{"name":"Agnes","size":1},{"name":"Frances","size":1},{"name":"Audrey","size":1},{"name":"Winnie","size":1},{"name":"Other women","size":304}]}] }

index.html

<!DOCTYPE html>
<link href="https://fonts.googleapis.com/css?family=Roboto:400" rel="stylesheet"> 
<style>


body {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  margin: 50px;
}
  
   .d3-tip {
      line-height: 1;
      padding: 6px;
      background: rgba(0, 0, 0, 0.8);
      color: #fff;
      border-radius: 4px;
      font-size: 12px;
    }
 
    /* Creates a small triangle extender for the tooltip */
    .d3-tip:after {
      box-sizing: border-box;
      display: inline;
      font-size: 10px;
      width: 100%;
      line-height: 1;
      color: rgba(0, 0, 0, 0.8);
      content: "\25BC";
      position: absolute;
      text-align: center;
    }
 
    /* Style northward tooltips specifically */
    .d3-tip.n:after {
      margin: -2px 0 0 0;
      top: 100%;
      left: 0;
    }

</style>
<h1>First names of all MPs elected since 1935</h1>
<svg></svg>

<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.7.1/d3-tip.min.js"></script>
<script>
var tip = d3.tip().attr("class", "d3-tip").html(function(d) { return `${d.data.name}: ${d.value}`; })

var svg = d3.select("svg"),
    width = +window.innerWidth - 100,
    height = +window.innerHeight - 100;
  
d3.select("svg").attr("width", width).attr("height", height)

svg.call(tip)

var fader = function(color) { return d3.interpolateRgb(color, "#fff")(0.2); },
    color = d3.scaleOrdinal(d3.schemeCategory10.map(fader)),
    format = d3.format(",d");

var treemap = d3.treemap()
    .tile(d3.treemapResquarify)
    .size([width, height])
    .round(true)
    .paddingInner(1);
  

d3.json("flare.json", function(error, data) {
  if (error) throw error;

  var root = d3.hierarchy(data)
      .eachBefore(function(d) { d.data.id = (d.parent ? d.parent.data.id + "." : "") + d.data.name; })
      .sum(sumBySize)
      .sort(function(a, b) { return b.height - a.height || b.value - a.value; });

  treemap(root);
  
var concat_data = data["children"][0]["children"].concat(data["children"][1]["children"])

  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.data.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.data.id); })
  		.on("mouseover", function(d) {
    d3.select(this).attr("opacity", 0.8);
    tip.show(d);
  })
  		.on("mouseout", function(d) {
    d3.select(this).attr("opacity", 1);
    tip.hide;
  });

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

  cell.append("text")
      .attr("clip-path", function(d) { return "url(#clip-" + d.data.id + ")"; })
    .selectAll("tspan")
      .data(function(d) { return d.data.name.split(/(?=[A-Z][^A-Z])/g); })
    .enter().append("tspan")
      .attr("x", 4)
      .attr("y", function(d, i) { return 20 + i * 10; })
      .text(function(d) { return d; })
  .style("pointer-events", "none");
  
  cell.append("text")
      .attr("clip-path", function(d) { return "url(#clip-" + d.data.id + ")"; })
    .selectAll("tspan")
      .data(function(d) { return d.data.name.split(/(?=[A-Z][^A-Z])/g); })
    .enter().append("tspan")
      .attr("x", 4)
      .attr("y", function(d, i) { return 40 + i * 10; })
      .text(function(d) { return concat_data.filter(function(a) { return a.name == d })[0].size; })
  .style("pointer-events", "none");
  

});

function sumByCount(d) {
  return d.children ? 0 : 1;
}

function sumBySize(d) {
  return d.size;
}

</script>