Covid-19のダッシュボードの作成を例にしています。イメージとしては、表形式でデータが見えるようにして、時系列で合計値がチャートして見えるようにして、カレンダーヒートマップで曜日ごとの動きが見えるようにするというのを考えてみます。仮説としては人の動きに感染者は依存しているのではないかと言う仮説です。だとすれば、曜日ごとに特徴があるのではないかと言う仮説です。
流れとしては、以下のような順番になります。
- プロジェクトの作成
- データのインポート
- クエリとビジュアリゼーションコンポーネントの配置
クエリとビジュアリゼーションコンポーネントの配置は主にMarkdownのドキュメントで行います。
プロジェクトの作成
まず、プロジェクトを作成するところから始めます。プロジェクトの作成はVisual Studio Codeから作成します。
プロジェクトの作成(1/5)
プロジェクトの作成(2/5)
プロジェクトの作成(3/5)
プロジェクトの作成(4/5)
プロジェクトの作成(5/5)
Evidenceのウェルカム画面
プロジェクトを作成すると、Evidenceのサーバを起動可能になります。Evidenceのサーバを起動すると通常はポート1313で待ち受け状態になります。そうすると、Webブラウザで開けるようになります。ウェルカム画面は以下のようになります。
Evidenceサーバの起動
Evidenceサーバの起動はVisual Studio Codeから行います。コマンドパレットから起動できます。
データのインポート
https://www.mhlw.go.jp/stf/covid-19/open-data.html から取得した、新規陽性者数の推移（日別）のデータをプロジェクトフォルダのsourcesにcovid19というディレクトリを作成して 配置します。新規陽性者数の推移（日別）のデータはnewly_confirmed_cases_daily.csvというファイル名なので、newly_confirmed_cases_dailyというテーブルとして識別されます。 データのインポートはEvidenceのサーバからやると、設定ファイルなどを簡単に作成できます。
データのインポート
データのインポート (1/4)
Evidenceのサーバのインポート画面ではインポート可能なデータ形式の確認ができます。 Evidenceでインポート可能なデータについてはEvidenceのWeb画面を起動したときのSettingsの中の画面で確認できる。
データのインポート (2/4)
データのインポート (3/4)
データのインポート (4/4)
現在Evidenceでインポート可能なもの
- BigQuery
- CSV
- Databricks
- DuckDB
- Microsoft SQL Server
- PostgreSQL
- Redshift
- JavaScript
- Snowflake
- SQLite
- Trino
- MotherDuck
最初のコンテンツの作成
最初のコンテンツの作成 (1/2)
次に、プロジェクトフォルダのpages/index.mdを編集します。index.mdはEvidenceのサーバに接続してデフォルトで表示されるページになります。ここのコンテンツを以下のようにします。
---
title: Welcome to Evidence
---
## Covid19 のCSV確認
```sql covid19_10
select *
from covid19.newly_confirmed_cases_daily
limit 10
```
<DataTable data={covid19_10}/>
最初のコンテンツの作成 (2/2)
これにより、covid19.newly_confirmed_cases_dailyから10行取り出して表として出力されます。
以下のような表示になります。
時系列グラフの作成 (1/2)
さらに、時系列チャートを作成します。Visual Studio Codeからchart.mdを作成します。 Evidenceではpages以下に作成されたコンテンツは自動的にナビゲーションに配置されます。 コンテンツは以下のようなものになるでしょう。時系列グラフはデータの日付を横軸として、縦軸は新規感染者の合計とします。
---
title: 時系列チャート
---
```sql covid19
select *
from covid19.newly_confirmed_cases_daily
```
<LineChart
data={covid19}
x=Date
y=ALL
/>
時系列グラフの作成 (2/2)
カレンダーヒートマップの追加
カレンダーヒートマップの追加 (1/3)
さらに、カレンダーヒートマップを作成します。Visual Studio Codeからcheatmap.mdを作成します。カレンダーヒートマップは横軸に時間、縦軸は曜日でヒートマップとして新規感染者の数になります。Evidenceのカレンダーヒートマップは曜日情報を与える必要はなく、日付データを与えれば曜日に分解されます。 コンテンツは以下のようなものになるでしょう。
カレンダーヒートマップの追加 (2/3)
---
title: カレンダーヒートマップ
---
```sql covid19
select *
from covid19.newly_confirmed_cases_daily
```
<CalendarHeatmap
data={covid19}
date=Date
value=ALL
yearLabel=false
/>
カレンダーヒートマップの追加 (3/3)
次回はここから進めて、更に拡張していくことを考えます。