スポンサーリンク
スポンサーリンク

D3.jsって何?

D3.jsとは、データを視覚的に表現するためのJavaScriptライブラリです。
D3.jsが表現できるグラフは様々です。

★注意
この「D3.js」のカテゴリーの記事では、JavaScriptの基本的な文法や
演算子の説明は書きません。なので、、JavaScriptの基本的なことは
「JavaScript」カテゴリーの記事をご覧ください。

D3.jsを使ったギャラリーはこちら

色々と絵の表示出来るのは分かったけど、

D3.jsを使うとどういうメリットがあるの?

データを動的に、より人を惹きつけるような表現をしたい場合です。
リアルタイムに温度変化を反映させたり、地図と連動させて、
Googleアナリティクスのように、どこからアクセスが多いのかを
視覚的に表現したりできます。アイディア次第です。

ただ、D3.jsは描画機能はないので、描画処理は、お使いのブラウザに
依存します。ブラウザに不具合があれば自分で対処しなければいけませんが、
前向きに考えると、ライブラリの更新を待つ必要もなく、ブラウザの
最新の描画機能を使うこともできます。

D3.jsで作成できものどんなものがあるか、

色々とありますが、以下の物があります。

●グラフ
1.コードグラフ (Chord)
2.力学 (Force)
3.度数分布図 (Histogram)
4.積み上げグラフ (Stack)
5.円グラフ (Pie)
など

●階層化したグラフ
1.ツリーマップ (Treemap)
2.ツリーレイアウト (Tree)
3.パーティション (Partition)
4.パックレイアウト (Pack)
5.クラスタレイアウト (Cluster)
など

●地図
D3.jsと地図を連携させることもできます。

D3.jsを学習に必要な環境

●開発ツール
chromeの場合
ウィンドウの右上にあるchromeメニューボタンをクリックし表示される
メニューから「その他のツール」→「デベロッパーツール」の項目を
選択する。そうすると、デベロッパツールの画面が表示されます。
ただ毎回この動作は面倒なので。「F12」ボタンか「Shift+Ctrl+I」の
ほうが楽です。

*「Console」
デベロッパーツール表示後の「Console」をクリックすると、
プログラムの出力結果が表示されます。

*「Elements」と「Style」
要素に関するスタイル(一言でいうと「見た目」です。)を表示します。
D3.jsで利用されるSVGには専用のスタイルプロパティがあり、
設定したスタイルが正しく表示できているかどうかは、
要素を選択したうえで、[Style]タブをクリックすると確認できます。

スタイルプロパティにマウスのカーソルを重ねると、
チェックボックスが表示され、スタイルプロパティのチェックを
はずすと、要素の該当するスタイルの適用をさせなくすることができます。

IEもたしか、「F12」を押すと、表示されたと思います。

コメント

タイトルとURLをコピーしました