こちらの記事を見てやってみたくなったので、鳥類目録第7版とpythonで真似してみました。
http://kuteken.hatenablog.com/entry/2013/12/25/025118
データの準備
鳥類目録第7版を利用します。こちらから
http://www.bird-research.jp/1_shiryo/7ed/
データの変換
取ってきたデータをEXCELで以下のようなCSVに変換します。
キジ目,キジ科,エゾライチョウ キジ目,キジ科,ライチョウ 以下同じ
Pythonで上記CSVを階層構造を持ったJSONに変換します。
以下のコードをcsv2json.pyで保存します。
# -*- coding: utf-8 -*-
import csv, itertools, json
def cluster(rows):
melist=[]
for key, group in itertools.groupby(rows,key=lambda r: r[0]):
group_rows = [row[1:] for row in group]
if len(group_rows[0]) == 1:
me={"name":key,"children" :[{"name":g[0]} for g in group_rows]}
else:
me={"name":key,"children":cluster(group_rows)}
melist.append(me)
return melist
rows = list(csv.reader(open('bird.csv', 'r')))
print json.dumps({"name":"data","children":cluster(rows)}, indent=1,ensure_ascii=False)以下のように実行してflare.jsonファイルに保存します。
python csv2json.py > flare.json
d3.jsで表示
こちらのサンプルからhtmlのソースを取ってきてindex.htmlで保存します。
http://bl.ocks.org/mbostock/4063550
flare.jsonとindex.htmlを同じフォルダに保存します。
フォルダに移動して以下のコマンドでローカルサーバーを起動します。
※cross-orginの問題で単純にブラウザで開いても見れないため
python -m SimpleHTTPServer 5000
http://localhost:5000/ にアクセスすると表示されているはず。
感想
- d3.jsの構造は理解できていませんが、簡単にそれっぽくなってうれしい。
- http://nytimes.github.io/svg-crowbar/ これでsvgで保存したけど、フォントやらなんやらが上手く表示されなくて残念。
- http://tech-sketch.jp/2013/10/d3js-svg-convert-to-png.html これみて画像に保存したけど、同じくぐちゃーってなって、そのままでは上手くいかない。
- 確認種とかは、もっと上手い見せ方があるはずなので、色々ためしてみたい。
以上です。
