var labelType, useGradients, nativeTextSupport, animate; (function() { var ua = navigator.userAgent, iStuff = ua.match(/iPhone/i) || ua.match(/iPad/i), typeOfCanvas = typeof HTMLCanvasElement, nativeCanvasSupport = (typeOfCanvas == 'object' || typeOfCanvas == 'function'), textSupport = nativeCanvasSupport && (typeof document.createElement('canvas').getContext('2d').fillText == 'function'); //I'm setting this based on the fact that ExCanvas provides text support for IE //and that as of today iPhone/iPad current text support is lame labelType = (!nativeCanvasSupport || (textSupport && !iStuff))? 'Native' : 'HTML'; nativeTextSupport = labelType == 'Native'; useGradients = nativeCanvasSupport; animate = !(iStuff || !nativeCanvasSupport); })(); var Log = { elem: false, write: function(text){ if (!this.elem) this.elem = document.getElementById('log'); this.elem.innerHTML = text; this.elem.style.left = (500 - this.elem.offsetWidth / 2) + 'px'; } }; function init(){ //init data var json = { "children": [ { "data":{"cap":"","sec": "No","$area": 1,"$color":"#183164"}, "id": "United Co Rus-spon Gdr Reg S *", "name": "United Co Rus-spon Gdr Reg S *" }, { "data":{"cap":"€3,168,359,000","sec": "No","$area": 3168359168,"$color":"#182933"}, "id": "Eramet", "name": "Eramet" }, { "data":{"cap":"€78,425,924,000","sec": "Yes","$area": 78425923584,"$color":"#009900"}, "id": "Schlumberger Ltd *", "name": "Schlumberger Ltd *" }, { "data":{"cap":"","sec": "No","$area": 1,"$color":"#1C2A49"}, "id": "United Co Rus-spon Gdr 144a *", "name": "United Co Rus-spon Gdr 144a *" }, { "data":{"cap":"€7,880,621,000","sec": "No","$area": 7880620544,"$color":"#193261"}, "id": "Technip Sa", "name": "Technip Sa" }, { "data":{"cap":"€8,325,763,000","sec": "Yes","$area": 8325763072,"$color":"#009900"}, "id": "Cliffs Natural Resources Inc *", "name": "Cliffs Natural Resources Inc *" }, { "data":{"cap":"€3,100,879,000","sec": "No","$area": 3100878848,"$color":"#152A3F"}, "id": "Imerys Sa", "name": "Imerys Sa" }, { "data":{"cap":"","sec": "No","$area": 1,"$color":"#173037"}, "id": "Drdgold Ltd - Call Auction *", "name": "Drdgold Ltd - Call Auction *" }, { "data":{"cap":"€875,011,000","sec": "No","$area": 875011136,"$color":"#1E2E54"}, "id": "Esso Ste Anonyme Francaise", "name": "Esso Ste Anonyme Francaise" }, { "data":{"cap":"€943,621,000","sec": "No","$area": 943621248,"$color":"#183049"}, "id": "Aperam *", "name": "Aperam *" }, { "data":{"cap":"€89,666,000","sec": "No","$area": 89666432,"$color":"#172E35"}, "id": "Recylex Sa", "name": "Recylex Sa" }, { "data":{"cap":"€24,506,360,000","sec": "Yes","$area": 24506359808,"$color":"#009900"}, "id": "Arcelormittal *", "name": "Arcelormittal *" }, { "data":{"cap":"€95,141,052,000","sec": "Yes","$area": 95141052416,"$color":"#009900"}, "id": "Total Sa", "name": "Total Sa" }, { "data":{"cap":"€86,588,391,000","sec": "Yes","$area": 86588391424,"$color":"#009900"}, "id": "Rio Tinto Plc *", "name": "Rio Tinto Plc *" }, { "data":{"cap":"€3,058,499,000","sec": "Yes","$area": 3058499328,"$color":"#009900"}, "id": "Cie Generale De Geophysique", "name": "Cie Generale De Geophysique" }, { "data":{"cap":"€1,482,750,000","sec": "No","$area": 1482749952,"$color":"#172837"}, "id": "Total Gabon", "name": "Total Gabon" }, { "data":{"cap":"€10,903,000","sec": "No","$area": 10902857,"$color":"#1B2F63"}, "id": "Rocamat", "name": "Rocamat" }, { "data":{"cap":"","sec": "No","$area": 1,"$color":"#1E2F47"}, "id": "Total Sa-rts *", "name": "Total Sa-rts *" }, { "data":{"cap":"€2,474,000","sec": "No","$area": 2473911,"$color":"#1B295E"}, "id": "Georex Sa", "name": "Georex Sa" }, { "data":{"cap":"€200,686,000","sec": "No","$area": 200685584,"$color":"#1E2851"}, "id": "Maurel & Prom Nigeria", "name": "Maurel & Prom Nigeria" }, { "data":{"cap":"€201,239,000","sec": "No","$area": 201238608,"$color":"#1E2F54"}, "id": "Euro Ressources Sa", "name": "Euro Ressources Sa" }, { "data":{"cap":"","sec": "No","$area": 1,"$color":"#152A59"}, "id": "Zccm Investment Holdings-b *", "name": "Zccm Investment Holdings-b *" }, { "data":{"cap":"€12,787,000","sec": "No","$area": 12786501,"$color":"#152D3D"}, "id": "Batla Minerals Sa", "name": "Batla Minerals Sa" }, { "data":{"cap":"","sec": "No","$area": 1,"$color":"#152B42"}, "id": "Dynafond Sa *", "name": "Dynafond Sa *" }, { "data":{"cap":"","sec": "No","$area": 1,"$color":"#173154"}, "id": "Stilfontein Gold Mining Co *", "name": "Stilfontein Gold Mining Co *" }, { "data":{"cap":"€31,063,000","sec": "No","$area": 31062978,"$color":"#1A2E5C"}, "id": "Auplata", "name": "Auplata" }, { "data":{"cap":"€1,533,248,000","sec": "No","$area": 1533248384,"$color":"#16314E"}, "id": "Maurel Et Prom", "name": "Maurel Et Prom" }, { "data":{"cap":"€193,460,000","sec": "No","$area": 193460320,"$color":"#19325E"}, "id": "Drdgold Ltd *", "name": "Drdgold Ltd *" }, { "data":{"cap":"€6,523,000","sec": "No","$area": 6523274,"$color":"#1E2D59"}, "id": "Dietswell", "name": "Dietswell" }, { "data":{"cap":"€210,489,000","sec": "No","$area": 210489120,"$color":"#1E2F5A"}, "id": "Jacquet Metal Service", "name": "Jacquet Metal Service" }, { "data":{"cap":"€4,776,000","sec": "No","$area": 4775890,"$color":"#1D2B47"}, "id": "Ati Petroleum Ltd", "name": "Ati Petroleum Ltd" }, { "data":{"cap":"€91,446,000","sec": "No","$area": 91445704,"$color":"#1B313A"}, "id": "Heurtey Petrochem", "name": "Heurtey Petrochem" }, { "data":{"cap":"€9,162,599,000","sec": "Yes","$area": 9162599424,"$color":"#009900"}, "id": "Weatherford Intl Ltd *", "name": "Weatherford Intl Ltd *" }, { "data":{"cap":"€101,865,300,000","sec": "Yes","$area": 101865299968,"$color":"#009900"}, "id": "Vale Sa-sp Pref Adr *", "name": "Vale Sa-sp Pref Adr *" }, { "data":{"cap":"€370,360,000","sec": "No","$area": 370359744,"$color":"#1D313F"}, "id": "Entrepose Contracting", "name": "Entrepose Contracting" }, { "data":{"cap":"€38,118,000","sec": "No","$area": 38118364,"$color":"#152E64"}, "id": "Zci Ltd *", "name": "Zci Ltd *" }, { "data":{"cap":"","sec": "Yes","$area": 1,"$color":"#009900"}, "id": "Vale Sa-Sp Adr *", "name": "Vale Sa-Sp Adr *" }, { "data":{"cap":"€1,708,199,000","sec": "No","$area": 1708198784,"$color":"#1A2958"}, "id": "Bourbon Sa", "name": "Bourbon Sa" }, { "data":{"cap":"€7,614,000","sec": "No","$area": 7613923,"$color":"#152F53"}, "id": "United Anodisers", "name": "United Anodisers" } ] }; //end //init TreeMap var tm = new $jit.TM.Squarified({ //where to inject the visualization injectInto: 'infovis', //parent box title heights titleHeight: 0, //enable animations animate: false, //box offsets offset: 1, //Attach left and right click events Events: { enable: false }, duration: 1000, //Enable tips Tips: { enable: 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) { var html = "
" + node.name + "
"; var data = node.data; if(data.cap) { html += "Market Cap: " + data.cap; } if(data.sec) { html += "
SEC Coverage: " + data.sec; } tip.innerHTML = html; } }, //Add the name of the node in the correponding label //This method is called once, on label creation. onCreateLabel: function(domElement, node){ // if (node.data.$width > 10) { domElement.innerHTML = node.name; // } var style = domElement.style; style.display = ''; style.border = '1px solid transparent'; domElement.onmouseover = function() { style.border = '1px solid #9FD4FF'; }; domElement.onmouseout = function() { style.border = '1px solid transparent'; }; } }); tm.loadJSON(json); tm.refresh(); //end //add events to radio buttons var sq = $jit.id('r-sq'), st = $jit.id('r-st'), sd = $jit.id('r-sd'); var util = $jit.util; util.addEvent(sq, 'change', function() { if(!sq.checked) return; util.extend(tm, new $jit.Layouts.TM.Squarified); tm.refresh(); }); util.addEvent(st, 'change', function() { if(!st.checked) return; util.extend(tm, new $jit.Layouts.TM.Strip); tm.layout.orientation = "v"; tm.refresh(); }); util.addEvent(sd, 'change', function() { if(!sd.checked) return; util.extend(tm, new $jit.Layouts.TM.SliceAndDice); tm.layout.orientation = "v"; tm.refresh(); }); //add event to the back button var back = $jit.id('back'); $jit.util.addEvent(back, 'click', function() { tm.out(); }); }