NFL Salary Capの状況を可視化

D3を使ったのはtreemapを使うためだったのですが、もうちょっとD3っぽい機能を使いたいなあということで、いくつか手を加えました。

まずselect formからチームを選択できるようにしました。

次にtooltip機能で、mouseoverしている個所の詳細が出るようにしました。これは

D3.jsでSVGのグラフにツールチップを付ける方法3選 | Qaramell Blog さんとリンク先の参照にさせていただきました。最初はmousemoveに追随させていたのですが、元のtreemapが情報過多気味で、その上に情報が乗るとごちゃついた感じになったので、あえて入れませんでした。

その結果、はてなブログでは表示されなくなってしまいました。いろいろ試したのですが、僕の能力では解決方法が見つからなかったので、tumblrの方に投稿するということに。色も微妙に変えました。

>　tumblr

出来上がりのイメージ