D3.jsとは、データを視覚的に表現するためのJavaScriptライブラリです。
D3.jsが表現できるグラフは様々です。
★注意
この「D3.js」のカテゴリーの記事では、JavaScriptの基本的な文法や
演算子の説明は書きません。なので、、JavaScriptの基本的なことは
「JavaScript」カテゴリーの記事をご覧ください。
D3.jsを使ったギャラリーはこちら
色々と絵の表示出来るのは分かったけど、
D3.jsを使うとどういうメリットがあるの？
データを動的に、より人を惹きつけるような表現をしたい場合です。
リアルタイムに温度変化を反映させたり、地図と連動させて、
Googleアナリティクスのように、どこからアクセスが多いのかを
視覚的に表現したりできます。アイディア次第です。
ただ、D3.jsは描画機能はないので、描画処理は、お使いのブラウザに
依存します。ブラウザに不具合があれば自分で対処しなければいけませんが、
前向きに考えると、ライブラリの更新を待つ必要もなく、ブラウザの
最新の描画機能を使うこともできます。
D3.jsで作成できものどんなものがあるか、
色々とありますが、以下の物があります。
●グラフ
１．コードグラフ (Chord)
２．力学 (Force)
３．度数分布図 (Histogram)
４．積み上げグラフ (Stack)
５．円グラフ (Pie)
など
●階層化したグラフ
１．ツリーマップ (Treemap)
２．ツリーレイアウト (Tree)
３．パーティション (Partition)
４．パックレイアウト (Pack)
５．クラスタレイアウト (Cluster)
など
●地図
D3.jsと地図を連携させることもできます。
D3.jsを学習に必要な環境
●開発ツール
chromeの場合
ウィンドウの右上にあるchromeメニューボタンをクリックし表示される
メニューから「その他のツール」→「デベロッパーツール」の項目を
選択する。そうすると、デベロッパツールの画面が表示されます。
ただ毎回この動作は面倒なので。「F12」ボタンか「Shift+Ctrl+I」の
ほうが楽です。
＊「Console」
デベロッパーツール表示後の「Console」をクリックすると、
プログラムの出力結果が表示されます。
＊「Elements」と「Style」
要素に関するスタイル(一言でいうと「見た目」です。)を表示します。
D3.jsで利用されるSVGには専用のスタイルプロパティがあり、
設定したスタイルが正しく表示できているかどうかは、
要素を選択したうえで、[Style]タブをクリックすると確認できます。
スタイルプロパティにマウスのカーソルを重ねると、
チェックボックスが表示され、スタイルプロパティのチェックを
はずすと、要素の該当するスタイルの適用をさせなくすることができます。
IEもたしか、「F12」を押すと、表示されたと思います。