共通データ8を使用(2つの試行の1日あたりのコロナ増加数を比較)

63557 ワード

ターゲット:2つの試行の毎日コロナ増加数を比較する

やるべきこと

入力テキストに対応するindexのみインポート

初期試行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.min.js"></script>
</head>
<body>

<input type="text" id="city1">
<input type="text" id="city2">
<button type="submit" id="but">입력버튼</button>
<div id="table"></div>
<div id="plot"></div>
<script>
    let input1 = document.getElementById('city1')
    let input2 = document.getElementById('city2')
    let button = document.getElementById('but');

    button.addEventListener('click',function() {
        async function load() {
            const get_date = [];
            const get1 = [], get2 = [];
            let city_index1, city_index2,city_name1 = input1.value, city_name2 = input2.value;


            const datas = await Promise.all(Set_Date().map(date =>
                dfd.read_csv(`https://khw970421.github.io/covid/Modify_Danfo/Data/Date/${date}.csv`)
            ));

            datas[0].body__items__item__gubun.data.forEach((data)=>{
                if(data == city_name1)
                    city_index1 = datas[0].body__items__item__gubun.data.indexOf(data);
                if(data == city_name2)
                    city_index2 = datas[0].body__items__item__gubun.data.indexOf(data);
            })

            datas.forEach(data => {
                get1.push(data.body__items__item__incDec.data[city_index1]);
                get2.push(data.body__items__item__incDec.data[city_index2]);
                get_date.push(data.body__items__item__stdDay.data[0]);
            })
            let df_sum1 = new dfd.DataFrame({city_name1:get1,city_name2:get2},{index:get_date});  //df_sum은 Series 형태이므로 DataFrame 형태로 변환
            df_sum1.plot('plot').line();
            console.log(typeof input1.value)
        }

        load();
    });
    function Set_Date(){
        let tDate = new Date('2020-03-03'); // 2020년 03월 04일 부터 시작
        let Year,Month,Day;                 // 각 날짜별 날짜 생성
        const date_array = [];              // 해당 필요부분 넣을 배열 생성
        for(let i=0;i<28;i++)
        {
            tDate.setDate(tDate.getDate()+1)        // 3월 4일 계산 후 하루씩 증가
            Year = tDate.getFullYear().toString().slice(2,4);       // 2020년이 아닌 뒤의 두자리 수만 필요하므로 slice 사용
            Month = (tDate.getMonth()+1).toString().length==1 ? '0'+ (tDate.getMonth()+1).toString() :(tDate.getMonth()+1).toString() ; // 한자리 수 인경우 앞에 0을 붙인다.
            Day = tDate.getDate().toString().length==1? '0'+tDate.getDate().toString() : tDate.getDate().toString();
            date_array.push(Year+Month+Day);    //합친 내용을 배열로 만들어 준다.
        }
        return date_array;     //해당 배열을 반환한다.
    }
</script>
</body>
</html>

初期結果

普通に欲しい地域を書いて入力すると、結果が出てきます.

に質問

제주서울と書く必要があると思います.そうすれば、誤字の間違いがたくさん出るのではないでしょうか.

ソリューション(select option)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.min.js"></script>
</head>
<body>
<h1>코로나 지역별 증가량 구분하기</h1>
<select id="city1">
    <option>제주</option>
    <option>경남</option>
    <option>경북</option>
    <option>전남</option>
    <option>전북</option>
    <option>충남</option>
    <option>충북</option>
    <option>강원</option>
    <option>경기</option>
    <option>세종</option>
    <option>울산</option>
    <option>대전</option>
    <option>광주</option>
    <option>인천</option>
    <option>대구</option>
    <option>부산</option>
    <option>서울</option>
    <option>검역</option>
</select>

<select id="city2">
    <option>제주</option>
    <option>경남</option>
    <option>경북</option>
    <option>전남</option>
    <option>전북</option>
    <option>충남</option>
    <option>충북</option>
    <option>강원</option>
    <option>경기</option>
    <option>세종</option>
    <option>울산</option>
    <option>대전</option>
    <option>광주</option>
    <option>인천</option>
    <option>대구</option>
    <option>부산</option>
    <option>서울</option>
    <option>검역</option>
</select>

<button type="submit" id="but">입력버튼</button>
<div id="table"></div>
<div id="plot"></div>

<script>
    let input1 = document.getElementById('city1')
    let input2 = document.getElementById('city2')
    let button = document.getElementById('but');

    button.addEventListener('click',function() {
        async function load() {
            const get_date = [];
            const get1 = [], get2 = [];
            let city_index1, city_index2;
            let city_name1 = input1.options[input1.selectedIndex].text;
            let city_name2 = input2.options[input2.selectedIndex].text;

            const datas = await Promise.all(Set_Date().map(date =>
                dfd.read_csv(`https://khw970421.github.io/covid/Modify_Danfo/Data/Date/${date}.csv`)
            ));         //모든 데이터 값 읽어오기

            datas[0].body__items__item__gubun.data.forEach((data)=>{
                if(data == city_name1)
                    city_index1 = datas[0].body__items__item__gubun.data.indexOf(data);
                if(data == city_name2)
                    city_index2 = datas[0].body__items__item__gubun.data.indexOf(data);
            });         //해당 지역을 가진 index 찾기

            datas.forEach(data => {
                get1.push(data.body__items__item__incDec.data[city_index1]);
                get2.push(data.body__items__item__incDec.data[city_index2]);
                get_date.push(data.body__items__item__stdDay.data[0]);
            })      //해당 지역을 가진 index를 통해 날짜별 증가량 배열에 저장

            let df_sum1 = new dfd.DataFrame({city_name1:get1,city_name2:get2},{index:get_date});  //df_sum은 Series 형태이므로 DataFrame 형태로 변환
            df_sum1.plot('plot').line();        // 각각의 지역의 증가량 출력
        }
        load();
    });

    function Set_Date(){
        let tDate = new Date('2020-03-03'); // 2020년 03월 04일 부터 시작
        let Year,Month,Day;                 // 각 날짜별 날짜 생성
        const date_array = [];              // 해당 필요부분 넣을 배열 생성
        for(let i=0;i<28;i++)
        {
            tDate.setDate(tDate.getDate()+1)        // 3월 4일 계산 후 하루씩 증가
            Year = tDate.getFullYear().toString().slice(2,4);       // 2020년이 아닌 뒤의 두자리 수만 필요하므로 slice 사용
            Month = (tDate.getMonth()+1).toString().length==1 ? '0'+ (tDate.getMonth()+1).toString() :(tDate.getMonth()+1).toString() ; // 한자리 수 인경우 앞에 0을 붙인다.
            Day = tDate.getDate().toString().length==1? '0'+tDate.getDate().toString() : tDate.getDate().toString();
            date_array.push(Year+Month+Day);    //합친 내용을 배열로 만들어 준다.
        }
        return date_array;     //해당 배열을 반환한다.
    }
</script>
</body>
</html>

選択をselect optionで拘束します.

コード解析

selectオプション:現在選択されているインデックスを含む文字
Dom.を選択します.text

 let city_name1 = input1.options[input1.selectedIndex].text;
 let city_name2 = input2.options[input2.selectedIndex].text;

csvファイルで選択した文字と同じ文字のインデックス位置(ex)city indexトピックが0、全南3)

を検索

datas[0].body__items__item__gubun.data.forEach((data)=>{
                if(data == city_name1)
                    city_index1 = datas[0].body__items__item__gubun.data.indexOf(data);
                if(data == city_name2)
                    city_index2 = datas[0].body__items__item__gubun.data.indexOf(data);
            });         //해당 지역을 가진 index 찾기

この指標を満たす増分をアレイ

に追加する

 datas.forEach(data => {
                get1.push(data.body__items__item__incDec.data[city_index1]);
                get2.push(data.body__items__item__incDec.data[city_index2]);
                get_date.push(data.body__items__item__stdDay.data[0]);
            })      //해당 지역을 가진 index를 통해 날짜별 증가량 배열에 저장

セットをDataFrameに変換し、

を出力する.

let df_sum1 = new dfd.DataFrame({city_name1:get1,city_name2:get2},{index:get_date});  //df_sum은 Series 형태이므로 DataFrame 형태로 변환
df_sum1.plot('plot').line();        // 각각의 지역의 증가량 출력

結果出力

実行環境

Reference

この問題について(共通データ8を使用(2つの試行の1日あたりのコロナ増加数を比較)), 我々は、より多くの情報をここで見つけました https://velog.io/@khw970421/공공데이터-이용하기-8-시도-2개를-일일-코로나-증가수-비교하기

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

6-5練習問題(class)

[React] ESLint