いうjavascriptのデータビジュアライゼーションライブラリの使い方を学び始めました。海外では、結構有名なライブラリらいしいのですが、日本では利用者が少ないようなので、勉強がてら紹介をしてみたいと思います。d3.jshttp://d3js.org/「データビジュアライゼーション」については以下を。■データ駆動ドキュメントd3.jsは、データを基にDOM(ドキュメントオブジェクトモデル)を操作するためのライブラリです。データとDOMのエレメントを結びつけ、データの変化をドキュメントへと反映させることができます。d3.jsは、配列を渡すだけでグラフィカルな結果を出力してくれるようなフレームワークではありません。HTML5、SVGなど)を最大限に利用したルック・アンド・フィールを作成することができます。オーバーヘッドが非常に小さく、d3.jsで作成されたデータビジュアライゼーションは、非常に高速に動作します。公式サイトにあるサンプルには非常に複雑なグラフや図、アニメーションなどがありますが、その殆どがiPhone(4s)で閲覧した場合でも、充分なスピードで描画されます。■d3.jsのインストールd3.jsを使用するのは非常に簡単で、ドキュメントの冒頭で下記のスクリプトファイルを読み込むだけです。src="https://d3js.org/d3.v4.min.js"></script>■DOM操作d3.jsはjQueryに似たセレクション機能をもち、セレクタを使用してDOMの操作を行うことができます。下記の例は、ドキュメント上の全てのpタグにスタイルを適用していますが、jQueryを使った事のある方には理解しやすいと思います。"white");必要に応じて個々のノードを選択して操作することもできます。"black");■動的なプロパティの変更d3.jsは、要素の操作を行う際に単に定数を設定できるだけでなく、コールバック関数を使用して動的にプロパティを変更することができます。以下は、ドキュメント上の全てのpタグを選択し、それぞれにランダムな色を設定します。",100%,50%)";});コールバック関数の引数では、選択した要素のインデックス数を受けとり反復処理をおこなうことができます。以下のコードは、奇数番のpタグと偶数番のpタグ、それぞれを分けて色を設定しています。CSS■データを基に要素を操作するd3.jsのもっとも大きな特徴である、データを中心とした要素の操作です。下記の例では、選択したドキュメント上のpタグに対して、上から順にデータ(配列の要素)の数だけpタグにスタイル変更を行っています。コールバック関数の中では引数としてデータの値を受け取り、それをfont-sizeの値として適用しています。CSS■データを基に要素を追加データ(配列)を基に、ドキュメントに新たな要素(pタグ)を追加しています。CSSd3.jsではこのようにデータを基にしたドキュメントの要素への操作を簡単に行うことができます。■デバッグのしやすさcanvasタグを利用するグラフィックライブラリと異なり、d3.jsで作成するグラフは、HTML、CSS、SVGで構築されます。そのため、ブラウザの開発ツール(webインスペクタ等)で容易にその内容を確認することができます。「意図した通りにグラフが出力されない」などのバグも、原因を探るのが非常に簡単です。下記のリンク先で、web開発者ツールを起動し実際に確認してみてください。18,150Amazon.co.jpで詳細を見るjsdo.itで、他にいくつかサンプルを作ってます。行き来する出稼ぎエンジニア。GIS(地理情報システム)・データビジュアライゼーション・オープンデータなどについて書いてます。