From 75cda74ebc44e08427b25416c16d79f4470b08f8 Mon Sep 17 00:00:00 2001 From: philogb Date: Thu, 25 Nov 2010 12:28:16 -0800 Subject: [PATCH] Some tweaks to the Icicle visualization to work with CSS3 animations and to animate first rendering. --- Source/Graph/Graph.Label.js | 75 +- Source/Visualizations/Icicle.js | 87 +- Source/Visualizations/Treemap.js | 62 - Templates/Icicle/test3.html | 3 + Tests/Icicle/test3.js | 3442 ++++++++++++++++++++++++++++++ Tests/Treemap/test7.js | 26 +- tests.py | 16 + 7 files changed, 3581 insertions(+), 130 deletions(-) create mode 100644 Templates/Icicle/test3.html create mode 100644 Tests/Icicle/test3.js diff --git a/Source/Graph/Graph.Label.js b/Source/Graph/Graph.Label.js index e50dd1c..3766d84 100644 --- a/Source/Graph/Graph.Label.js +++ b/Source/Graph/Graph.Label.js @@ -326,27 +326,68 @@ Graph.Label.HTML = new Class({ prefixesStyles: ['-webkit-', '-moz-', '-o-', ''], prepareForAnimation: function(node, modes, opt) { - if (!this.viz.config.Label.useCSS3) return; - + if (!this.config.Label.useCSS3) return; var css3Props = this.css3Props, canvas = this.viz.canvas, + size = canvas.getSize(), nodeProps = modes['node-property'] || [], - label = this.plotLabel(null, node, opt), - style = label.style, - pos = node.getPos('end').getc(true); - - //set label transition properties. - $.each(this.prefixesStyles, function(p) { - style[p + 'transition-property'] = css3Props.join(); - style[p + 'transition-duration'] = opt.duration + 'ms'; - }); - //generally labels will move - style.top = pos.y + canvas.height /2; - style.left = pos.x - canvas.width /2; + pos = node.getPos('end').getc(true), + posStart = node.getPos('start').getc(true), + startWidth = node.getData('width', 'start'), + startHeight = node.getData('height', 'start'), + endWidth = node.getData('width', 'end'), + endHeight = node.getData('height', 'end'), + alpha = node.getData('alpha'), + alphaEnd = node.getData('alpha', 'end'); + + var label = this.getOrCreateLabel(node), + style = label.style, + pref = this.prefixes; + + //animating alpha + if (alpha != alphaEnd) { + style.visibility = 'visible'; + style.opacity = String(alpha); + //set properties + $.each(this.prefixesStyles, function(p) { + style[p + 'transition-property'] = 'opacity'; + //TODO(nico) add transition + style[p + 'transition-duration'] = opt.duration + 'ms'; + style[p + 'transition-delay'] = '200ms'; + style[p + 'transition-timing-function'] = 'ease-in-out'; + }); + style.opacity = String(alphaEnd); + var wte = function() { + $.each(pref, function(p) { + label.removeEventListener(p + 'TransitionEnd', wte); + style.visibility = 'hidden'; + }); + }; + if (alphaEnd == 0 && alpha == 1) { + $.each(pref, function(p) { + label.addEventListener(p + 'TransitionEnd', wte, false); + }); + } + //changing the position or dimensions... + } else if (pos.x != posStart.x || pos.y != posStart.y || startWidth != endWidth || startHeight != endHeight) { + //set label transition properties. + $.each(this.prefixesStyles, function(p) { + style[p + 'transition-property'] = css3Props.join(); + style[p + 'transition-duration'] = opt.duration + 'ms'; + style[p + 'transition-delay'] = '200ms'; + //TODO(nico) add transition + style[p + 'transition-timing-function'] = 'ease-in-out'; + }); + + style.top = ((pos.y + size.height /2) >> 0) + 'px'; + style.left = ((pos.x + size.width /2) >> 0) + 'px'; + style.width = (endWidth >> 0) + 'px'; + style.height = (endHeight >> 0) + 'px'; + } opt.onBeforeAnimateLabel(label, node); }, - - /* + + /* Method: getOrCreateLabel Calls _getLabel_, if not label is found it creates a new one. @@ -376,7 +417,7 @@ Graph.Label.HTML = new Class({ tag.id = id; tag.className = 'node'; tag.style.position = 'absolute'; - this.config.onCreateLabel(tag, node); + this.viz.config.onCreateLabel(tag, node); container.appendChild(tag); this.labels[node.id] = tag; } diff --git a/Source/Visualizations/Icicle.js b/Source/Visualizations/Icicle.js index 1f67471..c3b18f2 100644 --- a/Source/Visualizations/Icicle.js +++ b/Source/Visualizations/Icicle.js @@ -126,13 +126,27 @@ $jit.Icicle = new Class({ Computes positions and plots the tree. */ refresh: function(){ - var labelType = this.config.Label.type; - if(labelType != 'Native') { - var that = this; - this.graph.eachNode(function(n) { that.labels.hideLabel(n, false); }); + if(this.busy) return; + this.busy = true; + var that = this; + if(this.config.animate) { + this.compute('end'); + this.fx.animate($.merge(this.config, { + modes: ['linear', 'node-property:width:height'], + onComplete: function() { + that.busy = false; + } + })); + } else { + var labelType = this.config.Label.type; + if(labelType != 'Native') { + var that = this; + this.graph.eachNode(function(n) { that.labels.hideLabel(n, false); }); + } + this.busy = false; + this.compute(); + this.plot(); } - this.compute(); - this.plot(); }, /* @@ -170,11 +184,9 @@ $jit.Icicle = new Class({ that.compute(); if(config.animate) { - that.graph.nodeList.setDataset(['current', 'end'], { - 'alpha': [1, 0] //fade nodes - }); + that.graph.nodeList.setData('alpha', 0, 'end'); - Graph.Util.eachSubgraph(node, function(n) { + node.eachSubgraph(function(n) { n.setData('alpha', 1, 'end'); }, "ignore"); @@ -270,10 +282,20 @@ $jit.Icicle = new Class({ //animate the parent subtree that.clickedNode = clickedNode; //change nodes alpha - graph.nodeList.setDataset(['current', 'end'], { - 'alpha': [0, 1] - }); - GUtil.eachSubgraph(previousClickedNode, function(node) { + if (clickedNode) { + clickedNode.eachSubgraph(function(n) { + n.setDataset(['current', 'end'], { + 'alpha': [0, 1] + }); + }, "ignore"); + } else { + graph.eachNode(function(n) { + n.setDataset(['current', 'end'], { + 'alpha': [0, 1] + }); + }, "ignore"); + } + previousClickedNode.eachSubgraph(function(node) { node.setData('alpha', 1); }, "ignore"); that.fx.animate({ @@ -525,6 +547,7 @@ $jit.Icicle.Label.HTML = new Class( { initialize: function(viz){ this.viz = viz; + this.config = viz.config; }, /* @@ -539,19 +562,29 @@ $jit.Icicle.Label.HTML = new Class( { controller - A configuration/controller object passed to the visualization. */ placeLabel: function(tag, node, controller){ - var pos = node.pos.getc(true), canvas = this.viz.canvas; - var radius = canvas.getSize(); - var labelPos = { - x: Math.round(pos.x + radius.width / 2), - y: Math.round(pos.y + radius.height / 2) - }; - - var style = tag.style; - style.left = labelPos.x + 'px'; - style.top = labelPos.y + 'px'; - style.display = ''; - - controller.onPlaceLabel(tag, node); + if (!this.config.Label.useCSS3) { + tag.style.display = ''; + var pos = node.pos.getc(true), + canvas = this.viz.canvas, + ox = canvas.translateOffsetX, + oy = canvas.translateOffsetY, + sx = canvas.scaleOffsetX, + sy = canvas.scaleOffsetY, + radius = canvas.getSize(); + var labelPos = { + x: Math.round(pos.x * sx + ox + radius.width / 2), + y: Math.round(pos.y * sy + oy + radius.height / 2) + }; + + var style = tag.style; + style.left = labelPos.x + 'px'; + style.top = labelPos.y + 'px'; + style.width = node.getData('width') * sx + 'px'; + style.height = node.getData('height') * sy + 'px'; + style.zIndex = node._depth * 100; + style.display = ''; + controller.onPlaceLabel(tag, node); + } } }); diff --git a/Source/Visualizations/Treemap.js b/Source/Visualizations/Treemap.js index 3ffbfef..c145d98 100644 --- a/Source/Visualizations/Treemap.js +++ b/Source/Visualizations/Treemap.js @@ -653,68 +653,6 @@ TM.Label.HTML = new Class( { this.leaf = viz.leaf; }, - prepareForAnimation: function(node, modes, opt) { - if (!this.config.Label.useCSS3) return; - var css3Props = this.css3Props, - canvas = this.viz.canvas, - size = canvas.getSize(), - nodeProps = modes['node-property'] || [], - pos = node.getPos('end').getc(true), - posStart = node.getPos('start').getc(true), - startWidth = node.getData('width', 'start'), - startHeight = node.getData('height', 'start'), - endWidth = node.getData('width', 'end'), - endHeight = node.getData('height', 'end'), - alpha = node.getData('alpha'), - alphaEnd = node.getData('alpha', 'end'); - - var label = this.getOrCreateLabel(node), - style = label.style, - pref = this.prefixes; - - //animating alpha - if (alpha != alphaEnd) { - style.visibility = 'visible'; - style.opacity = String(alpha); - //set properties - $.each(this.prefixesStyles, function(p) { - style[p + 'transition-property'] = 'opacity'; - //TODO(nico) add transition - style[p + 'transition-duration'] = opt.duration + 'ms'; - style[p + 'transition-delay'] = '200ms'; - style[p + 'transition-timing-function'] = 'ease-in-out'; - }); - style.opacity = String(alphaEnd); - var wte = function() { - $.each(pref, function(p) { - label.removeEventListener(p + 'TransitionEnd', wte); - style.visibility = 'hidden'; - }); - }; - if (alphaEnd == 0 && alpha == 1) { - $.each(pref, function(p) { - label.addEventListener(p + 'TransitionEnd', wte, false); - }); - } - //changing the position or dimensions... - } else if (pos.x != posStart.x || pos.y != posStart.y || startWidth != endWidth || startHeight != endHeight) { - //set label transition properties. - $.each(this.prefixesStyles, function(p) { - style[p + 'transition-property'] = css3Props.join(); - style[p + 'transition-duration'] = opt.duration + 'ms'; - style[p + 'transition-delay'] = '200ms'; - //TODO(nico) add transition - style[p + 'transition-timing-function'] = 'ease-in-out'; - }); - - style.top = ((pos.y + size.height /2) >> 0) + 'px'; - style.left = ((pos.x + size.width /2) >> 0) + 'px'; - style.width = (endWidth >> 0) + 'px'; - style.height = (endHeight >> 0) + 'px'; - } - // opt.onBeforeAnimateLabel(label, node); - }, - /* placeLabel diff --git a/Templates/Icicle/test3.html b/Templates/Icicle/test3.html new file mode 100644 index 0000000..e5b2654 --- /dev/null +++ b/Templates/Icicle/test3.html @@ -0,0 +1,3 @@ +$def with (model) + +
diff --git a/Tests/Icicle/test3.js b/Tests/Icicle/test3.js new file mode 100644 index 0000000..c96976d --- /dev/null +++ b/Tests/Icicle/test3.js @@ -0,0 +1,3442 @@ +var icicle; + +function init(){ + //left panel controls + controls(); + + // init data + var json = { + "id": "node02", + "name": "0.2", + "data": { + "$area": 8, + "$dim": 8, + "$color": "#001eff" + }, + "children": [ + { + "id": "node13", + "name": "1.3", + "data": { + "$area": 10, + "$dim": 10, + "$color": "#9554ff" + }, + "children": [ + { + "id": "node24", + "name": "2.4", + "data": { + "$area": 3, + "$dim": 3, + "$color": "#ee6aff" + }, + "children": [ + { + "id": "node35", + "name": "3.5", + "data": { + "$area": 10, + "$dim": 10, + "$color": "#ff0ca2" + }, + "children": [ + { + "id": "node46", + "name": "4.6", + "data": { + "$area": 8, + "$dim": 8, + "$color": "#ff5c6f" + } + + }, { + "id": "node47", + "name": "4.7", + "data": { + "$area": 1, + "$dim": 1, + "$color": "#ff7b8a" + } + + }, { + "id": "node48", + "name": "4.8", + "data": { + "$area": 1, + "$dim": 1, + "$color": "#ff7b8a" + } + + }, { + "id": "node49", + "name": "4.9", + "data": { + "$area": 2, + "$dim": 2, + "$color": "#ff7787" + } + + }, { + "id": "node410", + "name": "4.10", + "data": { + "$area": 10, + "$dim": 10, + "$color": "#ff5468" + } + + }, { + "id": "node411", + "name": "4.11", + "data": { + "$area": 7, + "$dim": 7, + "$color": "#ff6173" + } + + } + ] + }, { + "id": "node312", + "name": "3.12", + "data": { + "$area": 1, + "$dim": 1, + "$color": "#ff74ca" + }, + "children": [ + { + "id": "node413", + "name": "4.13", + "data": { + "$area": 10, + "$dim": 10, + "$color": "#ff4056" + } + + }, { + "id": "node414", + "name": "4.14", + "data": { + "$area": 2, + "$dim": 2, + "$color": "#ff7383" + } + + }, { + "id": "node415", + "name": "4.15", + "data": { + "$area": 8, + "$dim": 8, + "$color": "#ff4d61" + } + + } + ] + } + ] + }, { + "id": "node216", + "name": "2.16", + "data": { + "$area": 8, + "$dim": 8, + "$color": "#ea47ff" + }, + "children": [ + { + "id": "node317", + "name": "3.17", + "data": { + "$area": 9, + "$dim": 9, + "$color": "#ff55be" + }, + "children": [ + { + "id": "node418", + "name": "4.18", + "data": { + "$area": 10, + "$dim": 10, + "$color": "#ff3048" + } + }, { + "id": "node419", + "name": "4.19", + "data": { + "$area": 6, + "$dim": 6, + "$color": "#ff5064" + } + } + ] + }, { + "id": "node320", + "name": "3.20", + "data": { + "$area": 8, + "$dim": 8, + "$color": "#ff5ac0" + }, + "children": [ + { + "id": "node421", + "name": "4.21", + "data": { + "$area": 4, + "$dim": 4, + "$color": "#ff697b" + } + }, { + "id": "node422", + "name": "4.22", + "data": { + "$area": 9, + "$dim": 9, + "$color": "#ff4e62" + } + }, { + "id": "node423", + "name": "4.23", + "data": { + "$area": 3, + "$dim": 3, + "$color": "#ff6f80" + } + }, { + "id": "node424", + "name": "4.24", + "data": { + "$area": 7, + "$dim": 7, + "$color": "#ff596c" + } + } + ] + }, { + "id": "node325", + "name": "3.25", + "data": { + "$area": 7, + "$dim": 7, + "$color": "#ff5ec1" + }, + "children": [ + { + "id": "node426", + "name": "4.26", + "data": { + "$area": 9, + "$dim": 9, + "$color": "#ff203a" + } + }, { + "id": "node427", + "name": "4.27", + "data": { + "$area": 3, + "$dim": 3, + "$color": "#ff6072" + } + } + ] + }, { + "id": "node328", + "name": "3.28", + "data": { + "$area": 3, + "$dim": 3, + "$color": "#ff71c9" + }, + "children": [ + { + "id": "node429", + "name": "4.29", + "data": { + "$area": 6, + "$dim": 6, + "$color": "#ff4d61" + } + }, { + "id": "node430", + "name": "4.30", + "data": { + "$area": 2, + "$dim": 2, + "$color": "#ff6f7f" + } + }, { + "id": "node431", + "name": "4.31", + "data": { + "$area": 7, + "$dim": 7, + "$color": "#ff445a" + } + } + ] + } + ] + }, { + "id": "node232", + "name": "2.32", + "data": { + "$area": 7, + "$dim": 7, + "$color": "#ea4eff" + }, + "children": [ + { + "id": "node333", + "name": "3.33", + "data": { + "$area": 2, + "$dim": 2, + "$color": "#ff78cb" + }, + "children": [ + { + "id": "node434", + "name": "4.34", + "data": { + "$area": 9, + "$dim": 9, + "$color": "#ff0d29" + } + }, { + "id": "node435", + "name": "4.35", + "data": { + "$area": 1, + "$dim": 1, + "$color": "#ff7383" + } + } + ] + }, { + "id": "node336", + "name": "3.36", + "data": { + "$area": 9, + "$dim": 9, + "$color": "#ff5cc0" + }, + "children": [ + { + "id": "node437", + "name": "4.37", + "data": { + "$area": 2, + "$dim": 2, + "$color": "#ff7686" + } + }, { + "id": "node438", + "name": "4.38", + "data": { + "$area": 8, + "$dim": 8, + "$color": "#ff5b6e" + } + }, { + "id": "node439", + "name": "4.39", + "data": { + "$area": 9, + "$dim": 9, + "$color": "#ff576a" + } + }, { + "id": "node440", + "name": "4.40", + "data": { + "$area": 3, + "$dim": 3, + "$color": "#ff7282" + } + }, { + "id": "node441", + "name": "4.41", + "data": { + "$area": 6, + "$dim": 6, + "$color": "#ff6476" + } + } + ] + }, { + "id": "node342", + "name": "3.42", + "data": { + "$area": 6, + "$dim": 6, + "$color": "#ff68c5" + }, + "children": [ + { + "id": "node443", + "name": "4.43", + "data": { + "$area": 1, + "$dim": 1, + "$color": "#ff7b8a" + } + }, { + "id": "node444", + "name": "4.44", + "data": { + "$area": 1, + "$dim": 1, + "$color": "#ff7b8a" + } + }, { + "id": "node445", + "name": "4.45", + "data": { + "$area": 2, + "$dim": 2, + "$color": "#ff7686" + } + }, { + "id": "node446", + "name": "4.46", + "data": { + "$area": 8, + "$dim": 8, + "$color": "#ff586c" + } + }, { + "id": "node447", + "name": "4.47", + "data": { + "$area": 5, + "$dim": 5, + "$color": "#ff6779" + } + }, { + "id": "node448", + "name": "4.48", + "data": { + "$area": 9, + "$dim": 9, + "$color": "#ff5367" + } + } + ] + }, { + "id": "node349", + "name": "3.49", + "data": { + "$area": 7, + "$dim": 7, + "$color": "#ff64c3" + }, + "children": [ + { + "id": "node450", + "name": "4.50", + "data": { + "$area": 9, + "$dim": 9, + "$color": "#ff4056" + } + }, { + "id": "node451", + "name": "4.51", + "data": { + "$area": 4, + "$dim": 4, + "$color": "#ff6375" + } + }, { + "id": "node452", + "name": "4.52", + "data": { + "$area": 5, + "$dim": 5, + "$color": "#ff5c6f" + } + } + ] + }, { + "id": "node353", + "name": "3.53", + "data": { + "$area": 4, + "$dim": 4, + "$color": "#ff70c8" + }, + "children": [ + { + "id": "node454", + "name": "4.54", + "data": { + "$area": 3, + "$dim": 3, + "$color": "#ff7484" + } + }, { + "id": "node455", + "name": "4.55", + "data": { + "$area": 5, + "$dim": 5, + "$color": "#ff6d7e" + } + }, { + "id": "node456", + "name": "4.56", + "data": { + "$area": 7, + "$dim": 7, + "$color": "#ff6577" + } + }, { + "id": "node457", + "name": "4.57", + "data": { + "$area": 6, + "$dim": 6, + "$color": "#ff697b" + } + }, { + "id": "node458", + "name": "4.58", + "data": { + "$area": 5, + "$dim": 5, + "$color": "#ff6d7e" + } + }, { + "id": "node459", + "name": "4.59", + "data": { + "$area": 8, + "$dim": 8, + "$color": "#ff6274" + } + } + ] + }, { + "id": "node360", + "name": "3.60", + "data": { + "$area": 4, + "$dim": 4, + "$color": "#ff70c8" + }, + "children": [ + { + "id": "node461", + "name": "4.61", + "data": { + "$area": 1, + "$dim": 1, + "$color": "#ff7b8a" + } + }, { + "id": "node462", + "name": "4.62", + "data": { + "$area": 1, + "$dim": 1, + "$color": "#ff7b8a" + } + }, { + "id": "node463", + "name": "4.63", + "data": { + "$area": 2, + "$dim": 2, + "$color": "#ff7686" + } + }, { + "id": "node464", + "name": "4.64", + "data": { + "$area": 3, + "$dim": 3, + "$color": "#ff7181" + } + }, { + "id": "node465", + "name": "4.65", + "data": { + "$area": 10, + "$dim": 10, + "$color": "#ff4e63" + } + }, { + "id": "node466", + "name": "4.66", + "data": { + "$area": 9, + "$dim": 9, + "$color": "#ff5367" + } + } + ] + } + ] + } + ] + }, { + "id": "node167", + "name": "1.67", + "data": { + "$area": 3, + "$dim": 3, + "$color": "#a872ff" + }, + "children": [ + { + "id": "node268", + "name": "2.68", + "data": { + "$area": 3, + "$dim": 3, + "$color": "#ef72ff" + }, + "children": [ + { + "id": "node369", + "name": "3.69", + "data": { + "$area": 3, + "$dim": 3, + "$color": "#ff6ec7" + }, + "children": [ + { + "id": "node470", + "name": "4.70", + "data": { + "$area": 6, + "$dim": 6, + "$color": "#ff596d" + } + }, { + "id": "node471", + "name": "4.71", + "data": { + "$area": 2, + "$dim": 2, + "$color": "#ff7383" + } + }, { + "id": "node472", + "name": "4.72", + "data": { + "$area": 2, + "$dim": 2, + "$color": "#ff7383" + } + }, { + "id": "node473", + "name": "4.73", + "data": { + "$area": 4, + "$dim": 4, + "$color": "#ff6678" + } + }, { + "id": "node474", + "name": "4.74", + "data": { + "$area": 6, + "$dim": 6, + "$color": "#ff596d" + } + } + ] + }, { + "id": "node375", + "name": "3.75", + "data": { + "$area": 10, + "$dim": 10, + "$color": "#ff46b8" + }, + "children": [ + { + "id": "node476", + "name": "4.76", + "data": { + "$area": 7, + "$dim": 7, + "$color": "#ff6274" + } + }, { + "id": "node477", + "name": "4.77", + "data": { + "$area": 10, + "$dim": 10, + "$color": "#ff5569" + } + }, { + "id": "node478", + "name": "4.78", + "data": { + "$area": 4, + "$dim": 4, + "$color": "#ff6f7f" + } + }, { + "id": "node479", + "name": "4.79", + "data": { + "$area": 3, + "$dim": 3, + "$color": "#ff7383" + } + }, { + "id": "node480", + "name": "4.80", + "data": { + "$area": 6, + "$dim": 6, + "$color": "#ff6678" + } + } + ] + }, { + "id": "node381", + "name": "3.81", + "data": { + "$area": 6, + "$dim": 6, + "$color": "#ff5dc1" + }, + "children": [ + { + "id": "node482", + "name": "4.82", + "data": { + "$area": 7, + "$dim": 7, + "$color": "#ff6375" + } + }, { + "id": "node483", + "name": "4.83", + "data": { + "$area": 6, + "$dim": 6, + "$color": "#ff6779" + } + }, { + "id": "node484", + "name": "4.84", + "data": { + "$area": 9, + "$dim": 9, + "$color": "#ff5a6e" + } + }, { + "id": "node485", + "name": "4.85", + "data": { + "$area": 9, + "$dim": 9, + "$color": "#ff5a6e" + } + } + ] + }, { + "id": "node386", + "name": "3.86", + "data": { + "$area": 1, + "$dim": 1, + "$color": "#ff7acc" + }, + "children": [ + { + "id": "node487", + "name": "4.87", + "data": { + "$area": 7, + "$dim": 7, + "$color": "#ff6375" + } + }, { + "id": "node488", + "name": "4.88", + "data": { + "$area": 5, + "$dim": 5, + "$color": "#ff6b7c" + } + }, { + "id": "node489", + "name": "4.89", + "data": { + "$area": 10, + "$dim": 10, + "$color": "#ff566a" + } + }, { + "id": "node490", + "name": "4.90", + "data": { + "$area": 9, + "$dim": 9, + "$color": "#ff5a6e" + } + } + ] + }, { + "id": "node391", + "name": "3.91", + "data": { + "$area": 2, + "$dim": 2, + "$color": "#ff74ca" + }, + "children": [ + { + "id": "node492", + "name": "4.92", + "data": { + "$area": 1, + "$dim": 1, + "$color": "#ff7989" + } + }, { + "id": "node493", + "name": "4.93", + "data": { + "$area": 6, + "$dim": 6, + "$color": "#ff5b6e" + } + }, { + "id": "node494", + "name": "4.94", + "data": { + "$area": 1, + "$dim": 1, + "$color": "#ff7989" + } + }, { + "id": "node495", + "name": "4.95", + "data": { + "$area": 9, + "$dim": 9, + "$color": "#ff495e" + } + }, { + "id": "node496", + "name": "4.96", + "data": { + "$area": 4, + "$dim": 4, + "$color": "#ff6779" + } + } + ] + } + ] + }, { + "id": "node297", + "name": "2.97", + "data": { + "$area": 3, + "$dim": 3, + "$color": "#ef72ff" + }, + "children": [ + { + "id": "node398", + "name": "3.98", + "data": { + "$area": 10, + "$dim": 10, + "$color": "#ff40b6" + }, + "children": [ + { + "id": "node499", + "name": "4.99", + "data": { + "$area": 5, + "$dim": 5, + "$color": "#ff5c6f" + } + }, { + "id": "node4100", + "name": "4.100", + "data": { + "$area": 1, + "$dim": 1, + "$color": "#ff7888" + } + }, { + "id": "node4101", + "name": "4.101", + "data": { + "$area": 6, + "$dim": 6, + "$color": "#ff5569" + } + }, { + "id": "node4102", + "name": "4.102", + "data": { + "$area": 6, + "$dim": 6, + "$color": "#ff5569" + } + } + ] + }, { + "id": "node3103", + "name": "3.103", + "data": { + "$area": 7, + "$dim": 7, + "$color": "#ff53bd" + }, + "children": [ + { + "id": "node4104", + "name": "4.104", + "data": { + "$area": 5, + "$dim": 5, + "$color": "#ff6476" + } + }, { + "id": "node4105", + "name": "4.105", + "data": { + "$area": 4, + "$dim": 4, + "$color": "#ff697b" + } + }, { + "id": "node4106", + "name": "4.106", + "data": { + "$area": 5, + "$dim": 5, + "$color": "#ff6476" + } + }, { + "id": "node4107", + "name": "4.107", + "data": { + "$area": 5, + "$dim": 5, + "$color": "#ff6476" + } + }, { + "id": "node4108", + "name": "4.108", + "data": { + "$area": 4, + "$dim": 4, + "$color": "#ff697b" + } + } + ] + }, { + "id": "node3109", + "name": "3.109", + "data": { + "$area": 3, + "$dim": 3, + "$color": "#ff6cc7" + }, + "children": [ + { + "id": "node4110", + "name": "4.110", + "data": { + "$area": 3, + "$dim": 3, + "$color": "#ff7585" + } + }, { + "id": "node4111", + "name": "4.111", + "data": { + "$area": 7, + "$dim": 7, + "$color": "#ff6778" + } + }, { + "id": "node4112", + "name": "4.112", + "data": { + "$area": 6, + "$dim": 6, + "$color": "#ff6a7c" + } + }, { + "id": "node4113", + "name": "4.113", + "data": { + "$area": 9, + "$dim": 9, + "$color": "#ff6072" + } + }, { + "id": "node4114", + "name": "4.114", + "data": { + "$area": 7, + "$dim": 7, + "$color": "#ff6778" + } + }, { + "id": "node4115", + "name": "4.115", + "data": { + "$area": 4, + "$dim": 4, + "$color": "#ff7182" + } + } + ] + } + ] + }, { + "id": "node2116", + "name": "2.116", + "data": { + "$area": 7, + "$dim": 7, + "$color": "#ec60ff" + }, + "children": [ + { + "id": "node3117", + "name": "3.117", + "data": { + "$area": 3, + "$dim": 3, + "$color": "#ff62c3" + }, + "children": [ + { + "id": "node4118", + "name": "4.118", + "data": { + "$area": 8, + "$dim": 8, + "$color": "#ff6577" + } + }, { + "id": "node4119", + "name": "4.119", + "data": { + "$area": 3, + "$dim": 3, + "$color": "#ff7686" + } + }, { + "id": "node4120", + "name": "4.120", + "data": { + "$area": 9, + "$dim": 9, + "$color": "#ff6274" + } + }, { + "id": "node4121", + "name": "4.121", + "data": { + "$area": 8, + "$dim": 8, + "$color": "#ff6577" + } + }, { + "id": "node4122", + "name": "4.122", + "data": { + "$area": 2, + "$dim": 2, + "$color": "#ff7989" + } + }, { + "id": "node4123", + "name": "4.123", + "data": { + "$area": 9, + "$dim": 9, + "$color": "#ff6274" + } + } + ] + }, { + "id": "node3124", + "name": "3.124", + "data": { + "$area": 4, + "$dim": 4, + "$color": "#ff58bf" + }, + "children": [ + { + "id": "node4125", + "name": "4.125", + "data": { + "$area": 10, + "$dim": 10, + "$color": "#ff4056" + } + }, { + "id": "node4126", + "name": "4.126", + "data": { + "$area": 6, + "$dim": 6, + "$color": "#ff596d" + } + }, { + "id": "node4127", + "name": "4.127", + "data": { + "$area": 3, + "$dim": 3, + "$color": "#ff6c7d" + } + }, { + "id": "node4128", + "name": "4.128", + "data": { + "$area": 1, + "$dim": 1, + "$color": "#ff7989" + } + } + ] + }, { + "id": "node3129", + "name": "3.129", + "data": { + "$area": 6, + "$dim": 6, + "$color": "#ff45b8" + }, + "children": [ + { + "id": "node4130", + "name": "4.130", + "data": { + "$area": 8, + "$dim": 8, + "$color": "#ff5367" + } + }, { + "id": "node4131", + "name": "4.131", + "data": { + "$area": 5, + "$dim": 5, + "$color": "#ff6476" + } + }, { + "id": "node4132", + "name": "4.132", + "data": { + "$area": 2, + "$dim": 2, + "$color": "#ff7485" + } + }, { + "id": "node4133", + "name": "4.133", + "data": { + "$area": 2, + "$dim": 2, + "$color": "#ff7485" + } + }, { + "id": "node4134", + "name": "4.134", + "data": { + "$area": 3, + "$dim": 3, + "$color": "#ff6f80" + } + }, { + "id": "node4135", + "name": "4.135", + "data": { + "$area": 3, + "$dim": 3, + "$color": "#ff6f80" + } + } + ] + } + ] + }, { + "id": "node2136", + "name": "2.136", + "data": { + "$area": 2, + "$dim": 2, + "$color": "#ef76ff" + }, + "children": [ + { + "id": "node3137", + "name": "3.137", + "data": { + "$area": 4, + "$dim": 4, + "$color": "#ff67c5" + }, + "children": [ + { + "id": "node4138", + "name": "4.138", + "data": { + "$area": 3, + "$dim": 3, + "$color": "#ff5569" + } + }, { + "id": "node4139", + "name": "4.139", + "data": { + "$area": 4, + "$dim": 4, + "$color": "#ff475c" + } + }, { + "id": "node4140", + "name": "4.140", + "data": { + "$area": 2, + "$dim": 2, + "$color": "#ff6375" + } + } + ] + }, { + "id": "node3141", + "name": "3.141", + "data": { + "$area": 6, + "$dim": 6, + "$color": "#ff5bc0" + }, + "children": [ + { + "id": "node4142", + "name": "4.142", + "data": { + "$area": 8, + "$dim": 8, + "$color": "#ff6072" + } + }, { + "id": "node4143", + "name": "4.143", + "data": { + "$area": 4, + "$dim": 4, + "$color": "#ff7080" + } + }, { + "id": "node4144", + "name": "4.144", + "data": { + "$area": 1, + "$dim": 1, + "$color": "#ff7c8b" + } + }, { + "id": "node4145", + "name": "4.145", + "data": { + "$area": 10, + "$dim": 10, + "$color": "#ff586b" + } + }, { + "id": "node4146", + "name": "4.146", + "data": { + "$area": 9, + "$dim": 9, + "$color": "#ff5c6f" + } + } + ] + }, { + "id": "node3147", + "name": "3.147", + "data": { + "$area": 1, + "$dim": 1, + "$color": "#ff79cc" + }, + "children": [ + { + "id": "node4148", + "name": "4.148", + "data": { + "$area": 4, + "$dim": 4, + "$color": "#ff687a" + } + }, { + "id": "node4149", + "name": "4.149", + "data": { + "$area": 7, + "$dim": 7, + "$color": "#ff576b" + } + }, { + "id": "node4150", + "name": "4.150", + "data": { + "$area": 5, + "$dim": 5, + "$color": "#ff6375" + } + }, { + "id": "node4151", + "name": "4.151", + "data": { + "$area": 3, + "$dim": 3, + "$color": "#ff6e7f" + } + }, { + "id": "node4152", + "name": "4.152", + "data": { + "$area": 3, + "$dim": 3, + "$color": "#ff6e7f" + } + } + ] + }, { + "id": "node3153", + "name": "3.153", + "data": { + "$area": 1, + "$dim": 1, + "$color": "#ff79cc" + }, + "children": [ + { + "id": "node4154", + "name": "4.154", + "data": { + "$area": 2, + "$dim": 2, + "$color": "#ff6f7f" + } + }, { + "id": "node4155", + "name": "4.155", + "data": { + "$area": 4, + "$dim": 4, + "$color": "#ff5e70" + } + }, { + "id": "node4156", + "name": "4.156", + "data": { + "$area": 1, + "$dim": 1, + "$color": "#ff7787" + } + }, { + "id": "node4157", + "name": "4.157", + "data": { + "$area": 8, + "$dim": 8, + "$color": "#ff3b52" + } + } + ] + }, { + "id": "node3158", + "name": "3.158", + "data": { + "$area": 9, + "$dim": 9, + "$color": "#ff49b9" + }, + "children": [ + { + "id": "node4159", + "name": "4.159", + "data": { + "$area": 1, + "$dim": 1, + "$color": "#ff7b8a" + } + }, { + "id": "node4160", + "name": "4.160", + "data": { + "$area": 2, + "$dim": 2, + "$color": "#ff7686" + } + }, { + "id": "node4161", + "name": "4.161", + "data": { + "$area": 4, + "$dim": 4, + "$color": "#ff6d7e" + } + }, { + "id": "node4162", + "name": "4.162", + "data": { + "$area": 2, + "$dim": 2, + "$color": "#ff7686" + } + }, { + "id": "node4163", + "name": "4.163", + "data": { + "$area": 9, + "$dim": 9, + "$color": "#ff576a" + } + }, { + "id": "node4164", + "name": "4.164", + "data": { + "$area": 10, + "$dim": 10, + "$color": "#ff5266" + } + } + ] + } + ] + }, { + "id": "node2165", + "name": "2.165", + "data": { + "$area": 3, + "$dim": 3, + "$color": "#ef72ff" + }, + "children": [ + { + "id": "node3166", + "name": "3.166", + "data": { + "$area": 2, + "$dim": 2, + "$color": "#ff73c9" + }, + "children": [ + { + "id": "node4167", + "name": "4.167", + "data": { + "$area": 10, + "$dim": 10, + "$color": "#ff243e" + } + }, { + "id": "node4168", + "name": "4.168", + "data": { + "$area": 4, + "$dim": 4, + "$color": "#ff5b6e" + } + } + ] + }, { + "id": "node3169", + "name": "3.169", + "data": { + "$area": 4, + "$dim": 4, + "$color": "#ff66c4" + }, + "children": [ + { + "id": "node4170", + "name": "4.170", + "data": { + "$area": 4, + "$dim": 4, + "$color": "#ff6d7e" + } + }, { + "id": "node4171", + "name": "4.171", + "data": { + "$area": 7, + "$dim": 7, + "$color": "#ff6072" + } + }, { + "id": "node4172", + "name": "4.172", + "data": { + "$area": 7, + "$dim": 7, + "$color": "#ff6072" + } + }, { + "id": "node4173", + "name": "4.173", + "data": { + "$area": 10, + "$dim": 10, + "$color": "#ff5266" + } + } + ] + }, { + "id": "node3174", + "name": "3.174", + "data": { + "$area": 6, + "$dim": 6, + "$color": "#ff59bf" + }, + "children": [ + { + "id": "node4175", + "name": "4.175", + "data": { + "$area": 1, + "$dim": 1, + "$color": "#ff6a7c" + } + }, { + "id": "node4176", + "name": "4.176", + "data": { + "$area": 5, + "$dim": 5, + "$color": "#ff1531" + } + } + ] + }, { + "id": "node3177", + "name": "3.177", + "data": { + "$area": 2, + "$dim": 2, + "$color": "#ff73c9" + }, + "children": [ + { + "id": "node4178", + "name": "4.178", + "data": { + "$area": 10, + "$dim": 10, + "$color": "#ff2b43" + } + }, { + "id": "node4179", + "name": "4.179", + "data": { + "$area": 1, + "$dim": 1, + "$color": "#ff7787" + } + }, { + "id": "node4180", + "name": "4.180", + "data": { + "$area": 4, + "$dim": 4, + "$color": "#ff5e70" + } + } + ] + }, { + "id": "node3181", + "name": "3.181", + "data": { + "$area": 3, + "$dim": 3, + "$color": "#ff6cc7" + }, + "children": [ + { + "id": "node4182", + "name": "4.182", + "data": { + "$area": 3, + "$dim": 3, + "$color": "#ff6072" + } + }, { + "id": "node4183", + "name": "4.183", + "data": { + "$area": 9, + "$dim": 9, + "$color": "#ff203a" + } + } + ] + }, { + "id": "node3184", + "name": "3.184", + "data": { + "$area": 3, + "$dim": 3, + "$color": "#ff6cc7" + }, + "children": [ + { + "id": "node4185", + "name": "4.185", + "data": { + "$area": 1, + "$dim": 1, + "$color": "#ff7080" + } + }, { + "id": "node4186", + "name": "4.186", + "data": { + "$area": 2, + "$dim": 2, + "$color": "#ff6072" + } + }, { + "id": "node4187", + "name": "4.187", + "data": { + "$area": 5, + "$dim": 5, + "$color": "#ff3048" + } + } + ] + } + ] + }, { + "id": "node2188", + "name": "2.188", + "data": { + "$area": 10, + "$dim": 10, + "$color": "#eb52ff" + }, + "children": [ + { + "id": "node3189", + "name": "3.189", + "data": { + "$area": 9, + "$dim": 9, + "$color": "#ff17a6" + }, + "children": [ + { + "id": "node4190", + "name": "4.190", + "data": { + "$area": 8, + "$dim": 8, + "$color": "#ff5e70" + } + }, { + "id": "node4191", + "name": "4.191", + "data": { + "$area": 2, + "$dim": 2, + "$color": "#ff7787" + } + }, { + "id": "node4192", + "name": "4.192", + "data": { + "$area": 8, + "$dim": 8, + "$color": "#ff5e70" + } + }, { + "id": "node4193", + "name": "4.193", + "data": { + "$area": 4, + "$dim": 4, + "$color": "#ff6f7f" + } + }, { + "id": "node4194", + "name": "4.194", + "data": { + "$area": 8, + "$dim": 8, + "$color": "#ff5e70" + } + } + ] + }, { + "id": "node3195", + "name": "3.195", + "data": { + "$area": 2, + "$dim": 2, + "$color": "#ff68c5" + }, + "children": [ + { + "id": "node4196", + "name": "4.196", + "data": { + "$area": 4, + "$dim": 4, + "$color": "#ff5e70" + } + }, { + "id": "node4197", + "name": "4.197", + "data": { + "$area": 1, + "$dim": 1, + "$color": "#ff7787" + } + }, { + "id": "node4198", + "name": "4.198", + "data": { + "$area": 2, + "$dim": 2, + "$color": "#ff6f7f" + } + }, { + "id": "node4199", + "name": "4.199", + "data": { + "$area": 8, + "$dim": 8, + "$color": "#ff3b52" + } + } + ] + } + ] + } + ] + }, { + "id": "node1200", + "name": "1.200", + "data": { + "$area": 7, + "$dim": 7, + "$color": "#9d61ff" + }, + "children": [ + { + "id": "node2201", + "name": "2.201", + "data": { + "$area": 4, + "$dim": 4, + "$color": "#ed66ff" + }, + "children": [ + { + "id": "node3202", + "name": "3.202", + "data": { + "$area": 6, + "$dim": 6, + "$color": "#ff66c4" + }, + "children": [ + { + "id": "node4203", + "name": "4.203", + "data": { + "$area": 5, + "$dim": 5, + "$color": "#ff4a5f" + } + }, { + "id": "node4204", + "name": "4.204", + "data": { + "$area": 7, + "$dim": 7, + "$color": "#ff354d" + } + } + ] + }, { + "id": "node3205", + "name": "3.205", + "data": { + "$area": 9, + "$dim": 9, + "$color": "#ff59bf" + }, + "children": [ + { + "id": "node4206", + "name": "4.206", + "data": { + "$area": 9, + "$dim": 9, + "$color": "#ff6678" + } + }, { + "id": "node4207", + "name": "4.207", + "data": { + "$area": 10, + "$dim": 10, + "$color": "#ff6375" + } + }, { + "id": "node4208", + "name": "4.208", + "data": { + "$area": 10, + "$dim": 10, + "$color": "#ff6375" + } + }, { + "id": "node4209", + "name": "4.209", + "data": { + "$area": 6, + "$dim": 6, + "$color": "#ff6f7f" + } + }, { + "id": "node4210", + "name": "4.210", + "data": { + "$area": 10, + "$dim": 10, + "$color": "#ff6375" + } + } + ] + }, { + "id": "node3211", + "name": "3.211", + "data": { + "$area": 1, + "$dim": 1, + "$color": "#ff7bcc" + }, + "children": [ + { + "id": "node4212", + "name": "4.212", + "data": { + "$area": 7, + "$dim": 7, + "$color": "#ff6476" + } + }, { + "id": "node4213", + "name": "4.213", + "data": { + "$area": 1, + "$dim": 1, + "$color": "#ff7c8b" + } + }, { + "id": "node4214", + "name": "4.214", + "data": { + "$area": 8, + "$dim": 8, + "$color": "#ff6173" + } + }, { + "id": "node4215", + "name": "4.215", + "data": { + "$area": 1, + "$dim": 1, + "$color": "#ff7c8b" + } + }, { + "id": "node4216", + "name": "4.216", + "data": { + "$area": 9, + "$dim": 9, + "$color": "#ff5d70" + } + }, { + "id": "node4217", + "name": "4.217", + "data": { + "$area": 7, + "$dim": 7, + "$color": "#ff6476" + } + } + ] + }, { + "id": "node3218", + "name": "3.218", + "data": { + "$area": 4, + "$dim": 4, + "$color": "#ff6fc8" + }, + "children": [ + { + "id": "node4219", + "name": "4.219", + "data": { + "$area": 4, + "$dim": 4, + "$color": "#ff4d61" + } + }, { + "id": "node4220", + "name": "4.220", + "data": { + "$area": 6, + "$dim": 6, + "$color": "#ff334b" + } + } + ] + }, { + "id": "node3221", + "name": "3.221", + "data": { + "$area": 9, + "$dim": 9, + "$color": "#ff59bf" + }, + "children": [ + { + "id": "node4222", + "name": "4.222", + "data": { + "$area": 7, + "$dim": 7, + "$color": "#ff485d" + } + }, { + "id": "node4223", + "name": "4.223", + "data": { + "$area": 9, + "$dim": 9, + "$color": "#ff384f" + } + } + ] + }, { + "id": "node3224", + "name": "3.224", + "data": { + "$area": 1, + "$dim": 1, + "$color": "#ff7bcc" + }, + "children": [ + { + "id": "node4225", + "name": "4.225", + "data": { + "$area": 9, + "$dim": 9, + "$color": "#ff384f" + } + }, { + "id": "node4226", + "name": "4.226", + "data": { + "$area": 7, + "$dim": 7, + "$color": "#ff485d" + } + } + ] + } + ] + }, { + "id": "node2227", + "name": "2.227", + "data": { + "$area": 5, + "$dim": 5, + "$color": "#ec60ff" + }, + "children": [ + { + "id": "node3228", + "name": "3.228", + "data": { + "$area": 1, + "$dim": 1, + "$color": "#ff7ccd" + }, + "children": [ + { + "id": "node4229", + "name": "4.229", + "data": { + "$area": 1, + "$dim": 1, + "$color": "#ff7484" + } + }, { + "id": "node4230", + "name": "4.230", + "data": { + "$area": 5, + "$dim": 5, + "$color": "#ff465b" + } + }, { + "id": "node4231", + "name": "4.231", + "data": { + "$area": 2, + "$dim": 2, + "$color": "#ff687a" + } + }, { + "id": "node4232", + "name": "4.232", + "data": { + "$area": 3, + "$dim": 3, + "$color": "#ff5d70" + } + } + ] + }, { + "id": "node3233", + "name": "3.233", + "data": { + "$area": 10, + "$dim": 10, + "$color": "#ff5dc1" + }, + "children": [ + { + "id": "node4234", + "name": "4.234", + "data": { + "$area": 8, + "$dim": 8, + "$color": "#ff576a" + } + }, { + "id": "node4235", + "name": "4.235", + "data": { + "$area": 9, + "$dim": 9, + "$color": "#ff5266" + } + }, { + "id": "node4236", + "name": "4.236", + "data": { + "$area": 3, + "$dim": 3, + "$color": "#ff7081" + } + }, { + "id": "node4237", + "name": "4.237", + "data": { + "$area": 5, + "$dim": 5, + "$color": "#ff6678" + } + } + ] + }, { + "id": "node3238", + "name": "3.238", + "data": { + "$area": 8, + "$dim": 8, + "$color": "#ff64c4" + }, + "children": [ + { + "id": "node4239", + "name": "4.239", + "data": { + "$area": 8, + "$dim": 8, + "$color": "#ff5367" + } + }, { + "id": "node4240", + "name": "4.240", + "data": { + "$area": 7, + "$dim": 7, + "$color": "#ff596c" + } + }, { + "id": "node4241", + "name": "4.241", + "data": { + "$area": 8, + "$dim": 8, + "$color": "#ff5367" + } + } + ] + }, { + "id": "node3242", + "name": "3.242", + "data": { + "$area": 10, + "$dim": 10, + "$color": "#ff5dc1" + }, + "children": [ + { + "id": "node4243", + "name": "4.243", + "data": { + "$area": 6, + "$dim": 6, + "$color": "#ff5569" + } + }, { + "id": "node4244", + "name": "4.244", + "data": { + "$area": 2, + "$dim": 2, + "$color": "#ff7182" + } + }, { + "id": "node4245", + "name": "4.245", + "data": { + "$area": 2, + "$dim": 2, + "$color": "#ff7182" + } + }, { + "id": "node4246", + "name": "4.246", + "data": { + "$area": 8, + "$dim": 8, + "$color": "#ff475c" + } + } + ] + }, { + "id": "node3247", + "name": "3.247", + "data": { + "$area": 8, + "$dim": 8, + "$color": "#ff64c4" + }, + "children": [ + { + "id": "node4248", + "name": "4.248", + "data": { + "$area": 4, + "$dim": 4, + "$color": "#ff6a7c" + } + }, { + "id": "node4249", + "name": "4.249", + "data": { + "$area": 10, + "$dim": 10, + "$color": "#ff4a5f" + } + }, { + "id": "node4250", + "name": "4.250", + "data": { + "$area": 10, + "$dim": 10, + "$color": "#ff4a5f" + } + } + ] + } + ] + }, { + "id": "node2251", + "name": "2.251", + "data": { + "$area": 1, + "$dim": 1, + "$color": "#ef79ff" + }, + "children": [ + { + "id": "node3252", + "name": "3.252", + "data": { + "$area": 7, + "$dim": 7, + "$color": "#ff26ac" + }, + "children": [ + { + "id": "node4253", + "name": "4.253", + "data": { + "$area": 9, + "$dim": 9, + "$color": "#ff586b" + } + }, { + "id": "node4254", + "name": "4.254", + "data": { + "$area": 1, + "$dim": 1, + "$color": "#ff7b8a" + } + }, { + "id": "node4255", + "name": "4.255", + "data": { + "$area": 8, + "$dim": 8, + "$color": "#ff5c6f" + } + }, { + "id": "node4256", + "name": "4.256", + "data": { + "$area": 3, + "$dim": 3, + "$color": "#ff7283" + } + }, { + "id": "node4257", + "name": "4.257", + "data": { + "$area": 6, + "$dim": 6, + "$color": "#ff6577" + } + }, { + "id": "node4258", + "name": "4.258", + "data": { + "$area": 2, + "$dim": 2, + "$color": "#ff7787" + } + } + ] + }, { + "id": "node3259", + "name": "3.259", + "data": { + "$area": 3, + "$dim": 3, + "$color": "#ff59bf" + }, + "children": [ + { + "id": "node4260", + "name": "4.260", + "data": { + "$area": 5, + "$dim": 5, + "$color": "#ff6a7c" + } + }, { + "id": "node4261", + "name": "4.261", + "data": { + "$area": 2, + "$dim": 2, + "$color": "#ff7787" + } + }, { + "id": "node4262", + "name": "4.262", + "data": { + "$area": 9, + "$dim": 9, + "$color": "#ff596d" + } + }, { + "id": "node4263", + "name": "4.263", + "data": { + "$area": 3, + "$dim": 3, + "$color": "#ff7383" + } + }, { + "id": "node4264", + "name": "4.264", + "data": { + "$area": 9, + "$dim": 9, + "$color": "#ff596d" + } + }, { + "id": "node4265", + "name": "4.265", + "data": { + "$area": 2, + "$dim": 2, + "$color": "#ff7787" + } + } + ] + } + ] + }, { + "id": "node2266", + "name": "2.266", + "data": { + "$area": 1, + "$dim": 1, + "$color": "#ef79ff" + }, + "children": [ + { + "id": "node3267", + "name": "3.267", + "data": { + "$area": 10, + "$dim": 10, + "$color": "#ff55be" + }, + "children": [ + { + "id": "node4268", + "name": "4.268", + "data": { + "$area": 5, + "$dim": 5, + "$color": "#ff6072" + } + }, { + "id": "node4269", + "name": "4.269", + "data": { + "$area": 3, + "$dim": 3, + "$color": "#ff6c7d" + } + }, { + "id": "node4270", + "name": "4.270", + "data": { + "$area": 1, + "$dim": 1, + "$color": "#ff7989" + } + }, { + "id": "node4271", + "name": "4.271", + "data": { + "$area": 6, + "$dim": 6, + "$color": "#ff596d" + } + }, { + "id": "node4272", + "name": "4.272", + "data": { + "$area": 1, + "$dim": 1, + "$color": "#ff7989" + } + }, { + "id": "node4273", + "name": "4.273", + "data": { + "$area": 4, + "$dim": 4, + "$color": "#ff6678" + } + } + ] + }, { + "id": "node3274", + "name": "3.274", + "data": { + "$area": 4, + "$dim": 4, + "$color": "#ff6fc8" + }, + "children": [ + { + "id": "node4275", + "name": "4.275", + "data": { + "$area": 9, + "$dim": 9, + "$color": "#ff4e62" + } + }, { + "id": "node4276", + "name": "4.276", + "data": { + "$area": 5, + "$dim": 5, + "$color": "#ff6476" + } + }, { + "id": "node4277", + "name": "4.277", + "data": { + "$area": 1, + "$dim": 1, + "$color": "#ff7a89" + } + }, { + "id": "node4278", + "name": "4.278", + "data": { + "$area": 8, + "$dim": 8, + "$color": "#ff5367" + } + } + ] + }, { + "id": "node3279", + "name": "3.279", + "data": { + "$area": 10, + "$dim": 10, + "$color": "#ff55be" + }, + "children": [ + { + "id": "node4280", + "name": "4.280", + "data": { + "$area": 1, + "$dim": 1, + "$color": "#ff7887" + } + }, { + "id": "node4281", + "name": "4.281", + "data": { + "$area": 6, + "$dim": 6, + "$color": "#ff5064" + } + }, { + "id": "node4282", + "name": "4.282", + "data": { + "$area": 9, + "$dim": 9, + "$color": "#ff384f" + } + } + ] + }, { + "id": "node3283", + "name": "3.283", + "data": { + "$area": 6, + "$dim": 6, + "$color": "#ff66c4" + }, + "children": [ + { + "id": "node4284", + "name": "4.284", + "data": { + "$area": 3, + "$dim": 3, + "$color": "#ff6f80" + } + }, { + "id": "node4285", + "name": "4.285", + "data": { + "$area": 8, + "$dim": 8, + "$color": "#ff5367" + } + }, { + "id": "node4286", + "name": "4.286", + "data": { + "$area": 7, + "$dim": 7, + "$color": "#ff596c" + } + }, { + "id": "node4287", + "name": "4.287", + "data": { + "$area": 5, + "$dim": 5, + "$color": "#ff6476" + } + } + ] + } + ] + }, { + "id": "node2288", + "name": "2.288", + "data": { + "$area": 9, + "$dim": 9, + "$color": "#e946ff" + }, + "children": [ + { + "id": "node3289", + "name": "3.289", + "data": { + "$area": 10, + "$dim": 10, + "$color": "#ff40b6" + }, + "children": [ + { + "id": "node4290", + "name": "4.290", + "data": { + "$area": 10, + "$dim": 10, + "$color": "#ff3048" + } + }, { + "id": "node4291", + "name": "4.291", + "data": { + "$area": 6, + "$dim": 6, + "$color": "#ff5064" + } + } + ] + }, { + "id": "node3292", + "name": "3.292", + "data": { + "$area": 1, + "$dim": 1, + "$color": "#ff79cc" + }, + "children": [ + { + "id": "node4293", + "name": "4.293", + "data": { + "$area": 9, + "$dim": 9, + "$color": "#ff5064" + } + }, { + "id": "node4294", + "name": "4.294", + "data": { + "$area": 7, + "$dim": 7, + "$color": "#ff5a6e" + } + }, { + "id": "node4295", + "name": "4.295", + "data": { + "$area": 1, + "$dim": 1, + "$color": "#ff7a8a" + } + }, { + "id": "node4296", + "name": "4.296", + "data": { + "$area": 7, + "$dim": 7, + "$color": "#ff5a6e" + } + } + ] + }, { + "id": "node3297", + "name": "3.297", + "data": { + "$area": 5, + "$dim": 5, + "$color": "#ff60c2" + }, + "children": [ + { + "id": "node4298", + "name": "4.298", + "data": { + "$area": 1, + "$dim": 1, + "$color": "#ff7484" + } + }, { + "id": "node4299", + "name": "4.299", + "data": { + "$area": 8, + "$dim": 8, + "$color": "#ff233c" + } + }, { + "id": "node4300", + "name": "4.300", + "data": { + "$area": 2, + "$dim": 2, + "$color": "#ff687a" + } + } + ] + }, { + "id": "node3301", + "name": "3.301", + "data": { + "$area": 4, + "$dim": 4, + "$color": "#ff66c4" + }, + "children": [ + { + "id": "node4302", + "name": "4.302", + "data": { + "$area": 9, + "$dim": 9, + "$color": "#ff6476" + } + }, { + "id": "node4303", + "name": "4.303", + "data": { + "$area": 2, + "$dim": 2, + "$color": "#ff7989" + } + }, { + "id": "node4304", + "name": "4.304", + "data": { + "$area": 5, + "$dim": 5, + "$color": "#ff7081" + } + }, { + "id": "node4305", + "name": "4.305", + "data": { + "$area": 10, + "$dim": 10, + "$color": "#ff6174" + } + }, { + "id": "node4306", + "name": "4.306", + "data": { + "$area": 8, + "$dim": 8, + "$color": "#ff6779" + } + }, { + "id": "node4307", + "name": "4.307", + "data": { + "$area": 8, + "$dim": 8, + "$color": "#ff6779" + } + } + ] + } + ] + } + ] + }, { + "id": "node1308", + "name": "1.308", + "data": { + "$area": 9, + "$dim": 9, + "$color": "#9858ff" + }, + "children": [ + { + "id": "node2309", + "name": "2.309", + "data": { + "$area": 2, + "$dim": 2, + "$color": "#ee71ff" + }, + "children": [ + { + "id": "node3310", + "name": "3.310", + "data": { + "$area": 1, + "$dim": 1, + "$color": "#ff7ccd" + }, + "children": [ + { + "id": "node4311", + "name": "4.311", + "data": { + "$area": 3, + "$dim": 3, + "$color": "#ff495e" + } + }, { + "id": "node4312", + "name": "4.312", + "data": { + "$area": 4, + "$dim": 4, + "$color": "#ff374e" + } + } + ] + }, { + "id": "node3313", + "name": "3.313", + "data": { + "$area": 9, + "$dim": 9, + "$color": "#ff5dc1" + }, + "children": [ + { + "id": "node4314", + "name": "4.314", + "data": { + "$area": 3, + "$dim": 3, + "$color": "#ff6476" + } + }, { + "id": "node4315", + "name": "4.315", + "data": { + "$area": 3, + "$dim": 3, + "$color": "#ff6476" + } + }, { + "id": "node4316", + "name": "4.316", + "data": { + "$area": 8, + "$dim": 8, + "$color": "#ff374e" + } + } + ] + }, { + "id": "node3317", + "name": "3.317", + "data": { + "$area": 8, + "$dim": 8, + "$color": "#ff61c2" + }, + "children": [ + { + "id": "node4318", + "name": "4.318", + "data": { + "$area": 8, + "$dim": 8, + "$color": "#ff6577" + } + }, { + "id": "node4319", + "name": "4.319", + "data": { + "$area": 9, + "$dim": 9, + "$color": "#ff6174" + } + }, { + "id": "node4320", + "name": "4.320", + "data": { + "$area": 10, + "$dim": 10, + "$color": "#ff5e71" + } + }, { + "id": "node4321", + "name": "4.321", + "data": { + "$area": 3, + "$dim": 3, + "$color": "#ff7585" + } + }, { + "id": "node4322", + "name": "4.322", + "data": { + "$area": 5, + "$dim": 5, + "$color": "#ff6f80" + } + }, { + "id": "node4323", + "name": "4.323", + "data": { + "$area": 3, + "$dim": 3, + "$color": "#ff7585" + } + } + ] + }, { + "id": "node3324", + "name": "3.324", + "data": { + "$area": 8, + "$dim": 8, + "$color": "#ff61c2" + }, + "children": [ + { + "id": "node4325", + "name": "4.325", + "data": { + "$area": 6, + "$dim": 6, + "$color": "#ff2b43" + } + }, { + "id": "node4326", + "name": "4.326", + "data": { + "$area": 3, + "$dim": 3, + "$color": "#ff5569" + } + } + ] + }, { + "id": "node3327", + "name": "3.327", + "data": { + "$area": 7, + "$dim": 7, + "$color": "#ff64c4" + }, + "children": [ + { + "id": "node4328", + "name": "4.328", + "data": { + "$area": 5, + "$dim": 5, + "$color": "#ff7182" + } + }, { + "id": "node4329", + "name": "4.329", + "data": { + "$area": 9, + "$dim": 9, + "$color": "#ff6678" + } + }, { + "id": "node4330", + "name": "4.330", + "data": { + "$area": 9, + "$dim": 9, + "$color": "#ff6678" + } + }, { + "id": "node4331", + "name": "4.331", + "data": { + "$area": 8, + "$dim": 8, + "$color": "#ff697a" + } + }, { + "id": "node4332", + "name": "4.332", + "data": { + "$area": 4, + "$dim": 4, + "$color": "#ff7484" + } + }, { + "id": "node4333", + "name": "4.333", + "data": { + "$area": 10, + "$dim": 10, + "$color": "#ff6375" + } + } + ] + } + ] + }, { + "id": "node2334", + "name": "2.334", + "data": { + "$area": 7, + "$dim": 7, + "$color": "#ea4bff" + }, + "children": [ + { + "id": "node3335", + "name": "3.335", + "data": { + "$area": 2, + "$dim": 2, + "$color": "#ff73c9" + }, + "children": [ + { + "id": "node4336", + "name": "4.336", + "data": { + "$area": 8, + "$dim": 8, + "$color": "#ff4359" + } + }, { + "id": "node4337", + "name": "4.337", + "data": { + "$area": 1, + "$dim": 1, + "$color": "#ff7888" + } + }, { + "id": "node4338", + "name": "4.338", + "data": { + "$area": 2, + "$dim": 2, + "$color": "#ff7181" + } + }, { + "id": "node4339", + "name": "4.339", + "data": { + "$area": 4, + "$dim": 4, + "$color": "#ff6274" + } + }, { + "id": "node4340", + "name": "4.340", + "data": { + "$area": 2, + "$dim": 2, + "$color": "#ff7181" + } + } + ] + }, { + "id": "node3341", + "name": "3.341", + "data": { + "$area": 7, + "$dim": 7, + "$color": "#ff55be" + }, + "children": [ + { + "id": "node4342", + "name": "4.342", + "data": { + "$area": 3, + "$dim": 3, + "$color": "#ff7686" + } + }, { + "id": "node4343", + "name": "4.343", + "data": { + "$area": 10, + "$dim": 10, + "$color": "#ff6174" + } + }, { + "id": "node4344", + "name": "4.344", + "data": { + "$area": 9, + "$dim": 9, + "$color": "#ff6476" + } + }, { + "id": "node4345", + "name": "4.345", + "data": { + "$area": 10, + "$dim": 10, + "$color": "#ff6174" + } + }, { + "id": "node4346", + "name": "4.346", + "data": { + "$area": 3, + "$dim": 3, + "$color": "#ff7686" + } + }, { + "id": "node4347", + "name": "4.347", + "data": { + "$area": 7, + "$dim": 7, + "$color": "#ff6a7c" + } + } + ] + }, { + "id": "node3348", + "name": "3.348", + "data": { + "$area": 5, + "$dim": 5, + "$color": "#ff61c2" + }, + "children": [ + { + "id": "node4349", + "name": "4.349", + "data": { + "$area": 3, + "$dim": 3, + "$color": "#ff7080" + } + }, { + "id": "node4350", + "name": "4.350", + "data": { + "$area": 8, + "$dim": 8, + "$color": "#ff5569" + } + }, { + "id": "node4351", + "name": "4.351", + "data": { + "$area": 2, + "$dim": 2, + "$color": "#ff7585" + } + }, { + "id": "node4352", + "name": "4.352", + "data": { + "$area": 1, + "$dim": 1, + "$color": "#ff7a8a" + } + }, { + "id": "node4353", + "name": "4.353", + "data": { + "$area": 10, + "$dim": 10, + "$color": "#ff4a5f" + } + } + ] + }, { + "id": "node3354", + "name": "3.354", + "data": { + "$area": 7, + "$dim": 7, + "$color": "#ff55be" + }, + "children": [ + { + "id": "node4355", + "name": "4.355", + "data": { + "$area": 2, + "$dim": 2, + "$color": "#ff6375" + } + }, { + "id": "node4356", + "name": "4.356", + "data": { + "$area": 7, + "$dim": 7, + "$color": "#ff1c37" + } + } + ] + } + ] + }, { + "id": "node2357", + "name": "2.357", + "data": { + "$area": 8, + "$dim": 8, + "$color": "#e943ff" + }, + "children": [ + { + "id": "node3358", + "name": "3.358", + "data": { + "$area": 5, + "$dim": 5, + "$color": "#ff6cc7" + }, + "children": [ + { + "id": "node4359", + "name": "4.359", + "data": { + "$area": 5, + "$dim": 5, + "$color": "#ff3950" + } + }, { + "id": "node4360", + "name": "4.360", + "data": { + "$area": 2, + "$dim": 2, + "$color": "#ff6375" + } + }, { + "id": "node4361", + "name": "4.361", + "data": { + "$area": 2, + "$dim": 2, + "$color": "#ff6375" + } + } + ] + }, { + "id": "node3362", + "name": "3.362", + "data": { + "$area": 3, + "$dim": 3, + "$color": "#ff74ca" + }, + "children": [ + { + "id": "node4363", + "name": "4.363", + "data": { + "$area": 10, + "$dim": 10, + "$color": "#ff3950" + } + }, { + "id": "node4364", + "name": "4.364", + "data": { + "$area": 2, + "$dim": 2, + "$color": "#ff7182" + } + }, { + "id": "node4365", + "name": "4.365", + "data": { + "$area": 6, + "$dim": 6, + "$color": "#ff5569" + } + } + ] + }, { + "id": "node3366", + "name": "3.366", + "data": { + "$area": 8, + "$dim": 8, + "$color": "#ff61c2" + }, + "children": [ + { + "id": "node4367", + "name": "4.367", + "data": { + "$area": 8, + "$dim": 8, + "$color": "#ff4359" + } + }, { + "id": "node4368", + "name": "4.368", + "data": { + "$area": 3, + "$dim": 3, + "$color": "#ff697b" + } + }, { + "id": "node4369", + "name": "4.369", + "data": { + "$area": 6, + "$dim": 6, + "$color": "#ff5267" + } + } + ] + }, { + "id": "node3370", + "name": "3.370", + "data": { + "$area": 3, + "$dim": 3, + "$color": "#ff74ca" + }, + "children": [ + { + "id": "node4371", + "name": "4.371", + "data": { + "$area": 5, + "$dim": 5, + "$color": "#ff4056" + } + }, { + "id": "node4372", + "name": "4.372", + "data": { + "$area": 5, + "$dim": 5, + "$color": "#ff4056" + } + } + ] + }, { + "id": "node3373", + "name": "3.373", + "data": { + "$area": 6, + "$dim": 6, + "$color": "#ff68c5" + }, + "children": [ + { + "id": "node4374", + "name": "4.374", + "data": { + "$area": 9, + "$dim": 9, + "$color": "#ff4359" + } + }, { + "id": "node4375", + "name": "4.375", + "data": { + "$area": 1, + "$dim": 1, + "$color": "#ff7988" + } + }, { + "id": "node4376", + "name": "4.376", + "data": { + "$area": 9, + "$dim": 9, + "$color": "#ff4359" + } + } + ] + }, { + "id": "node3377", + "name": "3.377", + "data": { + "$area": 8, + "$dim": 8, + "$color": "#ff61c2" + }, + "children": [ + { + "id": "node4378", + "name": "4.378", + "data": { + "$area": 10, + "$dim": 10, + "$color": "#ff4e63" + } + }, { + "id": "node4379", + "name": "4.379", + "data": { + "$area": 10, + "$dim": 10, + "$color": "#ff4e63" + } + }, { + "id": "node4380", + "name": "4.380", + "data": { + "$area": 1, + "$dim": 1, + "$color": "#ff7b8a" + } + }, { + "id": "node4381", + "name": "4.381", + "data": { + "$area": 5, + "$dim": 5, + "$color": "#ff6779" + } + } + ] + } + ] + } + ] + } + ] + }; + // end + // init Icicle + icicle = new $jit.Icicle({ + // id of the visualization container + injectInto: 'infovis', + // whether to add transition animations + animate: animate, + // nodes offset + offset: 1, + // whether to add cushion type nodes + cushion: false, + //show only three levels at a time + constrained: true, + levelsToShow: 3, + // enable tips + Tips: { + enable: true, + type: 'Native', + // 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){ + // count children + var count = 0; + node.eachSubnode(function(){ + count++; + }); + // add tooltip info + tip.innerHTML = "
Name: " + node.name + + "
" + count + " children
"; + } + }, + // Add events to nodes + Events: { + enable: true, + onClick: function(node){ + if (node) { + //hide tips and selections + icicle.tips.hide(); + //perform the enter animation + icicle.enter(node); + } + }, + onRightClick: function(){ + //hide tips and selections + icicle.tips.hide(); + //perform the out animation + icicle.out(); + } + }, + // Add canvas label styling + Label: { + type: 'HTML', + useCSS3: true + }, + //Add the name of the node in the correponding label + //This method is called once, on label creation. + onCreateLabel: function(domElement, node){ + domElement.innerHTML = node.name; + var style = domElement.style; + style.border = '1px solid transparent'; + style.backgroundColor = node.getData('color'); + style.backgroundImage = '-webkit-gradient(linear, left top, right bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.2)))'; + } + }); + // load data + icicle.loadJSON(json); + // compute positions and plot + icicle.refresh(); + + icicle.fx.plot = function() {}; + + //end +} + +//init controls +function controls() { + var jit = $jit; + var gotoparent = jit.id('update'); + jit.util.addEvent(gotoparent, 'click', function() { + icicle.out(); + }); + var select = jit.id('s-orientation'); + jit.util.addEvent(select, 'change', function () { + icicle.layout.orientation = select[select.selectedIndex].value; + icicle.refresh(); + }); + var levelsToShowSelect = jit.id('i-levels-to-show'); + jit.util.addEvent(levelsToShowSelect, 'change', function () { + var index = levelsToShowSelect.selectedIndex; + if(index == 0) { + icicle.config.constrained = false; + } else { + icicle.config.constrained = true; + icicle.config.levelsToShow = index; + } + icicle.refresh(); + }); +} +//end diff --git a/Tests/Treemap/test7.js b/Tests/Treemap/test7.js index eb9e553..de23814 100644 --- a/Tests/Treemap/test7.js +++ b/Tests/Treemap/test7.js @@ -865,9 +865,9 @@ function init(){ //parent box title heights titleHeight: 15, //enable animations - animate: animate, + animate: true, //box offsets - offset: 1, + offset: 0, //Attach left and right click events Events: { enable: true, @@ -882,28 +882,6 @@ function init(){ type: 'HTML', useCSS3: true }, - //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.playcount) { - html += "play count: " + data.playcount; - } - if(data.image) { - html += ""; - } - tip.innerHTML = html; - } - }, onBeforeAnimateLabel: function(domElement, node) {}, diff --git a/tests.py b/tests.py index 8204bdc..d4c9607 100755 --- a/tests.py +++ b/tests.py @@ -492,6 +492,22 @@ 'Extras': ['excanvas.js'], 'Example': True }, + { + 'Title': 'Icicle with CSS3 label animations', + 'Description': + """ +

A static JSON tree representing a file system tree is loaded into + an Icicle Tree.

+

+ Left click to set a node as root for the visualization. +

+

+ Right click to set the parent node as root for the visualization. +

+ """, + 'Extras': ['excanvas.js'], + 'Example': False + }, ], 'ForceDirected': [