Map with overlaid pie charts

author(s): Øystein Moseng

by prateekbansal07

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.15/proj4.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/maps/modules/map.js"></script>
<script src="https://code.highcharts.com/maps/modules/series-on-point.js"></script>
<script src="https://code.highcharts.com/maps/modules/exporting.js"></script>
<script src="https://code.highcharts.com/maps/modules/offline-exporting.js"></script>
<script src="https://code.highcharts.com/maps/modules/accessibility.js"></script>

<div id="container"></div>

CSS

#container {
    min-width: 320px;
    max-width: 800px;
    height: 500px;
    margin: 1em auto;
}

JavaScript

(async () => {
    const mapData = await fetch(
        'https://code.highcharts.com/mapdata/countries/us/us-all.topo.json'
    ).then(response => response.json());

    const data = [
            // state, demVotes, repVotes, libVotes, grnVotes, sumVotes, winner, offset config for pies
            ['Alabama', 729547, 1318255, 44467, 9391, 2101660, -1],
            ['Alaska', 116454, 163387, 18725, 5735, 304301, -1],
            ['Arizona', 1161167, 1252401, 106327, 34345, 2554240, -1],
            ['Arkansas', 380494, 684782, 29829, 9473, 1104578, -1],
            ['California', 8577206, 4390272, 467370, 271047, 13705895, 1, { lon: -1, drawConnector: false }],
            ['Colorado', 1338870, 1202484, 144121, 38437, 2723912, 1],
            ['Connecticut', 897572, 673215, 48676, 22841, 1642304, 1, { lat: -1.5, lon: 1 }],
            ['Delaware', 235603, 185127, 14757, 6103, 441590, 1, { lat: -1.3, lon: 2 }],
            ['District of Columbia', 282830, 12723, 4906, 4258, 304717, 1, { lat: -2, lon: 2 }],
            ['Florida', 4504975, 4617886, 207043, 64399, 9394303, -1],
            ['Georgia', 1877963, 2089104, 125306, 0, 4092373, -1],
            ['Hawaii', 266891, 128847, 15954, 12737, 424429, 1, { lat: -0.5, lon: 0.5, drawConnector: false }],
            ['Idaho', 189765, 409055, 28331, 8496, 635647, -1],
            ['Illinois', 2977498, 2118179, 208682, 74112, 5378471, 1],
            ['Indiana', 1039126, 1557286, 133993, 7841, 2738246, -1],
            ['Iowa', 653669, 800983, 59186, 11479, 1525317, -1],
            ['Kansas', 427005, 671018, 55406, 23506, 1176935, -1],
            ['Kentucky', 628854, 1202971, 53752, 13913, 1899490, -1],
            ['Louisiana', 780154, 1178638, 37978, 14031, 2010801, -1],
            ['Maine', 352156, 332418, 37578, 13995, 736147, 1],
            ['Maryland', 1502820, 878615, 78225, 33380, 2493040, 1, { lon: 0.6, drawConnector: false }],
            ['Massachusetts', 1995196, 1090893, 138018, 47661, 3271768, 1, {...