D3.js

前回の記事 grandseacrow.hatenablog.com で、ざっくりとした方向性が決まって実装をぼちぼち作っておりますが。 Gr30.73 現状 メーレ上で点滅してる小さな円をクリックすると、魔法陣上に円が追加されます。 ということで grandseacrow.hatenablog.com までは良い感じに実装できたのですが、 grandseacrow.hatenablog.com の方が難航してます。 というのも、大円の中心線から小円をつなぐのは楽だったのですが 小円同士の接続がどうもうまくいかない。 やろうとしてるのは小円が二個以上表示されたら矢印でつなぐ（円を移動させたら矢印…

ランキング参加中趣味でプログラミングランキング参加中プログラミング ※ランキング参加中 前回の記事 grandseacrow.hatenablog.com 前回Snap.SVG魔法陣言語版Grmでつまづいた要因の一つに、デザインと可読性の両立というのがありました。 デザインチックに走るあまり、ソースコードとしての魔法陣言語が読みにくくなるのは避けたいところで、GrmではSatzにスクロール機能をつけることで解消しようとしてわけわかめになりました。 Gr3ではd3.jsのズーム機能と前回の記事で書いたミステル導入によって、入れ子構造の親子関係に関しては、上述の可読性とデザインの両立がある程度解決…

前回の記事 grandseacrow.hatenablog.com から、ちょこっとだけ以前のWeb版の見た目に近づけたVer Gr3 D3を使ってるので、バーションアップの数値も３にこだわります（笑） 作ってみて思ったのは、Snap.SVGとはまた違ったクセのあるjsライブラリだなあと。 例えば円を一つ書くのも Snap.SVGであれば svg.circle(100,100,80).attr( {fill:"white"}); と座標系の数字をまとめて、色情報とかその他を.attrで指定なのですが これがD3.jsだと svg.append("circle") // "circle"要素をs…

ということで魔法陣言語作成の再起動です。 WEB版で作り直しているのですが、使うJavaScriptライブラリをSnap.SVGからD3.jsに変えました。 それに伴い言語の英語表記をGrmからGr3に変えました。 ちなみに読み方は「グリム」のままです。 D3を使うのでGr3ですがその他に、数字の３を「横向きのｍ」に見立ててます。 （何ならGrωとかでも面白いかもですが要検討） さてD3を選んだ理由ですがこのライブラリは実用的かつユニークな性質があり勉強用の書籍も多くでています。 Snap.svg同様（あるいはそれ以上にお手軽に）SVGが使える、というのも大きいのですが、Data-Driven…

はじめに 何を使うか D3.jsとは D3.jsで白抜き地図を出力してみる 地図データの取得 TopoJSONとGeoJsonとは TopoJSONを読み込む SVGを出力する TopoJSONからGeoJSONに変換する GeoJSONを元にSVGを出力する 指定の市町村によって塗りつぶす色を変える StravaのGPSデータから訪問した市町村を取り出して塗りつぶす色を変える 中心の緯度経度をTopoJSONから算出する 描画範囲全体がバランスよく出力される倍率を求める SVGからPNGに変換する はじめに 自分は自転車でツーリングで行った後は 思い出にふけるために白地図に対して通った市町村…

池田屋事件発生時の新選組メンバーの年齢。 局長の近藤勇が満31歳。今の基準からすると皆若い。 浪士組結成が1863年で翌年には池田屋事件。 1868年に戊辰戦争開始だから新選組の活動は5年位しかない。 短い期間に燃え尽きたのだと改めて思う。

1年くらい前に下田に旅行に行ったとき、こちらの「幕末クロノロジー」という冊子を買った。 この中に記載されているグラフがデータ面だけでなく、ビジュアル面も非常によくできていて、非常に完成度が高かった。 www.reki-c.com この中に幕末のある事件時に関係者が何歳くらいだったのかのグラフがいくつか載っていたのを見て、 これは人物の生没年と事件が起こった年がわかればプログラミングで動的に生成できると思い、d3.jsで試してみた。 埋め込んだものだと幅が狭くて見ずらいが、Observable上であればちゃんと見れる。 他にも色々なパターンで出せそう。