meta data for this page
  •  
DOC 2012 participants breakdown

Tree Map Example

“Treemaps display hierarchical (tree-structured) data as a set of nested rectangles. Each branch of the tree is given a rectangle, which is then tiled with smaller rectangles representing sub-branches. A leaf node's rectangle has an area proportional to a specified dimension on the data. Often the leaf nodes are colored to show a separate dimension of the data.” - Wikipedia

This example shows a breakdown of Design Optimization Competition 2012 participants.

Example chart

Participants of Design Optimization Competition 2012

(If the chart below does not show, please reload this page)

<html> 

<head>
  <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  <script type="text/javascript">
    google.load("visualization", "1", {packages:["treemap"]});
    google.setOnLoadCallback(drawChart);
    function drawChart() {
      // Create and populate the data table.
      var data = google.visualization.arrayToDataTable([
      
        ['Location', 'Parent', 'Number of participants (size)', 'Number of submissions (colour)'],
        ['Global',    null,                 0,                               0],
        ['America',   'Global',             0,                               0],
        ['Europe',    'Global',             0,                               0],
        ['Asia-Pacific','Global',             0,                               0],
        ['Africa',    'Global',             0,                               0],
        ['Australia', 'Asia-Pacific', 5, 0],
        ['Bangladesh', 'Asia-Pacific', 1, 0],
        ['Brazil', 'America', 2, 0],
        ['Canada', 'America', 6, 0],
        ['Chile', 'America', 3, 0],
        ['China', 'Asia-Pacific', 6, 0],
        ['Germany', 'Europe', 4, 0],
        ['Denmark', 'Europe', 2, 1],
        ['Egypt', 'Africa', 2, 0],
        ['Spain', 'Europe', 25, 10],
        ['France', 'Europe', 10, 1],
        ['Greese', 'Europe', 3, 0],
        ['HongKong', 'Asia-Pacific', 1, 1],
        ['Croatia', 'Europe', 1, 0],
        ['Israel', 'Asia-Pacific', 1, 0],
        ['India', 'Asia-Pacific', 11, 1],
        ['Iran', 'Asia-Pacific', 5, 0],
        ['Italy', 'Europe', 6, 0],
        ['Korea', 'Asia-Pacific', 1, 0],
        ['Sri Lanka', 'Asia-Pacific', 1, 0],
        ['Malta', 'Europe', 1, 1],
        ['Mexico', 'America', 2, 0],
        ['Netherlands', 'Europe', 1, 0],
        ['Philippines', 'Asia-Pacific', 1, 0],
        ['Portugal', 'Europe', 22, 3],
        ['Qatar', 'Asia-Pacific', 1, 0],
        ['Romania', 'Europe', 1, 0],
        ['Sweden', 'Europe', 1, 0],
        ['Singapore', 'Asia-Pacific', 1, 0],
        ['Tunisia', 'Africa', 1, 1],
        ['Turkey', 'Europe', 3, 0],
        ['United Kingdom', 'Europe', 20, 3],
        ['USA', 'America', 40, 4],
        ['Vietnam', 'Asia-Pacific', 2, 1],
        ['Serbia', 'Europe', 5, 3],
        ['South Africa', 'Africa', 2, 0]
      ]);
      // Create and draw the visualization.
      var tree = new google.visualization.TreeMap(document.getElementById('chart_div'));
      tree.draw(data, {
        minColor: '#ddd',
        midColor: '#d55',
        maxColor: '#d00',
        headerHeight: 15,
        fontColor: 'black',
        showScale: true});
      }
  </script>
</head>
<body>
  <div id="chart_div" style="width: 800px; height: 500px;"></div>
</body>

</html>

  • Size shows number of participants from each continent/country
  • Colour shows number of submissions from each continent/country
  • Right-click to go back to the continent level