将棋棋士データベースで遊ぶ(9)〜棋士の師弟関係をD3.jsで可視化その2〜

※この記事は「将棋 Advent Calendar 2016 – Adventar」の21日目です。

将棋連盟の棋士データベースで遊んでみようシリーズ、前回の記事では棋士の師弟関係を D3.js で可視化してみましたが、データが多すぎてかなり見づらい状態でしたので多少改善を図ってみました。

棋士の師弟関係をD3.jsで可視化

今回、手を加えた点は次のものです。

  • 未選択時の線の色を薄くした
  • 棋士・女流棋士別に分けた

未選択時の線の色を薄くした

まず、データが多くて師弟関係の関連を表す線がごちゃごちゃ見づらかったので、未選択時の線の色を薄くして選択された線が分かりやすくなるようにしてみました。

前回まではこんな状態でしたが・・・、

kishi_sankey

色を調整したことでこんな感じに。

棋士の師弟関係

棋士を選択した時にも師弟関係の線がだいぶ分かりやすくなりましたね。

棋士の師弟関係

棋士・女流棋士別に分けた

また、データを棋士・女流棋士別に絞ったページをそれぞれ作りました。

こちらが棋士だけのページ。

棋士の師弟関係

こちらが女流棋士だけのページです。

女流棋士の師弟関係

これで前よりもだいぶ見やすくなったと思いますがいかがでしょうか?

まだまだ改善する方法はいくらでもあるんでしょうが、時間の都合もあるのでとりあえず今回はこの辺で・・・。もっと良いアイデアなどありましたら、ぜひご意見お待ちしてます!

この記事で作ったコードはこちらに上げてありますので、どうぞご自由にご覧ください。

PHPが好きなWeb系エンジニアです。フリーランスでWebサイト制作やWordPressのカスタマイズ、システム開発等を雑多にこなしています。バンカラ応援好きの振り飛車党。 高校野球 / 将棋 / WordPress / ブログ / 食べること / 二児の父親 >>詳しいプロフィールはこちら