D3.jsで艦これ登場艦の年表 ほんとは撃破した艦の被害も調べようと思ったけど、艦の最期を調べただけでうつうつします…… 「艦これ登場艦年表」かなり横長になったので別ページです。 割とシンプルなrectを使ったグラフです。 ※追記 比叡と榛名が間違ってたの…

アイＭ＠Ｓ ＨＯＭＭ＠ＧＥ(オマージュ) to music! 「ゲンキトリッパー」はCymbalsへのオマージュ 作詞作曲を担当されたNBGIおおくぼひろしさん自身が、雑誌『リスアニ』*1で「バンドっぽいのがやりたいなって思って。最初から狙ってました。僕の大好きなバ…

ラブライブ!を「みんなで見る会」 ほんとうにみんな見ていたというか見守っていたというか。「言葉は要らない」というほどではないですけど、まさにそれに近いような状態でした。 ここで背後から入ってくる絵里がかわいいんですよ。 この場面のにこ先輩がか…

センター以外はすんなり順位どおりではない模様。 stop start 1st 2nd 3rd 4th 5th ソースはWikipediaです。次のセンターがだれになるか楽しみですね。 なお、D3.js的にはeaseを使ったtransitionの順次実行が今回のポイントです。 var mus = [ { "name" : "…

Force-Directed Graph 力指向グラフは、nodeの間と描画領域に物理的な作用を計算してうまいぐあいに表示するらしいです。 各node（円）はマウスで動かせます。 元データはPixivのタグ検索集計です。「(ラブライブ！ OR ラブライブ!) にこまき」などそれぞれ…

前回のエントリー！では、とりあえず表示できるところまでやりました。今回はもう少しD3らしい形にしていきます。 d3.scale, selection.data() var minHeight = d3.min(member, function(d){return d.height}); var maxHeight = d3.max(member, function(d){…

まとめ D3.jsでData-Driven Documentsするとかよくわからなかったので、基礎っぽいところのメモとサンプル。 まずは、d3.selectAll(), selection.data(), selection.enter(). d3.scale()を理解することが重要。 svgのcircle, rectあたりは調べておきましょう…