はじめに かれこれd3.jsつかってから1年近く経ちました。 それほどd3.js力は上がってませんが、d3.jsの出会いで人生レベルで色々変わってきたこの1年だったと思います。 そんなd3.jsは何がすごいって、 テンプレートじゃないからできるインタラクティブな表現力だと思います。 ただ、d3.jsの表現力もただ表示しただけでは効果は半減です。 動かない・ストーリのないグラフだったらエクセルやパワポのグラフでもいいはずです。 エンジニアだとついつい、中身の作りばかりに意識がいくこともあると思うのですが、 データをどう見せるか!これが最も重要だと思います。 そんなデータの見せ方で参考にしてきたものを紹介していきます。 Four Ways to Slice Obama’s 2013 Budget Proposal ちょっと古いですが、オバマ政権の2013年度の予算をどう使うかを可視化したもので
![d3.jsで参考にしてきたデータの見せ方とストーリー - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/53c44cdac135780af68703415a769844a95516c3/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Fadvent-calendar-ogp-background-f625e957b80c4bd8dd47b724be996090.jpg%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9ZDMuanMlRTMlODElQTclRTUlOEYlODIlRTglODAlODMlRTMlODElQUIlRTMlODElOTclRTMlODElQTYlRTMlODElOEQlRTMlODElOUYlRTMlODMlODclRTMlODMlQkMlRTMlODIlQkYlRTMlODElQUUlRTglQTYlOEIlRTMlODElOUIlRTYlOTYlQjklRTMlODElQTglRTMlODIlQjklRTMlODMlODglRTMlODMlQkMlRTMlODMlQUElRTMlODMlQkMmdHh0LWNvbG9yPSUyMzNBM0MzQyZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtY2xpcD1lbGxpcHNpcyZ0eHQtYWxpZ249bGVmdCUyQ21pZGRsZSZzPWRhNzk5NDFlYTZmNDA0MjY3MTBlNzVhYzA1ZWZmMWM0%26mark-x%3D142%26mark-y%3D151%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwZ2FuZXphc2FuJnR4dC1jb2xvcj0lMjMzQTNDM0MmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz0yMDkwNjljZDlhNWFhZDZlMzI5YzViN2ViYmE4MWQ3Nw%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3Df993adef3a8620198c8171431b8db9ec)