当前位置：网站首页>Work report of epidemic data analysis platform [6.5] epidemic map

Work report of epidemic data analysis platform [6.5] epidemic map

2022-06-12 04:13:00 【m0_ fifty-five million six hundred and seventy-five thousand ei】

The data structure is as follows .
Insert picture description here
We use the first csv file . The column information is as follows .

Insert picture description here
Import dependence .

import numpy as np
import pandas as pd
import plotly.graph_objs as go
import plotly.io as pio
pio.renderers.default = "browser"


# Read Data
df = pd.read_csv("dataset/covid_19_data.csv")
# Rename columns
df = df.rename(columns={
    'Country/Region': 'Country'})
df = df.rename(columns={
    'ObservationDate': 'Date'})
# Manipulate Dataframe
df_countries = df.groupby(['Country', 'Date']).sum().reset_index().sort_values('Date', ascending=False)
print(df_countries)
df_countries = df_countries.drop_duplicates(subset=['Country'])
df_countries = df_countries[df_countries['Confirmed'] > 0]
# Create the Choropleth

fig = go.Figure(data=go.Choropleth(
    locations=df_countries['Country'],
    locationmode='country names',
    z=df_countries['Confirmed'],
    colorscale='reds',
    marker_line_color='black',
    marker_line_width=0.5,
))
fig.update_layout(
    title_text='Confirmed Cases as of 2021/5/3',
    title_x=0.5,
    geo=dict(
        showframe=False,
        showcoastlines=False,
        projection_type='equirectangular'
    )
)
fig.show()

The first part reads the data first 

# Read Data
df = pd.read_csv("dataset/covid_19_data.csv")

Rename column , Easy to operate 

df = df.rename(columns={
    'Country/Region': 'Country'})
df = df.rename(columns={
    'ObservationDate': 'Date'})

Rearrange data and clean 

df_countries = df.groupby(['Country', 'Date']).sum().reset_index().sort_values('Date', ascending=False)
print(df_countries)
df_countries = df_countries.drop_duplicates(subset=['Country'])
df_countries = df_countries[df_countries['Confirmed'] > 0]
# Create the Choropleth

drawing 

fig = go.Figure(data=go.Choropleth(
    locations=df_countries['Country'],
    locationmode='country names',
    z=df_countries['Confirmed'],
    colorscale='reds',
    marker_line_color='black',
    marker_line_width=0.5,
))
fig.update_layout(
    title_text='Confirmed Cases as of 2021/5/3',
    title_x=0.5,
    geo=dict(
        showframe=False,
        showcoastlines=False,
        projection_type='equirectangular'
    )
)
fig.show()

The above is a static diagram , There is no kinetic energy of interaction . But relative , Rendering 、 The speed of drawing will become faster , At the same time, the saved data takes up less .

Import dependence 

import numpy as np
import plotly.express as px
import pandas as pd
import plotly.graph_objs as go
import plotly.io as pio

Reading data 、 Name change 

pio.renderers.default = "browser"
df = pd.read_csv("dataset/covid_19_data.csv")
df = df.rename(columns={
    'Country/Region': 'Country'})
df = df.rename(columns={
    'ObservationDate': 'Date'})

cleaning 

# Manipulating the original dataframe
df_countrydate = df[df['Confirmed'] > 0]
df_countrydate['Date'] = pd.to_datetime(df_countrydate['Date']).apply(lambda x: x.strftime('%Y-%m-%d'))

df_countrydate = df_countrydate.groupby(['Country', 'Date']).sum().reset_index().sort_values('Date', ascending=True)
print(df_countrydate)

drawing 

fig = px.choropleth(df_countrydate,
                    locations="Country",
                    locationmode="country names",
                    color="Confirmed",
                    hover_name="Country",
                    animation_frame="Date",
                    )
fig.update_layout(
    title_text='Global Spread of Coronavirus',
    title_x=0.5,
    geo=dict(
        showframe=False,
        showcoastlines=False,
    ))

fig.show()

The above is the use of python The generated presentation is html A graph of form .
Besides , You can also use the front-end drawing , for example Echarts.

1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4   <meta charset="UTF-8">
  5   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6   <title> Epidemic map display </title>
  7   <style>
  8     .container {
    
  9       width: 1200px;
 10       margin: 0 auto;
 11     }
 12 
 13     #myEcharts {
    
 14       width: 800px;
 15       height: 500px;
 16       border: solid 1px red;
 17       margin: 0 auto;
 18     }
 19   </style>
 20   <script src="https://www.echartsjs.com/examples/vendors/jquery/jquery.js"></script>
 21   <!--  introduce  echarts.js -->
 22   <script src="https://www.echartsjs.com/examples/vendors/echarts/echarts.min.js?_v_=1578305236132"></script>
 23   <!-- Introducing Chinese map data js file , The map name and data will be automatically registered after introduction -->
 24   <script src="https://www.echartsjs.com/examples/vendors/echarts/map/js/china.js?_v_=1578305236132"></script>
 25 
 26 </head>
 27 
 28 <body>
 29   <div class="container">
 30     <h3> The cumulative number of confirmed cases is as follows ：</h3>
 31     <!-- by echarts Prepare one dom Containers -->
 32     <div id="myEcharts"></div>
 33   </div>
 34 
 35 
 36   <script>
 37     // initialization echarts example 
 38     var myChart = echarts.init(document.getElementById('myEcharts'));
 39     //  Specify configuration items and data for the chart 
 40     option = {
    
 41       title: {
    
 42         text: ' Epidemic situation map of China ',
 43         left: 'center'
 44       },
 45       tooltip: {
    
 46         trigger: 'item'
 47       },
 48       legend: {
    
 49         orient: 'vertical',
 50         left: 'left',
 51         data: [' Epidemic situation map of China ']
 52       },
 53       visualMap: {
    
 54         type: 'piecewise',
 55         pieces: [
 56           {
     min: 1000, max: 1000000, label: ' Greater than or equal to 1000 people ', color: '#372a28' },
 57           {
     min: 500, max: 999, label: ' Diagnosis 500-999 people ', color: '#4e160f' },
 58           {
     min: 100, max: 499, label: ' Diagnosis 100-499 people ', color: '#974236' },
 59           {
     min: 10, max: 99, label: ' Diagnosis 10-99 people ', color: '#ee7263' },
 60           {
     min: 1, max: 9, label: ' Diagnosis 1-9 people ', color: '#f5bba7' },
 61         ],
 62         color: ['#E0022B', '#E09107', '#A3E00B']
 63       },
 64       toolbox: {
    
 65         show: true,
 66         orient: 'vertical',
 67         left: 'right',
 68         top: 'center',
 69         feature: {
    
 70           mark: {
     show: true },
 71           dataView: {
     show: true, readOnly: false },
 72           restore: {
     show: true },
 73           saveAsImage: {
     show: true }
 74         }
 75       },
 76       roamController: {
    
 77         show: true,
 78         left: 'right',
 79         mapTypeControl: {
    
 80           'china': true
 81         }
 82       },
 83       series: [
 84         {
    
 85           name: ' Number of confirmed cases ',
 86           type: 'map',
 87           mapType: 'china',
 88           roam: false,
 89           label: {
    
 90             show: true,
 91             color: 'rgb(249, 249, 249)'
 92           },
 93           data: []
 94         }
 95       ]
 96     };
 97 
 98     // Use the specified configuration items and data to display the chart 
 99     myChart.setOption(option);
100 
101     // get data 
102     function getData() {
    
103       $.ajax({
    
104         url: "https://view.inews.qq.com/g2/getOnsInfo?name=disease_h5",
105         dataType: "jsonp",
106         success: function (data) {
    
107           // console.log(data.data)
108           var res = data.data || "";
109           res = JSON.parse(res);
110           var newArr = [];
111           //newArr The data format of is ：
112           // [{
    
113           // name: ' Beijing 11',
114           // value: 212
115           // }, {
    
116           // name: ' tianjin ',
117           // value: 60
118           // }]
119           if (res) {
    
120             // Get the data of each province 
121             var province = res.areaTree[0].children;
122             for (var i = 0; i < province.length; i++) {
    
123               var json = {
    
124                 name: province[i].name,
125                 value: province[i].total.confirm
126               }
127               newArr.push(json)
128             }
129             console.log(newArr)
130             console.log(JSON.stringify(newArr))
131             // Use the specified configuration items and data to display the chart 
132             myChart.setOption({
    
133               series: [
134                 {
    
135                   name: ' Number of confirmed cases ',
136                   type: 'map',
137                   mapType: 'china',
138                   roam: false,
139                   label: {
    
140                     show: true,
141                     color: 'rgb(249, 249, 249)'
142                   },
143                   data: newArr
144                 }
145               ]
146             });
147           }
148         }
149 
150       })
151     }
152     getData();
153 
154   </script>
155 </body>
156 </html>
原网站

版权声明
本文为[m0_ fifty-five million six hundred and seventy-five thousand ei]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/163/202206120409334973.html

边栏推荐

猜你喜欢

随机推荐