Treemap Demo

author(s): Jon Arild Nygård

HTML

<script src="http://code.highcharts.local/highcharts.js"></script>
<script src="http://code.highcharts.local/modules/treemap.js"></script>
<!--<script src="http://code.highcharts.local/modules/boost.js"></script><!---->
<div id="container"></div>

CSS

#container {
  min-width: 300px;
  max-width: 600px;
  margin: 0 auto;
}

JavaScript

var levels = [10, 10, 10];
var range = (n) => Array.from({
  length: n
}).map((_, i) => i + 1);
var getNode = function(nr, parent, value) {
  return {
    id: (parent ? parent + '_' : '') + nr,
    parent: parent,
    value: value
  };
};
var range1 = range(levels[0]);
var range2 = range(levels[1]);
var range3 = range(levels[2]);
var points = range1.reduce((arr1, a) => {
  var parent1 = getNode(a);
  var children = range2.reduce((arr2, b) => {
    var parent2 = getNode(b, parent1.id),
      value = Math.round(Math.random() * 10);
    var children = range3.map(c => getNode(c, parent2.id, value));
    arr2.push(parent2);
    return arr2.concat(children);
  }, []);
  arr1.push(parent1);
  return arr1.concat(children);
}, [])
var a = points.find(function(p) {
  return p.id === 'id_30_12';
})
var b = points.find(function(p) {
  return p.id === 'id_30';
})
console.log(points.length);
console.time('treemap');
Highcharts.chart('container', {
  series: [{
  	boostThreshold: points.length + 1,
    turboThreshold: 200000,
    type: 'treemap',
    layoutAlgorithm: 'squarified',
    allowDrillToNode: true,
    animationLimit: 1000,
    dataLabels: {
      enabled: false
    },
    levelIsConstant: false,
    levels: [{
      level: 1,
      dataLabels: {
        enabled: true
      },
      borderWidth: 3
    }],
    data: points
  }],
  subtitle: {
    text: 'Click points to drill down. Source: <a href="http://apps.who.int/gho/data/node.main.12?lang=en">WHO</a>.'
  },
  title: {
    text: 'Global Mortality Rate 2012, per 100 000 population'
  }
});
console.timeEnd('treemap');