Back

Agreggated Pie Charts on Geo Chart

JavaScript map chart that displays each location node as a pie chart. With 'aggregation' enabled, nearby nodes will be merged together and display aggregate values - zoom in to expand. Use the toggle to compare difference between on and off.

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