Grouped bubble chart - Grouped bubble map chart

Grouped bubble map chart

keyboard_arrow_leftGo back
Open in JSFiddle
JavaScript
chart= new GeoChart({
    "navigation": {
        "initialLat": 37,
        "initialLng": -95,
        "initialZoom": 5,
        "minZoom": 4,
        "maxZoom": 12
    },
    "layers": [
        {
            "type": "items",
            "aggregation": {
                "enabled": true,
                "weightFunction": function (node) {
                        return node.population / 25000;
                    }
            },
            "style": {
                "nodeStyleFunction": function (node) { 
                        node.label = node.data.name; 
                        var aggr = node.data.aggregatedNodes;
                        var w = node.data.aggregatedWeight;
                        var pop = w;
                        if(pop < 6) {
                            pop = 6;
                        } else if(pop > 100) {
                            pop = 100;
                        }
                        
                        node.radius = pop;
                        node.fillColor = "#2fc32f";
                        node.lineColor = "#b0dc0b";
                        node.lineWidth = 4;
                        node.labelStyle = {
                            backgroundStyle: {
                                fillColor:"#eab404",
                                lineColor:"#de672c",
                                lineWidth:1
                            },
                            textStyle: {
                                fillColor: "#de672c"
                            }
                        }
                    }
            }
        }
    ],
    "container": "demo",
    "data": [
        {
            "url": "\/data\/usa-largest-capitals.json"
        }
    ],
    "interaction": {
        "resizing": {
            "enabled": false
        }
    }
})
HTML
      <script src="https://cdn.zoomcharts-cloud.com/1/latest/zoomcharts.js"></script>
      <div id="demo"></div>
Data