Twitter data with dynamic colored shapes

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

<p>When zoomed out nodes are being aggregated. Node color depends on whether a tweet mentions "Putin" or "Obama".</p>
<p>Opacity of the country shapes depends on the tweet count in the country, and the color of the countries is determined by the most popular term in the tweets (Obama/Putin)</p>
<div id="demo"></div>

//No CSS for this example 

    function tweetPostprocess(data) {
        data = JSON.parse(data);
        var result = [];
        for (var i = 0; i < data.length; i++) {
            var n = data[i];
            n.type = "point";
            n.coordinates = [n.geo_long, n.geo_lat];
            result.push(n);
        }
        return { nodes: result };
    }
    //var areaColorMap = ["#0e3293", "#40266f", "#731a4c", "#c60d23", "#ff0000"];
    var areaColorMap = ["#b0dc0b", "#00aaff"];

    function mapColor(position) {
        var count = areaColorMap.length - 1;
        var p0 = Math.min(count - 1, Math.floor(position * count));
        position = position * count - p0;
        var c0 = areaColorMap[p0];
        var c1 = areaColorMap[p0 + 1];

        var r1 = parseInt(c0.slice(1, 3), 16);
        var r2 = parseInt(c1.slice(1, 3), 16);
        var g1 = parseInt(c0.slice(3, 5), 16);
        var g2 = parseInt(c1.slice(3, 5), 16);
        var b1 = parseInt(c0.slice(5, 7), 16);
        var b2 = parseInt(c1.slice(5, 7), 16);
        return { red: r1 * (1 - position) + r2 * position, green: g1 * (1 - position) + g2 * position, blue: b1 * (1 - position) + b2 * position };
    }

    function getNodeColor(data) {
        var str = data.tweet_text.toLowerCase();
        var isObama = str.indexOf("obama") > -1;
        var isPutin = str.indexOf("putin") > -1;
        var color;
        if (isObama && isPutin) {
            color = "orange";
        } else if (isObama) {
            color = "#2fc32f";
        } else if (isPutin) {
            color = "#00aaff";
        } else {
            color = "grey";
        }

        return color;

    }

    function getNodeName(data) {
        var str = data.tweet_text.toLowerCase();
        var isObama = str.indexOf("obama") > -1;
        var isPutin = str.indexOf("putin") > -1;
        var name = "";
        if (isObama && isPutin) {
            name = "obama and putin";
        } else if (isObama) {
            name = "obama";
        } else if (isPutin) {
            name = "putin";
        } else {
        }

        return name;

    }

    var query = "";
    var numNodes = 1000;

    var settings = {
        container:document.getElementById("demo"),
        area: { height: null },
        info: {
            enabled: true,
            nodeContentsFunction: function (nodeData) {
                if (nodeData.tweet_text) {
                    return "<p>" + nodeData.tweet_text.replace(/strong\>/g, "i>") + "</p>";
                } else {
                    return nodeData.name;
                }
            }
        },
        data: [
            {
                id: "shapes",
                format: "GeoJSON",
                url: "/dvsl/data/geo-chart/countries.geo.json",
                perDrilldownData: false,
                perZoomData: false,
                perBoundsData: false
            },
            {
                id: "twitter",
                url: "/dvsl/data/geo-chart/twitter.json",
                urlParameters: [
                    {
                        name: "method",
                        value: "getGeoTweets"
                    },
                    {
                        name: "limit",
                        value: "" + numNodes + ""
                    },
                    {
                        name: "q",
                        value: "{obama putin} " + query
                    }
                ],
                postprocessorFunction: tweetPostprocess,
                perDrilldownData: false,
                perZoomData: false,
                perBoundsData: false
            }
        ],
        background: {
            enabled: true
        },
        layers: [
            {
                id: "shapes",
                type: "shapes",
                data: {
                    id: "shapes"
                },
                style: {
                    node: { 
                        fillColor: null, 
                        lineColor: "transparent" 
                    },
                    nodeStyleFunction: function (node) {
                        node.fillColor = null;
                        node.label = node.data.name;
                    }
                }
            },
            {
                id: "twitter",
                type: "items",
                enabled: true,
                minZoom: 7,
                data: {
                    id: "twitter"
                },
                style: {
                    nodeStyleFunction: function (node) {
                        node.display = "text";
                        node.labelStyle = { textStyle: { fillColor: "white" } };
                        node.label = getNodeName(node.data);
                        node.fillColor = getNodeColor(node.data);
                        node.lineColor = "white";
                    }
                }
            },
            {
                id: "twitterPoints",
                type: "items",
                enabled: true,
                minZoom: 3,
                maxZoom: 6,
                data: {
                    id: "twitter"
                },
                style: {
                    nodeStyleFunction: function (node) {
                        node.label = "";
                        node.fillColor = getNodeColor(node.data);
                        node.lineColor = null;
                        node.radius = 3;
                    }
                }
            },
            {
                // The layer with shapes of the countries
                enabled: true,
                id: "twitterAggr",
                data: {
                    id: "twitter"
                },
                type: "aggregateOnShapes",
                shapesLayer: "shapes",
                aggregationFunction: function (values) {
                    var obama = 0;
                    var putin = 0;
                    for (var i = 0; i < values.length; i += 1) {
                        var data = values[i];
                        var str = data.tweet_text.toLowerCase();
                        if (str.indexOf("obama") > -1)
                            obama += 1;
                        if (str.indexOf("putin") > -1)
                            putin += 1;
                    }

                    return [obama, putin];
                },
                styleFunction: function (node, value) {
                    var obama = value[0];
                    var putin = value[1];
                    if (obama + putin > 0) {
                        var proportion = (-obama + putin) / (putin + obama); // -1 = obama, 1 = putin
                        var intensity = Math.min(putin + obama, 50) / 50;
                        var col = mapColor((proportion + 1) / 2);
                        var opacity = Math.min(0.8, intensity);
                        if (node.hovered) {
                            opacity = getOpacityByLevel(chart.zoomLevel());
                        }
                        node.fillColor = "rgba(" + Math.round(col.red) + "," + Math.round(col.green) + "," + Math.round(col.blue) + "," + opacity + ")";
                    } else if (node.hovered) {
                        node.fillColor = "rgba(0,0,0,0.1)";
                    }
                }
            }
        ],
        navigation: {
            drilldownLayer: "shapes",
            minZoom: 2,
            initialZoom: 2,
            initialLng: -25,
            initialLat: 48.92
        },
        advanced: {
            style: {
                loadingArcStyle: {
                    location: "center"
                }
            }
        }
    };
    
    function getOpacityByLevel(level) {
        var opacity = 0.5;
        opacity = opacity * (1 / (Math.max(level, 5) - 4));
        return opacity;
    }

    var chart = new GeoChart(settings);

//No separate data for this example