如何繪製全球新冠病毒疫情動態分佈圖

目前新型冠狀病毒疫情已經蔓延到全球，截止北京時間8日上午9時，全球確診140萬人，其中美國確診人數超40萬人，正如局座所說這次疫情不亞於第三次世界大戰。大家除了注意全球疫情動態，更要注重個人防護，避免給國家添亂。

利用數據的時序性分析對於疫情分佈和控制具有指導意義，也可以使大家直觀的看到疫情的發展趨勢。下面是從2020年1月22日起到2020年4月8日的世界各國疫情數據繪製的確診，治癒，死亡人數動態分佈圖。鏈接：http://map.ziptop.top/

全球確診人數動態分佈圖

全球治癒人數動態分佈圖

全球死亡人數動態分佈圖

一、數據獲取

數據來自約翰斯·霍普金斯大學統計數據Johns Hopkins University Center for Systems Science and Engineering (CSSE) 。

也可以使用https://github.com/datasets/covid-19 上提供的更全面的數據

約翰斯·霍普金斯大學（Johns Hopkins University），簡稱Hopkins或JHU，成立於1876年，是一所世界頂級的著名私立大學，美國第一所研究型大學。世界大學排名世界第12，美國第9 。該校醫學院的教學研究單位約翰斯·霍普金斯醫院（JHH）連續21年被評爲全美最佳醫院。學校共有37人獲得過諾貝爾獎。其尼采高級國際研究學院（SAIS）培養出美國國務卿奧爾布賴特、財政部長蓋特納、世界銀行行長埃因霍、中國駐美大使崔天凱等

二、數據處理

在繪圖前需要將數據整理爲下面這種 json 格式

三、數據可視化

可視化用到的是 Echarts，框架爲bootstrap

var map_chart = echarts.init(document.getElementById('main'));
map_chart.showLoading();
$.get("./data/case/"+type_name+".json",function(data,status){
    let input_data = data;
    $.get('./data/map/world.json', function (mapJson) {
        map_chart.hideLoading();

        echarts.registerMap('world', mapJson, {

        });
        option = {
            baseOption: {
                timeline: {
                    axisType: 'category',
                    loop: false,
                    autoPlay: true,
                    playInterval: 100,
                    controlStyle: {
                        position: 'left'
                    },
                    data: input_data.time_line,
                    currentIndex:0

                },
                visualMap: {
                    left: 'right',
                    show: false,
                    pieces: [
                        {min: 50000, color: colors[7]},
                        {min: 10000, max: 50000, color: colors[6]},
                        {min: 5000, max: 10000, color: colors[5]},
                        {min: 1000, max: 5000, color: colors[4]},
                        {min: 500, max: 1000, color: colors[3]},
                        {min: 50, max: 500, color: colors[2]},
                        {min: 10, max: 50, color: colors[1]},
                        {min: 1, max: 10, color: colors[0]},
                        {max: 0, color: colors[0]},
                    ],
                },
                series:[
                    {
                        type: 'map',
                        roam: true,
                        map: 'world',
                    },
                ],

                tooltip: {
                    trigger: 'item',
                    showDelay: 0,
                    transitionDuration: 0.2,
                    formatter: function (params) {
                        var value = (params.value + '').split('.');
                        value = value[0].replace(/(\d{1,3})(?=(?:\d{3})+(?!\d))/g, '$1,');
                        return type_name + '<br/>' + params.name + ': ' + value;
                    }
                },
                title:{
                    x:'center',
                    y:'top',
                    textAlign:'left',
                    textStyle: {
                        color: "#333",
                        fontSize: 14
                    }
                }
            },
            options:input_data.data
            ,

        };

        map_chart.setOption(option);
    });
});