var json = {
children: [{
children: [{
children: [],
data: {
$area: "80",
$color: "30",
image: "http://images.amazon.com/images/P/B0007DAZW8.01.MZZZZZZZ.jpg"
},
id: "056e4f3e-d505-4dad-8ec1-d04f521cbb56Human After All",
name: "Human After All"
}],
data: {
$area: 80
},
id: "056e4f3e-d505-4dad-8ec1-d04f521cbb56a",
name: "Daft Punk"
}, {
children: [{
children: [],
data: {
$area: "94",
$color: "23",
image: "http://cdn.last.fm/coverart/130x130/2393956.jpg"
},
id: "f2fa5cf6-e0b0-4559-8641-e033f1a9e6fcClearing the Channel",
name: "Clearing the Channel"
}],
data: {
$area: 94
},
id: "f2fa5cf6-e0b0-4559-8641-e033f1a9e6fca",
name: "Sinch"
}, {
children: [{
children: [],
data: {
$area: "211",
$color: "2",
image: "http://cdn.last.fm/coverart/130x130/2564320-1193176651.jpg"
},
id: "4bd95eea-b9f6-4d70-a36c-cfea77431553Music Bank",
name: "Music Bank"
}],
data: {
$area: 211
},
id: "4bd95eea-b9f6-4d70-a36c-cfea77431553a",
name: "Alice in Chains"
}, {
children: [{
children: [],
data: {
$area: "153",
$color: "6",
image: "http://userserve-ak.last.fm/serve/174s/8590493.jpg"
},
id: "8bfac288-ccc5-448d-9573-c33ea2aa5c30One Hot Minute",
name: "One Hot Minute"
}, {
children: [],
data: {
$area: "69",
$color: "35",
image: "http://userserve-ak.last.fm/serve/174s/8593509.jpg"
},
id: "8bfac288-ccc5-448d-9573-c33ea2aa5c30Californication",
name: "Californication"
}, {
children: [],
data: {
$area: "69",
$color: "35",
image: "http://userserve-ak.last.fm/serve/174s/8672727.jpg"
},
id: "8bfac288-ccc5-448d-9573-c33ea2aa5c30Greatest Hits",
name: "Greatest Hits"
}],
data: {
$area: 291
},
id: "8bfac288-ccc5-448d-9573-c33ea2aa5c30a",
name: "Red Hot Chili Peppers"
}, {
children: [{
children: [],
data: {
$area: "114",
$color: "15",
image: "http://images.amazon.com/images/P/B0000UX5IY.01._SCMZZZZZZZ_.jpg"
},
id: "ff6e677f-91dd-4986-a174-8db0474b1799Thicker Than Water",
name: "Thicker Than Water"
}, {
children: [],
data: {
$area: "83",
$color: "28",
image: "http://userserve-ak.last.fm/serve/174s/8599099.jpg"
},
id: "ff6e677f-91dd-4986-a174-8db0474b1799On and On",
name: "On and On"
}, {
children: [],
data: {
$area: "62",
$color: "41",
image: "http://userserve-ak.last.fm/serve/174s/8664981.jpg"
},
id: "ff6e677f-91dd-4986-a174-8db0474b1799Brushfire Fairytales",
name: "Brushfire Fairytales"
}],
data: {
$area: 259
},
id: "ff6e677f-91dd-4986-a174-8db0474b1799a",
name: "Jack Johnson"
}, {
children: [{
children: [],
data: {
$area: "65",
$color: "38",
image: "http://userserve-ak.last.fm/serve/174s/23727633.jpg"
},
id: "83b9cbe7-9857-49e2-ab8e-b57b01038103Vs.",
name: "Vs."
}, {
children: [],
data: {
$area: "61",
$color: "44",
image: "http://userserve-ak.last.fm/serve/174s/19611679.jpg"
},
id: "83b9cbe7-9857-49e2-ab8e-b57b01038103Riot Act",
name: "Riot Act"
}, {
children: [],
data: {
$area: "61",
$color: "44",
image: "http://userserve-ak.last.fm/serve/174s/17492447.jpg"
},
id: "83b9cbe7-9857-49e2-ab8e-b57b01038103Yield",
name: "Yield"
}],
data: {
$area: 187
},
id: "83b9cbe7-9857-49e2-ab8e-b57b01038103a",
name: "Pearl Jam"
}, {
children: [{
children: [],
data: {
$area: "115",
$color: "14",
image: "http://userserve-ak.last.fm/serve/174s/17484209.jpg"
},
id: "bfd085b8-0bbf-46b3-8ab9-193bca5c85e7Above",
name: "Above"
}],
data: {
$area: 115
},
id: "bfd085b8-0bbf-46b3-8ab9-193bca5c85e7a",
name: "Mad Season"
}, {
children: [{
children: [],
data: {
$area: "108",
$color: "17",
image: "http://images.amazon.com/images/P/B000002J8M.01._SCMZZZZZZZ_.jpg"
},
id: "8c32bb01-58a3-453b-8050-8c0620edb0e5Tiny Music... Songs From the Vatican Gift Shop",
name: "Tiny Music... Songs From the Vatican Gift Shop"
}, {
children: [],
data: {
$area: "60",
$color: "46",
image: "http://images.amazon.com/images/P/B000002IU3.01.MZZZZZZZ.jpg"
},
id: "8c32bb01-58a3-453b-8050-8c0620edb0e5Core",
name: "Core"
}],
data: {
$area: 168
},
id: "8c32bb01-58a3-453b-8050-8c0620edb0e5a",
name: "Stone Temple Pilots"
}, {
children: [{
children: [],
data: {
$area: "63",
$color: "40",
image: "http://images.amazon.com/images/P/B00005NWLC.01.MZZZZZZZ.jpg"
},
id: "7b2f87f6-db90-464e-a27a-deb4f7219e90Leitmotif",
name: "Leitmotif"
}],
data: {
$area: 63
},
id: "7b2f87f6-db90-464e-a27a-deb4f7219e90a",
name: "dredg"
}, {
children: [{
children: [],
data: {
$area: "188",
$color: "3",
image: "http://images.amazon.com/images/P/B000EULJLU.01._SCMZZZZZZZ_.jpg"
},
id: "66fc5bf8-daa4-4241-b378-9bc9077939d210,000 Days",
name: "10,000 Days"
}],
data: {
$area: 188
},
id: "66fc5bf8-daa4-4241-b378-9bc9077939d2a",
name: "Tool"
}, {
children: [{
children: [],
data: {
$area: "62",
$color: "41",
image: "http://images.amazon.com/images/P/B00001P4TH.01._SCMZZZZZZZ_.jpg"
},
id: "b7ffd2af-418f-4be2-bdd1-22f8b48613daThe Fragile (Left)",
name: "The Fragile (Left)"
}],
data: {
$area: 62
},
id: "b7ffd2af-418f-4be2-bdd1-22f8b48613daa",
name: "Nine Inch Nails"
}, {
children: [{
children: [],
data: {
$area: "240",
$color: "1",
image: "http://userserve-ak.last.fm/serve/174s/21881921.jpg"
},
id: "a5585acd-9b65-49a7-a63b-3cc4ee18846eMother Love Bone",
name: "Mother Love Bone"
}],
data: {
$area: 240
},
id: "a5585acd-9b65-49a7-a63b-3cc4ee18846ea",
name: "Mother Love Bone"
}, {
children: [{
children: [],
data: {
$area: "67",
$color: "37",
image: "http://userserve-ak.last.fm/serve/174s/8634595.jpg"
},
id: "7527f6c2-d762-4b88-b5e2-9244f1e34c46Around the Fur",
name: "Around the Fur"
}],
data: {
$area: 67
},
id: "7527f6c2-d762-4b88-b5e2-9244f1e34c46a",
name: "Deftones"
}, {
children: [{
children: [],
data: {
$area: "62",
$color: "41",
image: "http://images.amazon.com/images/P/B0000A5BYD.03.MZZZZZZZ.jpg"
},
id: "7bdb6921-8380-422c-8514-87cf30d5d8ccIt All Makes Sense Now",
name: "It All Makes Sense Now"
}],
data: {
$area: 62
},
id: "7bdb6921-8380-422c-8514-87cf30d5d8cca",
name: "Kr\xF3m"
}, {
children: [{
children: [],
data: {
$area: "57",
$color: "48",
image: "http://images-eu.amazon.com/images/P/B00005IABM.02.MZZZZZZZ.jpg"
},
id: "cb67438a-7f50-4f2b-a6f1-2bb2729fd53810,000 Hz Legend",
name: "10,000 Hz Legend"
}],
data: {
$area: 57
},
id: "cb67438a-7f50-4f2b-a6f1-2bb2729fd538a",
name: "Air"
}, {
children: [{
children: [],
data: {
$area: "168",
$color: "5",
image: "http://userserve-ak.last.fm/serve/174s/23091681.jpg"
},
id: "c5998351-be49-49d8-8593-3e96f129c1fcMamagubida",
name: "Mamagubida"
}, {
children: [],
data: {
$area: "141",
$color: "7",
image: "http://cdn.last.fm/flatness/catalogue/noimage/2/default_album_mega.png"
},
id: "c5998351-be49-49d8-8593-3e96f129c1fcReggae \xE0 Coup de Cirque",
name: "Reggae \xE0 Coup de Cirque"
}, {
children: [],
data: {
$area: "135",
$color: "8",
image: "http://userserve-ak.last.fm/serve/174s/16799743.jpg"
},
id: "c5998351-be49-49d8-8593-3e96f129c1fcGrain de sable",
name: "Grain de sable"
}, {
children: [],
data: {
$area: "80",
$color: "30",
image: "http://userserve-ak.last.fm/serve/174s/8635653.jpg"
},
id: "c5998351-be49-49d8-8593-3e96f129c1fcFaut qu'ils s'activent...",
name: "Faut qu'ils s'activent..."
}],
data: {
$area: 524
},
id: "c5998351-be49-49d8-8593-3e96f129c1fca",
name: "Tryo"
}, {
children: [{
children: [],
data: {
$area: "57",
$color: "48",
image: "http://userserve-ak.last.fm/serve/174s/8634627.jpg"
},
id: "4bb4e4e4-5f66-4509-98af-62dbb90c45c5The Sickness",
name: "The Sickness"
}],
data: {
$area: 57
},
id: "4bb4e4e4-5f66-4509-98af-62dbb90c45c5a",
name: "Disturbed"
}, {
children: [{
children: [],
data: {
$area: "72",
$color: "34",
image: "http://userserve-ak.last.fm/serve/174s/8673813.jpg"
},
id: "95f5b748-d370-47fe-85bd-0af2dc450bc0Second-Hand Smoke",
name: "Second-Hand Smoke"
}],
data: {
$area: 72
},
id: "95f5b748-d370-47fe-85bd-0af2dc450bc0a",
name: "Sublime"
}, {
children: [{
children: [],
data: {
$area: "73",
$color: "33",
image: "http://userserve-ak.last.fm/serve/174s/7737695.jpg"
},
id: "020bfbb4-05c3-4c86-b372-17825c262094Audioslave",
name: "Audioslave"
}],
data: {
$area: 73
},
id: "020bfbb4-05c3-4c86-b372-17825c262094a",
name: "Audioslave"
}, {
children: [{
children: [],
data: {
$area: "124",
$color: "10",
image: "http://userserve-ak.last.fm/serve/174s/8605651.jpg"
},
id: "e9571c17-817f-4d34-ae3f-0c7a96f822c1Temple of the Dog",
name: "Temple of the Dog"
}],
data: {
$area: 124
},
id: "e9571c17-817f-4d34-ae3f-0c7a96f822c1a",
name: "Temple of the Dog"
}, {
children: [{
children: [],
data: {
$area: "82",
$color: "29",
image: "http://images.amazon.com/images/P/B0002ZEUKO.01._SCMZZZZZZZ_.jpg"
},
id: "06fb1c8b-566e-4cb2-985b-b467c90781d4Are You Experienced?",
name: "Are You Experienced?"
}, {
children: [],
data: {
$area: "64",
$color: "39",
image: "http://userserve-ak.last.fm/serve/174s/8729219.jpg"
},
id: "06fb1c8b-566e-4cb2-985b-b467c90781d4First Rays of the New Rising Sun",
name: "First Rays of the New Rising Sun"
}],
data: {
$area: 146
},
id: "06fb1c8b-566e-4cb2-985b-b467c90781d4a",
name: "Jimi Hendrix"
}, {
children: [{
children: [],
data: {
$area: "56",
$color: "50",
image: "http://images.amazon.com/images/P/B0000DZDYN.01.MZZZZZZZ.jpg"
},
id: "fbd2a255-1d57-4d31-ac11-65b671c19958The Singles 1992-2003",
name: "The Singles 1992-2003"
}],
data: {
$area: 56
},
id: "fbd2a255-1d57-4d31-ac11-65b671c19958a",
name: "No Doubt"
}, {
children: [{
children: [],
data: {
$area: "123",
$color: "11",
image: "http://userserve-ak.last.fm/serve/174s/11393921.jpg"
},
id: "078a9376-3c04-4280-b7d7-b20e158f345dMer de Noms",
name: "Mer de Noms"
}, {
children: [],
data: {
$area: "93",
$color: "24",
image: "http://userserve-ak.last.fm/serve/174s/11403219.jpg"
},
id: "078a9376-3c04-4280-b7d7-b20e158f345dThirteenth Step",
name: "Thirteenth Step"
}],
data: {
$area: 216
},
id: "078a9376-3c04-4280-b7d7-b20e158f345da",
name: "A Perfect Circle"
}, {
children: [{
children: [],
data: {
$area: "109",
$color: "16",
image: "http://images.amazon.com/images/P/B00005LNP5.01._SCMZZZZZZZ_.jpg"
},
id: "1fc56cff-f0a0-4ce2-ab1f-ac49cf3b073fElija y Gane",
name: "Elija y Gane"
}, {
children: [],
data: {
$area: "85",
$color: "26",
image: "http://images.amazon.com/images/P/B0000B193V.01._SCMZZZZZZZ_.jpg"
},
id: "1fc56cff-f0a0-4ce2-ab1f-ac49cf3b073fPara los Arboles",
name: "Para los Arboles"
}],
data: {
$area: 194
},
id: "1fc56cff-f0a0-4ce2-ab1f-ac49cf3b073fa",
name: "Luis Alberto Spinetta"
}, {
children: [{
children: [],
data: {
$area: "87",
$color: "25",
image: "http://userserve-ak.last.fm/serve/174s/8772827.jpg"
},
id: "e795e03d-b5d5-4a5f-834d-162cfb308a2c4-Track Demos",
name: "4-Track Demos"
}, {
children: [],
data: {
$area: "77",
$color: "32",
image: "http://userserve-ak.last.fm/serve/174s/9929071.jpg"
},
id: "e795e03d-b5d5-4a5f-834d-162cfb308a2cRid of Me",
name: "Rid of Me"
}],
data: {
$area: 164
},
id: "e795e03d-b5d5-4a5f-834d-162cfb308a2ca",
name: "PJ Harvey"
}, {
children: [{
children: [],
data: {
$area: "102",
$color: "19",
image: "http://userserve-ak.last.fm/serve/174s/7410551.jpg"
},
id: "e3e0abcd-7671-4482-a9d8-462f5acc9be5Make Yourself",
name: "Make Yourself"
}, {
children: [],
data: {
$area: "84",
$color: "27",
image: "http://images.amazon.com/images/P/B00018D5CQ.01._SCMZZZZZZZ_.jpg"
},
id: "e3e0abcd-7671-4482-a9d8-462f5acc9be5A Crow Left of the Murder",
name: "A Crow Left of the Murder"
}, {
children: [],
data: {
$area: "60",
$color: "46",
image: "http://userserve-ak.last.fm/serve/174s/19681051.jpg"
},
id: "e3e0abcd-7671-4482-a9d8-462f5acc9be5Morning View",
name: "Morning View"
}],
data: {
$area: 246
},
id: "e3e0abcd-7671-4482-a9d8-462f5acc9be5a",
name: "Incubus"
}, {
children: [{
children: [],
data: {
$area: "130",
$color: "9",
image: "http://userserve-ak.last.fm/serve/174s/15113951.jpg"
},
id: "38c5cdab-5d6d-43d1-85b0-dac41bde186eNico",
name: "Nico"
}, {
children: [],
data: {
$area: "120",
$color: "12",
image: "http://images.amazon.com/images/P/B00005V5PW.01.MZZZZZZZ.jpg"
},
id: "38c5cdab-5d6d-43d1-85b0-dac41bde186eClassic Masters",
name: "Classic Masters"
}, {
children: [],
data: {
$area: "103",
$color: "18",
image: "http://images.amazon.com/images/P/B000002TPF.01.MZZZZZZZ.jpg"
},
id: "38c5cdab-5d6d-43d1-85b0-dac41bde186eSoup",
name: "Soup"
}, {
children: [],
data: {
$area: "99",
$color: "20",
image: "http://userserve-ak.last.fm/serve/174s/15157989.jpg"
},
id: "38c5cdab-5d6d-43d1-85b0-dac41bde186eBlind Melon",
name: "Blind Melon"
}],
data: {
$area: 452
},
id: "38c5cdab-5d6d-43d1-85b0-dac41bde186ea",
name: "Blind Melon"
}, {
children: [{
children: [],
data: {
$area: "173",
$color: "4",
image: "http://userserve-ak.last.fm/serve/174s/8590515.jpg"
},
id: "153c9281-268f-4cf3-8938-f5a4593e5df4Superunknown",
name: "Superunknown"
}, {
children: [],
data: {
$area: "117",
$color: "13",
image: "http://userserve-ak.last.fm/serve/174s/5269310.jpg"
},
id: "153c9281-268f-4cf3-8938-f5a4593e5df4Louder Than Love",
name: "Louder Than Love"
}, {
children: [],
data: {
$area: "96",
$color: "21",
image: "http://userserve-ak.last.fm/serve/174s/8600371.jpg"
},
id: "153c9281-268f-4cf3-8938-f5a4593e5df4Down on the Upside",
name: "Down on the Upside"
}, {
children: [],
data: {
$area: "95",
$color: "22",
image: "http://images.amazon.com/images/P/B000000M4A.01.MZZZZZZZ.jpg"
},
id: "153c9281-268f-4cf3-8938-f5a4593e5df4Ultramega OK",
name: "Ultramega OK"
}],
data: {
$area: 481
},
id: "153c9281-268f-4cf3-8938-f5a4593e5df4a",
name: "Soundgarden"
}],
data: {
$area: 4949
},
id: "topAlbums",
name: "top albums"
};
//You can also do TM.SliceAndDice and TM.Squarified
var tm = new TM.Strip({
//Where to inject the treemap.
rootId: 'infovis',
titleHeight: 0,
orientation: "h",
offset: 0,
//Add click handlers for
//zooming the Treemap in and out
addLeftClickHandler: true,
addRightClickHandler: true,
//When hovering a node highlight the nodes
//between the root node and the hovered node. This
//is done by adding the 'in-path' CSS class to each node.
selectPathOnHover: true,
Color: {
//Allow coloring
allow: true,
//Set min value and max value constraints
//for the *$color* property value.
//Default's to -100 and 100.
minValue: 1,
maxValue: 50,
//Set color range. Default's to reddish and greenish.
//It takes an array of three
//integers as R, G and B values.
minColorValue: [0, 255, 50],
maxColorValue: [255, 0, 50]
},
//Allow tips
Tips: {
allow: true,
//add positioning offsets
offsetX: 20,
offsetY: 20,
//implement the onShow method to
//add content to the tooltip when a node
//is hovered
onShow: function(tip, node, isLeaf, domElement) {
tip.innerHTML = "<div class=\"tip-title\">" + node.name + "</div>" +
"<div class=\"tip-text\">" + this.makeHTMLFromData(node.data) + "</div>";
},
//Build the tooltip inner html by taking each node data property
makeHTMLFromData: function(data){
var html = '';
html += "playcount" + ': ' + data.$area + '<br />';
if ("$color" in data)
html += "rank" + ': ' + data.$color + '<br />';
if ("image" in data)
html += "<img class=\"album\" src=\"" + data.image + "\" />";
return html;
}
},
//This method is invoked when a DOM element is created.
//Its useful to set DOM event handlers here or manipulate
//the DOM Treemap nodes.
onCreateElement: function(content, tree, isLeaf, leaf){
//Add background image
if(isLeaf) {
var style = leaf.style,
width = parseInt(style.width) - 2,
height = parseInt(style.height) - 2;
leaf.innerHTML = tree.name +
"<img src=\"/Tests/css/gradient.png\" " +
" style=\"position:absolute;top:0;left:0;width:" +
width + "px;height:" + height + "px;\" />";
style.width = width + "px";
style.height = height + "px";
}
},
//Remove all events for the element before destroying it.
onDestroyElement: function(content, tree, isLeaf, leaf){
if(leaf.clearAttributes) leaf.clearAttributes();
}
});
//load JSON and plot
tm.loadJSON(json);