search

codeforosaka / covid19

大阪府 新型コロナウイルス感染症対策サイト / Osaka COVID-19 Task Force website
https://covid19-osaka.info/
MIT License
55 stars 23 forks source link

[市区町村地図]市区町村毎の感染者数をビジュアルに表示したい #281

Open teppei696 opened 4 years ago

teppei696 commented 4 years ago

改善詳細 / Details of Improvement

スクリーンショット / Screenshot

期待する見せ方・挙動 / Expected behavior

ToDo

must

want

動作環境・ブラウザ / Environment

作業ブランチ

https://github.com/codeforosaka/covid19/tree/feature/municipality_map

mfmfuyu commented 4 years ago

こちらまだ着手していない状態でしたら、私が対応を行っても大丈夫でしょうか？

teppei696 commented 4 years ago

これを参考にする https://github.com/a01sa01to/covid19-ibaraki

Blue-Tone commented 4 years ago

少し見てみます。

Blue-Tone commented 4 years ago

情報整理

大阪府の地図

https://github.com/tadakazu1972/osakapref_covid19 をnginxで動かしてみて、キャプチャを取りました。 スクリーンショット 2020-05-12 9 39 27

茨城県のソース解析

市町村毎の感染状況(地図) components/cards/IbarakiGraphicalMapCard.vue

Blue-Tone commented 4 years ago

作業ブランチを作成し、茨城県のソースを移植（ほぼコピーのみ）してみました。 これから色々調整が必要です。動作確認未です。 https://github.com/codeforosaka/covid19/tree/feature/municipality_map

作業再開は夜以降になります。

teppei696 commented 4 years ago

@Blue-Tone 調査／確認ありがとうございます！ ご負担にならない程度でよろしくお願いします！

Blue-Tone commented 4 years ago

npmでD3をインストールしたが、d3が見つからないエラーは以下のコマンドで解決する。

readmeに記載のコマンド docker-compose run --rm app yarn install で解決

エラー内容：

covid19 |  ERROR  Failed to compile with 1 errors
covid19 | This dependency was not found:
covid19 | * d3 in ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./components/GraphicalMapCard.vue?vue&type=script&lang=js&
covid19 | To install it, you can run: npm install --save d3

Slack https://code-for-osaka.slack.com/archives/CVCF09HV0/p1589293167001900

Blue-Tone commented 4 years ago

0ffc3372f6f5a988f0f4dccbfbf3368a48a44017 で地図を表示するところまで実装しました。

スクリーンショット 2020-05-17 2 19 47

しばらくまとまった時間が取れないので、残りの実装を誰かにお任せしたいです。 不明点があれば質問には答えられます。

teppei696 commented 4 years ago

ありがとうございます。 なんとか引き継いでやってみますー

Blue-Tone commented 4 years ago

@teppei696 少し時間取れそうなので、TODO出ししてIssue登録するところまで進めようかと思います。 自分が気になっている所は以下です。 ・地図がはみ出している。カード内に収まるようにする。 ・凡例が茨城のまま。大阪府の一覧を表示する？色の判例を表示する？色は赤系でOK？ ・データを更新する仕組み・手順の確立 ・PRのデプロイが失敗している　https://github.com/codeforosaka/covid19/pull/444

他にありますか？ 上記で方針決められる所はありますか？ 個人的には感染者数が減ってきたので、直近の新規感染者だけでなく、期間を指定できた方がいいかもと思いました。

Blue-Tone commented 4 years ago

データを更新する仕組み・手順の確立

元データについて調査しました。 data.jsonのpatients.dataの居住地に市町村のデータがある。 これを使用する。

Blue-Tone commented 4 years ago

このIssue着手します。

Blue-Tone commented 4 years ago

@teppei696 Issueの最初のコメント「期待する見せ方・挙動 」に、

あとは元データは大阪府にあるようなので、それをどうやってもらうかも検討が必要

と記載がありますが、data.jsonのpatients.dataの居住地に市町村のデータがありました。 data.jsonのpatients.dataの居住地を元データで使用する方針でいいでしょうか？

Blue-Tone commented 4 years ago

実装メモ： ワーニングが出ているので解消する。 DevTools failed to load SourceMap: Could not load content for http://localhost:3000/vuetify.css.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE DevTools failed to load SourceMap: Could not load content for http://localhost:3000/materialdesignicons.css.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

Blue-Tone commented 4 years ago

課題がいくつかあるので、子Issueに登録する予定。

Blue-Tone commented 4 years ago

大阪府の市町村一覧を表示する 市町村をマウスオーバした時にポップアップで市町村名と値を表示する は後ほど子Issueに登録予定。 どなたか登録して進めてもらってもOKです。

yukiyaxxxx commented 4 years ago

市町村をマウスオーバした時にポップアップで市町村名と値を表示する は後ほど子Issueに登録予定。 どなたか登録して進めてもらってもOKです。

issue作成しました https://github.com/codeforosaka/covid19/issues/635

yukiyaxxxx commented 4 years ago

凡例の人数と地図の色判定の人数が合っていないですね 凡例は31人が最大ですが、地図色は99人が最大 https://github.com/yukiyaxxxx/covid19/blob/feature/map_tooltip/components/GraphicalMapCard.vue#L105-L125

636 マージ後にどちらかを正として合わせる必要がありそうです

Blue-Tone commented 4 years ago

@teppei696 地図表示の件、表示するデータは何処から取得すれば良いでしょうか？ https://github.com/codeforosaka/covid19/issues/281#issuecomment-675549994

teppei696 commented 4 years ago

@Blue-Tone こちらですが、

以下に記載いただいている通り、data.jsonの中のpatients.dataの居住地を使っていただけると良いかと思います。 上記を元にデータを集計したデータのほうがよければkintoneからデータを取得するところに手を加えるので教えてくださいー

と記載がありますが、data.jsonのpatients.dataの居住地に市町村のデータがありました。
data.jsonのpatients.dataの居住地を元データで使用する方針でいいでしょうか？