rui live note

WordPress、PHP、子育て、ブログ、将棋、コワーキング、子育て、群馬等に関する日々感じたことを書いているブログです

*

今度はD3.jsで2016夏の甲子園出場校選手の出身都道府県を可視化してみました

      生活, 高校野球 ,

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

先日、Google Developers の Sankey Diagram ライブラリを使って、2016夏の甲子園出場校選手の出身都道府県を可視化してみましたが、今度は D3.js を使って作り直してみました。

2016年夏の甲子園出場校登録メンバー都道府県分布グラフ

可視化したグラフは下記リンクから見られます。

2016年夏の甲子園出場校登録メンバー都道府県分布グラフ

グラフについて

ソース一式は GitHub に上げてあります。

今回これを作成するのに、D3.js の Sankey Diagrams ライブラリを利用させてもらいました。

こんな感じに必要なフォーマットの json を用意さえすれば、あとはいい感じにデータを整形して表示してくれます。デフォルトでノードをぐりぐりドラッグできるようになってたりして楽しいです。

また、json の nodes 要素で指定した順に値を表示させられるので、Google Developers の時に困った右辺の都道府県が思い通り並び替えられないということもありませんでした。

データの作り方の注意点として、nodes 要素に同じ値が来るとエラーが起きるということ。今年、大分県の代表が大分高校だったので「大分」というデータが2件存在することになり、そこでエラーが起きてるのに気付くのにしばらくかかってしまいました。(一方にダミーのスペースを足して暫定回避。)

ad

この記事が気に入ったらシェアしてもらえると嬉しいです!

  • このエントリーをはてなブックマークに追加
  • Pocket
  • follow us in feedly
  • RSS

  関連記事

高校野球定番まとめページ
甲子園の前哨戦に!高校野球の定番まとめページ2015年版

先日、全国49地区の代表校が全て決まり、8月6日からはいよいよ高校野球ファンお楽 …

ブラスバンド
【#ブラバン甲子園】高校野球観戦のお供にブラバン応援ツイート中継「ブラバンde甲子園」がマニアックで面白い!

日々熱戦が繰り広げられている夏の甲子園、きっとみなさんも地元校や贔屓校の応援で盛 …

甲子園
「いらすとや」で振り返る甲子園歴代名場面集

とってもかわいいイラストで大人気のフリー素材集「いらすとや」さんですが、どんな場 …

報知高校野球
報知高校野球の表紙バックナンバーコレクションが涙モノすぎる

「報知高校野球」という高校野球雑誌があるんですが、その記者兼編集者である日比野さ …

前橋育英
2017年センバツ出場校WebサイトにリボンをかけるChrome拡張を作ってみました

あれこれ忙しいことが続くと、自分が楽しめるものでも作って現実逃避したくなりますね …

高校野球
いらすとやで歌おう!「栄冠は君に輝く」

さて梅雨も明け、今年も熱い夏がやってきましたね。 世間はすっかりリオ五輪の話題で …

sample
2016夏の甲子園出場校選手の出身都道府県をSankey Diagramで可視化してみました

昨年、スポナビでやっていたインフォグラフィック企画がとても面白かったので、似たよ …

高校野球
夏の甲子園がもうすぐ開幕するので高校野球の定番まとめページでもご紹介しましょう!

いよいよ、8月9日から夏の甲子園が開幕しますね。 高校野球 – 第9 …

高校野球応援まとめサイト
高校野球応援動画まとめサイト「OUEN」という新サイトを作りました

先日、こんな高校野球応援動画まとめサイトを作りました。 高校野球応援動画まとめサ …