CREATOR BLOG

クリエーターのためのD3.js入門 ~つまみ食い編 D3.jsのラップライブラリ~

2014/12/22
近藤
  • このエントリーをはてなブックマークに追加

普段javascript触らないクリエーターさん向けにD3.js入門を書こうとして、
記事ボリュームがありすぎたため困惑している近藤です。

さて、モチベーション途切れかかったとき、みなさんは何をしますか?
私と子供たちは、つまみ食いをして、ちょっと休憩します。
つまみ食い目的で行動したりもします。

「手っ取り早く」「ちょっとだけ空腹を癒せる」
のがつまみ食いの定義だとすると、
D3.jsのラップライブラリは「D3.jsのつまみ食い」にあたるのではないかと、勝手に思いました。

今回は、本編に入る前のさらに余談として、
D3.jsのラップライブラリを紹介したいと思います。


D3.jsのラップライブラリとは?

データビジュアライゼーションに特化したD3.js。
データビジュアライゼーションに特化しすぎているため、単体で、すぐにグラフなどを描画することはできません。
(HTML書いたり、CSS書いたり、JS書いたり、が必要になります)

手っ取り早くデータを視覚化したい場合には、
D3.jsを元にした、グラフ描画に特化したJavascriptのラップライブラリを利用するのが近道です。

D3.js本体を読み込み、ラップライブラリを読んで使います。

jQuery 本体と、jQueryライブラリの関係に似ていますね。

ほんの少し基礎用語

Axis

グラフの脇に表示することの多い、目盛りのような軸。
縦方向はY Axis、横方向はX Axis。

レイアウト

棒グラフや折れ線グラフ、円グラフなどの表示形式。
目的にあったものを選ぶ必要がありますが、色々試してみるのも楽しいですね。

・レイアウト
棒グラフや折れ線グラフ、円グラフなどの表示形式。
目的にあったものを選ぶ必要がありますが、色々試してみるのも楽しいですね。

D3.jsのラップライブラリ

D3.jsのラップライブラリはその需要からか、かなり数があるようですが、
今回はそのうち3つご紹介したいと思います。

C3.js

http://c3js.org/
チュートリアルも楽しいD3.jsのラップライブラリ。
すっごくシンプルですが、カスタマイズも結構できるようなのでうれしいですね。

今回ご紹介する中では、一番とっつきやすいライブラリな気がします。

vega

https://github.com/trifacta/vega
JSONデータで全部まかなってしまおう、という、思い切ったラップライブラリ。
思い切りの良さがとても素敵でした。

NVD3.js

http://nvd3.org/
D3.jsをいじり始めたとき最初に遊んだラップライブラリ。

レイアウトなどの種類も豊富なので、
「ちょっとこのデータ、グラフで出してみて~」などの軽い要望ならちょちょいと解決できそうです。

レイアウトなどの例:
Simple Line
Scatter / Bubble
Stacked / Stream / Expanded Area
Discrete Bar
Grouped / Stacked Multi-Bar
Horizontal Grouped Bar
Line and Bar Combo
Cumulative Line
Line with View Finder
Pie Chart
Bullet Chart
HTML Indented Tree

まとめ

いかがでしたでしょうか。
最近はデータ扱った表現がとても多くなっているため、こうしたラップライブラリを使ったサイトを多々見るようになった気がします。

D3.jsの入り口として、とりあえずラップライブラリを試してみる!というのも、
良さそうですね。

おまけ

良く職場でつまみ食い?するものとして、チョコレートとアイスのデータをNVD3で表示してみました。

2000年1月~2014年11月のチョコレートとアイスの品目別価格指数

(政府統計データ http://www.e-stat.go.jp/SG1/estat/List.do?bid=000001033705&cycode=0より)

See the Pen EayzvK by kinoborisan (@kinoborisan) on CodePen.

チョコレートのほうは、変動大きいので調べてみたところ、調査対象の商品が変わったりしているのも大きな要因のようです。
生データだけだと見つけられない発見があって、棒グラフにするだけでも楽しいなー、と思いました。

Recent Entry

CSSの単位まとめ pxからvm/vh/vmin/vmaxまで

レスポンシブHTMLメールを作ってみての感想

CSSのリファクタリングでした5つのこと

大人が読んでも頭を使う絵本の紹介

サイト内にうまくInstagramを取り入れてるサイト11選

Category

Archive