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":"$131,555,000","sec": "No","$area": 103938672,"$color":"#1C305C"}, "id": "Daehan Steel Co Ltd", "name": "Daehan Steel Co Ltd" }, { "data":{"cap":"$563,458,000","sec": "No","$area": 445174944,"$color":"#1E325B"}, "id": "Iljin Materials Co Ltd", "name": "Iljin Materials Co Ltd" }, { "data":{"cap":"$178,365,000","sec": "No","$area": 140922176,"$color":"#162A4D"}, "id": "Dong Yang Steel Pipe Co Ltd", "name": "Dong Yang Steel Pipe Co Ltd" }, { "data":{"cap":"$70,183,000","sec": "No","$area": 55449708,"$color":"#15323C"}, "id": "Mi Chang Oil Industrial Co", "name": "Mi Chang Oil Industrial Co" }, { "data":{"cap":"$85,707,000","sec": "No","$area": 67715184,"$color":"#182B57"}, "id": "Iljin Diamond Co Ltd", "name": "Iljin Diamond Co Ltd" }, { "data":{"cap":"$206,176,000","sec": "No","$area": 162894816,"$color":"#1A284E"}, "id": "Seah Special Steel Co Ltd", "name": "Seah Special Steel Co Ltd" }, { "data":{"cap":"$34,547,000","sec": "No","$area": 27294592,"$color":"#193250"}, "id": "Moonbae Steel Co Ltd", "name": "Moonbae Steel Co Ltd" }, { "data":{"cap":"$144,803,000","sec": "No","$area": 114405624,"$color":"#1D2A4A"}, "id": "Union Steel", "name": "Union Steel" }, { "data":{"cap":"","sec": "No","$area": 1,"$color":"#182F54"}, "id": "Gs Holdings-pref *", "name": "Gs Holdings-pref *" }, { "data":{"cap":"$51,442,000","sec": "No","$area": 40642972,"$color":"#162E61"}, "id": "Choil Aluminum Co Ltd", "name": "Choil Aluminum Co Ltd" }, { "data":{"cap":"","sec": "No","$area": 1,"$color":"#1C3035"}, "id": "Namsun Aluminium Co Ltd-pfd *", "name": "Namsun Aluminium Co Ltd-pfd *" }, { "data":{"cap":"$20,665,000","sec": "No","$area": 16326884,"$color":"#193257"}, "id": "Sk Holdings Co Ltd-pref", "name": "Sk Holdings Co Ltd-pref" }, { "data":{"cap":"$4,349,644,000","sec": "No","$area": 3436552448,"$color":"#152A4D"}, "id": "Gs Holdings", "name": "Gs Holdings" }, { "data":{"cap":"","sec": "No","$area": 1,"$color":"#1C3140"}, "id": "Dongbu Steel Co Ltd-pfd *", "name": "Dongbu Steel Co Ltd-pfd *" }, { "data":{"cap":"$57,989,000","sec": "No","$area": 45816136,"$color":"#182C33"}, "id": "Namsun Aluminum Co Ltd", "name": "Namsun Aluminum Co Ltd" }, { "data":{"cap":"$5,485,858,000","sec": "No","$area": 4334247936,"$color":"#182E3E"}, "id": "Sk Holdings Co Ltd", "name": "Sk Holdings Co Ltd" }, { "data":{"cap":"$40,808,000","sec": "No","$area": 32241440,"$color":"#1B2832"}, "id": "Histeel Co Ltd", "name": "Histeel Co Ltd" }, { "data":{"cap":"$251,603,000","sec": "No","$area": 198785600,"$color":"#1D3153"}, "id": "Dongbu Steel Co Ltd", "name": "Dongbu Steel Co Ltd" }, { "data":{"cap":"$47,527,000","sec": "No","$area": 37549672,"$color":"#1C3151"}, "id": "Ni Steel Co Ltd", "name": "Ni Steel Co Ltd" }, { "data":{"cap":"$19,881,000","sec": "No","$area": 15707148,"$color":"#1D2F32"}, "id": "Dongwon Co Ltd", "name": "Dongwon Co Ltd" }, { "data":{"cap":"$43,335,000","sec": "No","$area": 34238316,"$color":"#142C42"}, "id": "Dsr Wire Corp", "name": "Dsr Wire Corp" }, { "data":{"cap":"$51,181,000","sec": "No","$area": 40436900,"$color":"#1D2864"}, "id": "Kukdong Oil & Chemicals Co", "name": "Kukdong Oil & Chemicals Co" }, { "data":{"cap":"$31,921,000","sec": "No","$area": 25220172,"$color":"#172853"}, "id": "Daihan Eunpakgy Co Ltd", "name": "Daihan Eunpakgy Co Ltd" }, { "data":{"cap":"$421,577,000","sec": "No","$area": 333078368,"$color":"#1A295F"}, "id": "Seah Steel Corporation", "name": "Seah Steel Corporation" }, { "data":{"cap":"$64,102,000","sec": "No","$area": 50645728,"$color":"#19305D"}, "id": "Daeho Al Co Ltd", "name": "Daeho Al Co Ltd" }, { "data":{"cap":"","sec": "No","$area": 1,"$color":"#182E46"}, "id": "Dae Chang Indus Co-pfd *", "name": "Dae Chang Indus Co-pfd *" }, { "data":{"cap":"$40,299,000","sec": "No","$area": 31839382,"$color":"#152D41"}, "id": "Korea Steel Shapes Co Ltd", "name": "Korea Steel Shapes Co Ltd" }, { "data":{"cap":"$237,669,000","sec": "No","$area": 187776880,"$color":"#1D2B3E"}, "id": "Hankook Shell Oil Co Ltd", "name": "Hankook Shell Oil Co Ltd" }, { "data":{"cap":"$19,896,000","sec": "No","$area": 15718980,"$color":"#162A3D"}, "id": "Dong-a Steel Technology Co", "name": "Dong-a Steel Technology Co" }, { "data":{"cap":"$111,611,000","sec": "No","$area": 88181432,"$color":"#193243"}, "id": "Daechang Co Ltd", "name": "Daechang Co Ltd" }, { "data":{"cap":"$24,840,000","sec": "No","$area": 19625136,"$color":"#17284F"}, "id": "Sam-a Aluminum Co Ltd", "name": "Sam-a Aluminum Co Ltd" }, { "data":{"cap":"$73,190,000","sec": "No","$area": 57825480,"$color":"#142B46"}, "id": "Tcc Steel", "name": "Tcc Steel" }, { "data":{"cap":"$439,469,000","sec": "No","$area": 347213952,"$color":"#152E46"}, "id": "Seah Holdings Corp", "name": "Seah Holdings Corp" }, { "data":{"cap":"$60,055,000","sec": "No","$area": 47448336,"$color":"#182B3D"}, "id": "Young Heung Iron & Steel Co", "name": "Young Heung Iron & Steel Co" }, { "data":{"cap":"$169,103,000","sec": "No","$area": 133604440,"$color":"#182F58"}, "id": "Poongsan Holdings Corp", "name": "Poongsan Holdings Corp" }, { "data":{"cap":"$25,425,000","sec": "No","$area": 20087630,"$color":"#1E2C5B"}, "id": "Hanil Iron & Steel Co", "name": "Hanil Iron & Steel Co" }, { "data":{"cap":"$95,884,000","sec": "No","$area": 75755768,"$color":"#182948"}, "id": "Posco Coated & Color Steel C", "name": "Posco Coated & Color Steel C" }, { "data":{"cap":"$26,039,000","sec": "No","$area": 20572606,"$color":"#162853"}, "id": "Bae Myung Metal Co Ltd", "name": "Bae Myung Metal Co Ltd" }, { "data":{"cap":"$29,834,903,000","sec": "No","$area": 23571859456,"$color":"#1C2947"}, "id": "Posco", "name": "Posco" }, { "data":{"cap":"$107,836,000","sec": "No","$area": 85198528,"$color":"#1C2834"}, "id": "Kisco Holdings Co Ltd", "name": "Kisco Holdings Co Ltd" }, { "data":{"cap":"$144,112,000","sec": "No","$area": 113859352,"$color":"#1E2D36"}, "id": "Daesung Industrial Co Ltd", "name": "Daesung Industrial Co Ltd" }, { "data":{"cap":"$52,650,000","sec": "No","$area": 41597472,"$color":"#1E2B57"}, "id": "Hwangkum Steel & Technology", "name": "Hwangkum Steel & Technology" }, { "data":{"cap":"","sec": "No","$area": 1,"$color":"#1E2A64"}, "id": "S-oil Corporation-pfd *", "name": "S-oil Corporation-pfd *" }, { "data":{"cap":"$195,726,000","sec": "No","$area": 154638624,"$color":"#152E43"}, "id": "Cosmochemical Co Ltd", "name": "Cosmochemical Co Ltd" }, { "data":{"cap":"$12,240,000","sec": "No","$area": 9670177,"$color":"#1A2945"}, "id": "Shin Hwa Silup Co Ltd", "name": "Shin Hwa Silup Co Ltd" }, { "data":{"cap":"$40,196,000","sec": "No","$area": 31758082,"$color":"#182935"}, "id": "Chosun Steel Wire Co Ltd", "name": "Chosun Steel Wire Co Ltd" }, { "data":{"cap":"$35,870,000","sec": "No","$area": 28339796,"$color":"#193050"}, "id": "Bookook Steel Co Ltd", "name": "Bookook Steel Co Ltd" }, { "data":{"cap":"$11,244,686,000","sec": "No","$area": 8884163584,"$color":"#182D54"}, "id": "S-oil Corporation", "name": "S-oil Corporation" }, { "data":{"cap":"$111,465,000","sec": "No","$area": 88066240,"$color":"#14325B"}, "id": "Husteel Co Ltd", "name": "Husteel Co Ltd" }, { "data":{"cap":"$1,538,652,000","sec": "No","$area": 1215652864,"$color":"#1C3052"}, "id": "Seah Besteel Corp", "name": "Seah Besteel Corp" }, { "data":{"cap":"$185,577,000","sec": "No","$area": 146620352,"$color":"#163248"}, "id": "Kisco Corp", "name": "Kisco Corp" }, { "data":{"cap":"$27,797,000","sec": "No","$area": 21961768,"$color":"#1E2938"}, "id": "Han Kook Steel Co Ltd", "name": "Han Kook Steel Co Ltd" }, { "data":{"cap":"$2,747,887,000","sec": "No","$area": 2171041024,"$color":"#142B4D"}, "id": "Hyundai Hysco", "name": "Hyundai Hysco" }, { "data":{"cap":"$116,691,000","sec": "No","$area": 92194664,"$color":"#163164"}, "id": "Dongil Industries Co Ltd", "name": "Dongil Industries Co Ltd" }, { "data":{"cap":"$1,175,928,000","sec": "No","$area": 929073152,"$color":"#1D2932"}, "id": "Dongkuk Steel Mill Co Ltd", "name": "Dongkuk Steel Mill Co Ltd" }, { "data":{"cap":"$722,884,000","sec": "No","$area": 571133376,"$color":"#1B283C"}, "id": "Poongsan Corp", "name": "Poongsan Corp" }, { "data":{"cap":"$45,455,000","sec": "No","$area": 35913128,"$color":"#15295E"}, "id": "Lee Ku Industrial Co Ltd", "name": "Lee Ku Industrial Co Ltd" }, { "data":{"cap":"$5,744,303,000","sec": "No","$area": 4538439680,"$color":"#1C313A"}, "id": "Korea Zinc Co Ltd", "name": "Korea Zinc Co Ltd" }, { "data":{"cap":"","sec": "No","$area": 1,"$color":"#1E2F4A"}, "id": "Hyundai Bng Steel Co Ltd-pfd *", "name": "Hyundai Bng Steel Co Ltd-pfd *" }, { "data":{"cap":"$65,745,000","sec": "No","$area": 51943248,"$color":"#182A38"}, "id": "Korea Cast Iron Pipe Indus", "name": "Korea Cast Iron Pipe Indus" }, { "data":{"cap":"","sec": "No","$area": 1,"$color":"#1E2C39"}, "id": "Sk Innovation Co Ltd-pfd *", "name": "Sk Innovation Co Ltd-pfd *" }, { "data":{"cap":"$100,194,000","sec": "No","$area": 79160664,"$color":"#1A2845"}, "id": "Dcm Corp", "name": "Dcm Corp" }, { "data":{"cap":"$39,099,000","sec": "No","$area": 30891272,"$color":"#1C2F32"}, "id": "Daiyang Metal Co Ltd", "name": "Daiyang Metal Co Ltd" }, { "data":{"cap":"$176,798,000","sec": "No","$area": 139684272,"$color":"#162863"}, "id": "Hyundai Bng Steel Co Ltd", "name": "Hyundai Bng Steel Co Ltd" }, { "data":{"cap":"$1,844,615,000","sec": "No","$area": 1457387264,"$color":"#14324D"}, "id": "Young Poong Corporation", "name": "Young Poong Corporation" }, { "data":{"cap":"$12,768,932,000","sec": "No","$area": 10088434688,"$color":"#192C37"}, "id": "Sk Innovation Co Ltd", "name": "Sk Innovation Co Ltd" }, { "data":{"cap":"$82,243,000","sec": "No","$area": 64978404,"$color":"#1C2A4D"}, "id": "Seowon Co Ltd", "name": "Seowon Co Ltd" }, { "data":{"cap":"$582,000","sec": "No","$area": 459881,"$color":"#1C324B"}, "id": "Dongyang Steel Pipe Co-pfd", "name": "Dongyang Steel Pipe Co-pfd" }, { "data":{"cap":"$7,780,177,000","sec": "No","$area": 6146936320,"$color":"#19285D"}, "id": "Hyundai Steel Co", "name": "Hyundai Steel Co" }, { "data":{"cap":"$34,392,000","sec": "No","$area": 27172350,"$color":"#1A3053"}, "id": "Cs Holdings Co Ltd", "name": "Cs Holdings Co Ltd" } ] }; //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(); }); }