chart d3.js js visualize

チャートライブラリ調査 2017.3.20

投稿日:

さくらマラソンの結果を可視化するにあたりどのチャートを使おうかと悩みに悩んだのでメモ。
最初の想定よりも選択肢が多岐に渡、現在でもまだ悩み中である。

以下にチャートの比較表があるがすごい量になっている。
Comparison of JavaScript charting frameworks – Wikipedia

 

試したもの

C3.js

C3.js | D3-based reusable chart library

D3.jsベース、日本人開発者、Gitリポジトリは2016年の5月くらいで止まってるか?
なぜかうまく導入できなかった。

Google Charts

Charts  |  Google Developers

いちばんシンプルにチャートを作成できた。良くも悪くもグーグルらしさがある。

TauCharts

Taucharts flexible javascript charting library for data exploration

D3.jsベース
サンプルはあるが、サンプルを動かく為のコード情報は少ない。
どう書いたらいいものか。

 

NVD3

NVD3

D3.jsベース

・bl.ocks.orgで膨大なサンプルを掲載しているMike Bostockが作成
・Examplesとソース掲載先のbl.ocksとのリンクが違っている。
・グラフを作成するのにコード量は多め。D3.jsの理解も要

 

chart.js

Chart.js | Open source HTML5 Charts for your website

シンプルでよさげだが、チャートの種類は少なめ

 

良さげなもの

 

調査ページ

Best JavaScript Chart Libraries to Try in 2017 – GojQuery
D3.js推し、Cesium.jsは3D系のもよう。

SVG Charting Libraries – The Media Temple Blog
AMCHARTSがよさげ

 

This library can handle enormous datasets plotting on a variety of graphs. Mobile devices also support interactivity through pinch & zoom display effects. Dygraphs has a brief sample gallery which includes a series of traditional graph styles. If you wish to plot data with JavaScript then Dygraphs is a wonderful library for getting started without any dependencies.

Chart.js、jqPlot、Chartist.js、xCharts
xChartsはD3ベースのもよう。

 

50+ Best JavaScript Charting Libraries » CSS Author
50+は情報見るのが辛いが・・・

 

13 Best JavaScript charting libraries – Slant
D3.jsがちょっと強い

JavaScriptチャートライブラリを選ぶにあたって考えたこと – クックパッド開発者ブログ
クックパッドはcharts.jsを採用したもよう(2015年11月)

2016年総まとめ、JavaScriptのライブラリやjQueryのプラグイン100+α選 | コリス

JavaScriptでグラフ描画入門!全8個のライブラリをコード付きで一挙に解説! – paiza開発日誌

チャート、グラフを書くのに良さそうなJavascriptライブラリ6選 – Qiita

 

-chart, d3.js, js, visualize
-

執筆者:


comment

Your email address will not be published. Required fields are marked *

関連記事

no image

平成28年に佐賀市内で発生した事故情報

  平成28年に佐賀市内で発生した事故情報 http://odcs.bodik.jp/410004/   オープンデータデイ データ公開のお知らせ     参考 …

bl.ocks.orgを使ってみた

ちょっと前にさわって放置状態だったbl.ocks.orgですが、 ちゃんと触ってみると、手軽にd3.jsが試せていい https://bl.ocks.org/sugasaki   ずいぶん前 …