In [ ]:
class ToolTipBuilder implements IToolTipBuilder{
   @Override
          public String getToolTip(TreeMapNode node) {            
            String tooltip = "";
            if (node.isLeaf()){
              Object userObject = node.getUserObject();
              if (userObject instanceof Map<String, Object>){
                tooltip+="<b>Label:</b> "+ ((Map<String, Object>) userObject).get("label");
              }else{
                tooltip+="<b>Label:</b> "+ userObject.toString();
              }
              tooltip+="<br/>";
              tooltip+="<b>Weight:</b> "+ node.getWeight();
              tooltip+="<br/>";
              tooltip+="<b>Value:</b> "+ node.getLabelValue();
            }
            tooltip;
          }
};
  
toolTipBuilder = new ToolTipBuilder();
In [ ]:
node = new TreeMapNode("0");
def node00 = new TreeMapNode("00", 2, new DefaultValue(2));

def node01 = new TreeMapNode("01");
node01.add(new TreeMapNode("011", 1, new DefaultValue(1)))
node01.add(new TreeMapNode("012", 2, new DefaultValue(1)))
node01.add(new TreeMapNode("013", 3, new DefaultValue(1)))

def node02 = new TreeMapNode("02");
node02.add(new TreeMapNode("020", 2, new DefaultValue(2)))
node02.add(new TreeMapNode("021", 1, new DefaultValue(1)))
node02.add(new TreeMapNode("022", 1, new DefaultValue(1)))
node02.add(new TreeMapNode("023", 1, new DefaultValue(1)))
node02.add(new TreeMapNode("024", 2, new DefaultValue(2)))

def node03 = new TreeMapNode("03");
node03.add(new TreeMapNode("030", 1, new DefaultValue(2)))
node03.add(new TreeMapNode("031", 2, new DefaultValue(2)))
node03.add(new TreeMapNode("032", 3, new DefaultValue(2)))
node03.add(new TreeMapNode("033", 4, new DefaultValue(2)))

def node04 = new TreeMapNode("04", 6, new DefaultValue(5))

node.add(node01)
node.add(node02)
node.add(node03)
node.add(node04)
In [ ]:
big_node = new TreeMapNode("root");
def nodeX = new TreeMapNode("branch1");
def nodeY = new TreeMapNode("branch2");

(1..500).each({ nodeX.add(new TreeMapNode(it + "", it * 2, new DefaultValue(it))) })

def nodeX1 = new TreeMapNode("branch11");
(1..250).each({ nodeX1.add(new TreeMapNode(it + "", it * 2, new DefaultValue(it))) })
nodeX.add(nodeX1)

(1..500).each({ nodeY.add(new TreeMapNode(it + "", it * 2, new DefaultValue(it))) })

def nodeY1 = new TreeMapNode("branch21");
(1..250).each({ nodeY1.add(new TreeMapNode(it + "", it * 2, new DefaultValue(it))) })
nodeY.add(nodeY1)

big_node.add(nodeX);
big_node.add(nodeY);
In [ ]:
def spjson = '{"name":"flare","children":[{"name":"analytics","children":[{"name":"cluster","children":[{"name":"AgglomerativeCluster","size":3938},{"name":"CommunityStructure","size":3812},{"name":"HierarchicalCluster","size":6714},{"name":"MergeEdge","size":743}]},{"name":"graph","children":[{"name":"BetweennessCentrality","size":3534},{"name":"LinkDistance","size":5731},{"name":"MaxFlowMinCut","size":7840},{"name":"ShortestPaths","size":5914},{"name":"SpanningTree","size":3416}]},{"name":"optimization","children":[{"name":"AspectRatioBanker","size":7074}]}]},{"name":"animate","children":[{"name":"Easing","size":17010},{"name":"FunctionSequence","size":5842},{"name":"interpolate","children":[{"name":"ArrayInterpolator","size":1983},{"name":"ColorInterpolator","size":2047},{"name":"DateInterpolator","size":1375},{"name":"Interpolator","size":8746},{"name":"MatrixInterpolator","size":2202},{"name":"NumberInterpolator","size":1382},{"name":"ObjectInterpolator","size":1629},{"name":"PointInterpolator","size":1675},{"name":"RectangleInterpolator","size":2042}]},{"name":"ISchedulable","size":1041},{"name":"Parallel","size":5176},{"name":"Pause","size":449},{"name":"Scheduler","size":5593},{"name":"Sequence","size":5534},{"name":"Transition","size":9201},{"name":"Transitioner","size":19975},{"name":"TransitionEvent","size":1116},{"name":"Tween","size":6006}]},{"name":"data","children":[{"name":"converters","children":[{"name":"Converters","size":721},{"name":"DelimitedTextConverter","size":4294},{"name":"GraphMLConverter","size":9800},{"name":"IDataConverter","size":1314},{"name":"JSONConverter","size":2220}]},{"name":"DataField","size":1759},{"name":"DataSchema","size":2165},{"name":"DataSet","size":586},{"name":"DataSource","size":3331},{"name":"DataTable","size":772},{"name":"DataUtil","size":3322}]},{"name":"display","children":[{"name":"DirtySprite","size":8833},{"name":"LineSprite","size":1732},{"name":"RectSprite","size":3623},{"name":"TextSprite","size":10066}]},{"name":"flex","children":[{"name":"FlareVis","size":4116}]},{"name":"physics","children":[{"name":"DragForce","size":1082},{"name":"GravityForce","size":1336},{"name":"IForce","size":319},{"name":"NBodyForce","size":10498},{"name":"Particle","size":2822},{"name":"Simulation","size":9983},{"name":"Spring","size":2213},{"name":"SpringForce","size":1681}]},{"name":"query","children":[{"name":"AggregateExpression","size":1616},{"name":"And","size":1027},{"name":"Arithmetic","size":3891},{"name":"Average","size":891},{"name":"BinaryExpression","size":2893},{"name":"Comparison","size":5103},{"name":"CompositeExpression","size":3677},{"name":"Count","size":781},{"name":"DateUtil","size":4141},{"name":"Distinct","size":933},{"name":"Expression","size":5130},{"name":"ExpressionIterator","size":3617},{"name":"Fn","size":3240},{"name":"If","size":2732},{"name":"IsA","size":2039},{"name":"Literal","size":1214},{"name":"Match","size":3748},{"name":"Maximum","size":843},{"name":"methods","children":[{"name":"add","size":593},{"name":"and","size":330},{"name":"average","size":287},{"name":"count","size":277},{"name":"distinct","size":292},{"name":"div","size":595},{"name":"eq","size":594},{"name":"fn","size":460},{"name":"gt","size":603},{"name":"gte","size":625},{"name":"iff","size":748},{"name":"isa","size":461},{"name":"lt","size":597},{"name":"lte","size":619},{"name":"max","size":283},{"name":"min","size":283},{"name":"mod","size":591},{"name":"mul","size":603},{"name":"neq","size":599},{"name":"not","size":386},{"name":"or","size":323},{"name":"orderby","size":307},{"name":"range","size":772},{"name":"select","size":296},{"name":"stddev","size":363},{"name":"sub","size":600},{"name":"sum","size":280},{"name":"update","size":307},{"name":"variance","size":335},{"name":"where","size":299},{"name":"xor","size":354},{"name":"_","size":264}]},{"name":"Minimum","size":843},{"name":"Not","size":1554},{"name":"Or","size":970},{"name":"Query","size":13896},{"name":"Range","size":1594},{"name":"StringUtil","size":4130},{"name":"Sum","size":791},{"name":"Variable","size":1124},{"name":"Variance","size":1876},{"name":"Xor","size":1101}]},{"name":"scale","children":[{"name":"IScaleMap","size":2105},{"name":"LinearScale","size":1316},{"name":"LogScale","size":3151},{"name":"OrdinalScale","size":3770},{"name":"QuantileScale","size":2435},{"name":"QuantitativeScale","size":4839},{"name":"RootScale","size":1756},{"name":"Scale","size":4268},{"name":"ScaleType","size":1821},{"name":"TimeScale","size":5833}]},{"name":"util","children":[{"name":"Arrays","size":8258},{"name":"Colors","size":10001},{"name":"Dates","size":8217},{"name":"Displays","size":12555},{"name":"Filter","size":2324},{"name":"Geometry","size":10993},{"name":"heap","children":[{"name":"FibonacciHeap","size":9354},{"name":"HeapNode","size":1233}]},{"name":"IEvaluable","size":335},{"name":"IPredicate","size":383},{"name":"IValueProxy","size":874},{"name":"math","children":[{"name":"DenseMatrix","size":3165},{"name":"IMatrix","size":2815},{"name":"SparseMatrix","size":3366}]},{"name":"Maths","size":17705},{"name":"Orientation","size":1486},{"name":"palette","children":[{"name":"ColorPalette","size":6367},{"name":"Palette","size":1229},{"name":"ShapePalette","size":2059},{"name":"SizePalette","size":2291}]},{"name":"Property","size":5559},{"name":"Shapes","size":19118},{"name":"Sort","size":6887},{"name":"Stats","size":6557},{"name":"Strings","size":22026}]},{"name":"vis","children":[{"name":"axis","children":[{"name":"Axes","size":1302},{"name":"Axis","size":24593},{"name":"AxisGridLine","size":652},{"name":"AxisLabel","size":636},{"name":"CartesianAxes","size":6703}]},{"name":"controls","children":[{"name":"AnchorControl","size":2138},{"name":"ClickControl","size":3824},{"name":"Control","size":1353},{"name":"ControlList","size":4665},{"name":"DragControl","size":2649},{"name":"ExpandControl","size":2832},{"name":"HoverControl","size":4896},{"name":"IControl","size":763},{"name":"PanZoomControl","size":5222},{"name":"SelectionControl","size":7862},{"name":"TooltipControl","size":8435}]},{"name":"data","children":[{"name":"Data","size":20544},{"name":"DataList","size":19788},{"name":"DataSprite","size":10349},{"name":"EdgeSprite","size":3301},{"name":"NodeSprite","size":19382},{"name":"render","children":[{"name":"ArrowType","size":698},{"name":"EdgeRenderer","size":5569},{"name":"IRenderer","size":353},{"name":"ShapeRenderer","size":2247}]},{"name":"ScaleBinding","size":11275},{"name":"Tree","size":7147},{"name":"TreeBuilder","size":9930}]},{"name":"events","children":[{"name":"DataEvent","size":2313},{"name":"SelectionEvent","size":1880},{"name":"TooltipEvent","size":1701},{"name":"VisualizationEvent","size":1117}]},{"name":"legend","children":[{"name":"Legend","size":20859},{"name":"LegendItem","size":4614},{"name":"LegendRange","size":10530}]},{"name":"operator","children":[{"name":"distortion","children":[{"name":"BifocalDistortion","size":4461},{"name":"Distortion","size":6314},{"name":"FisheyeDistortion","size":3444}]},{"name":"encoder","children":[{"name":"ColorEncoder","size":3179},{"name":"Encoder","size":4060},{"name":"PropertyEncoder","size":4138},{"name":"ShapeEncoder","size":1690},{"name":"SizeEncoder","size":1830}]},{"name":"filter","children":[{"name":"FisheyeTreeFilter","size":5219},{"name":"GraphDistanceFilter","size":3165},{"name":"VisibilityFilter","size":3509}]},{"name":"IOperator","size":1286},{"name":"label","children":[{"name":"Labeler","size":9956},{"name":"RadialLabeler","size":3899},{"name":"StackedAreaLabeler","size":3202}]},{"name":"layout","children":[{"name":"AxisLayout","size":6725},{"name":"BundledEdgeRouter","size":3727},{"name":"CircleLayout","size":9317},{"name":"CirclePackingLayout","size":12003},{"name":"DendrogramLayout","size":4853},{"name":"ForceDirectedLayout","size":8411},{"name":"IcicleTreeLayout","size":4864},{"name":"IndentedTreeLayout","size":3174},{"name":"Layout","size":7881},{"name":"NodeLinkTreeLayout","size":12870},{"name":"PieLayout","size":2728},{"name":"RadialTreeLayout","size":12348},{"name":"RandomLayout","size":870},{"name":"StackedAreaLayout","size":9121},{"name":"TreeMapLayout","size":9191}]},{"name":"Operator","size":2490},{"name":"OperatorList","size":5248},{"name":"OperatorSequence","size":4190},{"name":"OperatorSwitch","size":2581},{"name":"SortOperator","size":2023}]},{"name":"Visualization","size":16540}]}]}'
def slurper = new groovy.json.JsonSlurper()

 void process(groovy.json.internal.LazyMap node, TreeMapNode parent) {
   //println node.name;
   TreeMapNode treeNode = new TreeMapNode(node.name);
   if (node.size == null)
     treeNode = new TreeMapNode(node.name)
   else
     treeNode = new TreeMapNode(node.name, node.size as double, new DefaultValue(node.size as double))
  
   parent.add(treeNode)
   
   node.children.each { 
     process(it, treeNode)
   } 
} 

real_node = new TreeMapNode("root");

def sp = slurper.parseText(spjson)
process(sp, real_node)
In [ ]:
def x = new TreeMap(
  root: node,
  showLegend: true,
  title: "Simple TreeChart"
);
x

Other Properties

  • mode
  • ratio
  • round
  • sticky
  • valueAccessor

Mode property

If mode is specified, sets the layout algorithm. If mode is not specified, returns the current layout algorithm, which defaults to "squarify". The following modes are supported:

  • squarify - rectangular subdivision; squareness controlled via the target ratio.
  • slice - horizontal subdivision.
  • dice - vertical subdivision.
  • slice-dice - alternating between horizontal and vertical subdivision.
In [ ]:
def x = new TreeMap(
  root: node,
  mode: Mode.SQUARIFY,
  title: "Mode.SQUARIFY"
);
x
In [ ]:
def x = new TreeMap(
  root: node,
  mode: Mode.SLICE,
  title: "Mode.SLICE"
);
x
In [ ]:
def x = new TreeMap(
  root: node,
  mode: Mode.DICE,
  title: "Mode.DICE"
);
x
In [ ]:
def x = new TreeMap(
  root: node,
  mode: Mode.SLICE_DIC,
  title: "Mode.SLICE_DIC"
);
x

Sticky property

If sticky is specified, sets whether or not the treemap layout is "sticky": a sticky treemap layout will preserve the relative arrangement of nodes across transitions. The allocation of nodes into squarified horizontal and vertical rows is persisted across updates by storing a z attribute on the last element in each row; this allows nodes to be resized smoothly, without shuffling or occlusion that would impede perception of changing values. Note, however, that this results in a suboptimal layout for one of the two states. If sticky is not specified, returns whether the treemap layout is sticky.

Implementation note: sticky treemaps cache the array of nodes internally; therefore, it is not possible to reuse the same layout instance on multiple datasets. To reset the cached state when switching datasets with a sticky layout, call sticky(true) again. Since version 1.25.0, hierarchy layouts no longer copy the input data by default on each invocation, so it may be possible to eliminate caching and make the layout fully stateless.

Round property

If round is specified, sets whether or not the treemap layout will round to exact pixel boundaries. This can be nice to avoid antialiasing artifacts in SVG. If round is not specified, returns whether the treemap will be rounded.

Ratio property

If ratio is specified, sets the layout ratio. If ratio is not specified, returns the current layout ratio, which defaults to .5 * (1 + Math.sqrt(5))

In [ ]:
def x = new TreeMap(
  root: node,
  ratio: 0.5,
  title: "Property 'ratio' is 0.5"
);
x
In [ ]:
def x = new TreeMap(
  root: node,
  toolTipBuilder: toolTipBuilder,
  colorProvider: new RandomColorProvider(),
  valueAccessor: ValueAccessor.VALUE,
  title: "ValueAccessor.VALUE"
);
x
In [ ]:
def x = new TreeMap(
  root: node,
  toolTipBuilder: toolTipBuilder,
  colorProvider: new RandomColorProvider(),
  valueAccessor: ValueAccessor.WEIGHT,
  title: "ValueAccessor.WEIGHT"
);
x
In [ ]:
def x = new TreeMap(
  root: node,
  toolTipBuilder: toolTipBuilder,
  title: "Using custom ToolTipBuilder"
);
x

ColorProviders

In curent moment we are supporting next ColorProviders

  • RandomColorProvider (default)
  • GradientColorProvider

You can set property 'fromValue' for providers thar uses min and max values. If this property is 'true' then value uses for color calculating. Otherwise - wight.

RandomColorProvider

In [ ]:
def x = new TreeMap(
  root: node,
  toolTipBuilder: toolTipBuilder,
  colorProvider: new RandomColorProvider(),
  title: "Default RandomColorProvider"
);
x
In [ ]:
Color[] colours = [
    new Color(255, 0, 0),
      new Color(0, 255, 0),
      new Color(0, 0, 255),
      new Color(255, 255, 0),
      new Color(255, 0, 255),
      new Color(0, 255, 255),
      new Color(102, 102, 51),
      new Color(255, 51, 153),
      new Color(255, 153, 51),
      new Color(204, 204, 51),
      new Color(205, 102, 204),
      new Color(51, 153, 255),
      new Color(153, 102, 0)
  ];

def x = new TreeMap(
  root: node,
  toolTipBuilder: toolTipBuilder,
  colorProvider: new RandomColorProvider(colours),
  title: "RandomColorProvider with different colours"
);
x

GradientColorProvider

In [ ]:
def x = new TreeMap(
  root: node,
  toolTipBuilder: toolTipBuilder,
  title: "GradientColorProvider with default colours"
);
x.setColorProvider(new GradientColorProvider(x))
x
In [ ]:
def x = new TreeMap(
  root: node,
  toolTipBuilder: toolTipBuilder,
  title: "GradientColorProvider with overrides colours"
);
x.setColorProvider(new GradientColorProvider(x, Color.LIGHT_GRAY, Color.DARK_GRAY))
x
In [ ]:
def x = new TreeMap(
  root: big_node,
  showLegend: false,
  toolTipBuilder: toolTipBuilder,
  title: "Big TreeMap chart (1500 entities)"
);
x.setColorProvider(new GradientColorProvider(x))
x
In [ ]:
def x = new TreeMap(
    root: real_node,
    showLegend: false,
    toolTipBuilder: toolTipBuilder,
    title: "Flare",
    initWidth:1300,
    initHeight:600
);
RandomColorProvider colorProvider = new RandomColorProvider(
  [
  '#3182bd',
  '#6baed6',
  '#9ecae1',
  '#c6dbef',
  '#e6550d',
  '#fd8d3c',
  '#fdae6b',
  '#fdd0a2',
  '#31a354',
  '#74c476',
  '#a1d99b',
  '#c7e9c0',
  '#756bb1',
  '#9e9ac8',
  '#bcbddc',
  '#dadaeb',
  '#636363',
  '#969696',
  '#bdbdbd',
  '#d9d9d9'
    ]
)
colorProvider.setGroupByParent(true)
x.setColorProvider(colorProvider)
x
In [ ]: