Large tree map

author(s): Jon Arild Nygård

by nancynancy

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<script src="https://code.highcharts.com/modules/treemap.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<figure class="highcharts-figure">
    <div id="container"></div>
    <p class="highcharts-description">
        This demo shows a large data set visualized with a tree map.
        Each country of the world has a data point, grouped by
        continent. Click on a continent to view more detailed data.
        Clicking on a country breaks the mortality rate further down
        into different types.
    </p>
</figure>

CSS

.highcharts-figure, .highcharts-data-table table {
    min-width: 320px; 
    max-width: 600px;
    margin: 1em auto;
}

.highcharts-data-table table {
	font-family: Verdana, sans-serif;
	border-collapse: collapse;
	border: 1px solid #EBEBEB;
	margin: 10px auto;
	text-align: center;
	width: 100%;
	max-width: 500px;
}
.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: #555;
}
.highcharts-data-table th {
	font-weight: 600;
    padding: 0.5em;
}
.highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption {
    padding: 0.5em;
}
.highcharts-data-table thead tr, .highcharts-data-table tr:nth-child(even) {
    background: #f8f8f8;
}
.highcharts-data-table tr:hover {
    background: #f1f7ff;
}

JavaScript

Highcharts.theme = {
  colors: ['#173BD0', '#00AD7F', '#FFAA00', '#DA3900', '#661A1A', '#9D9D9D'],
}

Highcharts.setOptions(Highcharts.theme);
Highcharts.getJSON('https://cdn.jsdelivr.net/gh/highcharts/[email protected]/samples/data/world-mortality.json', function(data) {

  var points = [],
    regionP,
    regionVal,
    regionI = 0,
    countryP,
    countryI,
    causeP,
    causeI,
    region,
    country,
    cause,
    causeName = {
      'Communicable & other Group I': 'Communicable diseases',
      'Noncommunicable diseases': 'Non-communicable diseases',
      Injuries: 'Injuries'
    };

  for (region in data) {
    if (data.hasOwnProperty(region)) {
      regionVal = 0;
      regionP = {
        id: 'id_' + regionI,
        name: region,
        color: Highcharts.getOptions().colors[regionI]
      };
      countryI = 0;
      for (country in data[region]) {
        if (data[region].hasOwnProperty(country)) {
          countryP = {
            id: regionP.id + '_' + countryI,
            name: country,
            parent: regionP.id
          };
          points.push(countryP);
          causeI = 0;
          for (cause in data[region][country]) {
            if (data[region][country].hasOwnProperty(cause)) {
              causeP = {
                id: countryP.id + '_' + causeI,
                name: causeName[cause],
                parent: countryP.id,
                value: Math.round(+data[region][country][cause])
              };
              regionVal += causeP.value;
              points.push(causeP);
              causeI = causeI + 1;
            }
          }
          countryI = countryI + 1;
        }
      }
      regionP.value = Math.round(regionVal / countryI);
      points.push(regionP);
      regionI = regionI + 1;
    }
  }
  Highcharts.chart('container', {
    series: [{
      type: 'treemap',
      layoutAlgorithm: 'squarified',
      allowDrillToNode: true,
      animationLimit: 1000,
      dataLabels: {
        enabled: false
   ...