LoginSignup
9

More than 5 years have passed since last update.

d3.jsで参考にしてきたデータの見せ方とストーリー

Last updated at Posted at 2014-12-13

はじめに

かれこれd3.jsつかってから1年近く経ちました。
それほどd3.js力は上がってませんが、d3.jsの出会いで人生レベルで色々変わってきたこの1年だったと思います。

そんなd3.jsは何がすごいって、
テンプレートじゃないからできるインタラクティブな表現力だと思います。
ただ、d3.jsの表現力もただ表示しただけでは効果は半減です。
動かない・ストーリのないグラフだったらエクセルやパワポのグラフでもいいはずです。

エンジニアだとついつい、中身の作りばかりに意識がいくこともあると思うのですが、
データをどう見せるか!これが最も重要だと思います。
そんなデータの見せ方で参考にしてきたものを紹介していきます。

Four Ways to Slice Obama’s 2013 Budget Proposal

ちょっと古いですが、オバマ政権の2013年度の予算をどう使うかを可視化したものです。

http://www.nytimes.com/interactive/2012/02/13/us/politics/2013-budget-proposal-graphic.html?_r=0

1ページ目 全体を俯瞰

予算の大きさは全体でどのくらいなのかがこのグラフ1枚でパッとわかります。
さらに昨年度よりも予算を増やした部分が緑、減らした部分が赤となっており、
2012年度との違いもはっきりしてきます。

スクリーンショット 2014-12-13 23.32.16.png

2ページ目 支出の種類でこの提案での特徴

左側が法律によって決まっている予算、右側が裁量を持って決められる部分の予算になります。2013年度では裁量のある部分で軍事的な予算を2012年度より減らす傾向にあることがわかります。

スクリーンショット 2014-12-13 23.43.59.png

3ページ目 裁量ある予算の詳細

先ほどの円の大きさと色だけでは、表現としてはわかりづらいため、
縦軸を前年比の増減にし、さらにわかりやすくしています。

スクリーンショット 2014-12-13 23.50.41.png

4ページ目 最後に分野別の予算

最後に分野別に予算を細かく表示し、
各分野でどのくらい使っているのか、増減の傾向がわかり、
この予算案の方向性がはっきり見えてきます。
スクリーンショット 2014-12-13 23.53.10.png

The Facebook Offering: How It Compares

 

http://www.nytimes.com/interactive/2012/05/17/business/dealbook/how-the-facebook-offering-compares.html

スクリーンショット 2014-12-13 23.57.22.png

おわりに

うーん。
今回はオバマ政権の記事だけの紹介になってしまいすみません。
前置き書くだけでわりと時間がなくなってしまいました。

Facebookもすごく参考にしています。
公表できるデータでストーリのある可視化やりたいですね〜

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
9