In [ ]:
from beakerx import *
class ToolTipBuilder:
    def getToolTip(self,node):
        tooltip = ""
        if node.isLeaf():
            tooltip+="<b>Label:</b> "+ (node.label)

            tooltip+="<br/>"
            tooltip+="<b>Weight:</b> "+ str(node.weight)
            tooltip+="<br/>"
            tooltip+="<b>Value:</b> "+ node.labelValue

        return tooltip
  
toolTipBuilder = ToolTipBuilder()
In [ ]:
from beakerx import *
node = TreeMapNode("0")
node00 = TreeMapNode("00", 2, DefaultValue(2))

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

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

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

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

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

for x in range(1, 501):
    nodeX.add(TreeMapNode(str(x), x * 2, DefaultValue(x)))
    
nodeX1 = TreeMapNode("branch11")

for x in range(1, 251):
    nodeX1.add(TreeMapNode(str(x), x * 2, DefaultValue(x)))

nodeX.add(nodeX1)

for x in range(1, 501):
    nodeY.add(TreeMapNode(str(x), x * 2, DefaultValue(x)))

nodeY1 = TreeMapNode("branch21")

for x in range(1, 251):
    nodeY1.add(TreeMapNode(str(x), x * 2, DefaultValue(x)))
nodeY.add(nodeY1)


big_node.add(nodeY)
big_node.add(nodeX)
In [ ]:
import json
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}]}]}'
aa = json.loads(spjson)

def process(node, parent):
    treeNode = TreeMapNode(node.get('name'))
    if node.get('size') is None:
        treeNode = TreeMapNode(node.get('name'))
    else:
        treeNode = TreeMapNode(node.get('name'), node.get('size'), DefaultValue(node.get('size')))
  
    parent.add(treeNode)
   
    children = node.get('children')
    if children is not None:
        for node in node.get('children'):
            process(node, treeNode)


real_node = TreeMapNode("root")


process(aa, real_node)
In [ ]:
from beakerx import *
x = 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 [ ]:
x = TreeMap(
  root= node,
  mode= Mode.SQUARIFY,
  title= "Mode.SQUARIFY"
)
x
In [ ]:
x = TreeMap(
  root= node,
  mode= Mode.SLICE,
  title= "Mode.SLICE"
)
x
In [ ]:
x = TreeMap(
  root= node,
  mode= Mode.DICE,
  title= "Mode.DICE"
)
x
In [ ]:
x = 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 [ ]:
x = TreeMap(
  root= node,
  ratio= 0.5,
  title= "Property 'ratio' is 0.5"
)
x
In [ ]:
x = TreeMap(
  root= node,
  toolTipBuilder= toolTipBuilder,
  colorProvider= RandomColorProvider(),
  valueAccessor= ValueAccessor.VALUE,
  title= "ValueAccessor.VALUE"
)
x
In [ ]:
x = TreeMap(
  root= node,
  toolTipBuilder= toolTipBuilder,
  colorProvider= RandomColorProvider(),
  valueAccessor= ValueAccessor.WEIGHT,
  title= "ValueAccessor.WEIGHT"
)
x
In [ ]:
x = 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 [ ]:
x = TreeMap(
  root= node,
  toolTipBuilder= toolTipBuilder,
  colorProvider= RandomColorProvider(),
  title= "Default RandomColorProvider"
)
x
In [ ]:
colours = [
        Color(255, 0, 0),
        Color(0, 255, 0),
        Color(0, 0, 255),
        Color(255, 255, 0),
        Color(255, 0, 255),
        Color(0, 255, 255),
        Color(102, 102, 51),
        Color(255, 51, 153),
        Color(255, 153, 51),
        Color(204, 204, 51),
        Color(205, 102, 204),
        Color(51, 153, 255),
        Color(153, 102, 0)
  ]

y = TreeMap(
  root= node,
  toolTipBuilder= toolTipBuilder,
  colorProvider= RandomColorProvider(colours),
  title= "RandomColorProvider with different colours"
)
y

GradientColorProvider

In [ ]:
x = TreeMap(
  root= node,
  toolTipBuilder= toolTipBuilder,
  title= "GradientColorProvider with default colours"
)
x.setColorProvider(GradientColorProvider(x))
x
In [ ]:
x = TreeMap(
  root= node,
  toolTipBuilder= toolTipBuilder,
  title= "GradientColorProvider with overrides colours"
)
x.setColorProvider(GradientColorProvider(x, Color.LIGHT_GRAY, Color.DARK_GRAY))
x
In [ ]:
x = TreeMap(
  root= big_node,
  showLegend= False,
  toolTipBuilder= toolTipBuilder,
  title= "Big TreeMap chart (1500 entities)"
)
x.setColorProvider(GradientColorProvider(x))
x
In [ ]:
colorProvider = 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 = TreeMap(
    root= real_node,
    showLegend= False,
    toolTipBuilder= toolTipBuilder,
    colorProvider = colorProvider,
    title= "Flare",
    initWidth= 1300,
    initHeight= 600
)
x
In [ ]: