• 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);