• 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;
            }
    
            zing-grid[loading] {
                height: 550px;
            }
        </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);