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

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

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

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

作ったデモ画像

Gross Domestic Product (GDP)

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

• 動くバージョン
• JSFiddleで編集

The number of tourists to Japan

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

• 動くバージョン
• JSFiddleで編集

自分で動かす方法

ソースはすべて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.update(); 
    }, false); 
</script> 

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

[{ 
    "values": [500, 400, 300, 200, 100], 
    "categories": ["Cat1", "Cat2", "Cat3", "Cat4", "Cat5"], 
    "options": {"title": {"text": "Something statistics"}, "subtitle": {"text": "1900"}} 
}, { 
    "values": [550, 500, 300, 400, 500], 
    "categories": ["Cat2", "Cat1", "Cat3", "Cat4", "Cat5"], 
    "options": {"title": {"text": "Something statistics"}, "subtitle": {"text": "2000"}} 
}] 

その他

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

参考リンク

• 
  Chasingchart 今回作成したJSライブラリ
• The Major World Economies Over Time
• Highcharts