Nested levels

[martin.berg]

Hi,

The map has an inconsistent level view, on the root level I can see 2
levels down, but on the 2nd level I can only see 1 level Is there a
way to fix this?

I see the code that does this

package flare.vis.operator.layout

public class TreeMapLayout extends Layout

/**
* Compute the tree map layout.
*/
private function doLayout(p:NodeSprite, r:Rectangle):void
{
// create sorted list of children's properties
for (var i:uint = 0; i < p.childDegree; ++i) {
_kids.push(p.getChildNode(i).props);
}
_kids.sortOn(AREA, Array.NUMERIC);
// update array to point to sprites, not props
for (i = 0; i < _kids.length; ++i) {
_kids[i] = _kids[i].self;
}

// do squarified layout of siblings
var w:Number = Math.min(r.width, r.height);
squarify(_kids, _row, w, r);
_kids.splice(0, _kids.length); // clear _kids

// recurse
for (i=0; i< p.childDegree; ++i) {
var c:NodeSprite = p.getChildNode(i);
if (c.childDegree > 0) {
updateArea(c, r);
doLayout(c, r);
}
}
}

However I can't modify it so that is shows only 1 level at once, I can
but it breaks other stuff.

Thanks

[Chris Gemignani]

Hi Martin:

Is this a similar to urkle's question about displaying only a single
level at a time? The root node of the tree generally doesn't contain
any usable or interesting information.

Chris

[martin.berg]

Yes it's the same question.

The point is that

root (not visible)
|
node1 - node2 - node3 - node4 (visible)
| | | |
subnode1 etc. (visible)

By default you see 2 levels at root level but when you go down a level
you only see

node1 - node2 - node3 - node4 (not visible)
| | | |
subnode1 etc. (visible)

1 level the subnodes of the 2nd level so only the 3rd level

[martin.berg]

Actually here http://it.usaspending.gov/?q=content/current-year-fy2009-enacted

you always see 2 levels unless you're at the leaf level

I want to see only 1 level and no nested levels skipping the root
(cause the're nothing to show)

[Chris Gemignani]

Got it. Yes, we are planning on adding that functionality. No, I'm not sure when we will add it. 

The way we were planning on doing it is to add a property displayDepth that is the depth relative to the tree root to display.  We would use this property to adjust TreeMapControl.calculateLeaves(). The challenge is to get the depth calculations right when dataRoot is changed.

We did have an unstable version working and the effect was very nice!

I'd be very interested in a source code contribution if you get it working. Thanks!

Chris

--
Chris Gemignani
Juice Analytics
phone: 571.205.4789

[martin.berg]

Hmm

I kinda got something working

class CustomShapeRenderer extends ShapeRenderer {
public var t:TreeMapControl;

public function CustomShapeRenderer(t:TreeMapControl,
defaultSize:Number=6) {
super();
this.t = t as TreeMapControl;
}

override public function render(d:DataSprite):void {
var ns:NodeSprite = d as NodeSprite;

var lineAlpha:Number = d.lineAlpha;
var fillAlpha:Number = d.fillAlpha;
var lineColor:Number = d.lineColor;
var fillColor:Number = d.fillColor;
var size:Number = d.size * defaultSize;
var g:Graphics = d.graphics;
g.clear();

// Determine if to show level
if(t.getCurrentRootLevel() != ns.depth - 1) {
trace("return " + t.getCurrentRootLevel() + " - " + ns.depth);
// make sure to draw leaves
if(ns.childDegree == 0 && t.getCurrentRootLevel() == ns.depth) {
} else{
return;}
} else { trace("draw");}
if (fillAlpha > 0) g.beginFill(fillColor, 1);
if (lineAlpha > 0) g.lineStyle(d.lineWidth, d.lineColor,
lineAlpha);
const lw:Number = d.lineWidth;

switch (d.shape) {
case null:
break;

case Shapes.TREEMAPBLOCK:
//Alert.show("TREEMAPBLOCK", "-");
// This draws a rectangle inside of a rectangle.
// This serves as a replacement for Shapes.BLOCK
// This behaves in an identical fashion to the original flash
line border
// in that the borders are drawn on the outside of the shape.
// Shapes are scaled down by the amount of the linewidth area
in the
// treemap layout to achieve smooth treemap nirvana.
g.lineStyle(0.0, 0, 0);
if (lineColor == 0xffffff && lineAlpha == 1.0) {
g.beginFill(0xffff00, 0.99);
} else {
g.beginFill(0xffff00, lineAlpha);
}
g.drawRect(d.u-d.x-d.lineWidth/2, d.v-d.y-d.lineWidth/2, d.w
+d.lineWidth, d.h+d.lineWidth);
// Rectangles with a white (0xffffffff) fill are rendered as
transparent in flash graphics.
// We slightly decrease the alpha in these cases to avoid
errors.
if (fillColor == 0xffffff && fillAlpha == 1.0) {
g.beginFill(0xff00ff, 0.99);
} else {
g.beginFill(0xff00ff, fillAlpha);
}
g.drawRect(d.u-d.x, d.v-d.y, d.w, d.h);
break;
case Shapes.BLOCK:
trace(ns.depth + "draw " + size + " " + (d.u-d.x) + "," +
(d.v-d.y) + "," + d.w +"," + d.h + "," + fillColor + "," + fillAlpha);
g.drawRect(d.u-d.x, d.v-d.y, d.w, d.h);
break;
case Shapes.POLYGON:
if (d.points!=null)
Shapes.drawPolygon(g, d.points);
break;
case Shapes.POLYBLOB:
if (d.points!=null)
Shapes.drawCardinal(g, d.points,
d.points.length/2, 0.15, true);
break;
case Shapes.VERTICAL_BAR:
g.clear();
if (lw > 0) {
g.beginFill(d.lineColor, d.lineAlpha);
g.drawRect(-size/2, -d.h, size, d.h);
}
g.beginFill(d.fillColor, fillAlpha);
if (d.h > 0) {
g.drawRect(-size/2+lw, -d.h+lw, size-lw*2, d.h-lw*2);
}
else {
// Reversed bars
g.drawRect(-size/2+lw, -d.h-lw, size-lw*2, d.h+lw*2);
}
break;
case Shapes.HORIZONTAL_BAR:
g.clear();
if (lw > 0) {
g.beginFill(d.lineColor, d.lineAlpha);
g.drawRect(-d.w, -size/2, d.w, size);
}
g.beginFill(d.fillColor, fillAlpha);
if (d.w > 0) {
g.drawRect(-d.w+lw, -size/2+lw, d.w-lw*2, size-lw*2);
}
else {
// Reversed bars
g.drawRect(-d.w-lw, -size/2+lw, d.w+lw*2, size-lw*2);
}
break;
case Shapes.WEDGE:
Shapes.drawWedge(g, d.origin.x-d.x, d.origin.y-d.y,
d.h, d.v, d.u, d.u+d.w);
break;
default:
Shapes.getShape(d.shape)(g, size);
}

if (fillAlpha > 0) g.endFill();
}

}

The whole thing is in

// Determine if to show level
if(t.getCurrentRootLevel() != ns.depth - 1) {
trace("return " + t.getCurrentRootLevel() + " - " + ns.depth);
// make sure to draw leaves
if(ns.childDegree == 0 && t.getCurrentRootLevel() == ns.depth) {
} else{
return;}
}

Except the colors dont work on higher levels, its just a single
brownish color

[Chris Gemignani]

Hi Martin!

Thanks for the code. We're going to check in a solution to our unstable branch tomorrow that supports depth.

The approach is different--we want to keep all the logic for dealing with the nodes localized in TreeMapControl. I'll explain more tomorrow.

Chris