ブラウザで画像化されたグラフからデータを抽出できるツールWebPlotDigitizerを使ってみる

様々な資料ではデータをわかりやすく示すためグラフが用いられています。
グラフで示されているデータを他のデータと比較したり、表示の方法を変更したりしたくなることがありますが、元データが入手できない場合は画像からデータを抽出する必要があります。

目盛りをみながら手で数字にしていくのは大変な作業ですが[WebPlotDigitizer](http://arohatgi.info/WebPlotDigitizer/)というウェブアプリをつかうと比較的簡単にデータを抽出することができます。

## 使い方

WebPlotDigitizerは折れ線グラフ、棒グラフなどに対応しています。
今回は例として折れ線グラフからデータを抽出してみます。基本的な使い方は他のグラフでも同じです。

下記リンク先の「Launch App!」をクリックするとアプリの画面が開きます。

[WebPlotDigitizer - Extract data from plots, images, and maps](http://arohatgi.info/WebPlotDigitizer/)

![WebPlotDigitizer.png](https://qiita-image-store.s3.amazonaws.com/0/15114/fdb41a9c-8062-dcff-0f58-fafed3a2b98c.png)

### 画像の読み込み

メニューから「File > Load Image」を選択し、データを抽出したい画像ファイルを開きます。

今回は例として総務省統計局「日本の統計 2015」の「[グラフでみる日本の統計](http://www.stat.go.jp/data/nihon/pdf/15ngraph.pdf)」の「総人口の推移」をキャプチャしたものを使ってみます。

![総人口の推移.png](https://qiita-image-store.s3.amazonaws.com/0/15114/d026203c-984a-d8cd-7929-5de48ab21caf.png)

プロットタイプは「2D (X-Y) Plot」を選択します。

### 軸の設定

画像上での軸の位置を指定するためにX軸の2点、次にY軸の2点をクリックします。

![align_xy_axes01.png](https://qiita-image-store.s3.amazonaws.com/0/15114/58827f7c-0192-93b9-a543-dc8f5069c016.png)

4点クリックすると下図のようになります。

![align_xy_axes02.png](https://qiita-image-store.s3.amazonaws.com/0/15114/1a43acb7-0b2d-e700-fd9c-e7b5c7a73266.png)

終わったら右側の「Complete!」をクリックします。

ポップアップにクリックした点のグラフ上の値を入力します。
例の場合は下図のようになります。（大正9年は1920年、平成32年は2020年）

![xy_axes_calibration.png](https://qiita-image-store.s3.amazonaws.com/0/15114/0c9df14a-db91-b457-e77e-0c99cdfd71c5.png)

### データの抽出

#### 手動でデータを抽出する

右側のボタンの「Add Point (A)」が選択された状態でグラフをクリックすると赤いポイントが追加されます。

![手動でデータを抽出する01.png](https://qiita-image-store.s3.amazonaws.com/0/15114/d4505d39-8358-a001-afc6-54a500133285.png)

このポイントのデータが抽出されるので、欲しいデータをなぞるようにポイントを追加していきます。

「Adjust Point (S)」で既存のポイントの位置の修正、「Delete Point (D)」でポイントの削除ができます。「Clear Points」は全てのポイントを削除します。

![手動でデータを抽出する02.png](https://qiita-image-store.s3.amazonaws.com/0/15114/3d62f5f4-64f9-42dc-8e48-51b67fc51e4f.png)

「View Data」をクリックすると各ポイントのデータが表示されます。

![手動でデータを抽出する03.png](https://qiita-image-store.s3.amazonaws.com/0/15114/8148c9b5-e289-1543-34c6-046a12eb8ac2.png)

#### 自動でデータを抽出する

「Automatic Mode」をクリックしてモードを切り替えます。

![自動でデータを抽出する01.png](https://qiita-image-store.s3.amazonaws.com/0/15114/baf22d2a-0751-1b8f-bb27-21dc3e2e649a.png)

「Color」の青いところをクリックしてグラフの色を指定します。
Color Pickerを使うと欲しい線の上でクリックするだけで指定することができます。

![自動でデータを抽出する02.png](https://qiita-image-store.s3.amazonaws.com/0/15114/b5d04481-df8d-41d8-9d0d-312d1d84509f.png)

「Run」をクリックすると指定した色に基づいて自動でポイントが追加されます。

例のグラフは同じ色で枠や文字も描画されているので、それらにもポイントが追加されてしまっています。

![自動でデータを抽出する03.png](https://qiita-image-store.s3.amazonaws.com/0/15114/66377b25-71b6-e467-40bb-570c1b307cff.png)

「Mask」を使うとポイントが追加される領域を制限することができます。

例えば、例のグラフから「総人口」だけ抽出したい場合には「Pen」を選択して、総人口のプロットの上を塗りつぶします。
ペンが太（細）すぎる場合は、上に表示されている「Stroke Width」でペンの太さを調整することができます。

![自動でデータを抽出する04.png](https://qiita-image-store.s3.amazonaws.com/0/15114/1ca398aa-066a-1d74-af01-030cbfb84b6f.png)

この状態で「Run」をクリックすると総人口の上にだけポイントが追加されます。
意図しないところにもポイントが追加されてしまう場合はMaskの領域を修正します。

![自動でデータを抽出する05.png](https://qiita-image-store.s3.amazonaws.com/0/15114/952de969-0ddd-c936-0e74-493b50a9d7ed.png)

「Algorithm」でポイントの追加方法を設定することができます。
例えば、デフォルトの「Averaging Window」でΔX,ΔYの値を小さくするとより密にポイントが追加されます。

![自動でデータを抽出する06.png](https://qiita-image-store.s3.amazonaws.com/0/15114/a3deb8c7-53be-1f7c-fa3d-e689fb8a1d39.png)

![自動でデータを抽出する07.png](https://qiita-image-store.s3.amazonaws.com/0/15114/69d2da43-c4d3-1bb7-400f-54d8c89f579d.png)

「X Step」、「X Step w/ Interpolation」は、グラフの単位で追加するポイントの範囲と間隔を指定することができます。
例では1年毎にポイントを追加しています。

![自動でデータを抽出する08.png](https://qiita-image-store.s3.amazonaws.com/0/15114/9097a855-bf25-b122-feef-60f80aed1690.png)

![自動でデータを抽出する09.png](https://qiita-image-store.s3.amazonaws.com/0/15114/9b7b880f-5e69-f7b6-2803-5efcdd347ff8.png)

データを確認すると1年毎にポイントが追加されていることがわかります。

![自動でデータを抽出する10.png](https://qiita-image-store.s3.amazonaws.com/0/15114/78d029b1-e9c0-fa59-10de-90865e778abd.png)

配置されたポイントをみるとグラフ右側の点線部分については、ポイントがうまく配置されていないことがわかります。
パラメータやアルゴリズムを調整することもできますが、今回の例程度であれば「Manual Mode」に切り替えてポイントを追加しても良いと思います。

### 抽出したデータの加工

抽出したデータの桁数の設定や並べ替えを行うことができます。

![抽出したデータの加工01.png](https://qiita-image-store.s3.amazonaws.com/0/15114/82c58696-81a7-fb74-0b65-7259feca0e2f.png)

「Download .CSV」をクリックするとCSVファイルをダウンロードできます。

「Graph in Plotly」をクリックすると[Plotly](https://plot.ly/)にデータを送りグラフを描くことができます。

![抽出したデータの加工02.png](https://qiita-image-store.s3.amazonaws.com/0/15114/e6760f93-b5f7-5cc0-eda9-06b0187ed5d9.png)

このデータについては元データが公開されているので、重ねてプロットしてみると良く一致していることが確認できます。

![newplot.png](https://qiita-image-store.s3.amazonaws.com/0/15114/c45d31e2-01ac-47d8-5055-f40a68a4d05f.png)

## 参考

公式サイトにチュートリアルやドキュメントがあります。動画をみると使い方を理解しやすいと思います。

[WebPlotDigitizer](http://arohatgi.info/WebPlotDigitizer/)