おすすめJavaScriptライブラリ【D3.js】
The New York Timesが活用していたり、
GitHubのWatch数が上昇中であったりと、
注目して損はないJavaScriptライブラリ【D3.js】
http://d3js.org/
D3 (Data-Driven Documents)
このライブラリはその名の通り、
データ駆動のドキュメント生成を行う
JavaScriptライブラリです。
何が出来るかといいますと、
下図のようなグラフを描くことが可能です。
Webサイトでも様々な数値データが掲載、
そして公開されていますが
数字だけのデータを見ても
ピンと来ないことって多いですよね。
そういう時はビジュアライゼーション（視覚化）、
つまりグラフ化するとわかりやすくなります。
D3は、そういう時に役立つライブラリです。
グラフ描画のライブラリは他にも多くあり、
実際、私たちグラッドキューブも
現在はHighchartsを使用していたりもしていますが、
なぜD3をおすすめするのか。
ポイント2点あります。
1．GitHubにサンプルコードが公開されている。
GitHubとは
バージョン管理システム(Version Control System)の一種であり
プロジェクト(ソース、ドキュメント)の改訂履歴が管理可能な
ホスティングサービスです。
プロジェクトの公開も可能でオープンソースの開発場所としても使用されています。
ベーシックなグラフのサンプルだけではなく
多種多様なグラフィカルな
サンプルが公開されています。
参考にするものが多いと、
自分が使うときも選択の幅も広がりますね。
そして何より、多くの人が使用しているということは
分からないことはネットで調べれば
見つかる可能性が高いということです。
どういうものがあるか、
ご自身で体験して頂くのが早いと思いますので
ぜひGalleryを一度のぞいてみてください。
動かせるものもあり楽しいですよ。
Gallery (https://github.com/mbostock/d3/wiki/Gallery)
ちなみに、The New York Timesが作成した
オバマ大統領の国家予算案詳細も
Galleryで紹介されています。
Obama’s Budget Proposal
http://www.nytimes.com/interactive/2012/02/13/us/politics/2013-budget-proposal-graphic.html
2．単なるグラフ描画だけではなくグラフィックやアニメーションも楽しめる。
D3はデータを基に
ドキュメントを作成するライブラリですので
グラフだけでなくグラフィックやアニメーションを
作成することが可能です。
遊べるサンプルも
2点ご紹介させて頂きます。
D3を利用すると、
ゲームなんかも作れそうですね。
・Build Your Own Graph!
http://bl.ocks.org/mbostock/929623
クリックで点が増え、
近くの点と線を繋いでくれます。
点をクリックホールドで
グラフィックを動かすこともできます。
・Spline Editor
http://bl.ocks.org/mbostock/4342190
クリックで線を引くことができます。
「Interpolate」を変更すると、
線の種類が変えれます。
私たちグラッドキューブの使命は、
お客様よりお預かりしているリスティング広告を
分析・改善していくことです。
リスティング広告の成果は数値データ。
それを分析しやすくグラフ化する、
お客様への成果報告をわかりやすいグラフで報告する、
などビジュアライゼーション（視覚化）の利用機会は多いです。
お客様によりわかりやすい情報を
提供できるように日々努めて参りますので、
今後もぜひご期待ください。
【おまけ】
最近使って便利だったJavaScriptライブラリ
「Multiselect」をご紹介します。
Multiselect
http://loudev.com/
Selectタグを使用して
複数選択可能なセレクトボックスを作成しても、
CtrlやShiftを押しながら選択しなければならなかったりと
不便に思ったことはないですか？
Multiselectはその不便が解消されます。
使用方法は簡単。
まずはセレクトボックスのコードを
通常通り書きます。
そしてSelect要素に対して
multiSelect()を実行するのみです。
JavaScriptのボタンを押してみてください。
コードを確認することができます。
興味のある方は、ぜひお試しください。
SNSでもお役立ち情報をお届けします！
