rui live note

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

*

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

      2017/04/19   JavaScript, 将棋, 生活, 開発 ,

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

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

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

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

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

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

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

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

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

kishi_sankey

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

棋士の師弟関係

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

棋士の師弟関係

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

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

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

棋士の師弟関係

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

女流棋士の師弟関係

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

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

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

ad

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

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

  関連記事

jetstream
ほぼ日手帳ボールペンの替芯を交換して使う方法

数年前に買ったほぼ日手帳のボールペンを愛用しています。 肝心の手帳本体の方は三日 …

エールクリエイティブ
太田市の コワーキングスペース 「エールクリエイティブ」に行ってきました

群馬県太田市にあるコワーキングスペース「エールクリエイティブ」に行ってきました。 …

将棋序盤の指し方入門
ルールを覚えた子どものレベルアップにオススメな「羽生善治のみるみる強くなる将棋 序盤の指し方 入門」

以前、こちらの記事でこれから将棋を始める子ども向けの超入門本を紹介したことがあり …

雪
今回の大雪被害について前橋市から支給される支援金・見舞金の申請をお忘れなく

自分が会社の業務で納めたシステムが入っている事業施設が、先日の大雪でほぼ全壊して …

グラフ
「WordPressもくもく勉強会@群馬」の参加者状況を集計してD3.jsで可視化してみました

毎月最終木曜に開いている WordPress のもくもく会「WordPressも …

電王戦
電王戦リベンジマッチは菅井五段のリベンジならず。残念だけど心に残る対局でした。

電王戦リベンジマッチ 激闘23時間 | ニコニコ動画 プロ棋士とコンピュータ将棋 …

小学校
小学校各学年を代表するキャラクターを息子と考えてみた結果

先日息子と会話していて、自分たちが知っている小学校各学年のキャラクターの話題にな …

WordPressもくもく勉強会
「WordPressもくもく勉強会@群馬 #44」開催レポートです

WordPressもくもく勉強会@群馬 #44 : ATND WordPress …

将棋の駒
チープな普及用の将棋盤・駒が欲しい

※この記事は「将棋 Advent Calendar 2016 – A …

前橋こども図書館
私が前橋こども図書館を愛してやまない9つの理由

地元前橋にある「前橋こども図書館」が大好きです。 前橋こども図書館 もともと書店 …