JavaScriptのデータビジュアライゼーションライブラリ『D3.js』

Webページで動的にデータを可視化する方法を調べてみたら、今時はJavaScriptのライブラリがたくさんあるのね。↓
 https://www.publickey1.jp/blog/15/javascript52javascript_graphs.html
 
 細々と色々あるけど、自分の学習コストを考えると、できるだけ応用範囲の広いライブラリを勉強しておきたいので、有名なものをピックアップすることにした。そこで見つけたのがD3.jsというライブラリ。D3とはData Driven Documentの頭文字らしい。

D3.js

D3.js はデータに基づいてドキュメントを操作するための JavaScript ライブラリです。D3 はHTML や SVG、 CSSを使ってデータに命を吹き込みます。D3は WEB 標準に重点を置いており、強力な視覚化コンポーネントとデータドリブン (データ駆動型)DOM 操作手法の組み合わせにより、特定のフレームワークに縛られることなく、モダンブラウザの性能をフルに 引き出すことができます。

このD3.jsは数年前からあるようだけど、XMLベースの2次元ベクターイメージ形式であるSVG(Scalable Vector Graphics)によってグラフやチャートを描画する、今時な感じのライブラリ。
 公式でチュートリアル様々な実装サンプルを配布しているので、お勉強もしやすそう。
 
 
 
 ドットインストールにもレッスンがある。

D3.js入門

#01 D3.jsとはなにか? (02:06)
 #02 D3.jsを導入してみよう (01:57)
 #03 はじめてのD3.js (02:43)
 #04 styleを設定してみよう (02:55)
 #05 append、removeを使ってみよう (01:25)
 #06 dataを使ってみよう (02:39)
 #07 update、enter、exitを理解しよう (1) (02:32)
 #08 update、enter、exitを理解しよう (2) (02:58)
 #09 SVG領域を設定してみよう (01:46)
 #10 データを使ってcircleを描画しよう (02:36)
 #11 transitionを使ってみよう (02:42)
 #12 eachを使ってみよう (02:58)
 #13 onでイベントを設定しよう (02:18)
 #14 横棒グラフを描画してみよう (02:02)
 #15 scaleを使ってみよう (03:00)
 #16 axisを使ってみよう (1) (02:48)
 #17 axisを使ってみよう (2) (01:30)

Originally published at NegativeMindException.