<!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 nonce="undefined" 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> <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,
        },
        "series": fsdata,
      };
      zingchart.render({
        id: 'zc',
        width: 550,
        height: 550,
        output: 'svg',
        data: cdata
      });
    };
    render();
    btnrender.addEventListener('click', render);
  </script>
</body>
</html>
       
      
        
        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,
    },
    "series": fsdata,
  };
  zingchart.render({
    id: 'zc',
    width: 550,
    height: 550,
    output: 'svg',
    data: cdata
  });
};
render();
btnrender.addEventListener('click', render);