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

[teppei696]

改善詳細 / Details of Improvement

• 市区町村毎の感染者数をビジュアルに表示したい

スクリーンショット / Screenshot

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

• 以下を本サイトに組み込む
• https://github.com/tadakazu1972/osakapref_covid19
• まずはできるかどうかからかな・・・
• あとは元データは大阪府にあるようなので、それをどうやってもらうかも検討が必要

ToDo

must

• [市区町村地図]data.jsonのデータを表示する #676 data.jsonのデータを表示する
• [市区町村地図]地図をカード内に表示する #614 地図がはみ出している。カード内に収まるようにする。
• [市区町村地図]凡例を地図で使用している色とリンクする #615 凡例が茨城のまま。凡例を地図で使用している色とリンクする。

want

• [市区町村地図] PR #444 のデプロイ失敗を解消する #616 PR 市町村地図の感染者数をビジュアルに表示する #444 のデプロイ失敗を解消する　
• [市区町村地図]地図の横に大阪府の市町村一覧を表示する #684 地図の横に大阪府の市町村一覧を表示する
• 市町村をマウスオーバした時にポップアップで市町村名と値を表示する
• [市区町村地図]地図上に市町村名を表示する #685 地図上に市町村名を表示する
• [市区町村地図]翻訳定義を作成する #690 翻訳作成
• [市区町村地図]市町村の枠を白以外にして境界を見やすくする #686 市町村の枠を白以外（黒系？）にして境界を見やすくする

動作環境・ブラウザ / Environment

• any

作業ブランチ

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

[mfmfuyu]

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

[teppei696]

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

[Blue-Tone]

少し見てみます。

[Blue-Tone]

情報整理

大阪府の地図

https://github.com/tadakazu1972/osakapref_covid19
をnginxで動かしてみて、キャプチャを取りました。

茨城県のソース解析

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

[Blue-Tone]

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

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

[teppei696]

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

[Blue-Tone]

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]

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

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

[teppei696]

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

[Blue-Tone]

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

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

[Blue-Tone]

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

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

[Blue-Tone]

このIssue着手します。

[Blue-Tone]

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

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

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

[Blue-Tone]

実装メモ：
ワーニングが出ているので解消する。
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]

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

[Blue-Tone]

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

[yukiyaxxxx]

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

issue作成しました
#635

[yukiyaxxxx]

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

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

[Blue-Tone]

@teppei696
地図表示の件、表示するデータは何処から取得すれば良いでしょうか？
#281 (comment)

[teppei696]

@Blue-Tone こちらですが、

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

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