Back

Agreggated Pie Charts on Geo Chart

Depending on a zoom level of the map the data is automatically aggregated and displayed in PieCharts.

Data taken from Wikipedia

In order to fit the Pie Charts on the Geo Chart, pie radius is scaled in a logarithmic scale.

Node aggregation can be toggled:

Documentation Open in JSFiddle
Start Free Trial Purchase

HTML

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

<p>Data taken from <a href="http://en.wikipedia.org/wiki/List_of_countries_by_GDP_sector_composition#Nominal_GDP_sector_composition" target="_blank">Wikipedia</a></p>
<p>In order to fit the Pie Charts on the Geo Chart, pie radius is scaled in a logarithmic scale.</p>
<p>Node aggregation can be toggled:</p>
    <div id="demo-aggr">
        <div class="aggregation-toggle">
            <input type="checkbox" checked="checked" id="enableAggr" value="1" /><label for="enableAggr">Enable aggregation</label>
        </div>
    </div>
    <div id="demo"></div>

CSS

CSS 
.DVSL-leaflet {
        background-color: #1E3843 !important; /* Masking of a Leaflet+Chrome bug */
    }

JavaScript

JavaScript 

    var hasProp = {}.hasOwnProperty;
    var sliceColors = ["#2fc32f", "#b0dc0b", "#eab404", "#de672c"];
    var enableAggregation = true;
    var options = {
        area: { height: null },
        container: document.getElementById("demo"),
        background:{
            url: "https://maps.zoomcharts.com/{z}/{x}/{y}.png"
        },
        data:[
            {
                id: "gdp",
                url: "/dvsl/data/geo-chart/nominal_gdp_composition.json",
                perBoundsData: false
            }
        ],
        layers:[
            {
                id: "piePositions",
                type: "items",
                data: {
                    id: "gdp"
                },
                aggregation: {
                    enabled: true,
                    distance: 70,
                    weightFunction: function (node) {
                        var sum = 0;
                        for (var key in node.gdp) {
                            if (hasProp.call(node.gdp, key)) {
                                sum += node.gdp[key];
                            }
                        }
                        return sum;
                    }
                },
                style: {
                    nodeAutoScaling: null,
                    nodeStyleFunction: function (node) {
                        var r;
                        if (enableAggregation) {
                            r = node.data.aggregatedWeight;
                        } else {
                            r = 0;
                            for (var key in node.data.gdp) {
                                if (hasProp.call(node.data.gdp, key)) {
                                    r += node.data.gdp[key];
                                }
                            }
                        }
                        // in order to fit nodes on the chart, display the radius in a logarithmic scale
                        node.radius = Math.log(Math.max(2, r * 1e-6)) * 15;

                        // Show the country names, if an aggregation contains only 1 node
                        var aggr;
                        if (enableAggregation) {
                            aggr = node.data.aggregatedNodes;
                        } else {
                            aggr = [node];
                        }
                        if (aggr.length === 1) {
                            node.label = aggr[0].id;
                        } else {
                            node.display = "image";
                            node.label = "" + aggr.length + "&nbsp;countries";
                        }
                    },
                    node: {
                        radius: void 0,
                        fillColor: "rgba(0, 0, 0, 0.9)",
                        lineColor: null,
                        label: "",
                        display: "droplet"
                    },
                    nodeHovered: {
                        shadowColor: "black"
                    },
                    nodeLabel: {
                        backgroundStyle: {
                            fillColor: "rgba(0, 0, 0, 0.9)",
                            lineColor: "rgba(0, 0, 0, 0.9)"
                        },
                        textStyle: {
                            fillColor: "#ccc"
                        }
                    },
                    removedColor: null
                }
            }, {
                id: "pie",
                type: "charts",
                shapesLayer:"piePositions",
                chartType: "piechart",
                settingsFunction: function (node, data) {
                    var aggr;
                    if (enableAggregation) {
                        aggr = data.aggregatedNodes;
                    } else {
                        aggr = [data];
                    }

                    if (aggr.settingsApplied) return {
                        pie: { radius: node.removed ? 1e-30 : node.radius - 3, innerRadius: 5 }
                    };
                    aggr.settingsApplied = true;

                    var pieData = {subvalues: []};

                    // When displaying aggregated GDP of a region, summarize the GDP sectors
                    var gdp = {
                        Agriculture: 0,
                        Industry: 0,
                        Service: 0
                    };
                    for (var i = 0; i < aggr.length; i++) {
                        var c = aggr[i];
                        for (var j in c.gdp) {
                            if (hasProp.call(gdp, j)) {
                                gdp[j] += c.gdp[j];
                            }
                        }
                    }
                    var radius = 0;
                    for (var key in gdp) {
                        if (hasProp.call(gdp, key)) {
                            pieData.subvalues.push({
                                value: gdp[key],
                                name: key
                            });
                        }
                    }
                    return {
                        pie: {
                            radius: node.radius - 3,
                            innerRadius: 5,
                            style: {
                                sliceColors: sliceColors,
                                colorDistribution: "list"
                            }
                        },
                        data: {
                            preloaded: pieData
                        },
                        labels: {enabled: false},
                        info: {
                            contentsFunction: function (data) {
                                return "" + data.name + " " + data.value.toLocaleString() + "M $";
                            }
                        }
                    };
                }
            }
        ],
        navigation:{
            initialLat: 30,
            initialLng: 10,
            initialZoom: 2
        }
    };
    chart = new GeoChart(options);

    var toggle = document.getElementById("enableAggr");
    if (toggle) {
        toggle.addEventListener("change", function () {
            enableAggregation = this.checked;
            options.layers[0].aggregation.enabled = enableAggregation;
            chart.updateSettings({
                layers: options.layers
            });
        });
    }

Data

Data 
//No separate data for this example