Skip to content

Instantly share code, notes, and snippets.

@ganeshv

ganeshv/.block

Last active June 5, 2024 17:05
Show Gist options
  • Save ganeshv/6a8e9ada3ab7f2d88022 to your computer and use it in GitHub Desktop.
Save ganeshv/6a8e9ada3ab7f2d88022 to your computer and use it in GitHub Desktop.
Download ZIP
Zoomable Treemap Template
Raw
.block
license: gpl-3.0
Raw
README.md

Zoomable Treemap

Treemaps for visualizing hierarchical data. Click to zoom to the next level. Click on the top orange band to zoom out. Based on Mike Bostock's Zoomable Treemaps

This template follows pigshell's convention for "gist templates":

  • It is supplied data using postMessage(), as a single object of the form { opts: {...}, data: [...] }
  • It posts a message to the parent with an object of the form { height: <number> } to enable the framing context to adjust the height of the iframe.
  • If the URL does not contain a hash fragment, it displays sample data from the containing gist.

The following options are supported:

{
    title: "", // Title 
    rootname: "TOP", // Name of top-level entity in case data is an array
    format: ",d", // Format as per d3.format (https://github.com/mbostock/d3/wiki/Formatting)
    field: "data", // Object field to treat as data [default: data]
    width: 960, // Width of SVG
    height: 500, // Height of SVG
    margin: { top: 48, right: 0, bottom: 0, left: 0 } // Margin as per D3 convention
}

data is a tree-like object, or an array of tree-like objects. Each non-leaf node of the tree must contain a "key" property and an array of "values". Leaf nodes must contain a "key" and a "value" property.

[
  {
    "key": "Asia",
    "values": [
    {
      "key": "India",
      "value": 1236670000
    },
    {
      "key": "China",
      "value": 1361170000
    },
    ...
  },
  {
    "key": "Africa",
    "values": [
    {
      "key": "Nigeria",
      "value": 173615000
    },
    {
      "key": "Egypt",
      "value": 83661000
    },
    ...
  },
]

Sample data is world population from countries.git.

Data may be easily converted to tree form using d3.nest(). See the first example below.

Examples (to be run in pigshell):

load http://d3js.org/d3.v3.min.js
cat /usr/share/misc/countries.json | to text | jf 'JSON.parse(x)'| rename -f "name,population" -t "key,value" | jf -g 'd3.nest().key(function(d) {return d.region;}).key(function(d) { return d.subregion; }).entries(x)' | iframe -o title="World Population",rootname="World" -g 'http://bl.ocks.org/ganeshv/raw/6a8e9ada3ab7f2d88022/#wait'
Raw
countries.json
[
{
"key": "Afghanistan",
"region": "Asia",
"subregion": "Southern Asia",
"value": 25500100
},
{
"key": "Åland Islands",
"region": "Europe",
"subregion": "Northern Europe",
"value": 28502
},
{
"key": "Albania",
"region": "Europe",
"subregion": "Southern Europe",
"value": 2821977
},
{
"key": "Algeria",
"region": "Africa",
"subregion": "Northern Africa",
"value": 37900000
},
{
"key": "American Samoa",
"region": "Oceania",
"subregion": "Polynesia",
"value": 55519
},
{
"key": "Andorra",
"region": "Europe",
"subregion": "Southern Europe",
"value": 76246
},
{
"key": "Angola",
"region": "Africa",
"subregion": "Middle Africa",
"value": 20609294
},
{
"key": "Anguilla",
"region": "Americas",
"subregion": "Caribbean",
"value": 13452
},
{
"key": "Antarctica",
"region": "",
"subregion": "",
"value": -1
},
{
"key": "Antigua and Barbuda",
"region": "Americas",
"subregion": "Caribbean",
"value": 86295
},
{
"key": "Argentina",
"region": "Americas",
"subregion": "South America",
"value": 40117096
},
{
"key": "Armenia",
"region": "Asia",
"subregion": "Western Asia",
"value": 3024100
},
{
"key": "Aruba",
"region": "Americas",
"subregion": "Caribbean",
"value": 101484
},
{
"key": "Australia",
"region": "Oceania",
"subregion": "Australia and New Zealand",
"value": 23254142
},
{
"key": "Austria",
"region": "Europe",
"subregion": "Western Europe",
"value": 8501502
},
{
"key": "Azerbaijan",
"region": "Asia",
"subregion": "Western Asia",
"value": 9235100
},
{
"key": "Bahamas",
"region": "Americas",
"subregion": "Caribbean",
"value": -1
},
{
"key": "Bahrain",
"region": "Asia",
"subregion": "Western Asia",
"value": 1234571
},
{
"key": "Bangladesh",
"region": "Asia",
"subregion": "Southern Asia",
"value": 152518015
},
{
"key": "Barbados",
"region": "Americas",
"subregion": "Caribbean",
"value": 274200
},
{
"key": "Belarus",
"region": "Europe",
"subregion": "Eastern Europe",
"value": 9465500
},
{
"key": "Belgium",
"region": "Europe",
"subregion": "Western Europe",
"value": 11175653
},
{
"key": "Belize",
"region": "Americas",
"subregion": "Central America",
"value": 312971
},
{
"key": "Benin",
"region": "Africa",
"subregion": "Western Africa",
"value": 10323000
},
{
"key": "Bermuda",
"region": "Americas",
"subregion": "Northern America",
"value": 64237
},
{
"key": "Bhutan",
"region": "Asia",
"subregion": "Southern Asia",
"value": 740990
},
{
"key": "Bolivia",
"region": "Americas",
"subregion": "South America",
"value": 10027254
},
{
"key": "Bonaire",
"region": "Americas",
"subregion": "Caribbean",
"value": -1
},
{
"key": "Bosnia and Herzegovina",
"region": "Europe",
"subregion": "Southern Europe",
"value": 3791622
},
{
"key": "Botswana",
"region": "Africa",
"subregion": "Southern Africa",
"value": 2024904
},
{
"key": "Bouvet Island",
"region": "",
"subregion": "",
"value": -1
},
{
"key": "Brazil",
"region": "Americas",
"subregion": "South America",
"value": 201032714
},
{
"key": "British Indian Ocean Territory",
"region": "Africa",
"subregion": "Eastern Africa",
"value": -1
},
{
"key": "British Virgin Islands",
"region": "Americas",
"subregion": "Caribbean",
"value": 29537
},
{
"key": "Brunei",
"region": "Asia",
"subregion": "South-Eastern Asia",
"value": 393162
},
{
"key": "Bulgaria",
"region": "Europe",
"subregion": "Eastern Europe",
"value": 7282041
},
{
"key": "Burkina Faso",
"region": "Africa",
"subregion": "Western Africa",
"value": 17322796
},
{
"key": "Burundi",
"region": "Africa",
"subregion": "Eastern Africa",
"value": 10163000
},
{
"key": "Cambodia",
"region": "Asia",
"subregion": "South-Eastern Asia",
"value": 15135000
},
{
"key": "Cameroon",
"region": "Africa",
"subregion": "Middle Africa",
"value": 20386799
},
{
"key": "Canada",
"region": "Americas",
"subregion": "Northern America",
"value": 35158304
},
{
"key": "Cape Verde",
"region": "Africa",
"subregion": "Western Africa",
"value": 491875
},
{
"key": "Cayman Islands",
"region": "Americas",
"subregion": "Caribbean",
"value": 55456
},
{
"key": "Central African Republic",
"region": "Africa",
"subregion": "Middle Africa",
"value": 4616000
},
{
"key": "Chad",
"region": "Africa",
"subregion": "Middle Africa",
"value": 12825000
},
{
"key": "Chile",
"region": "Americas",
"subregion": "South America",
"value": 16634603
},
{
"key": "China",
"region": "Asia",
"subregion": "Eastern Asia",
"value": 1361170000
},
{
"key": "Christmas Island",
"region": "Oceania",
"subregion": "Australia and New Zealand",
"value": 2072
},
{
"key": "Cocos (Keeling) Islands",
"region": "Oceania",
"subregion": "Australia and New Zealand",
"value": 550
},
{
"key": "Colombia",
"region": "Americas",
"subregion": "South America",
"value": 47330000
},
{
"key": "Comoros",
"region": "Africa",
"subregion": "Eastern Africa",
"value": 724300
},
{
"key": "Republic of the Congo",
"region": "Africa",
"subregion": "Middle Africa",
"value": 4448000
},
{
"key": "Democratic Republic of the Congo",
"region": "Africa",
"subregion": "Middle Africa",
"value": 67514000
},
{
"key": "Cook Islands",
"region": "Oceania",
"subregion": "Polynesia",
"value": 14974
},
{
"key": "Costa Rica",
"region": "Americas",
"subregion": "Central America",
"value": 4667096
},
{
"key": "Côte d'Ivoire",
"region": "Africa",
"subregion": "Western Africa",
"value": -1
},
{
"key": "Croatia",
"region": "Europe",
"subregion": "Southern Europe",
"value": 4290612
},
{
"key": "Cuba",
"region": "Americas",
"subregion": "Caribbean",
"value": 11167325
},
{
"key": "Curaçao",
"region": "Americas",
"subregion": "Caribbean",
"value": 150563
},
{
"key": "Cyprus",
"region": "Asia",
"subregion": "Western Asia",
"value": 865878
},
{
"key": "Czech Republic",
"region": "Europe",
"subregion": "Eastern Europe",
"value": 10512900
},
{
"key": "Denmark",
"region": "Europe",
"subregion": "Northern Europe",
"value": 5623501
},
{
"key": "Djibouti",
"region": "Africa",
"subregion": "Eastern Africa",
"value": 864618
},
{
"key": "Dominica",
"region": "Americas",
"subregion": "Caribbean",
"value": 71293
},
{
"key": "Dominican Republic",
"region": "Americas",
"subregion": "Caribbean",
"value": 9445281
},
{
"key": "Ecuador",
"region": "Americas",
"subregion": "South America",
"value": 15617900
},
{
"key": "Egypt",
"region": "Africa",
"subregion": "Northern Africa",
"value": 83661000
},
{
"key": "El Salvador",
"region": "Americas",
"subregion": "Central America",
"value": 6340000
},
{
"key": "Equatorial Guinea",
"region": "Africa",
"subregion": "Middle Africa",
"value": 1622000
},
{
"key": "Eritrea",
"region": "Africa",
"subregion": "Eastern Africa",
"value": 6333000
},
{
"key": "Estonia",
"region": "Europe",
"subregion": "Northern Europe",
"value": 1286540
},
{
"key": "Ethiopia",
"region": "Africa",
"subregion": "Eastern Africa",
"value": 86613986
},
{
"key": "Falkland Islands",
"region": "Americas",
"subregion": "South America",
"value": 2563
},
{
"key": "Faroe Islands",
"region": "Europe",
"subregion": "Northern Europe",
"value": 48509
},
{
"key": "Fiji",
"region": "Oceania",
"subregion": "Melanesia",
"value": 858038
},
{
"key": "Finland",
"region": "Europe",
"subregion": "Northern Europe",
"value": 5445883
},
{
"key": "France",
"region": "Europe",
"subregion": "Western Europe",
"value": 65806000
},
{
"key": "French Guiana",
"region": "Americas",
"subregion": "South America",
"value": 229040
},
{
"key": "French Polynesia",
"region": "Oceania",
"subregion": "Polynesia",
"value": 268270
},
{
"key": "French Southern and Antarctic Lands",
"region": "",
"subregion": "",
"value": -1
},
{
"key": "Gabon",
"region": "Africa",
"subregion": "Middle Africa",
"value": 1672000
},
{
"key": "Gambia",
"region": "Africa",
"subregion": "Western Africa",
"value": -1
},
{
"key": "Georgia",
"region": "Asia",
"subregion": "Western Asia",
"value": -1
},
{
"key": "Germany",
"region": "Europe",
"subregion": "Western Europe",
"value": 80523700
},
{
"key": "Ghana",
"region": "Africa",
"subregion": "Western Africa",
"value": 24658823
},
{
"key": "Gibraltar",
"region": "Europe",
"subregion": "Southern Europe",
"value": 29752
},
{
"key": "Greece",
"region": "Europe",
"subregion": "Southern Europe",
"value": 10815197
},
{
"key": "Greenland",
"region": "Americas",
"subregion": "Northern America",
"value": 56370
},
{
"key": "Grenada",
"region": "Americas",
"subregion": "Caribbean",
"value": 103328
},
{
"key": "Guadeloupe",
"region": "Americas",
"subregion": "Caribbean",
"value": 403355
},
{
"key": "Guam",
"region": "Oceania",
"subregion": "Micronesia",
"value": 159358
},
{
"key": "Guatemala",
"region": "Americas",
"subregion": "Central America",
"value": 15438384
},
{
"key": "Guernsey",
"region": "Europe",
"subregion": "Northern Europe",
"value": 62431
},
{
"key": "Guinea",
"region": "Africa",
"subregion": "Western Africa",
"value": 10824200
},
{
"key": "Guinea-Bissau",
"region": "Africa",
"subregion": "Western Africa",
"value": 1704000
},
{
"key": "Guyana",
"region": "Americas",
"subregion": "South America",
"value": 784894
},
{
"key": "Haiti",
"region": "Americas",
"subregion": "Caribbean",
"value": 10413211
},
{
"key": "Heard Island and McDonald Islands",
"region": "",
"subregion": "",
"value": -1
},
{
"key": "Vatican City",
"region": "Europe",
"subregion": "Southern Europe",
"value": 800
},
{
"key": "Honduras",
"region": "Americas",
"subregion": "Central America",
"value": 8555072
},
{
"key": "Hong Kong",
"region": "Asia",
"subregion": "Eastern Asia",
"value": 7184000
},
{
"key": "Hungary",
"region": "Europe",
"subregion": "Eastern Europe",
"value": 9906000
},
{
"key": "Iceland",
"region": "Europe",
"subregion": "Northern Europe",
"value": 325010
},
{
"key": "India",
"region": "Asia",
"subregion": "Southern Asia",
"value": 1236670000
},
{
"key": "Indonesia",
"region": "Asia",
"subregion": "South-Eastern Asia",
"value": 237641326
},
{
"key": "Iran",
"region": "Asia",
"subregion": "Southern Asia",
"value": 77068000
},
{
"key": "Iraq",
"region": "Asia",
"subregion": "Western Asia",
"value": 34035000
},
{
"key": "Ireland",
"region": "Europe",
"subregion": "Northern Europe",
"value": -1
},
{
"key": "Isle of Man",
"region": "Europe",
"subregion": "Northern Europe",
"value": 84497
},
{
"key": "Israel",
"region": "Asia",
"subregion": "Western Asia",
"value": 8092700
},
{
"key": "Italy",
"region": "Europe",
"subregion": "Southern Europe",
"value": 59829079
},
{
"key": "Jamaica",
"region": "Americas",
"subregion": "Caribbean",
"value": 2711476
},
{
"key": "Japan",
"region": "Asia",
"subregion": "Eastern Asia",
"value": 127290000
},
{
"key": "Jersey",
"region": "Europe",
"subregion": "Northern Europe",
"value": 97857
},
{
"key": "Jordan",
"region": "Asia",
"subregion": "Western Asia",
"value": 6512600
},
{
"key": "Kazakhstan",
"region": "Asia",
"subregion": "Central Asia",
"value": 17099000
},
{
"key": "Kenya",
"region": "Africa",
"subregion": "Eastern Africa",
"value": 44354000
},
{
"key": "Kiribati",
"region": "Oceania",
"subregion": "Micronesia",
"value": 106461
},
{
"key": "Kuwait",
"region": "Asia",
"subregion": "Western Asia",
"value": 3582054
},
{
"key": "Kyrgyzstan",
"region": "Asia",
"subregion": "Central Asia",
"value": 5551900
},
{
"key": "Laos",
"region": "Asia",
"subregion": "South-Eastern Asia",
"value": 6580800
},
{
"key": "Latvia",
"region": "Europe",
"subregion": "Northern Europe",
"value": 2014000
},
{
"key": "Lebanon",
"region": "Asia",
"subregion": "Western Asia",
"value": 4822000
},
{
"key": "Lesotho",
"region": "Africa",
"subregion": "Southern Africa",
"value": 2074000
},
{
"key": "Liberia",
"region": "Africa",
"subregion": "Western Africa",
"value": 4294000
},
{
"key": "Libya",
"region": "Africa",
"subregion": "Northern Africa",
"value": 6202000
},
{
"key": "Liechtenstein",
"region": "Europe",
"subregion": "Western Europe",
"value": 36842
},
{
"key": "Lithuania",
"region": "Europe",
"subregion": "Northern Europe",
"value": 2950684
},
{
"key": "Luxembourg",
"region": "Europe",
"subregion": "Western Europe",
"value": 537000
},
{
"key": "Macau",
"region": "Asia",
"subregion": "Eastern Asia",
"value": -1
},
{
"key": "Macedonia",
"region": "Europe",
"subregion": "Southern Europe",
"value": -1
},
{
"key": "Madagascar",
"region": "Africa",
"subregion": "Eastern Africa",
"value": 20696070
},
{
"key": "Malawi",
"region": "Africa",
"subregion": "Eastern Africa",
"value": 16363000
},
{
"key": "Malaysia",
"region": "Asia",
"subregion": "South-Eastern Asia",
"value": 29793600
},
{
"key": "Maldives",
"region": "Asia",
"subregion": "Southern Asia",
"value": 317280
},
{
"key": "Mali",
"region": "Africa",
"subregion": "Western Africa",
"value": 15302000
},
{
"key": "Malta",
"region": "Europe",
"subregion": "Southern Europe",
"value": 416055
},
{
"key": "Marshall Islands",
"region": "Oceania",
"subregion": "Micronesia",
"value": 56086
},
{
"key": "Martinique",
"region": "Americas",
"subregion": "Caribbean",
"value": 394173
},
{
"key": "Mauritania",
"region": "Africa",
"subregion": "Western Africa",
"value": 3461041
},
{
"key": "Mauritius",
"region": "Africa",
"subregion": "Eastern Africa",
"value": 1257900
},
{
"key": "Mayotte",
"region": "Africa",
"subregion": "Eastern Africa",
"value": 212600
},
{
"key": "Mexico",
"region": "Americas",
"subregion": "Central America",
"value": 118395054
},
{
"key": "Micronesia",
"region": "Oceania",
"subregion": "Micronesia",
"value": -1
},
{
"key": "Moldova",
"region": "Europe",
"subregion": "Eastern Europe",
"value": 3559500
},
{
"key": "Monaco",
"region": "Europe",
"subregion": "Western Europe",
"value": 36136
},
{
"key": "Mongolia",
"region": "Asia",
"subregion": "Eastern Asia",
"value": 2754685
},
{
"key": "Montenegro",
"region": "Europe",
"subregion": "Southern Europe",
"value": 620029
},
{
"key": "Montserrat",
"region": "Americas",
"subregion": "Caribbean",
"value": 4922
},
{
"key": "Morocco",
"region": "Africa",
"subregion": "Northern Africa",
"value": 33087700
},
{
"key": "Mozambique",
"region": "Africa",
"subregion": "Eastern Africa",
"value": 23700715
},
{
"key": "Myanmar",
"region": "Asia",
"subregion": "South-Eastern Asia",
"value": -1
},
{
"key": "Namibia",
"region": "Africa",
"subregion": "Southern Africa",
"value": 2113077
},
{
"key": "Nauru",
"region": "Oceania",
"subregion": "Micronesia",
"value": 9945
},
{
"key": "Nepal",
"region": "Asia",
"subregion": "Southern Asia",
"value": 26494504
},
{
"key": "Netherlands",
"region": "Europe",
"subregion": "Western Europe",
"value": 16807300
},
{
"key": "New Caledonia",
"region": "Oceania",
"subregion": "Melanesia",
"value": 258958
},
{
"key": "New Zealand",
"region": "Oceania",
"subregion": "Australia and New Zealand",
"value": 4478810
},
{
"key": "Nicaragua",
"region": "Americas",
"subregion": "Central America",
"value": 6071045
},
{
"key": "Niger",
"region": "Africa",
"subregion": "Western Africa",
"value": 17129076
},
{
"key": "Nigeria",
"region": "Africa",
"subregion": "Western Africa",
"value": 173615000
},
{
"key": "Niue",
"region": "Oceania",
"subregion": "Polynesia",
"value": 1613
},
{
"key": "Norfolk Island",
"region": "Oceania",
"subregion": "Australia and New Zealand",
"value": 2302
},
{
"key": "North Korea",
"region": "Asia",
"subregion": "Eastern Asia",
"value": 24895000
},
{
"key": "Northern Mariana Islands",
"region": "Oceania",
"subregion": "Micronesia",
"value": 53883
},
{
"key": "Norway",
"region": "Europe",
"subregion": "Northern Europe",
"value": 5077798
},
{
"key": "Oman",
"region": "Asia",
"subregion": "Western Asia",
"value": 3929000
},
{
"key": "Pakistan",
"region": "Asia",
"subregion": "Southern Asia",
"value": 184845000
},
{
"key": "Palau",
"region": "Oceania",
"subregion": "Micronesia",
"value": 20901
},
{
"key": "Palestine",
"region": "Asia",
"subregion": "Western Asia",
"value": -1
},
{
"key": "Panama",
"region": "Americas",
"subregion": "Central America",
"value": 3405813
},
{
"key": "Papua New Guinea",
"region": "Oceania",
"subregion": "Melanesia",
"value": 7059653
},
{
"key": "Paraguay",
"region": "Americas",
"subregion": "South America",
"value": 6783374
},
{
"key": "Peru",
"region": "Americas",
"subregion": "South America",
"value": 30475144
},
{
"key": "Philippines",
"region": "Asia",
"subregion": "South-Eastern Asia",
"value": 98678000
},
{
"key": "Pitcairn Islands",
"region": "Oceania",
"subregion": "Polynesia",
"value": 56
},
{
"key": "Poland",
"region": "Europe",
"subregion": "Eastern Europe",
"value": 38533299
},
{
"key": "Portugal",
"region": "Europe",
"subregion": "Southern Europe",
"value": 10562178
},
{
"key": "Puerto Rico",
"region": "Americas",
"subregion": "Caribbean",
"value": 3667084
},
{
"key": "Qatar",
"region": "Asia",
"subregion": "Western Asia",
"value": 2024707
},
{
"key": "Republic of Kosovo",
"region": "Europe",
"subregion": "Eastern Europe",
"value": 1733842
},
{
"key": "Réunion",
"region": "Africa",
"subregion": "Eastern Africa",
"value": 821136
},
{
"key": "Romania",
"region": "Europe",
"subregion": "Eastern Europe",
"value": 20121641
},
{
"key": "Russia",
"region": "Europe",
"subregion": "Eastern Europe",
"value": 143500000
},
{
"key": "Rwanda",
"region": "Africa",
"subregion": "Eastern Africa",
"value": 10537222
},
{
"key": "Saint Barthélemy",
"region": "Americas",
"subregion": "Caribbean",
"value": 8938
},
{
"key": "Saint Helena",
"region": "Africa",
"subregion": "Western Africa",
"value": -1
},
{
"key": "Saint Kitts and Nevis",
"region": "Americas",
"subregion": "Caribbean",
"value": 54000
},
{
"key": "Saint Lucia",
"region": "Americas",
"subregion": "Caribbean",
"value": 166526
},
{
"key": "Saint Martin",
"region": "Americas",
"subregion": "Caribbean",
"value": -1
},
{
"key": "Saint Pierre and Miquelon",
"region": "Americas",
"subregion": "Northern America",
"value": 6081
},
{
"key": "Saint Vincent and the Grenadines",
"region": "Americas",
"subregion": "Caribbean",
"value": 109000
},
{
"key": "Samoa",
"region": "Oceania",
"subregion": "Polynesia",
"value": 187820
},
{
"key": "San Marino",
"region": "Europe",
"subregion": "Southern Europe",
"value": 32509
},
{
"key": "São Tomé and Príncipe",
"region": "Africa",
"subregion": "Middle Africa",
"value": 187356
},
{
"key": "Saudi Arabia",
"region": "Asia",
"subregion": "Western Asia",
"value": 29994272
},
{
"key": "Senegal",
"region": "Africa",
"subregion": "Western Africa",
"value": 13567338
},
{
"key": "Serbia",
"region": "Europe",
"subregion": "Southern Europe",
"value": 7181505
},
{
"key": "Seychelles",
"region": "Africa",
"subregion": "Eastern Africa",
"value": 90945
},
{
"key": "Sierra Leone",
"region": "Africa",
"subregion": "Western Africa",
"value": 6190280
},
{
"key": "Singapore",
"region": "Asia",
"subregion": "South-Eastern Asia",
"value": 5399200
},
{
"key": "Sint Maarten",
"region": "Americas",
"subregion": "Caribbean",
"value": 37429
},
{
"key": "Slovakia",
"region": "Europe",
"subregion": "Eastern Europe",
"value": 5412008
},
{
"key": "Slovenia",
"region": "Europe",
"subregion": "Southern Europe",
"value": 2061405
},
{
"key": "Solomon Islands",
"region": "Oceania",
"subregion": "Melanesia",
"value": 561000
},
{
"key": "Somalia",
"region": "Africa",
"subregion": "Eastern Africa",
"value": 10496000
},
{
"key": "South Africa",
"region": "Africa",
"subregion": "Southern Africa",
"value": 52981991
},
{
"key": "South Georgia",
"region": "Americas",
"subregion": "South America",
"value": -1
},
{
"key": "South Korea",
"region": "Asia",
"subregion": "Eastern Asia",
"value": 50219669
},
{
"key": "South Sudan",
"region": "Africa",
"subregion": "Middle Africa",
"value": 11296000
},
{
"key": "Spain",
"region": "Europe",
"subregion": "Southern Europe",
"value": 46704314
},
{
"key": "Sri Lanka",
"region": "Asia",
"subregion": "Southern Asia",
"value": 20277597
},
{
"key": "Sudan",
"region": "Africa",
"subregion": "Northern Africa",
"value": 37964000
},
{
"key": "Suriname",
"region": "Americas",
"subregion": "South America",
"value": 534189
},
{
"key": "Svalbard and Jan Mayen",
"region": "Europe",
"subregion": "Northern Europe",
"value": 2655
},
{
"key": "Swaziland",
"region": "Africa",
"subregion": "Southern Africa",
"value": 1250000
},
{
"key": "Sweden",
"region": "Europe",
"subregion": "Northern Europe",
"value": 9625444
},
{
"key": "Switzerland",
"region": "Europe",
"subregion": "Western Europe",
"value": 8085300
},
{
"key": "Syria",
"region": "Asia",
"subregion": "Western Asia",
"value": 21898000
},
{
"key": "Taiwan",
"region": "Asia",
"subregion": "Eastern Asia",
"value": 23361147
},
{
"key": "Tajikistan",
"region": "Asia",
"subregion": "Central Asia",
"value": 8000000
},
{
"key": "Tanzania",
"region": "Africa",
"subregion": "Eastern Africa",
"value": 44928923
},
{
"key": "Thailand",
"region": "Asia",
"subregion": "South-Eastern Asia",
"value": 65926261
},
{
"key": "Timor-Leste",
"region": "Asia",
"subregion": "South-Eastern Asia",
"value": -1
},
{
"key": "Togo",
"region": "Africa",
"subregion": "Western Africa",
"value": 6191155
},
{
"key": "Tokelau",
"region": "Oceania",
"subregion": "Polynesia",
"value": 1411
},
{
"key": "Tonga",
"region": "Oceania",
"subregion": "Polynesia",
"value": 103036
},
{
"key": "Trinidad and Tobago",
"region": "Americas",
"subregion": "Caribbean",
"value": 1328019
},
{
"key": "Tunisia",
"region": "Africa",
"subregion": "Northern Africa",
"value": 10833431
},
{
"key": "Turkey",
"region": "Asia",
"subregion": "Western Asia",
"value": 75627384
},
{
"key": "Turkmenistan",
"region": "Asia",
"subregion": "Central Asia",
"value": 5240000
},
{
"key": "Turks and Caicos Islands",
"region": "Americas",
"subregion": "Caribbean",
"value": 31458
},
{
"key": "Tuvalu",
"region": "Oceania",
"subregion": "Polynesia",
"value": 11323
},
{
"key": "Uganda",
"region": "Africa",
"subregion": "Eastern Africa",
"value": 35357000
},
{
"key": "Ukraine",
"region": "Europe",
"subregion": "Eastern Europe",
"value": 45461627
},
{
"key": "United Arab Emirates",
"region": "Asia",
"subregion": "Western Asia",
"value": 8264070
},
{
"key": "United Kingdom",
"region": "Europe",
"subregion": "Northern Europe",
"value": 63705000
},
{
"key": "United States",
"region": "Americas",
"subregion": "Northern America",
"value": 317101000
},
{
"key": "United States Minor Outlying Islands",
"region": "Americas",
"subregion": "Northern America",
"value": -1
},
{
"key": "United States Virgin Islands",
"region": "Americas",
"subregion": "Caribbean",
"value": 106405
},
{
"key": "Uruguay",
"region": "Americas",
"subregion": "South America",
"value": 3286314
},
{
"key": "Uzbekistan",
"region": "Asia",
"subregion": "Central Asia",
"value": 30183400
},
{
"key": "Vanuatu",
"region": "Oceania",
"subregion": "Melanesia",
"value": 264652
},
{
"key": "Venezuela",
"region": "Americas",
"subregion": "South America",
"value": 28946101
},
{
"key": "Vietnam",
"region": "Asia",
"subregion": "South-Eastern Asia",
"value": 90388000
},
{
"key": "Wallis and Futuna",
"region": "Oceania",
"subregion": "Polynesia",
"value": 13135
},
{
"key": "Western Sahara",
"region": "Africa",
"subregion": "Northern Africa",
"value": 567000
},
{
"key": "Yemen",
"region": "Asia",
"subregion": "Western Asia",
"value": 24527000
},
{
"key": "Zambia",
"region": "Africa",
"subregion": "Eastern Africa",
"value": 13092666
},
{
"key": "Zimbabwe",
"region": "Africa",
"subregion": "Eastern Africa",
"value": 12973808
}
]
Raw
index.html
<!DOCTYPE html>
<!--
Generic treemap, based on http://bost.ocks.org/mike/treemap/
-->
<html>
<head>
<meta charset="utf-8">
<title>Zoomable treemap template</title>
<style>
#chart {
background: #fff;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.title {
font-weight: bold;
font-size: 24px;
text-align: center;
margin-top: 6px;
margin-bottom: 6px;
}
text {
pointer-events: none;
}
.grandparent text {
font-weight: bold;
}
rect {
fill: none;
stroke: #fff;
}
rect.parent,
.grandparent rect {
stroke-width: 2px;
}
rect.parent {
pointer-events: none;
}
.grandparent rect {
fill: orange;
}
.grandparent:hover rect {
fill: #ee9700;
}
.children rect.parent,
.grandparent rect {
cursor: pointer;
}
.children rect.parent {
fill: #bbb;
fill-opacity: .5;
}
.children:hover rect.child {
fill: #bbb;
}
</style>
</head>
<body>
<div id="chart"></div>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
window.addEventListener('message', function(e) {
var opts = e.data.opts,
data = e.data.data;
return main(opts, data);
});
var defaults = {
margin: {top: 24, right: 0, bottom: 0, left: 0},
rootname: "TOP",
format: ",d",
title: "",
width: 960,
height: 500
};
function main(o, data) {
var root,
opts = $.extend(true, {}, defaults, o),
formatNumber = d3.format(opts.format),
rname = opts.rootname,
margin = opts.margin,
theight = 36 + 16;
$('#chart').width(opts.width).height(opts.height);
var width = opts.width - margin.left - margin.right,
height = opts.height - margin.top - margin.bottom - theight,
transitioning;
var color = d3.scale.category20c();
var x = d3.scale.linear()
.domain([0, width])
.range([0, width]);
var y = d3.scale.linear()
.domain([0, height])
.range([0, height]);
var treemap = d3.layout.treemap()
.children(function(d, depth) { return depth ? null : d._children; })
.sort(function(a, b) { return a.value - b.value; })
.ratio(height / width * 0.5 * (1 + Math.sqrt(5)))
.round(false);
var svg = d3.select("#chart").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.bottom + margin.top)
.style("margin-left", -margin.left + "px")
.style("margin.right", -margin.right + "px")
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
.style("shape-rendering", "crispEdges");
var grandparent = svg.append("g")
.attr("class", "grandparent");
grandparent.append("rect")
.attr("y", -margin.top)
.attr("width", width)
.attr("height", margin.top);
grandparent.append("text")
.attr("x", 6)
.attr("y", 6 - margin.top)
.attr("dy", ".75em");
if (opts.title) {
$("#chart").prepend("<p class='title'>" + opts.title + "</p>");
}
if (data instanceof Array) {
root = { key: rname, values: data };
} else {
root = data;
}
initialize(root);
accumulate(root);
layout(root);
console.log(root);
display(root);
if (window.parent !== window) {
var myheight = document.documentElement.scrollHeight || document.body.scrollHeight;
window.parent.postMessage({height: myheight}, '*');
}
function initialize(root) {
root.x = root.y = 0;
root.dx = width;
root.dy = height;
root.depth = 0;
}
// Aggregate the values for internal nodes. This is normally done by the
// treemap layout, but not here because of our custom implementation.
// We also take a snapshot of the original children (_children) to avoid
// the children being overwritten when when layout is computed.
function accumulate(d) {
return (d._children = d.values)
? d.value = d.values.reduce(function(p, v) { return p + accumulate(v); }, 0)
: d.value;
}
// Compute the treemap layout recursively such that each group of siblings
// uses the same size (1×1) rather than the dimensions of the parent cell.
// This optimizes the layout for the current zoom state. Note that a wrapper
// object is created for the parent node for each group of siblings so that
// the parent’s dimensions are not discarded as we recurse. Since each group
// of sibling was laid out in 1×1, we must rescale to fit using absolute
// coordinates. This lets us use a viewport to zoom.
function layout(d) {
if (d._children) {
treemap.nodes({_children: d._children});
d._children.forEach(function(c) {
c.x = d.x + c.x * d.dx;
c.y = d.y + c.y * d.dy;
c.dx *= d.dx;
c.dy *= d.dy;
c.parent = d;
layout(c);
});
}
}
function display(d) {
grandparent
.datum(d.parent)
.on("click", transition)
.select("text")
.text(name(d));
var g1 = svg.insert("g", ".grandparent")
.datum(d)
.attr("class", "depth");
var g = g1.selectAll("g")
.data(d._children)
.enter().append("g");
g.filter(function(d) { return d._children; })
.classed("children", true)
.on("click", transition);
var children = g.selectAll(".child")
.data(function(d) { return d._children || [d]; })
.enter().append("g");
children.append("rect")
.attr("class", "child")
.call(rect)
.append("title")
.text(function(d) { return d.key + " (" + formatNumber(d.value) + ")"; });
children.append("text")
.attr("class", "ctext")
.text(function(d) { return d.key; })
.call(text2);
g.append("rect")
.attr("class", "parent")
.call(rect);
var t = g.append("text")
.attr("class", "ptext")
.attr("dy", ".75em")
t.append("tspan")
.text(function(d) { return d.key; });
t.append("tspan")
.attr("dy", "1.0em")
.text(function(d) { return formatNumber(d.value); });
t.call(text);
g.selectAll("rect")
.style("fill", function(d) { return color(d.key); });
function transition(d) {
if (transitioning || !d) return;
transitioning = true;
var g2 = display(d),
t1 = g1.transition().duration(750),
t2 = g2.transition().duration(750);
// Update the domain only after entering new elements.
x.domain([d.x, d.x + d.dx]);
y.domain([d.y, d.y + d.dy]);
// Enable anti-aliasing during the transition.
svg.style("shape-rendering", null);
// Draw child nodes on top of parent nodes.
svg.selectAll(".depth").sort(function(a, b) { return a.depth - b.depth; });
// Fade-in entering text.
g2.selectAll("text").style("fill-opacity", 0);
// Transition to the new view.
t1.selectAll(".ptext").call(text).style("fill-opacity", 0);
t1.selectAll(".ctext").call(text2).style("fill-opacity", 0);
t2.selectAll(".ptext").call(text).style("fill-opacity", 1);
t2.selectAll(".ctext").call(text2).style("fill-opacity", 1);
t1.selectAll("rect").call(rect);
t2.selectAll("rect").call(rect);
// Remove the old node when the transition is finished.
t1.remove().each("end", function() {
svg.style("shape-rendering", "crispEdges");
transitioning = false;
});
}
return g;
}
function text(text) {
text.selectAll("tspan")
.attr("x", function(d) { return x(d.x) + 6; })
text.attr("x", function(d) { return x(d.x) + 6; })
.attr("y", function(d) { return y(d.y) + 6; })
.style("opacity", function(d) { return this.getComputedTextLength() < x(d.x + d.dx) - x(d.x) ? 1 : 0; });
}
function text2(text) {
text.attr("x", function(d) { return x(d.x + d.dx) - this.getComputedTextLength() - 6; })
.attr("y", function(d) { return y(d.y + d.dy) - 6; })
.style("opacity", function(d) { return this.getComputedTextLength() < x(d.x + d.dx) - x(d.x) ? 1 : 0; });
}
function rect(rect) {
rect.attr("x", function(d) { return x(d.x); })
.attr("y", function(d) { return y(d.y); })
.attr("width", function(d) { return x(d.x + d.dx) - x(d.x); })
.attr("height", function(d) { return y(d.y + d.dy) - y(d.y); });
}
function name(d) {
return d.parent
? name(d.parent) + " / " + d.key + " (" + formatNumber(d.value) + ")"
: d.key + " (" + formatNumber(d.value) + ")";
}
}
if (window.location.hash === "") {
d3.json("countries.json", function(err, res) {
if (!err) {
console.log(res);
var data = d3.nest().key(function(d) { return d.region; }).key(function(d) { return d.subregion; }).entries(res);
main({title: "World Population"}, {key: "World", values: data});
}
});
}
</script>
</body>
</html>
@MichaelCurrie
Copy link

This is great! A suggestion: support for tooltips.

@earl-bennett
Copy link

Is this code released under any particular license? I would like to modify it for use in a commercial product.

@bradleyjkemp
Copy link

Could a license be added to this? It would be great to be able to use this in an open source project I'm working on

@hsang
Copy link

hsang commented Oct 4, 2018

Hi, I would like to ask the same than @earl-bennett and @bradleyjkemp , is this code released under any license?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment