ツリーマップを作っていたのだけれど、これを人に見せたら、「わかりにくい！」と一刀両断ｗ
急遽、バブルチャートを作って出場時間順に並び替えしました。
バブルチャートについてはこちら。
せっかくツリーマップができたのだから、ブログには残しておきたいと思います。
拡大表示や文字の大小は、実装していないので、そこを除いても、確かにわかりにくい。。
選手同士の出場時間の差が、大きくないので、視覚的に比較がしにくいみたいです。例えば、縦に長い長方形と横に長い長方形、ぱっと見でどちらが大きいのか比較ができないというような感じ。
改善点としては、こんな感じにズームできるようにするくらいでしょうか。
さて、ツリーマップの描写です。
今回のポイントの色分けをメモ。
データセットは、
- 過去に所属していた選手：player_1
- 現所属選手：player_2
- U18の選手：player_3
と分類しています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
"category": "albirex", "player": [ { "category": "player", "player": [ { "category": "player_1", "player": [ { "name":"本間 勲", "time":25510 }, { "name":"矢野 貴章", "time":16658 }, { "name":"田中 亜土夢", "time":15593 }, { ・・・ "category": "player_2", "player": [ ・・・ |
その分類に対して、switch文で四角の中の色を指定しています。
|
1 2 3 4 5 6 7 8 9 |
var colorSelect = function(d){ var color = '#fff'; switch(d){ case 'player1':color = '#7e8cff';break; case 'player2':color = '#ffb17e';break; case 'player_3':color = '#7efff2';break; } return color; } |
ツリーマップ描写部分です。
三項演算子によって、色分けしています。
children要素が存在するときは、nullを返し、一番下のchildren要素のparent要素の名前によって色を変えています。
|
1 |
.attr("fill",function(d){return d.children ? null : colorSelect(d.parent.category);}) |
bl.ocks.orgでの、全コードはこちら。
コメントは受け付けていません。