疫情数据的地图可视化D3.js

一界面展示：

1.主页：

点击链接即可跳转对应的疫情地图可视化界面，加强可交互功能。

 2.截止2020.3.28各国新冠确诊人数—地图可视化结果如下（有几个国家数据缺少或实在无法匹配上名称，数据缺失，地图中显示的为纯黑色区域；右上角为图例）：

3.截止2020.3.28各国新冠死亡人数—地图可视化结果如下：

4.截止2020.3.28各国新冠治愈人数—地图可视化结果如下：

二数据处理：

1.数据匹配

covid19 - 03-28-2020.csv表格中有些国家的名称和world_countries.json文件中的国家名称不一致，需要手动更换表格中的内容，或者在代码中进行等价转换。这里我选择的是不改变表格的内容，上网查询国家名称信息，手动调节代码，使之信息一致。

例如，在遍历covid19 - 03-28-2020.csv中使国家名称与world_countries.json中的一致：

       Confirmed.forEach(function (d) {

            if(d.Country_Region=="Korea, South")

               d.Country_Region="South Korea"

            if(d.Country_Region=="United Kingdom")

               d.Country_Region="England"

            if(d.Country_Region=="Taiwan")

                d.Country_Region="China"

            if(d.Country_Region=="Congo (Brazzaville)")

               d.Country_Region="Democratic Republic of the Congo"

            if(d.Country_Region=="Congo (Kinshasa)")

               d.Country_Region="Republic of the Congo"

            if(d.Country_Region=="Tanzania")

               d.Country_Region="United Republic of Tanzania"

            if(d.Country_Region=="Cote d'Ivoire")

               d.Country_Region="Ivory Coast"

            if(d.Country_Region=="Serbia")

               d.Country_Region="Republic of Serbia"

            confirmedById[d.Country_Region] +=Number(d.Confirmed);  

        });

以及在遍历world_countries.json中使国家名称与covid19 - 03-28-2020.csv中的一致：

若表格中没有对应国家的疫情数据，则填充地图的值为NaN，地图上的该国家的颜色绘制为纯黑色。

2.图例制作：

根据我们地图填充颜色时的设定：

 var color = d3.scaleThreshold()

.domain([0, 10, 100, 500, 1000,10000,50000])

.range(["rgb(247,251,255)","rgb(220,220,220)","rgb(190,190,190)","rgb(160,170,180)","rgb(120,130,150)", "rgb(100,100,100)","rgb(20,80,100)"]);

来设定图例：

var data_legend = [
        {"name":"0-10",
        "color":"rgb(247,251,255)"
        },{
        "name":"10-100",
        "color":"rgb(220,220,220)"
        },{
        "name":"100-500",
        "color":"rgb(190,190,190)"
        },{
        "name":"500-1000",
        "color":"rgb(160,170,180)"
        },{
        "name":"1000-10000",
        "color":"rgb(120,130,150)"
        },{
        "name":"10000-50000",
        "color":"rgb(100,100,100)"
        },{
        "name":"50000",
        "color":"(20,80,100)"
        }];
    var legend = svg.selectAll(".legend") 
        .data(data_legend)
        .enter().append("g")
        .attr("class", "legend")
        .attr("transform", function(d, i) { return "translate(-30," + (i * 20 + 130) + ")"; });  
    legend.append("rect")
        .attr("x", width - 225-100) 
        .attr("y", 138+20)
        .attr("width", 40)
        .attr("height", 3) 
        .style("fill", function(d){
         return d.color
         });
    legend.append("text")
        .attr("x", width - 230-100)
        .attr("y", 145+20)
        .style("text-anchor", "end") 
        .text(function(d) { 
        return d.name;
        });

如有完整代码需求，请私信发邮箱哈