Auto Aggregation and scaling by the rank of the currently visible nodes.

<script src="https://cdn.zoomcharts-cloud.com/1/nightly/zoomcharts.js"></script>

<p>
    "layer.style.allObjectsStyleFunction" is useful when styling is dependant
    not only on the properties of the node, but also the whole context of the chart.
</p>
<p>
    In this example the radius of a node is determined by selecting only currently visible nodes,
    and ranking them by population size. Afterwards the radius is applied in steps. Nodes that would
    rank in the top 0% to 10% would be assigned radius of 52px. Nodes ranking between 10% and 20% would
    be assigned 36px radius and so on.
</p>
<p>
    To achieve this "allObjectsStyleFunction" is used. Inside the function only the nodes within bounds are filtered,
    and the specific stepping autoscale can be applied.
</p>
<div id="demo"></div>

//No CSS for this example 

    // function for shortening number for label texts
    function getNumberTxt(number) {
        if (number > (1000 * 1000)) {
            number = Math.floor(number / (1000 * 1000)) + 'M';
        } else if (number > 1000) {
            number = Math.floor(number / 1000) + 'k';
        }
        return number;
    }

    var geochart = new GeoChart({
        container: document.getElementById('demo'),
        data: {
            url: "/dvsl/data/geo-chart/USAcities15000.json",
            postprocessorFunction: function (DATA) {
                DATA = JSON.parse(DATA);
                // USAcities15000.json is not formatted in the expected format,
                // however the postprocessorFunction allows us to parse the data
                // and return it in the desired format
                var nodes = [];
                for (var i in DATA) {
                    var data = DATA[i];
                    nodes.push({
                        coordinates: [parseFloat(data.lng), parseFloat(data.lat)],
                        type: "point",
                        id: data.id,
                        name: data.name,
                        population: parseInt(data.population)
                    });
                }
                return {
                    nodes: nodes
                };
            }
        },
        layers: [
            {
                id: "default",
                type: "items",
                aggregation: {
                    enabled: true,
                    // needed for aggregation and aggregatedWeight result
                    weightFunction: function (node) {
                        return node.population;
                    }
                },
                style: {
                    // node.radius=undefined disables the built-in default radius so that autoscale can update it
                    // when needed
                    node: { radius: undefined },
                    
                    allObjectsStyleFunction: autoScaleNodes,
                    
                    nodeStyleFunction: function (node) {
                        // get data about current aggregated item
                        var aggr = node.data.aggregatedNodes;
                        // get sum of current aggregated item
                        var w = node.data.aggregatedWeight;
                        // adding current aggregated item element coount and its elements sum for node label
                        if (node.removed)
                            node.label = "";
                        else
                            node.label = 'cities:' + aggr.length + "\n pop:" + getNumberTxt(w);
                    }
                }
            }
        ],
        navigation: { initialLat: 36, initialLng: -100, initialZoom: 5, minZoom: 4 }
    });

    // perform the initial autoscaling
    geochart.updateStyle();

    function autoScaleNodes(nodes, links) {
        // auto switch-case for returning radius (0.1 for smallest 10% or results etc.)
        var sizeSteps = [0.1, 5, 18, 21, 25, 30, 32, 34, 36, 52];
        // return defaults for faulty code (without initial autoscaling)
        if (!geochart) {
            return { modifiedNodes: [], modifiedLinks: [] };
        }

        // get viewport bounds
        var visibleBounds = geochart.bounds();
        var visibleNodes = [];
        // cycle through all nodes and outputing only those within bounds range
        for (var i = 0; i < nodes.length; i++) {
            var node = nodes[i];
            var r = 0;
            var c = node.data.coordinates;
            if (c && !node.removed
                    && c[0] + r > visibleBounds.west
                    && c[0] - r < visibleBounds.east
                    && c[1] + r > visibleBounds.south
                    && c[1] - r < visibleBounds.north) {
                visibleNodes.push(node);
            }
        }
        // return defaults, if there are no nodes visible
        if (visibleNodes.length === 0) {
            return { modifiedNodes: [], modifiedLinks: [] };
        }
        // return nodes without links, if there is only one node visible
        if (visibleNodes.length === 1) {
            visibleNodes[0].radius = sizeSteps[sizeSteps.length - 1] * 2;
            return { modifiedNodes: visibleNodes, modifiedLinks: [] };
        }
        // sort output nodes by aggregated weight (number earlier defined)
        visibleNodes.sort(function (a, b) {
            return a.data.aggregatedWeight - b.data.aggregatedWeight;
        });
        // make node radius bigger, by removing smallest values from sizeSteps array
        // if there is small variety of node values
        if (visibleNodes.length < sizeSteps.length) {
            sizeSteps.splice(0, sizeSteps.length - visibleNodes.length);
        }
        var count = visibleNodes.length;
        var stepSize = count / (sizeSteps.length - 1);
        // cycle through all result nodes and calculate new radius value
        for (var i = 0; i < count; i++) {
            var s = Math.floor(i / stepSize);

            visibleNodes[i].radius = sizeSteps[s + 1];
        }

        return { modifiedNodes: visibleNodes, modifiedLinks: [] };
    }

//Data too large to output