15c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)/* 25c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * Copyright (C) 2011 Google Inc. All rights reserved. 35c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * 45c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * Redistribution and use in source and binary forms, with or without 55c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * modification, are permitted provided that the following conditions are 65c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * met: 75c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * 85c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * * Redistributions of source code must retain the above copyright 95c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * notice, this list of conditions and the following disclaimer. 105c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * * Redistributions in binary form must reproduce the above 115c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * copyright notice, this list of conditions and the following disclaimer 125c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * in the documentation and/or other materials provided with the 135c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * distribution. 145c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * * Neither the name of Google Inc. nor the names of its 155c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * contributors may be used to endorse or promote products derived from 165c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * this software without specific prior written permission. 175c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * 185c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS 195c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT 205c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR 215c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT 225c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, 235c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT 245c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, 255c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY 265c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT 275c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE 285c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 295c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) */ 305c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 315c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)// Size of border around nodes. 325c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)// We could support arbitrary borders using getComputedStyle(), but I am 335c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)// skeptical the extra complexity (and performance hit) is worth it. 345c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)var kBorderWidth = 1; 355c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 365c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)// Padding around contents. 375c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)// TODO: do this with a nested div to allow it to be CSS-styleable. 385c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)var kPadding = 4; 395c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 405c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)var focused = null; 415c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 425c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)// Callback for embedding page to update after a focus. 435c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)function handleFocus(tree) {} 445c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 455c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)function focus(tree) { 465c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) focused = tree; 475c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 485c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) // Hide all visible siblings of all our ancestors by lowering them. 495c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var level = 0; 505c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var root = tree; 515c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) while (root.parent) { 525c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) root = root.parent; 535c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) level += 1; 545c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) for (var i = 0, sibling; sibling = root.children[i]; ++i) { 555c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (sibling.dom) 565c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) sibling.dom.style.zIndex = 0; 575c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 585c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 595c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var width = root.dom.offsetWidth; 605c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var height = root.dom.offsetHeight; 615c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) // Unhide (raise) and maximize us and our ancestors. 625c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) for (var t = tree; t.parent; t = t.parent) { 635c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) // Shift off by border so we don't get nested borders. 645c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) // TODO: actually make nested borders work (need to adjust width/height). 655c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) position(t.dom, -kBorderWidth, -kBorderWidth, width, height); 665c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) t.dom.style.zIndex = 1; 675c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 685c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) // And layout into the topmost box. 695c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) layout(tree, level, width, height); 705c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) handleFocus(tree); 715c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)} 725c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 735c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)function makeDom(tree, level) { 745c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var dom = document.createElement('div'); 755c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) dom.style.zIndex = 1; 765c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) dom.className = 'webtreemap-node webtreemap-level' + Math.min(level, 4); 775c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 785c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) dom.onmousedown = function(e) { 795c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (e.button == 0) { 805c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (focused && tree == focused && focused.parent) { 815c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) focus(focused.parent); 825c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } else { 835c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) focus(tree); 845c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 855c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 865c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) e.stopPropagation(); 875c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return true; 885c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) }; 895c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 905c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var caption = document.createElement('div'); 915c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) caption.className = 'webtreemap-caption'; 925c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) caption.innerHTML = tree.name; 935c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) dom.appendChild(caption); 945c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 955c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) tree.dom = dom; 965c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return dom; 975c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)} 985c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 995c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)function position(dom, x, y, width, height) { 1005c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) // CSS width/height does not include border. 1015c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) width -= kBorderWidth*2; 1025c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) height -= kBorderWidth*2; 1035c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 1045c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) dom.style.left = x + 'px'; 1055c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) dom.style.top = y + 'px'; 1065c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) dom.style.width = Math.max(width, 0) + 'px'; 1075c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) dom.style.height = Math.max(height, 0) + 'px'; 1085c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)} 1095c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 1105c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)// Given a list of rectangles |nodes|, the 1-d space available 1115c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)// |space|, and a starting rectangle index |start|, compute an span of 1125c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)// rectangles that optimizes a pleasant aspect ratio. 1135c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)// 1145c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)// Returns [end, sum], where end is one past the last rectangle and sum is the 1155c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)// 2-d sum of the rectangles' areas. 1165c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)function selectSpan(nodes, space, start) { 1175c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) // Add rectangle one by one, stopping when aspect ratios begin to go 1185c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) // bad. Result is [start,end) covering the best run for this span. 1195c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) // http://scholar.google.com/scholar?cluster=5972512107845615474 1205c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var node = nodes[start]; 1215c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var rmin = node.data['$area']; // Smallest seen child so far. 1225c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var rmax = rmin; // Largest child. 1235c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var rsum = 0; // Sum of children in this span. 1245c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var last_score = 0; // Best score yet found. 1255c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) for (var end = start; node = nodes[end]; ++end) { 1265c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var size = node.data['$area']; 1275c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (size < rmin) 1285c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) rmin = size; 1295c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (size > rmax) 1305c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) rmax = size; 1315c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) rsum += size; 1325c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 1335c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) // This formula is from the paper, but you can easily prove to 1345c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) // yourself it's taking the larger of the x/y aspect ratio or the 1355c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) // y/x aspect ratio. The additional magic fudge constant of 5 1365c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) // makes us prefer wider rectangles to taller ones. 1375c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var score = Math.max(5*space*space*rmax / (rsum*rsum), 1385c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 1*rsum*rsum / (space*space*rmin)); 1395c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (last_score && score > last_score) { 1405c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) rsum -= size; // Undo size addition from just above. 1415c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) break; 1425c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 1435c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) last_score = score; 1445c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 1455c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return [end, rsum]; 1465c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)} 1475c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 1485c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)function layout(tree, level, width, height) { 1495c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (!('children' in tree)) 1505c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return; 1515c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 1525c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var total = tree.data['$area']; 1535c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 1545c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) // XXX why do I need an extra -1/-2 here for width/height to look right? 1555c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var x1 = 0, y1 = 0, x2 = width - 1, y2 = height - 2; 1565c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) x1 += kPadding; y1 += kPadding; 1575c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) x2 -= kPadding; y2 -= kPadding; 1585c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) y1 += 14; // XXX get first child height for caption spacing 1595c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 1605c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var pixels_to_units = Math.sqrt(total / ((x2 - x1) * (y2 - y1))); 1615c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 1625c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) for (var start = 0, child; child = tree.children[start]; ++start) { 1635c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (x2 - x1 < 60 || y2 - y1 < 40) { 1645c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (child.dom) { 1655c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) child.dom.style.zIndex = 0; 1665c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) position(child.dom, -2, -2, 0, 0); 1675c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 1685c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) continue; 1695c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 1705c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 1715c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) // In theory we can dynamically decide whether to split in x or y based 1725c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) // on aspect ratio. In practice, changing split direction with this 1735c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) // layout doesn't look very good. 1745c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) // var ysplit = (y2 - y1) > (x2 - x1); 1755c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var ysplit = true; 1765c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 1775c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var space; // Space available along layout axis. 1785c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (ysplit) 1795c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) space = (y2 - y1) * pixels_to_units; 1805c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) else 1815c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) space = (x2 - x1) * pixels_to_units; 1825c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 1835c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var span = selectSpan(tree.children, space, start); 1845c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var end = span[0], rsum = span[1]; 1855c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 1865c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) // Now that we've selected a span, lay out rectangles [start,end) in our 1875c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) // available space. 1885c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var x = x1, y = y1; 1895c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) for (var i = start; i < end; ++i) { 1905c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) child = tree.children[i]; 1915c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (!child.dom) { 1925c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) child.parent = tree; 1935c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) child.dom = makeDom(child, level + 1); 1945c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) tree.dom.appendChild(child.dom); 1955c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } else { 1965c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) child.dom.style.zIndex = 1; 1975c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 1985c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var size = child.data['$area']; 1995c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var frac = size / rsum; 2005c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (ysplit) { 2015c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) width = rsum / space; 2025c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) height = size / width; 2035c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } else { 2045c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) height = rsum / space; 2055c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) width = size / height; 2065c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 2075c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) width /= pixels_to_units; 2085c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) height /= pixels_to_units; 2095c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) width = Math.round(width); 2105c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) height = Math.round(height); 2115c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) position(child.dom, x, y, width, height); 2125c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if ('children' in child) { 2135c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) layout(child, level + 1, width, height); 2145c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 2155c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (ysplit) 2165c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) y += height; 2175c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) else 2185c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) x += width; 2195c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 2205c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 2215c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) // Shrink our available space based on the amount we used. 2225c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (ysplit) 2235c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) x1 += Math.round((rsum / space) / pixels_to_units); 2245c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) else 2255c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) y1 += Math.round((rsum / space) / pixels_to_units); 2265c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 2275c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) // end points one past where we ended, which is where we want to 2285c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) // begin the next iteration, but subtract one to balance the ++ in 2295c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) // the loop. 2305c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) start = end - 1; 2315c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 2325c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)} 2335c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 2345c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)function appendTreemap(dom, data) { 2355c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var style = getComputedStyle(dom, null); 2365c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var width = parseInt(style.width); 2375c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var height = parseInt(style.height); 2385c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (!data.dom) 2395c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) makeDom(data, 0); 2405c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) dom.appendChild(data.dom); 2415c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) position(data.dom, 0, 0, width, height); 2425c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) layout(data, 0, width, height); 2435c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)}