• Edit
  • Download
  • <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingSoft Demo</title>
      <style>
        * {
          font-family: 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans';
          font-size: 12px;
        }
      </style>
    
      <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
      <style>
        html,
        body {
          height: 100%;
          width: 100%;
          margin: 0;
          padding: 0;
        }
    
        #myChart {
          height: 100%;
          width: 100%;
          min-height: 150px;
        }
    
        .zc-ref {
          display: none;
        }
      </style>
    </head>
    
    <body>
    
      <div style="padding:10px">
        Show from level <select id="minlevel">
        <option value="0" selected>0</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
    </select> to level <select id="maxlevel">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4" selected>4</option>
    </select>&nbsp;<button class="btn" id="btnrender">Render</button>
      </div>
    
      <div id="zc"></div>
      <script>
        ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
        var fsdata = [{
            "id": "flare",
            "text": "flare",
            "parent": ""
          },
          {
            "id": "analytics",
            "text": "analytics",
            "parent": "flare",
            "data-xx": "xx-analytics"
          },
          {
            "id": "cluster",
            "text": "cluster",
            "parent": "analytics",
            "data-xx": "xx-cluster"
          },
          {
            "id": "agglomerativecluster",
            "text": "AgglomerativeCluster",
            "parent": "cluster",
            "value": 3938
          },
          {
            "id": "communitystructure",
            "text": "CommunityStructure",
            "parent": "cluster",
            "value": 3812
          },
          {
            "id": "hierarchicalcluster",
            "text": "HierarchicalCluster",
            "parent": "cluster",
            "value": 6714
          },
          {
            "id": "mergeedge",
            "text": "MergeEdge",
            "parent": "cluster",
            "value": 743
          },
          {
            "id": "graph",
            "text": "graph",
            "parent": "analytics"
          },
          {
            "id": "betweennesscentrality",
            "text": "BetweennessCentrality",
            "parent": "graph",
            "value": 3534
          },
          {
            "id": "linkdistance",
            "text": "LinkDistance",
            "parent": "graph",
            "value": 5731
          },
          {
            "id": "maxflowmincut",
            "text": "MaxFlowMinCut",
            "parent": "graph",
            "value": 7840
          },
          {
            "id": "shortestpaths",
            "text": "ShortestPaths",
            "parent": "graph",
            "value": 5914
          },
          {
            "id": "spanningtree",
            "text": "SpanningTree",
            "parent": "graph",
            "value": 3416
          },
          {
            "id": "optimization",
            "text": "optimization",
            "parent": "analytics"
          },
          {
            "id": "aspectratiobanker",
            "text": "AspectRatioBanker",
            "parent": "optimization",
            "value": 7074
          },
          {
            "id": "animate",
            "text": "animate",
            "parent": "flare"
          },
          {
            "id": "easing",
            "text": "Easing",
            "parent": "animate",
            "value": 17010
          },
          {
            "id": "functionsequence",
            "text": "FunctionSequence",
            "parent": "animate",
            "value": 5842
          },
          {
            "id": "interpolate",
            "text": "interpolate",
            "parent": "animate"
          },
          {
            "id": "arrayinterpolator",
            "text": "ArrayInterpolator",
            "parent": "interpolate",
            "value": 1983
          },
          {
            "id": "colorinterpolator",
            "text": "ColorInterpolator",
            "parent": "interpolate",
            "value": 2047
          },
          {
            "id": "dateinterpolator",
            "text": "DateInterpolator",
            "parent": "interpolate",
            "value": 1375
          },
          {
            "id": "interpolator",
            "text": "Interpolator",
            "parent": "interpolate",
            "value": 8746
          },
          {
            "id": "matrixinterpolator",
            "text": "MatrixInterpolator",
            "parent": "interpolate",
            "value": 2202
          },
          {
            "id": "numberinterpolator",
            "text": "NumberInterpolator",
            "parent": "interpolate",
            "value": 1382
          },
          {
            "id": "objectinterpolator",
            "text": "ObjectInterpolator",
            "parent": "interpolate",
            "value": 1629
          },
          {
            "id": "pointinterpolator",
            "text": "PointInterpolator",
            "parent": "interpolate",
            "value": 1675
          },
          {
            "id": "rectangleinterpolator",
            "text": "RectangleInterpolator",
            "parent": "interpolate",
            "value": 2042
          },
          {
            "id": "ischedulable",
            "text": "ISchedulable",
            "parent": "animate",
            "value": 1041
          },
          {
            "id": "parallel",
            "text": "Parallel",
            "parent": "animate",
            "value": 5176
          },
          {
            "id": "pause",
            "text": "Pause",
            "parent": "animate",
            "value": 449
          },
          {
            "id": "scheduler",
            "text": "Scheduler",
            "parent": "animate",
            "value": 5593
          },
          {
            "id": "sequence",
            "text": "Sequence",
            "parent": "animate",
            "value": 5534
          },
          {
            "id": "transition",
            "text": "Transition",
            "parent": "animate",
            "value": 9201
          },
          {
            "id": "transitioner",
            "text": "Transitioner",
            "parent": "animate",
            "value": 19975
          },
          {
            "id": "transitionevent",
            "text": "TransitionEvent",
            "parent": "animate",
            "value": 1116
          },
          {
            "id": "tween",
            "text": "Tween",
            "parent": "animate",
            "value": 6006
          },
          {
            "id": "data",
            "text": "data",
            "parent": "flare"
          },
          {
            "id": "converters",
            "text": "converters",
            "parent": "data"
          },
          {
            "id": "converters1",
            "text": "Converters",
            "parent": "converters",
            "value": 721
          },
          {
            "id": "delimitedtextconverter",
            "text": "DelimitedTextConverter",
            "parent": "converters",
            "value": 4294
          },
          {
            "id": "graphmlconverter",
            "text": "GraphMLConverter",
            "parent": "converters",
            "value": 9800
          },
          {
            "id": "idataconverter",
            "text": "IDataConverter",
            "parent": "converters",
            "value": 1314
          },
          {
            "id": "jsonconverter",
            "text": "JSONConverter",
            "parent": "converters",
            "value": 2220
          },
          {
            "id": "datafield",
            "text": "DataField",
            "parent": "data",
            "value": 1759
          },
          {
            "id": "dataschema",
            "text": "DataSchema",
            "parent": "data",
            "value": 2165
          },
          {
            "id": "dataset",
            "text": "DataSet",
            "parent": "data",
            "value": 586
          },
          {
            "id": "datasource",
            "text": "DataSource",
            "parent": "data",
            "value": 3331
          },
          {
            "id": "datatable",
            "text": "DataTable",
            "parent": "data",
            "value": 772
          },
          {
            "id": "datautil",
            "text": "DataUtil",
            "parent": "data",
            "value": 3322
          },
          {
            "id": "display",
            "text": "display",
            "parent": "flare"
          },
          {
            "id": "dirtysprite",
            "text": "DirtySprite",
            "parent": "display",
            "value": 8833
          },
          {
            "id": "linesprite",
            "text": "LineSprite",
            "parent": "display",
            "value": 1732
          },
          {
            "id": "rectsprite",
            "text": "RectSprite",
            "parent": "display",
            "value": 3623
          },
          {
            "id": "textsprite",
            "text": "TextSprite",
            "parent": "display",
            "value": 10066
          },
          {
            "id": "flex",
            "text": "flex",
            "parent": "flare"
          },
          {
            "id": "flarevis",
            "text": "FlareVis",
            "parent": "flex",
            "value": 4116
          },
          {
            "id": "physics",
            "text": "physics",
            "parent": "flare"
          },
          {
            "id": "dragforce",
            "text": "DragForce",
            "parent": "physics",
            "value": 1082
          },
          {
            "id": "gravityforce",
            "text": "GravityForce",
            "parent": "physics",
            "value": 1336
          },
          {
            "id": "iforce",
            "text": "IForce",
            "parent": "physics",
            "value": 319
          },
          {
            "id": "nbodyforce",
            "text": "NBodyForce",
            "parent": "physics",
            "value": 10498
          },
          {
            "id": "particle",
            "text": "Particle",
            "parent": "physics",
            "value": 2822
          },
          {
            "id": "simulation",
            "text": "Simulation",
            "parent": "physics",
            "value": 9983
          },
          {
            "id": "spring",
            "text": "Spring",
            "parent": "physics",
            "value": 2213
          },
          {
            "id": "springforce",
            "text": "SpringForce",
            "parent": "physics",
            "value": 1681
          },
          {
            "id": "query",
            "text": "query",
            "parent": "flare"
          },
          {
            "id": "aggregateexpression",
            "text": "AggregateExpression",
            "parent": "query",
            "value": 1616
          },
          {
            "id": "and",
            "text": "And",
            "parent": "query",
            "value": 1027
          },
          {
            "id": "arithmetic",
            "text": "Arithmetic",
            "parent": "query",
            "value": 3891
          },
          {
            "id": "average",
            "text": "Average",
            "parent": "query",
            "value": 891
          },
          {
            "id": "binaryexpression",
            "text": "BinaryExpression",
            "parent": "query",
            "value": 2893
          },
          {
            "id": "comparison",
            "text": "Comparison",
            "parent": "query",
            "value": 5103
          },
          {
            "id": "compositeexpression",
            "text": "CompositeExpression",
            "parent": "query",
            "value": 3677
          },
          {
            "id": "count",
            "text": "Count",
            "parent": "query",
            "value": 781
          },
          {
            "id": "dateutil",
            "text": "DateUtil",
            "parent": "query",
            "value": 4141
          },
          {
            "id": "distinct",
            "text": "Distinct",
            "parent": "query",
            "value": 933
          },
          {
            "id": "expression",
            "text": "Expression",
            "parent": "query",
            "value": 5130
          },
          {
            "id": "expressioniterator",
            "text": "ExpressionIterator",
            "parent": "query",
            "value": 3617
          },
          {
            "id": "fn",
            "text": "Fn",
            "parent": "query",
            "value": 3240
          },
          {
            "id": "if",
            "text": "If",
            "parent": "query",
            "value": 2732
          },
          {
            "id": "isa",
            "text": "IsA",
            "parent": "query",
            "value": 2039
          },
          {
            "id": "literal",
            "text": "Literal",
            "parent": "query",
            "value": 1214
          },
          {
            "id": "match",
            "text": "Match",
            "parent": "query",
            "value": 3748
          },
          {
            "id": "maximum",
            "text": "Maximum",
            "parent": "query",
            "value": 843
          },
          {
            "id": "methods",
            "text": "methods",
            "parent": "query"
          },
          {
            "id": "add",
            "text": "add",
            "parent": "methods",
            "value": 593
          },
          {
            "id": "and1",
            "text": "and",
            "parent": "methods",
            "value": 330
          },
          {
            "id": "average1",
            "text": "average",
            "parent": "methods",
            "value": 287
          },
          {
            "id": "count1",
            "text": "count",
            "parent": "methods",
            "value": 277
          },
          {
            "id": "distinct1",
            "text": "distinct",
            "parent": "methods",
            "value": 292
          },
          {
            "id": "div",
            "text": "div",
            "parent": "methods",
            "value": 595
          },
          {
            "id": "eq",
            "text": "eq",
            "parent": "methods",
            "value": 594
          },
          {
            "id": "fn1",
            "text": "fn",
            "parent": "methods",
            "value": 460
          },
          {
            "id": "gt",
            "text": "gt",
            "parent": "methods",
            "value": 603
          },
          {
            "id": "gte",
            "text": "gte",
            "parent": "methods",
            "value": 625
          },
          {
            "id": "iff",
            "text": "iff",
            "parent": "methods",
            "value": 748
          },
          {
            "id": "isa1",
            "text": "isa",
            "parent": "methods",
            "value": 461
          },
          {
            "id": "lt",
            "text": "lt",
            "parent": "methods",
            "value": 597
          },
          {
            "id": "lte",
            "text": "lte",
            "parent": "methods",
            "value": 619
          },
          {
            "id": "max",
            "text": "max",
            "parent": "methods",
            "value": 283
          },
          {
            "id": "min",
            "text": "min",
            "parent": "methods",
            "value": 283
          },
          {
            "id": "mod",
            "text": "mod",
            "parent": "methods",
            "value": 591
          },
          {
            "id": "mul",
            "text": "mul",
            "parent": "methods",
            "value": 603
          },
          {
            "id": "neq",
            "text": "neq",
            "parent": "methods",
            "value": 599
          },
          {
            "id": "not",
            "text": "not",
            "parent": "methods",
            "value": 386
          },
          {
            "id": "or",
            "text": "or",
            "parent": "methods",
            "value": 323
          },
          {
            "id": "orderby",
            "text": "orderby",
            "parent": "methods",
            "value": 307
          },
          {
            "id": "range",
            "text": "range",
            "parent": "methods",
            "value": 772
          },
          {
            "id": "select",
            "text": "select",
            "parent": "methods",
            "value": 296
          },
          {
            "id": "stddev",
            "text": "stddev",
            "parent": "methods",
            "value": 363
          },
          {
            "id": "sub",
            "text": "sub",
            "parent": "methods",
            "value": 600
          },
          {
            "id": "sum",
            "text": "sum",
            "parent": "methods",
            "value": 280
          },
          {
            "id": "update",
            "text": "update",
            "parent": "methods",
            "value": 307
          },
          {
            "id": "variance",
            "text": "variance",
            "parent": "methods",
            "value": 335
          },
          {
            "id": "where",
            "text": "where",
            "parent": "methods",
            "value": 299
          },
          {
            "id": "xor",
            "text": "xor",
            "parent": "methods",
            "value": 354
          },
          {
            "id": "_",
            "text": "_",
            "parent": "methods",
            "value": 264
          },
          {
            "id": "minimum",
            "text": "Minimum",
            "parent": "query",
            "value": 843
          },
          {
            "id": "not1",
            "text": "Not",
            "parent": "query",
            "value": 1554
          },
          {
            "id": "or1",
            "text": "Or",
            "parent": "query",
            "value": 970
          },
          {
            "id": "query1",
            "text": "Query",
            "parent": "query",
            "value": 13896
          },
          {
            "id": "range1",
            "text": "Range",
            "parent": "query",
            "value": 1594
          },
          {
            "id": "stringutil",
            "text": "StringUtil",
            "parent": "query",
            "value": 4130
          },
          {
            "id": "sum1",
            "text": "Sum",
            "parent": "query",
            "value": 791
          },
          {
            "id": "variable",
            "text": "Variable",
            "parent": "query",
            "value": 1124
          },
          {
            "id": "variance1",
            "text": "Variance",
            "parent": "query",
            "value": 1876
          },
          {
            "id": "xor1",
            "text": "Xor",
            "parent": "query",
            "value": 1101
          },
          {
            "id": "scale",
            "text": "scale",
            "parent": "flare"
          },
          {
            "id": "iscalemap",
            "text": "IScaleMap",
            "parent": "scale",
            "value": 2105
          },
          {
            "id": "linearscale",
            "text": "LinearScale",
            "parent": "scale",
            "value": 1316
          },
          {
            "id": "logscale",
            "text": "LogScale",
            "parent": "scale",
            "value": 3151
          },
          {
            "id": "ordinalscale",
            "text": "OrdinalScale",
            "parent": "scale",
            "value": 3770
          },
          {
            "id": "quantilescale",
            "text": "QuantileScale",
            "parent": "scale",
            "value": 2435
          },
          {
            "id": "quantitativescale",
            "text": "QuantitativeScale",
            "parent": "scale",
            "value": 4839
          },
          {
            "id": "rootscale",
            "text": "RootScale",
            "parent": "scale",
            "value": 1756
          },
          {
            "id": "scale1",
            "text": "Scale",
            "parent": "scale",
            "value": 4268
          },
          {
            "id": "scaletype",
            "text": "ScaleType",
            "parent": "scale",
            "value": 1821
          },
          {
            "id": "timescale",
            "text": "TimeScale",
            "parent": "scale",
            "value": 5833
          },
          {
            "id": "util",
            "text": "util",
            "parent": "flare"
          },
          {
            "id": "arrays",
            "text": "Arrays",
            "parent": "util",
            "value": 8258
          },
          {
            "id": "colors",
            "text": "Colors",
            "parent": "util",
            "value": 10001
          },
          {
            "id": "dates",
            "text": "Dates",
            "parent": "util",
            "value": 8217
          },
          {
            "id": "displays",
            "text": "Displays",
            "parent": "util",
            "value": 12555
          },
          {
            "id": "filter",
            "text": "Filter",
            "parent": "util",
            "value": 2324
          },
          {
            "id": "geometry",
            "text": "Geometry",
            "parent": "util",
            "value": 10993
          },
          {
            "id": "heap",
            "text": "heap",
            "parent": "util"
          },
          {
            "id": "fibonacciheap",
            "text": "FibonacciHeap",
            "parent": "heap",
            "value": 9354
          },
          {
            "id": "heapnode",
            "text": "HeapNode",
            "parent": "heap",
            "value": 1233
          },
          {
            "id": "ievaluable",
            "text": "IEvaluable",
            "parent": "util",
            "value": 335
          },
          {
            "id": "ipredicate",
            "text": "IPredicate",
            "parent": "util",
            "value": 383
          },
          {
            "id": "ivalueproxy",
            "text": "IValueProxy",
            "parent": "util",
            "value": 874
          },
          {
            "id": "math",
            "text": "math",
            "parent": "util"
          },
          {
            "id": "densematrix",
            "text": "DenseMatrix",
            "parent": "math",
            "value": 3165
          },
          {
            "id": "imatrix",
            "text": "IMatrix",
            "parent": "math",
            "value": 2815
          },
          {
            "id": "sparsematrix",
            "text": "SparseMatrix",
            "parent": "math",
            "value": 3366
          },
          {
            "id": "maths",
            "text": "Maths",
            "parent": "util",
            "value": 17705
          },
          {
            "id": "orientation",
            "text": "Orientation",
            "parent": "util",
            "value": 1486
          },
          {
            "id": "palette",
            "text": "palette",
            "parent": "util"
          },
          {
            "id": "colorpalette",
            "text": "ColorPalette",
            "parent": "palette",
            "value": 6367
          },
          {
            "id": "palette1",
            "text": "Palette",
            "parent": "palette",
            "value": 1229
          },
          {
            "id": "shapepalette",
            "text": "ShapePalette",
            "parent": "palette",
            "value": 2059
          },
          {
            "id": "sizepalette",
            "text": "SizePalette",
            "parent": "palette",
            "value": 2291
          },
          {
            "id": "property",
            "text": "Property",
            "parent": "util",
            "value": 5559
          },
          {
            "id": "shapes",
            "text": "Shapes",
            "parent": "util",
            "value": 19118
          },
          {
            "id": "sort",
            "text": "Sort",
            "parent": "util",
            "value": 6887
          },
          {
            "id": "stats",
            "text": "Stats",
            "parent": "util",
            "value": 6557
          },
          {
            "id": "strings",
            "text": "Strings",
            "parent": "util",
            "value": 22026
          },
          {
            "id": "vis",
            "text": "vis",
            "parent": "flare"
          },
          {
            "id": "axis",
            "text": "axis",
            "parent": "vis"
          },
          {
            "id": "axes",
            "text": "Axes",
            "parent": "axis",
            "value": 1302
          },
          {
            "id": "axis1",
            "text": "Axis",
            "parent": "axis",
            "value": 24593
          },
          {
            "id": "axisgridline",
            "text": "AxisGridLine",
            "parent": "axis",
            "value": 652
          },
          {
            "id": "axislabel",
            "text": "AxisLabel",
            "parent": "axis",
            "value": 636
          },
          {
            "id": "cartesianaxes",
            "text": "CartesianAxes",
            "parent": "axis",
            "value": 6703
          },
          {
            "id": "controls",
            "text": "controls",
            "parent": "vis"
          },
          {
            "id": "anchorcontrol",
            "text": "AnchorControl",
            "parent": "controls",
            "value": 2138
          },
          {
            "id": "clickcontrol",
            "text": "ClickControl",
            "parent": "controls",
            "value": 3824
          },
          {
            "id": "control",
            "text": "Control",
            "parent": "controls",
            "value": 1353
          },
          {
            "id": "controllist",
            "text": "ControlList",
            "parent": "controls",
            "value": 4665
          },
          {
            "id": "dragcontrol",
            "text": "DragControl",
            "parent": "controls",
            "value": 2649
          },
          {
            "id": "expandcontrol",
            "text": "ExpandControl",
            "parent": "controls",
            "value": 2832
          },
          {
            "id": "hovercontrol",
            "text": "HoverControl",
            "parent": "controls",
            "value": 4896
          },
          {
            "id": "icontrol",
            "text": "IControl",
            "parent": "controls",
            "value": 763
          },
          {
            "id": "panzoomcontrol",
            "text": "PanZoomControl",
            "parent": "controls",
            "value": 5222
          },
          {
            "id": "selectioncontrol",
            "text": "SelectionControl",
            "parent": "controls",
            "value": 7862
          },
          {
            "id": "tooltipcontrol",
            "text": "TooltipControl",
            "parent": "controls",
            "value": 8435
          },
          {
            "id": "data1",
            "text": "data",
            "parent": "vis"
          },
          {
            "id": "data2",
            "text": "Data",
            "parent": "data1",
            "value": 20544
          },
          {
            "id": "datalist",
            "text": "DataList",
            "parent": "data1",
            "value": 19788
          },
          {
            "id": "datasprite",
            "text": "DataSprite",
            "parent": "data1",
            "value": 10349
          },
          {
            "id": "edgesprite",
            "text": "EdgeSprite",
            "parent": "data1",
            "value": 3301
          },
          {
            "id": "nodesprite",
            "text": "NodeSprite",
            "parent": "data1",
            "value": 19382
          },
          {
            "id": "render",
            "text": "render",
            "parent": "data1"
          },
          {
            "id": "arrowtype",
            "text": "ArrowType",
            "parent": "render",
            "value": 698
          },
          {
            "id": "edgerenderer",
            "text": "EdgeRenderer",
            "parent": "render",
            "value": 5569
          },
          {
            "id": "irenderer",
            "text": "IRenderer",
            "parent": "render",
            "value": 353
          },
          {
            "id": "shaperenderer",
            "text": "ShapeRenderer",
            "parent": "render",
            "value": 2247
          },
          {
            "id": "scalebinding",
            "text": "ScaleBinding",
            "parent": "data1",
            "value": 11275
          },
          {
            "id": "tree",
            "text": "Tree",
            "parent": "data1",
            "value": 7147
          },
          {
            "id": "treebuilder",
            "text": "TreeBuilder",
            "parent": "data1",
            "value": 9930
          },
          {
            "id": "events",
            "text": "events",
            "parent": "vis"
          },
          {
            "id": "dataevent",
            "text": "DataEvent",
            "parent": "events",
            "value": 2313
          },
          {
            "id": "selectionevent",
            "text": "SelectionEvent",
            "parent": "events",
            "value": 1880
          },
          {
            "id": "tooltipevent",
            "text": "TooltipEvent",
            "parent": "events",
            "value": 1701
          },
          {
            "id": "visualizationevent",
            "text": "VisualizationEvent",
            "parent": "events",
            "value": 1117
          },
          {
            "id": "legend",
            "text": "legend",
            "parent": "vis"
          },
          {
            "id": "legend1",
            "text": "Legend",
            "parent": "legend",
            "value": 20859
          },
          {
            "id": "legenditem",
            "text": "LegendItem",
            "parent": "legend",
            "value": 4614
          },
          {
            "id": "legendrange",
            "text": "LegendRange",
            "parent": "legend",
            "value": 10530
          },
          {
            "id": "operator",
            "text": "operator",
            "parent": "vis"
          },
          {
            "id": "distortion",
            "text": "distortion",
            "parent": "operator"
          },
          {
            "id": "bifocaldistortion",
            "text": "BifocalDistortion",
            "parent": "distortion",
            "value": 4461
          },
          {
            "id": "distortion1",
            "text": "Distortion",
            "parent": "distortion",
            "value": 6314
          },
          {
            "id": "fisheyedistortion",
            "text": "FisheyeDistortion",
            "parent": "distortion",
            "value": 3444
          },
          {
            "id": "encoder",
            "text": "encoder",
            "parent": "operator"
          },
          {
            "id": "colorencoder",
            "text": "ColorEncoder",
            "parent": "encoder",
            "value": 3179
          },
          {
            "id": "encoder1",
            "text": "Encoder",
            "parent": "encoder",
            "value": 4060
          },
          {
            "id": "propertyencoder",
            "text": "PropertyEncoder",
            "parent": "encoder",
            "value": 4138
          },
          {
            "id": "shapeencoder",
            "text": "ShapeEncoder",
            "parent": "encoder",
            "value": 1690
          },
          {
            "id": "sizeencoder",
            "text": "SizeEncoder",
            "parent": "encoder",
            "value": 1830
          },
          {
            "id": "filter1",
            "text": "filter",
            "parent": "operator"
          },
          {
            "id": "fisheyetreefilter",
            "text": "FisheyeTreeFilter",
            "parent": "filter1",
            "value": 5219
          },
          {
            "id": "graphdistancefilter",
            "text": "GraphDistanceFilter",
            "parent": "filter1",
            "value": 3165
          },
          {
            "id": "visibilityfilter",
            "text": "VisibilityFilter",
            "parent": "filter1",
            "value": 3509
          },
          {
            "id": "ioperator",
            "text": "IOperator",
            "parent": "operator",
            "value": 1286
          },
          {
            "id": "label",
            "text": "label",
            "parent": "operator"
          },
          {
            "id": "labeler",
            "text": "Labeler",
            "parent": "label",
            "value": 9956
          },
          {
            "id": "radiallabeler",
            "text": "RadialLabeler",
            "parent": "label",
            "value": 3899
          },
          {
            "id": "stackedarealabeler",
            "text": "StackedAreaLabeler",
            "parent": "label",
            "value": 3202
          },
          {
            "id": "layout",
            "text": "layout",
            "parent": "operator"
          },
          {
            "id": "axislayout",
            "text": "AxisLayout",
            "parent": "layout",
            "value": 6725
          },
          {
            "id": "bundlededgerouter",
            "text": "BundledEdgeRouter",
            "parent": "layout",
            "value": 3727
          },
          {
            "id": "circlelayout",
            "text": "CircleLayout",
            "parent": "layout",
            "value": 9317
          },
          {
            "id": "circlepackinglayout",
            "text": "CirclePackingLayout",
            "parent": "layout",
            "value": 12003
          },
          {
            "id": "dendrogramlayout",
            "text": "DendrogramLayout",
            "parent": "layout",
            "value": 4853
          },
          {
            "id": "forcedirectedlayout",
            "text": "ForceDirectedLayout",
            "parent": "layout",
            "value": 8411
          },
          {
            "id": "icicletreelayout",
            "text": "IcicleTreeLayout",
            "parent": "layout",
            "value": 4864
          },
          {
            "id": "indentedtreelayout",
            "text": "IndentedTreeLayout",
            "parent": "layout",
            "value": 3174
          },
          {
            "id": "layout1",
            "text": "Layout",
            "parent": "layout",
            "value": 7881
          },
          {
            "id": "nodelinktreelayout",
            "text": "NodeLinkTreeLayout",
            "parent": "layout",
            "value": 12870
          },
          {
            "id": "pielayout",
            "text": "PieLayout",
            "parent": "layout",
            "value": 2728
          },
          {
            "id": "radialtreelayout",
            "text": "RadialTreeLayout",
            "parent": "layout",
            "value": 12348
          },
          {
            "id": "randomlayout",
            "text": "RandomLayout",
            "parent": "layout",
            "value": 870
          },
          {
            "id": "stackedarealayout",
            "text": "StackedAreaLayout",
            "parent": "layout",
            "value": 9121
          },
          {
            "id": "treemaplayout",
            "text": "TreeMapLayout",
            "parent": "layout",
            "value": 9191
          },
          {
            "id": "operator1",
            "text": "Operator",
            "parent": "operator",
            "value": 2490
          },
          {
            "id": "operatorlist",
            "text": "OperatorList",
            "parent": "operator",
            "value": 5248
          },
          {
            "id": "operatorsequence",
            "text": "OperatorSequence",
            "parent": "operator",
            "value": 4190
          },
          {
            "id": "operatorswitch",
            "text": "OperatorSwitch",
            "parent": "operator",
            "value": 2581
          },
          {
            "id": "sortoperator",
            "text": "SortOperator",
            "parent": "operator",
            "value": 2023
          },
          {
            "id": "visualization",
            "text": "Visualization",
            "parent": "vis",
            "value": 16540
          }
        ];
    
        function render() {
    
          var cdata = {
            "background-color": "#eee #ddd",
            "type": "bubble-pack",
            "plotarea": {
              "margin": 5
            },
            "options": {
              "active": true,
              "padding": 1,
              "min-size": 1,
              "max-items": 999,
              "min-level": minlevel.value,
              "max-level": maxlevel.value,
              "-filter": ["operator"],
              "item": {
                "-background-color": "#f90 #09f",
                "-tooltip": {
                  "text": "%fullname<br>%fullvalue<br>%data-xx"
                }
              },
              "-item-level-2": {
                "background-color": "#090 #90f"
              },
              "-item-id-axis": {
                "border-width": 5,
                "background-color": "#333 #fff"
              }
            },
            "series": fsdata,
          };
    
          zingchart.render({
            id: 'zc',
            width: 550,
            height: 550,
            output: 'svg',
            data: cdata
          });
    
        };
    
        render();
    
        btnrender.addEventListener('click', render);
      </script>
    </body>
    
    </html>
    <!DOCTYPE html>
    <html>
    	<head>
        <meta charset="utf-8">
        <title>ZingSoft Demo</title>
    	<style>
    	  * { 
    	    font-family:'Lucida Sans Unicode','Lucida Grande','Lucida Sans';
    	    font-size:12px;
    	  }
    	</style>
    	
    		<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    </head>
    	<body>
    	  
    	  <div style="padding:10px">
    Show from level <select id="minlevel">
        <option value="0" selected>0</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
    </select> to level <select id="maxlevel">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4" selected>4</option>
    </select>&nbsp;<button class="btn" id="btnrender">Render</button>
    </div>
    
    		<div id="zc"></div>
    	</body>
    </html>
    html, body {
    	height:100%;
    	width:100%;
    	margin:0;
    	padding:0;
    }
    #myChart {
    	height:100%;
    	width:100%;
    	min-height:150px;
    }
    .zc-ref {
    	display:none;
    }
    var fsdata = [
    {"id":"flare","text":"flare","parent":""},
    {"id":"analytics","text":"analytics","parent":"flare","data-xx":"xx-analytics"},
    {"id":"cluster","text":"cluster","parent":"analytics","data-xx":"xx-cluster"},
    {"id":"agglomerativecluster","text":"AgglomerativeCluster","parent":"cluster","value":3938},
    {"id":"communitystructure","text":"CommunityStructure","parent":"cluster","value":3812},
    {"id":"hierarchicalcluster","text":"HierarchicalCluster","parent":"cluster","value":6714},
    {"id":"mergeedge","text":"MergeEdge","parent":"cluster","value":743},
    {"id":"graph","text":"graph","parent":"analytics"},
    {"id":"betweennesscentrality","text":"BetweennessCentrality","parent":"graph","value":3534},
    {"id":"linkdistance","text":"LinkDistance","parent":"graph","value":5731},
    {"id":"maxflowmincut","text":"MaxFlowMinCut","parent":"graph","value":7840},
    {"id":"shortestpaths","text":"ShortestPaths","parent":"graph","value":5914},
    {"id":"spanningtree","text":"SpanningTree","parent":"graph","value":3416},
    {"id":"optimization","text":"optimization","parent":"analytics"},
    {"id":"aspectratiobanker","text":"AspectRatioBanker","parent":"optimization","value":7074},
    {"id":"animate","text":"animate","parent":"flare"},
    {"id":"easing","text":"Easing","parent":"animate","value":17010},
    {"id":"functionsequence","text":"FunctionSequence","parent":"animate","value":5842},
    {"id":"interpolate","text":"interpolate","parent":"animate"},
    {"id":"arrayinterpolator","text":"ArrayInterpolator","parent":"interpolate","value":1983},
    {"id":"colorinterpolator","text":"ColorInterpolator","parent":"interpolate","value":2047},
    {"id":"dateinterpolator","text":"DateInterpolator","parent":"interpolate","value":1375},
    {"id":"interpolator","text":"Interpolator","parent":"interpolate","value":8746},
    {"id":"matrixinterpolator","text":"MatrixInterpolator","parent":"interpolate","value":2202},
    {"id":"numberinterpolator","text":"NumberInterpolator","parent":"interpolate","value":1382},
    {"id":"objectinterpolator","text":"ObjectInterpolator","parent":"interpolate","value":1629},
    {"id":"pointinterpolator","text":"PointInterpolator","parent":"interpolate","value":1675},
    {"id":"rectangleinterpolator","text":"RectangleInterpolator","parent":"interpolate","value":2042},
    {"id":"ischedulable","text":"ISchedulable","parent":"animate","value":1041},
    {"id":"parallel","text":"Parallel","parent":"animate","value":5176},
    {"id":"pause","text":"Pause","parent":"animate","value":449},
    {"id":"scheduler","text":"Scheduler","parent":"animate","value":5593},
    {"id":"sequence","text":"Sequence","parent":"animate","value":5534},
    {"id":"transition","text":"Transition","parent":"animate","value":9201},
    {"id":"transitioner","text":"Transitioner","parent":"animate","value":19975},
    {"id":"transitionevent","text":"TransitionEvent","parent":"animate","value":1116},
    {"id":"tween","text":"Tween","parent":"animate","value":6006},
    {"id":"data","text":"data","parent":"flare"},
    {"id":"converters","text":"converters","parent":"data"},
    {"id":"converters1","text":"Converters","parent":"converters","value":721},
    {"id":"delimitedtextconverter","text":"DelimitedTextConverter","parent":"converters","value":4294},
    {"id":"graphmlconverter","text":"GraphMLConverter","parent":"converters","value":9800},
    {"id":"idataconverter","text":"IDataConverter","parent":"converters","value":1314},
    {"id":"jsonconverter","text":"JSONConverter","parent":"converters","value":2220},
    {"id":"datafield","text":"DataField","parent":"data","value":1759},
    {"id":"dataschema","text":"DataSchema","parent":"data","value":2165},
    {"id":"dataset","text":"DataSet","parent":"data","value":586},
    {"id":"datasource","text":"DataSource","parent":"data","value":3331},
    {"id":"datatable","text":"DataTable","parent":"data","value":772},
    {"id":"datautil","text":"DataUtil","parent":"data","value":3322},
    {"id":"display","text":"display","parent":"flare"},
    {"id":"dirtysprite","text":"DirtySprite","parent":"display","value":8833},
    {"id":"linesprite","text":"LineSprite","parent":"display","value":1732},
    {"id":"rectsprite","text":"RectSprite","parent":"display","value":3623},
    {"id":"textsprite","text":"TextSprite","parent":"display","value":10066},
    {"id":"flex","text":"flex","parent":"flare"},
    {"id":"flarevis","text":"FlareVis","parent":"flex","value":4116},
    {"id":"physics","text":"physics","parent":"flare"},
    {"id":"dragforce","text":"DragForce","parent":"physics","value":1082},
    {"id":"gravityforce","text":"GravityForce","parent":"physics","value":1336},
    {"id":"iforce","text":"IForce","parent":"physics","value":319},
    {"id":"nbodyforce","text":"NBodyForce","parent":"physics","value":10498},
    {"id":"particle","text":"Particle","parent":"physics","value":2822},
    {"id":"simulation","text":"Simulation","parent":"physics","value":9983},
    {"id":"spring","text":"Spring","parent":"physics","value":2213},
    {"id":"springforce","text":"SpringForce","parent":"physics","value":1681},
    {"id":"query","text":"query","parent":"flare"},
    {"id":"aggregateexpression","text":"AggregateExpression","parent":"query","value":1616},
    {"id":"and","text":"And","parent":"query","value":1027},
    {"id":"arithmetic","text":"Arithmetic","parent":"query","value":3891},
    {"id":"average","text":"Average","parent":"query","value":891},
    {"id":"binaryexpression","text":"BinaryExpression","parent":"query","value":2893},
    {"id":"comparison","text":"Comparison","parent":"query","value":5103},
    {"id":"compositeexpression","text":"CompositeExpression","parent":"query","value":3677},
    {"id":"count","text":"Count","parent":"query","value":781},
    {"id":"dateutil","text":"DateUtil","parent":"query","value":4141},
    {"id":"distinct","text":"Distinct","parent":"query","value":933},
    {"id":"expression","text":"Expression","parent":"query","value":5130},
    {"id":"expressioniterator","text":"ExpressionIterator","parent":"query","value":3617},
    {"id":"fn","text":"Fn","parent":"query","value":3240},
    {"id":"if","text":"If","parent":"query","value":2732},
    {"id":"isa","text":"IsA","parent":"query","value":2039},
    {"id":"literal","text":"Literal","parent":"query","value":1214},
    {"id":"match","text":"Match","parent":"query","value":3748},
    {"id":"maximum","text":"Maximum","parent":"query","value":843},
    {"id":"methods","text":"methods","parent":"query"},
    {"id":"add","text":"add","parent":"methods","value":593},
    {"id":"and1","text":"and","parent":"methods","value":330},
    {"id":"average1","text":"average","parent":"methods","value":287},
    {"id":"count1","text":"count","parent":"methods","value":277},
    {"id":"distinct1","text":"distinct","parent":"methods","value":292},
    {"id":"div","text":"div","parent":"methods","value":595},
    {"id":"eq","text":"eq","parent":"methods","value":594},
    {"id":"fn1","text":"fn","parent":"methods","value":460},
    {"id":"gt","text":"gt","parent":"methods","value":603},
    {"id":"gte","text":"gte","parent":"methods","value":625},
    {"id":"iff","text":"iff","parent":"methods","value":748},
    {"id":"isa1","text":"isa","parent":"methods","value":461},
    {"id":"lt","text":"lt","parent":"methods","value":597},
    {"id":"lte","text":"lte","parent":"methods","value":619},
    {"id":"max","text":"max","parent":"methods","value":283},
    {"id":"min","text":"min","parent":"methods","value":283},
    {"id":"mod","text":"mod","parent":"methods","value":591},
    {"id":"mul","text":"mul","parent":"methods","value":603},
    {"id":"neq","text":"neq","parent":"methods","value":599},
    {"id":"not","text":"not","parent":"methods","value":386},
    {"id":"or","text":"or","parent":"methods","value":323},
    {"id":"orderby","text":"orderby","parent":"methods","value":307},
    {"id":"range","text":"range","parent":"methods","value":772},
    {"id":"select","text":"select","parent":"methods","value":296},
    {"id":"stddev","text":"stddev","parent":"methods","value":363},
    {"id":"sub","text":"sub","parent":"methods","value":600},
    {"id":"sum","text":"sum","parent":"methods","value":280},
    {"id":"update","text":"update","parent":"methods","value":307},
    {"id":"variance","text":"variance","parent":"methods","value":335},
    {"id":"where","text":"where","parent":"methods","value":299},
    {"id":"xor","text":"xor","parent":"methods","value":354},
    {"id":"_","text":"_","parent":"methods","value":264},
    {"id":"minimum","text":"Minimum","parent":"query","value":843},
    {"id":"not1","text":"Not","parent":"query","value":1554},
    {"id":"or1","text":"Or","parent":"query","value":970},
    {"id":"query1","text":"Query","parent":"query","value":13896},
    {"id":"range1","text":"Range","parent":"query","value":1594},
    {"id":"stringutil","text":"StringUtil","parent":"query","value":4130},
    {"id":"sum1","text":"Sum","parent":"query","value":791},
    {"id":"variable","text":"Variable","parent":"query","value":1124},
    {"id":"variance1","text":"Variance","parent":"query","value":1876},
    {"id":"xor1","text":"Xor","parent":"query","value":1101},
    {"id":"scale","text":"scale","parent":"flare"},
    {"id":"iscalemap","text":"IScaleMap","parent":"scale","value":2105},
    {"id":"linearscale","text":"LinearScale","parent":"scale","value":1316},
    {"id":"logscale","text":"LogScale","parent":"scale","value":3151},
    {"id":"ordinalscale","text":"OrdinalScale","parent":"scale","value":3770},
    {"id":"quantilescale","text":"QuantileScale","parent":"scale","value":2435},
    {"id":"quantitativescale","text":"QuantitativeScale","parent":"scale","value":4839},
    {"id":"rootscale","text":"RootScale","parent":"scale","value":1756},
    {"id":"scale1","text":"Scale","parent":"scale","value":4268},
    {"id":"scaletype","text":"ScaleType","parent":"scale","value":1821},
    {"id":"timescale","text":"TimeScale","parent":"scale","value":5833},
    {"id":"util","text":"util","parent":"flare"},
    {"id":"arrays","text":"Arrays","parent":"util","value":8258},
    {"id":"colors","text":"Colors","parent":"util","value":10001},
    {"id":"dates","text":"Dates","parent":"util","value":8217},
    {"id":"displays","text":"Displays","parent":"util","value":12555},
    {"id":"filter","text":"Filter","parent":"util","value":2324},
    {"id":"geometry","text":"Geometry","parent":"util","value":10993},
    {"id":"heap","text":"heap","parent":"util"},
    {"id":"fibonacciheap","text":"FibonacciHeap","parent":"heap","value":9354},
    {"id":"heapnode","text":"HeapNode","parent":"heap","value":1233},
    {"id":"ievaluable","text":"IEvaluable","parent":"util","value":335},
    {"id":"ipredicate","text":"IPredicate","parent":"util","value":383},
    {"id":"ivalueproxy","text":"IValueProxy","parent":"util","value":874},
    {"id":"math","text":"math","parent":"util"},
    {"id":"densematrix","text":"DenseMatrix","parent":"math","value":3165},
    {"id":"imatrix","text":"IMatrix","parent":"math","value":2815},
    {"id":"sparsematrix","text":"SparseMatrix","parent":"math","value":3366},
    {"id":"maths","text":"Maths","parent":"util","value":17705},
    {"id":"orientation","text":"Orientation","parent":"util","value":1486},
    {"id":"palette","text":"palette","parent":"util"},
    {"id":"colorpalette","text":"ColorPalette","parent":"palette","value":6367},
    {"id":"palette1","text":"Palette","parent":"palette","value":1229},
    {"id":"shapepalette","text":"ShapePalette","parent":"palette","value":2059},
    {"id":"sizepalette","text":"SizePalette","parent":"palette","value":2291},
    {"id":"property","text":"Property","parent":"util","value":5559},
    {"id":"shapes","text":"Shapes","parent":"util","value":19118},
    {"id":"sort","text":"Sort","parent":"util","value":6887},
    {"id":"stats","text":"Stats","parent":"util","value":6557},
    {"id":"strings","text":"Strings","parent":"util","value":22026},
    {"id":"vis","text":"vis","parent":"flare"},
    {"id":"axis","text":"axis","parent":"vis"},
    {"id":"axes","text":"Axes","parent":"axis","value":1302},
    {"id":"axis1","text":"Axis","parent":"axis","value":24593},
    {"id":"axisgridline","text":"AxisGridLine","parent":"axis","value":652},
    {"id":"axislabel","text":"AxisLabel","parent":"axis","value":636},
    {"id":"cartesianaxes","text":"CartesianAxes","parent":"axis","value":6703},
    {"id":"controls","text":"controls","parent":"vis"},
    {"id":"anchorcontrol","text":"AnchorControl","parent":"controls","value":2138},
    {"id":"clickcontrol","text":"ClickControl","parent":"controls","value":3824},
    {"id":"control","text":"Control","parent":"controls","value":1353},
    {"id":"controllist","text":"ControlList","parent":"controls","value":4665},
    {"id":"dragcontrol","text":"DragControl","parent":"controls","value":2649},
    {"id":"expandcontrol","text":"ExpandControl","parent":"controls","value":2832},
    {"id":"hovercontrol","text":"HoverControl","parent":"controls","value":4896},
    {"id":"icontrol","text":"IControl","parent":"controls","value":763},
    {"id":"panzoomcontrol","text":"PanZoomControl","parent":"controls","value":5222},
    {"id":"selectioncontrol","text":"SelectionControl","parent":"controls","value":7862},
    {"id":"tooltipcontrol","text":"TooltipControl","parent":"controls","value":8435},
    {"id":"data1","text":"data","parent":"vis"},
    {"id":"data2","text":"Data","parent":"data1","value":20544},
    {"id":"datalist","text":"DataList","parent":"data1","value":19788},
    {"id":"datasprite","text":"DataSprite","parent":"data1","value":10349},
    {"id":"edgesprite","text":"EdgeSprite","parent":"data1","value":3301},
    {"id":"nodesprite","text":"NodeSprite","parent":"data1","value":19382},
    {"id":"render","text":"render","parent":"data1"},
    {"id":"arrowtype","text":"ArrowType","parent":"render","value":698},
    {"id":"edgerenderer","text":"EdgeRenderer","parent":"render","value":5569},
    {"id":"irenderer","text":"IRenderer","parent":"render","value":353},
    {"id":"shaperenderer","text":"ShapeRenderer","parent":"render","value":2247},
    {"id":"scalebinding","text":"ScaleBinding","parent":"data1","value":11275},
    {"id":"tree","text":"Tree","parent":"data1","value":7147},
    {"id":"treebuilder","text":"TreeBuilder","parent":"data1","value":9930},
    {"id":"events","text":"events","parent":"vis"},
    {"id":"dataevent","text":"DataEvent","parent":"events","value":2313},
    {"id":"selectionevent","text":"SelectionEvent","parent":"events","value":1880},
    {"id":"tooltipevent","text":"TooltipEvent","parent":"events","value":1701},
    {"id":"visualizationevent","text":"VisualizationEvent","parent":"events","value":1117},
    {"id":"legend","text":"legend","parent":"vis"},
    {"id":"legend1","text":"Legend","parent":"legend","value":20859},
    {"id":"legenditem","text":"LegendItem","parent":"legend","value":4614},
    {"id":"legendrange","text":"LegendRange","parent":"legend","value":10530},
    {"id":"operator","text":"operator","parent":"vis"},
    {"id":"distortion","text":"distortion","parent":"operator"},
    {"id":"bifocaldistortion","text":"BifocalDistortion","parent":"distortion","value":4461},
    {"id":"distortion1","text":"Distortion","parent":"distortion","value":6314},
    {"id":"fisheyedistortion","text":"FisheyeDistortion","parent":"distortion","value":3444},
    {"id":"encoder","text":"encoder","parent":"operator"},
    {"id":"colorencoder","text":"ColorEncoder","parent":"encoder","value":3179},
    {"id":"encoder1","text":"Encoder","parent":"encoder","value":4060},
    {"id":"propertyencoder","text":"PropertyEncoder","parent":"encoder","value":4138},
    {"id":"shapeencoder","text":"ShapeEncoder","parent":"encoder","value":1690},
    {"id":"sizeencoder","text":"SizeEncoder","parent":"encoder","value":1830},
    {"id":"filter1","text":"filter","parent":"operator"},
    {"id":"fisheyetreefilter","text":"FisheyeTreeFilter","parent":"filter1","value":5219},
    {"id":"graphdistancefilter","text":"GraphDistanceFilter","parent":"filter1","value":3165},
    {"id":"visibilityfilter","text":"VisibilityFilter","parent":"filter1","value":3509},
    {"id":"ioperator","text":"IOperator","parent":"operator","value":1286},
    {"id":"label","text":"label","parent":"operator"},
    {"id":"labeler","text":"Labeler","parent":"label","value":9956},
    {"id":"radiallabeler","text":"RadialLabeler","parent":"label","value":3899},
    {"id":"stackedarealabeler","text":"StackedAreaLabeler","parent":"label","value":3202},
    {"id":"layout","text":"layout","parent":"operator"},
    {"id":"axislayout","text":"AxisLayout","parent":"layout","value":6725},
    {"id":"bundlededgerouter","text":"BundledEdgeRouter","parent":"layout","value":3727},
    {"id":"circlelayout","text":"CircleLayout","parent":"layout","value":9317},
    {"id":"circlepackinglayout","text":"CirclePackingLayout","parent":"layout","value":12003},
    {"id":"dendrogramlayout","text":"DendrogramLayout","parent":"layout","value":4853},
    {"id":"forcedirectedlayout","text":"ForceDirectedLayout","parent":"layout","value":8411},
    {"id":"icicletreelayout","text":"IcicleTreeLayout","parent":"layout","value":4864},
    {"id":"indentedtreelayout","text":"IndentedTreeLayout","parent":"layout","value":3174},
    {"id":"layout1","text":"Layout","parent":"layout","value":7881},
    {"id":"nodelinktreelayout","text":"NodeLinkTreeLayout","parent":"layout","value":12870},
    {"id":"pielayout","text":"PieLayout","parent":"layout","value":2728},
    {"id":"radialtreelayout","text":"RadialTreeLayout","parent":"layout","value":12348},
    {"id":"randomlayout","text":"RandomLayout","parent":"layout","value":870},
    {"id":"stackedarealayout","text":"StackedAreaLayout","parent":"layout","value":9121},
    {"id":"treemaplayout","text":"TreeMapLayout","parent":"layout","value":9191},
    {"id":"operator1","text":"Operator","parent":"operator","value":2490},
    {"id":"operatorlist","text":"OperatorList","parent":"operator","value":5248},
    {"id":"operatorsequence","text":"OperatorSequence","parent":"operator","value":4190},
    {"id":"operatorswitch","text":"OperatorSwitch","parent":"operator","value":2581},
    {"id":"sortoperator","text":"SortOperator","parent":"operator","value":2023},
    {"id":"visualization","text":"Visualization","parent":"vis","value":16540}
    ];
    
    function render() {
    
        var cdata = {
            "background-color":"#eee #ddd",
            "type":"bubble-pack",
            "plotarea":{
                "margin":5
            },
            "options":{
                "active":true,
                "padding":1,
                "min-size":1,
                "max-items":999,
                "min-level": minlevel.value,
                "max-level": maxlevel.value,
                "-filter":["operator"],
                "item":{
                    "-background-color":"#f90 #09f",
                    "-tooltip":{
                        "text":"%fullname<br>%fullvalue<br>%data-xx"    
                    }
                },
                "-item-level-2":{
                    "background-color":"#090 #90f"    
                },
                "-item-id-axis" : {
                    "border-width":5,
                    "background-color":"#333 #fff"
                }
            },
          "series":fsdata,
        };
        
        zingchart.render({
            id : 'zc',
            width : 550,
        	  height : 550,
          	output : 'svg',
        	  data : cdata
        });
    
    };
    
    render();
    
    btnrender.addEventListener('click', render);