グレおやぢの日常

1.日本哺乳類目録分類図 データ可視化(視覚化)の第二弾として、 鳥類目録 に続き、 哺乳類目録の可視化 を行って見ます。データの作成手順や可視化 の手法は、 鳥類目録 とほぼ同じですが、入手できる元となるデータが 鳥類目録 の場合は Excel の表形式で提供されていましたが、 哺乳類目録の場合 は探して見ましたが加工しやすい形式のものは見つかりませんでした。使えそうなものとして PDF 形式の環境 省自然環境局野生生物課が公開 している「日本野生鳥獣目録リスト」がありました。今回は、この PDF 形式の目録リストを利用 することにしました。 2.データ作成手順 まずは、哺乳類目録の可視化をするために「哺乳類目録リスト」をダウンロードします。 1. 下記のサイトより、哺乳類目録リスト(inventory-of-wildlife.pdf)をダウンロード     (出典 : 資料提供元 : 環境省自然環境局野生生物課)     データダウンロード先： http://www.biodic.go.jp/kiso/15/inventory-of-wildlife.pdf ※2.以降の手順は、筆者が行った参考手順ですので読み飛ばしてもOKです。 2.データは、平成 14 年 7 月作成のもので、やや古いのですが、この PDF 資料から必要な部分を     コピーしてテキスト化します。 3.ダウンロードした PDF ファイルを開き、P31～P37(PDF のページ番号)までを選択してコピー     します。 4.コピーしたデータをそのままメモ帳などのテキストエディタに貼り付けます。 5.英語名部分などは今回使用しないので、データを目視しながら可能な限り不要部分を     削除します。 6.とりあえず仮整形した状態までできたら、半角カタカナを全角カタカナへ置換します。     たいていのテキストエディタは半角→全角変換があると思いますので、その機能を利用して     変換します。 7.まだ、この状態でも文字化け等があって見にくいので、濁点などの文字化けを置換機能で正しく     変換して整形します。 8.重複データや他に文字化けがないかチェックして、Excel に取り込む形式にするため、     目名、科名、種名を

1.日本鳥類目録分類図 データの可視化(視覚化)をして見たいと思います。データの可視化はグラフや電子地図上にデータをマッピングしたりして分かりやすくすることです。 これを「データビジュアライゼーション」と言うそうです。特に今回は、題材として階層構造化(ツリー構造)されたデータを可視化ツールとして有名な Javascript ライブラリである D3.js を利用して見ました。まず、 見える化の第一弾としての題材は鳥類目録の作成 をします。 題材における可視化のヒントは、 ■公式ウェブサイト URL : https://d3js.org/ ■2013-12-27 d3.jsで鳥類目録 URL : http://d.hatena.ne.jp/tmizu23/20131227 ■DATA GO JPで公表されている苔の絶滅危惧種を R + d3.js で可視化してみた URL : http://kuteken.hatenablog.com/entry/2013/12/25/025118 のサイトで公開されているものが非常に興味深く、参考とさせて頂きました。同じことをやって見たいと思い、データの収集と階層構造 データの作成に取り組みましたので、 その作成手順等を紹介致します。 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.ベースの表ができたので名前を付けて保存するので、任意のブック名で     一旦

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列の末尾のセルにEOFと追記して下

1.四国遍路巡礼マップ 作品例として、四国遍路巡礼マップを作成します。この題材は弘法大師空海のゆかりの地を地図上で巡ります。 八十八ヶ所の寺院などを選び四国八十八ヶ所霊場を開創された空海の御跡である八十八ヶ所霊場にアイコンマーカーを配置しました。 マーカーをクリックするとポップアップに寺院名や場所などを表示します。 ソースコードの大部分は、すでに公開している「気象庁震度観測点マップ」からの流用です。内容が重複するので「気象庁震度観測点マップ」で説明していない 追加、変更部分のみを中心に説明 していきます。 ポップアップ内で利用しているお坊さんの画像素材は、下記サイト様にて提供されているものを利用させて頂きました。 取得先 : イラストポップ(出典：illpop) お坊さんのイラスト 2.ソースコードの説明 四国遍路巡礼マップのメインとなる(henro.html)コードです。各実装部品の定義ファイル類は外部ファイルとしています。 leaflet.css、all.css、henro.css、leaflet.js、SlideMenu.js、henrodef.js、henro88.jsライブラリ等をヘッダー部分に指定しています。 henro.cssとhenrodef.js、henro88.jsは筆者が作成したものです。 DEMO //***** 巡礼所名配列 ***** var selbox= [ { val:"",name:"巡礼所名"},{val:"0",name:"01.霊山寺 (りょうぜんじ)"},{val:"1",name:"02.極楽寺 (ごくらくじ)"},{val:"2",name:"03.金泉寺 (こんせんじ)"}, { val:"3",name:"04.大日寺 (だいにちじ)"},{val:"4",name:"05.地蔵寺 (じぞうじ)"},{val:"5",name:"06.安楽寺 (あんらくじ)"}

1.富嶽三十六景浮世絵マップ 作品例として、富嶽三十六景浮世絵マップを作成します。この題材は葛飾北斎の富嶽三十六景の浮世絵を利用して 浮世絵が書かれた場所と思われる所にアイコン画像マーカーを配置しています。 マーカーをクリックするとポップアップに広重の浮世絵画像と浮世絵名や場所などを表示します。 ソースコードの大部分は、すでに公開している「気象庁震度観測点マップ」からの流用です。内容が重複するので「気象庁震度観測点マップ」で説明していない 追加、変更部分のみを中心に説明 していきます。 浮世絵の画像素材は、下記サイト様にて提供されているものを利用させて頂きました。 取得先 : 著作権フリー作品「富嶽三十六景」 2.ソースコードの説明 富嶽三十六景浮世絵マップのメインとなる(toukaidou.html)コードです。各実装部品の定義ファイル類は外部ファイルとしています。 leaflet.css、all.css、fugaku.css、leaflet.js、SlideMenu.js、fugaku.js、fugakuidef.jsライブラリ等をヘッダー部分に指定しています。 fugaku.cssとfugaku.js、fugakuef.jsは筆者が作成したものです。 DEMO //***** 浮世絵名配列 ***** var selbox= [ { val:"",name:"浮世絵名"},{val:"0",name:"01.磯川雪ノ旦"},{val:"1",name:"02.遠江山中"},{val:"2",name:"03.尾州不二見原"}, { val:"3",name:"04.五百らりん寺さざねどう"},{val:"4",name:"05.御厩川岸より両国橋夕陽見"},{val:"5",name:"06.江戸日本橋"},{val:"6",name:"07.甲州三嶌越"},

1.東海道五十三次ルートマップ 作品例として、東海道五十三次ルートマップを作成します。この題材は歌川広重の東海道五十三次の浮世絵を利用して 江戸(日本橋)から京都(三条大橋)までの487.8キロメートルのルートを辿っていきます。起点から終点までの間の宿場地点に 1番から55番までのアイコン画像マーカーを配置しています。マーカーをクリックするとポップアップに広重の浮世絵画像と宿場名や距離などを 表示します。 ソースコードの大部分は、すでに公開している 「気象庁震度観測点マップ」からの流用です。内容が重複するので「気象庁震度観測点マップ」で説明していない 追加、変更部分のみを中心に 説明 していきます。 浮世絵の画像素材は、下記サイト様にて提供されているものを利用させて頂きました。 取得先 : 浮世絵著作権フリー作品「東海道五十三次」 作品例のポイントとなる部分は、日本橋から京都までの約500キロメートルのルート線データの作成方法です。地図上の旧東海道を探しながら 線と線を繋いでいきます。線を繋ぐ位置の座標(緯度・経度)を取得して指定いかなければなりません。作成方法についても詳しく説明します。 2.ソースコードの説明 東海道五十三次ルートマップのメインとなる(toukaidou.html)コードです。各実装部品の定義ファイル類は外部ファイルとしています。 leaflet.css、all.css、toukaidou.css、leaflet.js、SlideMenu.js、toukaidou.js、toukaidef.js、route531.js、route532.jsライブラリ等をヘッダー部分に指定しています。 toukaidou.cssとtoukaidou.js、toukaidef.js、route531.js、route532.jsは筆者が作成したものです。 DEMO //***** 宿場名配列 ***** var selbox= [ { val:"",name:"宿場名"},{val:"0",name:"01.日本橋 (にほんばし)"},{val:"1",name:"02.品川宿 (しながわ)

1.都道府県別人口統計マップ 作品例として、都道府県別人口統計マップを作成します。この題材はベース地図タイル上に都道府県別の人口統計人数をレンジ(10段階)に 設定した範囲に応じた都道府県境界を設定した色にて塗りつぶし色分けして表示します。 ソースコードの大部分は、すでに公開している 「気象庁震度観測点マップ」からの流用です。内容が重複するので「気象庁震度観測点マップ」で説明していない 追加、変更部分のみを中心に 説明 していきます。 都道府県別の色分け描画部分のソースコードは、下記のサイト様のサンプルコードより借用させて頂きました。 URL : https://knooto.info/leaflet-examples/ URL : https://knooto.info/example/leaflet/pref-map-chart.html マップポリゴンデータ (var prefs)は、下記のサイト様より入手したものを利用させて頂きました。 データ元 : https://www.itdashboard.go.jp/js/data/prefectures.geojson 参考 : https://rch850.hatenablog.com/entry/2019/05/21/013618 2.ソースコードの説明 都道府県人口統計マップのメインとなる(demographics.html)コードです。各実装部品の定義ファイル類は外部ファイルとしています。 leaflet.css、all.css、demogra.css、leaflet.js、SlideMenu.js、jsframe.js、demographics.js、pospop.js、prefs.jsライブラリ等をヘッダー部分に指定しています。 demogra.css、demographics.js、pospop.jsは筆者が作成したものです。尚、マップポリゴンデータ(geoJSONデータ)は上記で入手したものをprefs.jsとしました。 DEMO //***** テキスト時計 ***** function clock() { var twoDigit =function(num){ 　 var digit