SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

近未来の技術トレンドを先取り! 「Tech-Sketch」出張所

「D3.js」を使ったデータビジュアライゼーション

近未来の技術トレンドを先取り! 「Tech-Sketch」出張所 第8回

  • X ポスト
  • このエントリーをはてなブックマークに追加

 本連載ではTIS株式会社が提供している技術ブログ「Tech-Sketch」から「コレは!」というテーマをピックアップし、加筆修正して皆様にお届けしております。今回は「D3.js」というJavaScriptのライブラリを利用した、データ可視化についてご紹介します。

  • X ポスト
  • このエントリーをはてなブックマークに追加

 Webやスマートデバイス、センサーなどあらゆるものから情報を収集出来るようになり、世の中には膨大なデータが溢れかえっています。また、ビッグデータやデータサイエンティストといったキーワードに注目が集まり、データ活用への期待が高まっています。しかし、単純に収集したデータはそのままでは見づらく、そこから意味を汲み取ることは困難です。そこで、データの見せ方や伝え方が重要になってきます。

D3.jsとは

 D3.jsは、Mike Bostock(mbostock)が作成したデータ可視化用途で人気のJavaScriptライブラリで、データをDOMと結びつけ、データ駆動によりグラフを作成することができます。ソースコードはGithubで公開されており、人気を表すStarの数がGithubに公開されているリポジトリ全体で6番目に多いことからも、注目の高さが伺えます(2013/10現在)。ライセンスは修正BSDです。

 D3.jsについて知るには、まずD3.jsで作られた作品を見るのが一番かと思います。Github上のGalleryや、作者の作品ページなどで豊富な作品が紹介されています。

 また、公式ページでAPIリファレンスなどのドキュメントが提供されています。英語が苦手な方は一部日本語翻訳されたページがありますので、そちらを参照すると良いでしょう。

D3.jsの特徴

jQueryのようなセレクタ

 D3.jsはjQueryのようなセレクタを提供します。これにより宣言的にノードセットを操作することが可能になるため、繰り返しや分岐処理が減り、記述が簡潔になります。この操作対象のノードセットのことをセレクションと呼びます。

 以下に利用例を挙げます。

 すべてのp要素の文字色を白に変更する場合、手続き的に記述すると繰り返しをfor文で処理しますが、

var paragraphs = document.getElementsByTagName("p");
 
for (var i = 0; i < paragraphs.length; i++) {
  var paragraph = paragraphs.item(i;)
  paragraph.style.setProperty("color", "white", null);
}

D3.jsのセレクタを用いて宣言的に記述すると、以下のように簡潔に記述することができます。

d3.selectAll("p").style("color", "white");

 コードも、d3.selectAll("p")ですべてのp要素を取得、style("color", "white")で文字色を白に設定、と直観的で分かりやすくなったのではないでしょうか。

SVGでの描画

 D3.jsはSVGでグラフやチャートなどを描画します。SVGとはScalable Vector Graphicsの略で、XMLをベースとした2次元ベクターイメージ用の画像形式です。最新のブラウザであればほとんどSVGに対応していますが、Internet Explorer 8を含む古いInternet ExplorerはSVGに対応していないため、表示されない可能性があります。

高い柔軟性

 D3.jsは他のグラフ描画ライブラリと比べ、柔軟性がとても高いライブラリです。他のライブラリは簡単に綺麗なグラフを描画できるように作られていることが多いですが、D3.jsはそうではありません。公式ページにも書かれていますが、表現方法ではなく変換方法であり、描画処理に関しては自身でコードを記述する必要があります。自身で描画処理を記述しなければならない分難しく感じるかもしれませんが、製作者に描画処理に対する裁量を与えることで複雑なデータビジュアライゼーションを可能にします。また、Web標準であるHTML、CSS、SVGを使っているため、デバッグがしやすい点も特徴の一つです。

基本的な使い方

 D3.jsの基本である、セレクションデータバインディングSVGの描画アニメーションの設定についてサンプルコードと共に説明していきます。

 D3.jsを利用するには、D3.jsのサイトかGithubからファイルを取得するか、以下のscriptタグをHTMLに記述します。

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

セレクション

 D3.jsの特徴として紹介しましたが、D3.jsにはセレクタが用意されています。セレクタを利用することでノードの選択、操作が行えます。以下の例では、idがtextの要素を選択し、文字色を赤に変更しています。

d3.select('#text').style('color', 'red');

会員登録無料すると、続きをお読みいただけます

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

次のページ
データバインディング

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
近未来の技術トレンドを先取り! 「Tech-Sketch」出張所連載記事一覧

もっと読む

この記事の著者

天沼 健仁(TIS株式会社)(アマヌマ タケヒト)

TIS株式会社 コーポレート本部 戦略技術センターに所属。クレジットカード基幹システムの保守・開発、Webシステム開発を経て現在に至る。 現在は、RubyやJavaScriptに関するライブラリや外部サービスの検証を行っている。 プライベートではアジャイル開発やRubyに興味を持ち関連の勉強会にマメに参加していたが、引越し後都心から離れ足が遠のいているのが悩み。Tech-Sketch : http://tech-sketch.jp

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/7459 2013/11/05 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング