JavaScript
highcharts
DataVisualization

追いかけグラフ(仮)を描画するライブラリを作ってみた

この動くグラフが面白かったので、JSで描画できるようにしてみた。

スクリーンショット 2018-12-31 2.10.31.png

上記画像はRedditから引用(本物はgifアニメです)


作ったデモ画像


Gross Domestic Product (GDP)

まずは元の画像と同じ内容を再現してみた。GDPの経年推移を描画している。

gdp.gif


The number of tourists to Japan

こちらは、日本に来る観光客数の経年推移。

tourists.gif


ruby-core

ruby-coreメーリングリストに投稿されるメール数の経年推移。

ruby.gif


自分で動かす方法

ソースはすべてGithubで公開されており、ライブラリの簡単な使い方はREADMEに書いてある。

ざっくり下記のようなJSを書くと、これまでに見たグラフを描画できる。内部的にはHighchartsを利用している。

<script src="https://code.highcharts.com/highcharts.js"></script>

<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js"></script>
<script src="https://ts-3156.github.io/chasingchart/chasingchart-latest.js"></script>

<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>
<button id="button">Start</button>

<script>
var input = [...];

var chart = Chasingchart.chart('container');
chart.setData(input);

document.getElementById('button').addEventListener("click", function (event) {
chart.start();
}, false);
</script>

入力データは一例として下記の形式であればOK。こちらも、JSFiddleで試せるようにしてある。

[{

"data": {"cat1": 500, "cat2": 400, "cat3": 300, "cat4": 200, "cat5": 100},
"options": {"title": {"text": "Something statistics"}, "subtitle": {"text": "1900"}}
}, {
"data": {"cat1": 500, "cat2": 550, "cat3": 300, "cat4": 200, "cat5": 100},
"options": {"title": {"text": "Something statistics"}, "subtitle": {"text": "2000"}}
}]


その他

描画してみたいデータがもしあれば、コメント欄でご連絡いただけるとありがたいです。時間があれば動くグラフを作ってみます。


参考リンク