クリエーターのためのD3.js入門 ~第1回 D3.jsの魅力~
- 2014/10/14
- 近藤
こんにちは。最近、子供とちょろっと堤防釣りの週末を過ごしています、近藤です。
さて、今釣りと同じくらい気になっているのが、D3.js。
業務でデータの視覚化を行う必要があり、いじり始めたのですが、
とても奥深くて楽しいJavaScriptライブラリです。
D3.jsの世界はとても奥深く、初心者がどこまで魅力を伝えられるかとても不安がありますが、
これから3回に分けて、D3.jsの事について書いて見たいと思います!
- 第1回:D3.jsの魅力
- 第2回:基本的な書き方
- 第3回:レイアウト+インタラクティブ
D3.jsとは?
D3.jsは、データに基づいてドキュメントを操作するための
データの可視化を行う JavaScriptライブラリです。
公式サイト:http://d3js.org/
「このデータ、分かりやすくしてもらえるかな?」
「うち、こんなデータあるんだけど、コンテンツとして上手い事利用できるない?」
という要望は結構あるかと思います。
そんな時は、選択肢の一つとして、D3.jsの活用を検討ください。
何が出来るの?
データの視覚化、というと、まずグラフが思い浮かぶかと思います。
しかし、「D3.jsを使えばすぐグラフが描ける」というものではありません。
D3.jsが行うのは、データをドキュメントと関連付けるところまで。
どのタイプのグラフを使うか、色付けの意味はどうするか、
高さ・比率の表現は何を基準に行うか、などは、エンジニア・クリエーター自身で行う必要があります。
※D3.jsを利用した実際の記述などは次回記事「第2回:基本的な書き方」でご紹介いたします。
事例紹介
本家のサンプルだけでも膨大な量がありますが、
ここ数年で、D3.jsを利用した案件がとても増えているようです。
以下、D3.jsを利用したビジュアライゼーションの例をご紹介したいと思います。
日本のお野菜収穫量 http://infographic.jp/nippon-yasai/
イラストも可愛い!
農林水産省 作物統計「都道府県別の作付面積、10a当たり収量、収穫量及び出荷量 」
というお堅い?データを元に、1974~2012年の野菜収穫量をとても分かりやすく表現してくれています。
ボロノイ図を使って最近接施設を検索 http://shimz.me/example/d3js/voronoi/06/index.html
いつも素晴らしいD3の実験をしださっている、http://shimz.me/さんより。
ボロノイ図、というのも知りませんでしたが、いろいろ活用方法がありそうですね。
データビジュアライゼーションの奥深さと楽しさを窺い知れる作品です。
世界風速 http://earth.nullschool.net/jp/
「US National Weather Service」を元に、世界の風の流れを視覚化したサイト。
様々なレイヤーで、気温・体感温度などに切り替えることも。
D3.jsの魅力いっぱいのサイトです。
弊社のエンジニア、新井君もD3.js入門の記事を書いてくれてますので、D3.jsに興味ある方(+herokuやperfumeに興味ある方)、ぜひご一読ください。
http://tech.aainc.co.jp/archives/8586
D3.jsの魅力
さて、D3.jsの魅力に関してですが、僕は以下だと思っています。
-
共有しやすさD3.jsは、SVGなどモダンブラウザの持つ優れた視覚表現を利用しやすいように設計されています。
ウェブ上でのデータ・経験の共有しやすさは、D3.jsの素晴らしい魅力のひとつです。 -
インタラクティブ/アニメーションクリックイベントやドラッグ・遷移によるアニメーション表現など。紙面では表現できない様々な視覚表現で、よりデータの魅力や課題を伝えられるのが、D3.jsの素晴らしい魅力のひとつです。
-
リアルタイムD3.jsで扱えるデータの形式には様々なものがあります。特に、ウェブならではなのは、リアルタイムのデータを伝えられるという点。今まさに世界で起こっていることを、視覚的に伝えるのに、素晴らしい力を発揮してくれるのがD3.jsです。
最後に、これからD3.jsの記事を続けたいと思いますが、
開発者の多くの方がおっしゃっている、とても大事なことを。
それは、データビジュアライゼーションは、あくまで「手段」であって、
何のため?という、目的を見失わないようにする、ということ。
以下は、Vitaly Friedman の有名な言葉。
The main goal of data visualization is its ability to visualize data, communicating infomation clearly and effectivelty.
(データ可視化の目的は、データを可視化し、情報を明確かつ効果的に伝えること)
見た目の美しさも操作での美しさも表現できてしまうD3.jsだからこそ、
この目的からそれず、分かりやすい・伝えやすいものをぜひ作って行きたいと思います。