Visualizing pie charts on a map

Question

I have an excel where each row has latitude and longitude data associated with some integer values. I would like to visualize this as pie charts on a map.

What I tried so far:

1. Google Data Studio: The only drawback here is that we cannot zoom on the map and the map is zoomed at country level but all my data is about a district in a city.
2. Python with Folium: Folium is a wrapper for Leaflet.js which is excellent for geographical visualization. However it lacks pie chart feature. I looked at integrating with Vega but that is only good for popups on Markers. This is not good, I want the pie charts on the map directly.

Can you recommend any free tool, or Python solution for this?

I come from a Python background mainly, but I welcome JS based solutions as well.

Answer 1

I think Highcharts can help you with what you are looking for. They are based on javascript.

An example for precisely what you are looking for -

https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/maps/demo/map-pies/

{
title: {
    text: 'USA 2016 Presidential Election Results'
},

chart: {
    animation: false // Disable animation, especially for zooming
},

colorAxis: {
    dataClasses: [{
        from: -1,
        to: 0,
        color: 'rgba(244,91,91,0.5)',
        name: 'Republican'
    }, {
        from: 0,
        to: 1,
        color: 'rgba(124,181,236,0.5)',
        name: 'Democrat'
    }, {
        from: 2,
        to: 3,
        name: 'Libertarian',
        color: libColor
    }, {
        from: 3,
        to: 4,
        name: 'Green',
        color: grnColor
    }]
},

mapNavigation: {
    enabled: true
},
// Limit zoom range
yAxis: {
    minRange: 2300
},

tooltip: {
    useHTML: true
},

// Default options for the pies
plotOptions: {
    mappie: {
        borderColor: 'rgba(255,255,255,0.4)',
        borderWidth: 1,
        tooltip: {
            headerFormat: ''
        }
    }
},

series: [{
    mapData: Highcharts.maps['countries/us/us-all'],
    data: data,
    name: 'States',
    borderColor: '#FFF',
    showInLegend: false,
    joinBy: ['name', 'id'],
    keys: ['id', 'demVotes', 'repVotes', 'libVotes', 'grnVotes',
        'sumVotes', 'value', 'pieOffset'],
    tooltip: {
        headerFormat: '',
        pointFormatter: function () {
            var hoverVotes = this.hoverVotes; // Used by pie only
            return '<b>' + this.id + ' votes</b><br/>' +
                Highcharts.map([
                    ['Democrats', this.demVotes, demColor],
                    ['Republicans', this.repVotes, repColor],
                    ['Libertarians', this.libVotes, libColor],
                    ['Green', this.grnVotes, grnColor]
                ].sort(function (a, b) {
                    return b[1] - a[1]; // Sort tooltip by most votes
                }), function (line) {
                    return '<span style="color:' + line[2] +
                        // Colorized bullet
                        '">\u25CF</span> ' +
                        // Party and votes
                        (line[0] === hoverVotes ? '<b>' : '') +
                        line[0] + ': ' +
                        Highcharts.numberFormat(line[1], 0) +
                        (line[0] === hoverVotes ? '</b>' : '') +
                        '<br/>';
                }).join('') +
                '<hr/>Total: ' + Highcharts.numberFormat(this.sumVotes, 0);
        }
    }
}, {
    name: 'Separators',
    type: 'mapline',
    data: Highcharts.geojson(Highcharts.maps['countries/us/us-all'], 'mapline'),
    color: '#707070',
    showInLegend: false,
    enableMouseTracking: false
}, {
    name: 'Connectors',
    type: 'mapline',
    color: 'rgba(130, 130, 130, 0.5)',
    zIndex: 5,
    showInLegend: false,
    enableMouseTracking: false
}]

}