Asylum total 2016

.block

border: no
height: 600
license: gpl-3.0

README.md

A treemap recursively subdivides area into rectangles; the area of any node in the tree corresponds to its value. This example uses color to encode different packages of the Flare visualization toolkit. Treemap design invented by Ben Shneiderman. Squarified algorithm by Bruls, Huizing and van Wijk. Data courtesy Jeff Heer.

forked from mbostock's block: Treemap

forked from andrewwitherspoon's block: Treemap

flare.json

{
 "name": "flare",
 "children": [
  {
   "name": "analytics",
   "children": [
    {
     "name": "cluster",
     "children": [
        {
            "name": "Afghanistan",
            "size": 103
        },
        {
            "name": "Albania",
            "size": 102
        },
        {
            "name": "Algeria",
            "size": 4
        },
        {
            "name": "Angola",
            "size": 7
        },
        {
            "name": "Armenia",
            "size": 31
        },
        {
            "name": "Azerbaijan",
            "size": 14
        },
        {
            "name": "Bahrain",
            "size": 0
        },
        {
            "name": "Bangladesh",
            "size": 137
        },
        {
            "name": "Belarus",
            "size": 42
        },
        {
            "name": "Bhutan",
            "size": 0
        },
        {
            "name": "Bolivia",
            "size": 4
        },
        {
            "name": "Bosnia and Herzegovina",
            "size": 0
        },
        {
            "name": "Brazil",
            "size": 25
        },
        {
            "name": "Bulgaria",
            "size": 10
        },
        {
            "name": "Burkina Faso",
            "size": 100
        },
        {
            "name": "Burma",
            "size": 24
        },
        {
            "name": "Burundi",
            "size": 75
        },
        {
            "name": "Cambodia",
            "size": 0
        },
        {
            "name": "Cameroon",
            "size": 149
        },
        {
            "name": "Central African Republic",
            "size": 4
        },
        {
            "name": "Chad",
            "size": 10
        },
        {
            "name": "China, People's Republic",
            "size": 4485
        },
        {
            "name": "Colombia",
            "size": 101
        },
        {
            "name": "Congo, Democratic Republic",
            "size": 42
        },
        {
            "name": "Congo, Republic",
            "size": 57
        },
        {
            "name": "Cote d'Ivoire",
            "size": 34
        },
        {
            "name": "Cuba",
            "size": 11
        },
        {
            "name": "Djibouti",
            "size": 39
        },
        {
            "name": "Dominican Republic",
            "size": 12
        },
        {
            "name": "Ecuador",
            "size": 125
        },
        {
            "name": "Egypt",
            "size": 839
        },
        {
            "name": "El Salvador",
            "size": 2157
        },
        {
            "name": "Eritrea",
            "size": 407
        },
        {
            "name": "Ethiopia",
            "size": 485
        },
        {
            "name": "Fiji",
            "size": 7
        },
        {
            "name": "Gambia",
            "size": 105
        },
        {
            "name": "Georgia",
            "size": 36
        },
        {
            "name": "Ghana",
            "size": 77
        },
        {
            "name": "Guatemala",
            "size": 1949
        },
        {
            "name": "Guinea",
            "size": 74
        },
        {
            "name": "Guyana",
            "size": 0
        },
        {
            "name": "Haiti",
            "size": 127
        },
        {
            "name": "Honduras",
            "size": 1505
        },
        {
            "name": "India",
            "size": 483
        },
        {
            "name": "Indonesia",
            "size": 24
        },
        {
            "name": "Iran",
            "size": 439
        },
        {
            "name": "Iraq",
            "size": 637
        },
        {
            "name": "Israel",
            "size": 10
        },
        {
            "name": "Jamaica",
            "size": 31
        },
        {
            "name": "Jordan",
            "size": 48
        },
        {
            "name": "Kazakhstan",
            "size": 63
        },
        {
            "name": "Kenya",
            "size": 42
        },
        {
            "name": "Kosovo",
            "size": 34
        },
        {
            "name": "Kuwait",
            "size": 7
        },
        {
            "name": "Kyrgyzstan",
            "size": 117
        },
        {
            "name": "Laos",
            "size": 0
        },
        {
            "name": "Lebanon",
            "size": 36
        },
        {
            "name": "Liberia",
            "size": 25
        },
        {
            "name": "Libya",
            "size": 40
        },
        {
            "name": "Macedonia",
            "size": 0
        },
        {
            "name": "Madagascar",
            "size": 0
        },
        {
            "name": "Malaysia",
            "size": 3
        },
        {
            "name": "Mali",
            "size": 64
        },
        {
            "name": "Mauritania",
            "size": 42
        },
        {
            "name": "Mexico",
            "size": 919
        },
        {
            "name": "Moldova",
            "size": 99
        },
        {
            "name": "Mongolia",
            "size": 37
        },
        {
            "name": "Morocco",
            "size": 6
        },
        {
            "name": "Nepal",
            "size": 501
        },
        {
            "name": "Nicaragua",
            "size": 39
        },
        {
            "name": "Niger",
            "size": 12
        },
        {
            "name": "Nigeria",
            "size": 131
        },
        {
            "name": "Pakistan",
            "size": 338
        },
        {
            "name": "Peru",
            "size": 26
        },
        {
            "name": "Philippines",
            "size": 9
        },
        {
            "name": "Romania",
            "size": 45
        },
        {
            "name": "Russia",
            "size": 287
        },
        {
            "name": "Rwanda",
            "size": 74
        },
        {
            "name": "Saudi Arabia",
            "size": 47
        },
        {
            "name": "Senegal",
            "size": 16
        },
        {
            "name": "Serbia and Montenegro (former)",
            "size": 26
        },
        {
            "name": "Sierra Leone",
            "size": 12
        },
        {
            "name": "Somalia",
            "size": 163
        },
        {
            "name": "Sri Lanka",
            "size": 55
        },
        {
            "name": "Sudan",
            "size": 72
        },
        {
            "name": "Syria",
            "size": 735
        },
        {
            "name": "Tajikistan",
            "size": 30
        },
        {
            "name": "Tanzania",
            "size": 3
        },
        {
            "name": "Togo",
            "size": 12
        },
        {
            "name": "Tunisia",
            "size": 10
        },
        {
            "name": "Turkey",
            "size": 15
        },
        {
            "name": "Turkmenistan",
            "size": 7
        },
        {
            "name": "Uganda",
            "size": 60
        },
        {
            "name": "Ukraine",
            "size": 172
        },
        {
            "name": "United Arab Emirates",
            "size": 14
        },
        {
            "name": "Uzbekistan",
            "size": 85
        },
        {
            "name": "Venezuela",
            "size": 355
        },
        {
            "name": "Vietnam",
            "size": 8
        },
        {
            "name": "Yemen",
            "size": 54
        },
        {
            "name": "Zimbabwe",
            "size": 10
        },
        {
            "name": "All other countries",
            "size": 94
        },
        {
            "name": "Unknown",
            "size": 28
        }
     ]
    }
   ]
  }
 ]
}

index.html

<!DOCTYPE html>
<style>

form {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

svg {
  font: 10px sans-serif;
}

</style>
<svg width="960" height="570"></svg>
<form>
  <label><input type="radio" name="mode" value="sumBySize" checked> Size</label>
<!--   <label><input type="radio" name="mode" value="sumByCount"> Count</label> -->
</form>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>

var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height");

var fader = function(color) { return d3.interpolateRgb(color, "#fff")(0.2); },
    color = d3.scaleOrdinal(d3.schemeCategory20.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 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); });

  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 13 + i * 10; })
      .text(function(d) { return d; });

  cell.append("title")
      .text(function(d) { return d.data.id + "\n" + format(d.value); });

  d3.selectAll("input")
      .data([sumBySize, sumByCount], function(d) { return d ? d.name : this.value; })
      .on("change", changed);

  var timeout = d3.timeout(function() {
    d3.select("input[value=\"sumByCount\"]")
        .property("checked", true)
        .dispatch("change");
  }, 2000);

  function changed(sum) {
    timeout.stop();

    treemap(root.sum(sum));

    cell.transition()
        .duration(750)
        .attr("transform", function(d) { return "translate(" + d.x0 + "," + d.y0 + ")"; })
      .select("rect")
        .attr("width", function(d) { return d.x1 - d.x0; })
        .attr("height", function(d) { return d.y1 - d.y0; });
  }
});

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

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

</script>