D3.jsを使用したグラフ描画


D3.jsを使用してリリカルなのはに登場するキャラクターをグラフ化してみました。

ちなみにデータは独断で作成していますので、

  • あれ、〜が一覧にないけど?
  • 〜のネットワークが足りない。

といった場合があります。あと、Force関係は本を読み直さないと接続出来なそうでしたので、あまり接続されていません。

Twitterとかで情報を頂ければ対応したいところ…

以下のような画面となります。

キャラクターの有効・無効をボタンに割り当てているだけなので、頭の悪いUIです。

http://mizuvm01.cloudapp.net/gadgets/d3/nano_graph/index.html?jsdata=nano.json

nano_sgraph_01

nano_sgraph_02

.

CouchDBに保存された値でチャート描画


CouchDBを導入したので、NVD3によるチャート生成を行ってみました。

PixivDivの閲覧数表示

http://mizuvm01.cloudapp.net/gadgets/nano_chart/

nano_chart_ss 項目が多すぎるためか、所懐表示がずれる…

やっている事は、ピクシブ百科事典の項目毎に紀錄されている閲覧数を取り込み、結果をNVD3用に変換後、描画を行っています。

作成するのはかなり楽なのですが、頻繁な更新をかけるとCouchDBはすぐにデータベースのサイズが大きくなってしまいます。(誤った利用をしているためなのですけど)

D3.jsで年表らしきものを(2)


魔法少女リリカルなのはの年表らしき物を作ってみました。D3.js(Data-Driven Documents)の習作として作った物ですので、機能的な見た目はしょぼいです。

nano_history_ss02 データはたいしたことないです。

D3.jsは以前にも何度か使用しており、

といったものを作ったりしているのですが、もう少しデータと表示を関連づけられるようなものを…というわけで年表を作ってみることにしました。

ミッドチルダでは、「旧暦」と「新暦」という暦が使用されているため、そのままでは年表をプロットすることが出来ないため、便宜上なのはの物語が始まった時点を、西暦2005年(新暦65年)としています。

ちなみに、魔法少女リリカルなのはVividの放送が開始されました(これを書いている時点で1話目が放送完了)事で、魔法少女リリカルなのはに興味を持った方は、過去作品のネタバレが含まれますのでご注意を。

それっぽい感じになったので、GitHub上で公開してみました。

javascript (web)

魔法少女リリカルなのは Series Timeline

GitHub

master / gh-pages

 

D3.jsで年表らしきものを(1)


D3.jsを使用して、年表もどきを作成中…といいながら完成させる予定はないのですけど。

nano_history D3.jsで描画

以前からD3.jsを使用しているのですが、チャート以外の用途にあまり使用していないので、ちょっと変わった物を作成しようとおもい、着手してみました。まぁ、単なる年表なんですけど。

このページへのリンクやツイートによる共有はご自由にどうぞ