![見出し画像](https://assets.st-note.com/production/uploads/images/69470715/rectangle_large_type_2_9d0dab70af971512feeb8f904a92e96d.png?width=1200)
Flourishを使いアニメーショングラフ
新車販売台数
データソース:統計ダッシュボード(総務省統計局)
データ種類:新車販売台数
データ取得ツール・サービス:Flourish(https://flourish.studio/)
ブラウザ:Chrome
OS:Windows 10
Webサービス「Flourish」
ブラウザ上で操作できるビジュアライゼーションサービス「Flourish」を使い、アニメーションチャートを作成します。
様々なテンプレートを備え、対話型のグラフを比較的容易に作ることができます。
![](https://assets.st-note.com/img/1641285254204-Xyb2bH2xSA.png?width=1200)
統計ダッシュボードから取得した新車販売台数のデータを使います。
URLを指定するのでなく、ローカルにデータを保存します。
今回取得したデータの最新数値は2021年11月のものでした。
![](https://assets.st-note.com/img/1641285375079-pSJaUIJe7O.png?width=1200)
動くラインチャートレース
アニメーショングラフとして「Line chart race」→「Simple」を選びます。
![](https://assets.st-note.com/img/1641285461000-CwzAuwqTSA.png?width=1200)
ローカルに保存したデータをアップロードします。
![](https://assets.st-note.com/img/1641274030428-3ZjF3FbjrO.png?width=1200)
取り込んだ後、今回は(Flourish上で)行と列を入れ変えます。
時系列要素を列として並べるためです。
![](https://assets.st-note.com/img/1641274107330-x1qdw6TwWg.png?width=1200)
入れ替えた結果です。
![](https://assets.st-note.com/img/1641274183203-ljwjYLWsLn.png?width=1200)
右パネルで「A列の項目をラベル名として」「1行目を時間軸」「B列以降2行目を数値」という設定とすれば(デフォルトでそうなっているかもしません)、時間軸に沿ってグラフが動きます。
![](https://assets.st-note.com/img/1641286662778-sLeK38akNB.png)
「Preview」をクリックすると再生します。
![](https://assets.st-note.com/img/1641274303751-53YIWN4FHE.png?width=1200)
Preview画面の右パネルで見た目や動作の設定をできます。
![](https://assets.st-note.com/img/1641278439100-tOb9B37Q5c.png)
![](https://assets.st-note.com/img/1641278477479-3A01CliSzE.png)
作成したグラフは、Flourishのクラウド上に保存します。
無料利用だと、パブリックな環境に保存されるそうです。
WebページにEmbedできるコードの生成も可能です。
![](https://assets.st-note.com/img/1641278565088-poGf3W1uVw.png?width=1200)
![](https://assets.st-note.com/production/uploads/images/69188194/picture_pc_a048ee76f7e6f40ea1acf29df6732016.gif)
バーチャートレース
バーチャートレースも作ってみます。
![](https://assets.st-note.com/img/1641280617566-WbcPM54NDf.png?width=1200)
y軸に「年」(YYYY)、x軸に「月」とするために、元のデータを以下のように変更します。
数値はその月までの累計となっています。
![](https://assets.st-note.com/img/1641281023384-osnRDHq9zj.png?width=1200)
最新の数値が「2021年11月」までなので、各年とも11月までの数値を表示するようにします。
11月までとするために、データを取り込んだ直後に表示される右パネルで「Values:B-L」(B列が1月、L列が11月)と設定します。
![](https://assets.st-note.com/img/1641281632078-hrvxGp3XFX.png?width=1200)
![](https://assets.st-note.com/production/uploads/images/69187509/picture_pc_1eee2a3a6ec20e1fdfb08fad117f2372.gif)