Vega ~実際のデータで遊んでみる~



今回は実際のデータを使ってグラフを書いてみます。(前回は[ここ(時系列データを処理する](https://qiita.com/ihgs/items/05e10b9f20faa002be18))
対象のデータは、いいのが思いつかなかったので、自分の記事のいいねを取得し、それを分析してみました

data形式は以下です。QiitaのAPIを使って取得しています（記事一覧を取得し、記事ごとのいいね一覧をファイルに保存してます）。


```
[
{"author": "ihgs", "created_at": "2019-12-15T22:27:29+09:00", "likeuser": "tochi_ondy", "itemid": "f52f864d1afb06944496", "item_title": "Vega で予定表を書いてみた"},
{"author": "ihgs", "created_at": "2019-12-06T09:13:54+09:00", "likeuser": "ueba", "itemid": "f52f864d1afb06944496", "item_title": "Vega で予定表を書いてみた"},
{"author": "ihgs", "created_at": "2019-12-05T16:30:40+09:00", "likeuser": "maloney-san", "itemid": "f52f864d1afb06944496", "item_title": "Vega で予定表を書いてみた"},
...
]
```


## Step1. 月ごとの記事のいいね数をみてみる

0. `timeunit` transformを利用し、いいねを押された月初を求めます（interval:false を指定し、月初だけを設定しています`created_at_month`)  
1. `aggregate` transformで、記事・月ごとに集計します

```
"transform": [
        {
          "type": "timeunit",
          "units": ["year", "month"],
          "interval": false,
          "as": ["created_at_month"],
          "field": "created_at"
        },
        {
          "type": "aggregate",
          "groupby": ["itemid", "item_title", "created_at_month"]
        }
      ]
```

以下のように変換されます

| itemid | item_title | created_at_month | count |
|:--|:--|:--|--:|
| f52f864d1afb06944496 | Vega で予定表を書いてみた | Sat, 30 Nov 2019 15:00:00 GMT | 6 |
| 7715bd7f6d2f7987f73a | Vega解説 〜動的なグラフ〜 | Mon, 30 Sep 2019 15:00:00 GMT | 1 |
| 87fda0cd39693bae44f3 | Vega解説 〜離散データ〜 | Sat, 31 Aug 2019 15:00:00 GMT | 1 |
| 359716b4900e75d0e04e | Vega 学習 その2 | Sat, 31 Aug 2019 15:00:00 GMT | 1 |


![スクリーンショット 2020-01-14 22.08.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51316/854259ab-d1ba-1c39-8d62-70150ae8eb9d.png)

[Vega Editorで開く](https://vega.github.io/editor/#/gist/c5585789580af7a8b2b919c301ad3d5a/Step1.json)

各記事、月毎のいいねの数がでました。まぁ、よくわからない図ですね。
次に記事ごとの累積にしてみます。


## Step2 各記事の累積具合をみてみる

* `window` transformを追加します。

```json
{
          "type": "window",
          "sort": {"field": "created_at_month"},
          "groupby": ["itemid"],
          "ops": ["sum"],
          "fields": ["count"]
        }
```

`created_at_month`　でソートしながら `itemid` でグルピーングしながら `count` フィールドの値を `sum` していきます。

![スクリーンショット 2020-01-14 22.09.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51316/c53885a1-5d95-d58d-b002-0d9ea25ade2b.png)

[Vega Editorで開く](https://vega.github.io/editor/#/gist/c5585789580af7a8b2b919c301ad3d5a/Step2.json)

記事ごとのいいね推移が見れるようになりました。
やる前までは、記事によって傾きが大きく違うと思っていましたが、10いいねを超えてるものは割と傾きが似ていることがみて取れました。（そもそも10いいねを超えてる記事も5件しかないのですが、、、）



### step3 線を引いてみる

傾きをみやすいように線を引いてみます。
Vegaには、`regression` transforms が用意されてます。
とりあえず、1次元の線形回帰の線を引いてみます。

```json
"data": [
    {...},
    {
      "name": "trend",
      "source": "likes_by_month",
      "transform": [
        {
          "type": "regression",
          "groupby": ["item_title"],
          "method": "linear",
          "x": "created_at_month",
          "y": "sum_count",
          "as": ["u", "v"]
        }
      ]
    }
]
```

![スクリーンショット 2020-01-14 22.29.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51316/7e240035-0671-495f-177e-226fa1650878.png)


[Vega Editorで開く](https://vega.github.io/editor/#/gist/c5585789580af7a8b2b919c301ad3d5a/Step3.json)


## Step4 Top5のみ表示する

下の方がごちゃごちゃしているので、上位５件だけに絞ります（APIで取得するときに絞れよっというのは、そっとしておきましょう）。

0. `window` transformで、`ops` で `rank` を利用し、記事ごとのランクをつけたdataを作成しておきます
1.  Step3 までで作ったdataとランクをつけたdataを `lookup` transformで連結し、
`filter` transform で５以下のフィルターをかけます

```
"data": [ 
    {...},
    {
      "name":"rank",
      "source": "likes",
      "transform": [
        {
          "type":"aggregate",
          "groupby":["itemid"]
        },
        {
          "type": "window",
          "params": [null],
          "as": ["rank"],
          "ops": ["rank"],
          "fields": [null],
          "sort": {"field": ["count"], "order": ["descending"]}
        }
      ]
    },
   {
     "name": "likes_by_month",
     "transform": [
        {...},
        {
          "type": "lookup",
          "from": "rank",
          "key": "itemid",
          "fields": ["itemid"],
          "values": ["rank"],
          "as": ["rank"],
          "default": "-1"
        },
        {
          "type":"filter",
          "expr":"datum.rank <=5"
        },
        {...}
     ]
  }
]
```


![スクリーンショット 2020-01-14 23.44.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51316/367e741e-5dd2-6f5f-f173-e014dcb2f09e.png)


[Vega Editorで開く](https://vega.github.io/editor/#/gist/c5585789580af7a8b2b919c301ad3d5a/Step4.json)


すっきりとした図になりました。




次回は、凡例あたりについて書きたいと思います。