日本鳥類目録分類図の可視化

-
1.日本鳥類目録分類図

データの可視化(視覚化)をして見たいと思います。データの可視化はグラフや電子地図上にデータをマッピングしたりして分かりやすくすることです。 これを「データビジュアライゼーション」と言うそうです。特に今回は、題材として階層構造化(ツリー構造)されたデータを可視化ツールとして有名な JavascriptライブラリであるD3.jsを利用して見ました。まず、見える化の第一弾としての題材は鳥類目録の作成をします。

題材における可視化のヒントは、
のサイトで公開されているものが非常に興味深く、参考とさせて頂きました。同じことをやって見たいと思い、データの収集と階層構造 データの作成に取り組みましたので、 その作成手順等を紹介致します。

2.データ作成手順

まずは、鳥類目録の可視化をするために「鳥類目録 第 7 版」をダウンロードします。

    1. 下記のサイトより、日本鳥類目録 第 7 版リスト(mokuroku7.xls)をダウンロード
    (資料提供元 : NPO 法人 バードリサーチ)
    データダウンロード先：http://www.bird-research.jp/1_shiryo/7ed/

    2.ダウンロードしたExcelファイルを開き、目名、科名、種名のみを残し、
        他の列(A列、E列)は削除します。
    3.目名、科名、種名を残した状態で列(A列、B列)を挿入で追加して、
        A列：日本鳥類目録、B列:鳥類を追加します。
    4.階層構造にして、目名と科名の同じものをそれぞれ先頭行のみとして削除します。
    5.階層構造の表ができたら、A列の最終行にEOFの文字列を追加します。
    6.ベースの表ができたので名前を付けて保存するので、任意のブック名で
        一旦、保存します。
    7.続けて、JSON形式に変換(JSON形式ファイルを自動生成)するため、名前を付けて保存で、
        CSV形式(カンマ区切り)で保存します。

CSVファイル名は、「birds.csv」としておいて下さい。(自分で判別できれば、実際は何でも良いです。) ここまでの手順で、データの下ごしらえができました。

    8.階層構造CSVtoJSONコンバータ.xlsmを開き変換ボタンをクリックしてbirds.csvを読み込み変換します。
        ※階層構造CSVtoJSONコンバータにつきましては、こちらを参照願います。

        この操作でコンバータにて階層構造のJSONファイル(birds.json)が出力されます。

3.データの可視化

「苔の絶滅危惧種を R + d3.js で可視化してみた 」 D3.js の radial layout サンプルソースと「D3.js の公式サイト」にある Collapsible Tree d3.V3 版 のサンプルソースから描画領域などの数値を出力結果を見ながら調整して行います。D3.js の最 新版は D3.js V4 版ですが、良く理解していないので、 D3.js V3 版のサンプルを利用させて頂きました。

DEMO

d3sample01.html内のJSONファイル名を変更する場合は、68行を修正して下さい。
68
d3.json("./data/birds.json", function(error, root) {
d3sample01.html [radial layout]
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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!doctype html>
<html lang="ja">
<head>
  <title>鳥類目録第7版</title>
  <meta http-equiv="Content-Type" content="text/html; charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta http-equiv="Content-Script-Type" content="text/javascript">
  <meta http-equiv="Content-Style-Type"  content="text/css">
  <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
  <style type="text/css">
    .node circle {
      fill: #ffffff;
      stroke: blue;
      stroke-width: 0.5px;
    }
    .node {
      font: 10px sans-serif;
    }
    .link {
      fill: none;
      stroke: #ccc;
      stroke-width: 1.5px;
    }
    text {
      stroke-width: 0.5px;
    }
    .EX {
      fill: #FF0000;
      stroke: #FF0000;
      stroke-width: 1px;
    }
    .CR_EN {
      fill: #e25f1a;
      stroke: #e25f1a;
    }
    .VU {
      fill: #ffc06b;
      stroke: #ffc06b;
    }
    .NT {
      fill: #168916;
      stroke: #168916;
    }
    .DD {
      fill: #4c4ca7;
      stroke: #4c4ca7;
    }
  </style>
</head>
<body>
<script type="text/javascript">
// ***** 画面全体サイズ *****
  var diameter = 2400;
   
  var tree = d3.layout.tree()
      .size([360, diameter / 2 - 200])
      .separation(function(a, b) { return (a.parent == b.parent ? 1 : 2) / a.depth; });
   
  var diagonal = d3.svg.diagonal.radial()
      .projection(function(d) { return [d.y, d.x / 180 * Math.PI]; });
   
  var svg = d3.select("body").append("svg")
      .attr("width", diameter)
      .attr("height", diameter)
      .append("g")
      .attr("transform", "translate(" + diameter / 2 + "," + diameter / 2 + ")");
   
  d3.json("./data/birds.json", function(error, root) {
    var nodes = tree.nodes(root),
        links = tree.links(nodes);
   
    var link = svg.selectAll(".link")
        .data(links)
        .enter().append("path")
        .attr("class", "link")
        .attr("d", diagonal);
   
    var node = svg.selectAll(".node")
        .data(nodes)
      .enter().append("g")
        .attr("class", "node")
        .attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; })
   
    node.append("circle")
        .attr("r", 4.5);
   
    node.append("text")
        .attr("dy", ".31em")
        .attr("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; })
        .attr("transform", function(d) { return d.x < 180 ? "translate(8)" : "rotate(180)translate(-8)"; })
        .attr("class", function(d) { return d.rank; })
        .text(function(d) { return d.name; });
  });
   
  d3.select(self.frameElement).style("height", diameter - 150 + "px");
     
</script>
</body>
</html>

DEMO

d3sample02.html内のJSONファイル名を変更する場合は、51行を修正して下さい。
51
d3.json("./data/birds.json", function(error, flare) {
d3sample02.html [Collapsible Tree]
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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
<!doctype html>
<html lang="ja">
<head>
  <title>鳥類目録第7版</title>
  <meta http-equiv="Content-Type" content="text/html; charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta http-equiv="Content-Script-Type" content="text/javascript">
  <meta http-equiv="Content-Style-Type"  content="text/css">
  <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
  <style type="text/css">
.node {
  cursor: pointer;
}
.node circle {
  fill: #fff;
  stroke: steelblue;
  stroke-width: 1.2px;
}
.node text {
  font: 9px Meiryo UI;
}
.link {
  fill: none;
  stroke: #ccc;
  stroke-width: 1.2px;
}
</style>
<body>
<script>
 
var margin = {top: 20, right: 120, bottom: 20, left: 120},
    width = 1000 - margin.right - margin.left,
    height = 7000 - margin.top - margin.bottom;
 
var i = 0,
    duration = 750,
    root;
 
var tree = d3.layout.tree()
    .size([height, width]);
 
var diagonal = d3.svg.diagonal()
    .projection(function(d) { return [d.y, d.x]; });
 
var svg = d3.select("body").append("svg")
    .attr("width", width + margin.right + margin.left)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
 
d3.json("./data/birds.json", function(error, flare) {
  if (error) throw error;
 
  root = flare;
  root.x0 = height / 2;
  root.y0 = 0;
 
  function collapse(d) {
    if (d.children) {
      d._children = d.children;
      d._children.forEach(collapse);
      d.children = null;
    }
  }
 
  root.children.forEach(collapse);
  update(root);
});
 
d3.select(self.frameElement).style("height", "5000px");
 
function update(source) {
 
  // Compute the new tree layout.
  var nodes = tree.nodes(root).reverse(),
      links = tree.links(nodes);
 
  // Normalize for fixed-depth.
  nodes.forEach(function(d) { d.y = d.depth * 180; });
 
  // Update the nodes…
  var node = svg.selectAll("g.node")
      .data(nodes, function(d) { return d.id || (d.id = ++i); });
 
  // Enter any new nodes at the parent's previous position.
  var nodeEnter = node.enter().append("g")
      .attr("class", "node")
      .attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })
      .on("click", click);
 
  nodeEnter.append("circle")
      .attr("r", 1e-6)
      .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });
 
  nodeEnter.append("text")
      .attr("x", function(d) { return d.children || d._children ? -10 : 10; })
      .attr("dy", ".35em")
      .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })
      .text(function(d) { return d.name; })
      .style("fill-opacity", 1e-6);
 
  // Transition nodes to their new position.
  var nodeUpdate = node.transition()
      .duration(duration)
      .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; });
 
  nodeUpdate.select("circle")
      .attr("r", 4.5)
      .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });
 
  nodeUpdate.select("text")
      .style("fill-opacity", 1);
 
  // Transition exiting nodes to the parent's new position.
  var nodeExit = node.exit().transition()
      .duration(duration)
      .attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; })
      .remove();
 
  nodeExit.select("circle")
      .attr("r", 1e-6);
 
  nodeExit.select("text")
      .style("fill-opacity", 1e-6);
 
  // Update the links…
  var link = svg.selectAll("path.link")
      .data(links, function(d) { return d.target.id; });
 
  // Enter any new links at the parent's previous position.
  link.enter().insert("path", "g")
      .attr("class", "link")
      .attr("d", function(d) {
        var o = {x: source.x0, y: source.y0};
        return diagonal({source: o, target: o});
      });
 
  // Transition links to their new position.
  link.transition()
      .duration(duration)
      .attr("d", diagonal);
 
  // Transition exiting nodes to the parent's new position.
  link.exit().transition()
      .duration(duration)
      .attr("d", function(d) {
        var o = {x: source.x, y: source.y};
        return diagonal({source: o, target: o});
      })
      .remove();
 
  // Stash the old positions for transition.
  nodes.forEach(function(d) {
    d.x0 = d.x;
    d.y0 = d.y;
  });
}
 
// Toggle children on click.
function click(d) {
  if (d.children) {
    d._children = d.children;
    d.children = null;
  } else {
    d.children = d._children;
    d._children = null;
  }
  update(d);
}
</script>
</body>
</html>
birds.json
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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
{
    "name":"鳥類",
    "children":[{
      "name":"キジ目",
      "children":[{
        "name":"キジ科",
        "children":[{
          "name":"エゾライチョウ",
          "rank":""
      },{
          "name":"ライチョウ",
          "rank":""
      },{
          "name":"ウズラ",
          "rank":""
      },{
          "name":"ヤマドリ",
          "rank":""
      },{
          "name":"キジ",
          "rank":""
      }]
    }]
  },{
      "name":"カモ目",
      "children":[{
        "name":"カモ科",
        "children":[{
          "name":"リュウキュウガモ",
          "rank":""
      },{
          "name":"サカツラガン",
          "rank":""
      },{
          "name":"ヒシクイ",
          "rank":""
      },{
 
 
             ～ 中略 ～
 
 
          "name":"マミジロキビタキ",
          "rank":""
      },{
          "name":"キビタキ",
          "rank":""
      },{
          "name":"ムギマキ",
          "rank":""
      },{
          "name":"オジロビタキ",
          "rank":""
      },{
          "name":"オオルリ",
          "rank":""
      },{
          "name":"ロクショウヒタキ",
          "rank":""
      },{
          "name":"チャバラオオルリ",
          "rank":""
      }]
    },{
 
             ～ 中略 ～
 
      },{
          "name":"ゴマフスズメ",
          "rank":""
      },{
          "name":"ウタスズメ",
          "rank":""
      },{
          "name":"ミヤマシトド",
          "rank":""
      },{
          "name":"キガシラシトド",
          "rank":""
      },{
        "name":"サバンナシトド",
        "rank":""
        }]
      }]
    }]
}

4.出力結果

d3sample02.html [radial layout]とd3sample02.html [Collapsible Tree]のそれぞれの実行結果画面です。 尚、D3.jsはPCのローカル環境では動作しませんので、動作確認する場合は必ずWebサーバにアップして行って下さい。

5.ダウンロード

この記事で紹介したサンプルの日本鳥類目録分類図(ソースコード、JSONファイル、出力結果ハードコピー)を配布致します。下記からダウンロードして下さい。

ダウンロード

■関連記事
・階層構造JSONファイルの作成
・日本哺乳類目録分類図の可視化
・日本海産魚類目録分類図の可視化
・鳥類、哺乳類、魚類目録分類図

コメント

コメントを投稿

このブログの人気の投稿

Excelアドインで日本語形態素解析

-
イメージ
1.概要 日本語形態素解析とは、文法的な情報の注記の無い自然言語のテキストデータ（文）から、対象言語の文法や、辞書と呼ばれる単語の品詞等の情報に基づき、 形態素（Morpheme, おおまかにいえば、言語で意味を持つ最小単位）の列に分割し、それぞれの形態素の品詞等を判別する作業です。（出典:Wikipedia） 形態素解析エンジンとしては、Mecabが有名です。筆者もPythonにインストールして、テキストマイニングに利用しています。しかし、会社などで利用したい 場合は、このような環境を個人的な利用目的で構築するにしても、セキュリティ上の問題などでIT管理者などから利用許可が下りない場合があります。 今回は、普段から利用しているExcelのアドインでテキストマイニングをして見たいと思います。特別なサーバーなどへのインストールなしで、 個人PCにアドインのインストール許可さえもらえれば誰でも簡単にテキストマイニング(ワードクラウド)分析をすることができます。 2.利用方法 (1)Excelのアドインである「E2D3」を追加します。「挿入」→「アドインを入手」をクリックし      「データ分析」を選択して、「E2D3」を探します。見つかったら、「追加」をクリックしま      す。これで、「E2D3」が利用できるようになります。 (2)分析するデータ(テキスト文書)を準備します。 (3)下記サイトの日本語形態素解析サービス(無料ツール)を利用して、文書を解析し品詞毎に分解、      統計データとして出力します。 日本語形態素解析サービス(無料ツール) URL : https://opendata-web.site/tool/parse/ ※ブックマーク等に登録しておくと良いでしょう。 (4)分析するデータ(テキスト文書)をテキストボックスに貼付け、解析ボタンをクリックします。 (5)解析結果が日本語形態素と統計の2種類画面出力されるので、統計の表をコピペして、Excelの      空きシートに一時的に貼り付けます。 (...

階層構造JSONファイルの作成

-
イメージ
1.はじめに 仕事や趣味でいろいろなデータを扱いますが、プログラミングで扱うデータ形式も多種多様でデータベース、テキスト、csv、xml、json形式など 思い付くだけで数十種類でてきます。データの見える化 (可視化) をやりたくて階層構造のJSON形式のファイルを扱う必要性があり、 元データ収集・編集 ⇒ Excelでデータ作成 ⇒ CSV出力 ⇒ 階層構造のJSONファイルへ変換出力と言ったステップでJSONファイルを作成して見ましたので紹介致します。 2.階層構造CSVtoJSONコンバータ 最初は、テキストエディタで手作業でJSONファイルを作成しょうと試みましたが、{}の対応付けや[,などの挿入漏れなど ミスすることが多くてデータを読み込むとエラーで動かないことの連続でした。何とか効率良く元データより階層構造の JSON形式のファイルを作成することができないものかとネット検索しても意図したものを見つけ出すことが出来ませんでした。 そこで今回、試行錯誤してExcel VBAで作成した 「階層構造CSVtoJSONコンバータ」 によるデータ作成手順をまとめて見ました。 階層構造のJSONファイルとは、 親、子、孫、曾孫・・・といった 階層構造のデータ形式のァイル です。 2-1.データの収集について まずは、目的とすべき元となるデータを収集しなければなりません。データの入手や収集手段はいろいろあると思いますが、 1回限りでのみ利用する場合や不定期、日次、週次、月次など継続的に利用する場合に応じて効率良い方法を選択する必要があります。 企業では自社内の各種システムにて収集や加工・編集などができるツール類もあると思いますが、個人ではなかなか揃えられません。 尚、今回は小規模なデータを扱うことを前提としているので効率的なデータの収集方法などについては別の機会にでも考えていきたいと 思います。ここでは、 「階層構造CSVtoJSONコンバータ」 の説明のためのテストデータを利用しての手順について説明します。 2-2.作成手順 (1)元データの準備 (テスト用に鳥類目録データの一部を利用) (2)Excelで元データを利用して、階層構造のデータ表を作成する。     ※【お願い】ファイルの終端判定のため、A列の末...

キーボードのキーコードの一覧表

-
イメージ
1.概要 HSPやExcel VBAなどを利用していて、キーボードのキー定数が知りたい場合があります。その都度、ネットで調べているのが手間なので、 一覧表にして見ました。このキーコードは、 Win32API の keybd_event 関数等を利用して送信することができるコードです。 プログラム上からキーコードを送信する場合は、誤操作防止のため十分なウェイトを入れるなりの工夫が必要です。 2.キーボードのキーコード一覧表 キーボードのキーコード一覧表です。全部で127個あります。 キーボードのキーコード一覧表 No. 記号定数名 値 ( HEX ) 値 ( DEC ) 意味 ( 該当するキー ) 1  VK_LBUTTON $01 01 2  VK_RBUTTON $02 02 3  VK_CANCEL $03 03  Cancel（[Ctrl]+[Break]) 4  VK_MBUTTON $04 04 5  VK_BACK $08 08  [BackSpace] 6  VK_TAB $09 09  [Tab] 7  VK_CLEAR $0C 12 8  VK_RETURN $0D 13  [Enter] 9  VK_SHIFT $10 16  [Shift] 10  VK_CONTROL $11 17  [Ctrl] 11  VK_MENU $12 18  [Alt] 12  VK_PAUSE $13 19  [Pause] 13  VK_CAPITAL $14 20  [CapsLock] 14  VK_ESCAPE $1B 27  [Esc] 15  VK_SPACE $20 32  [スペースキー] 16  VK_PRIOR $2...