D3.jsでForce-Directed Graphを使ってラブライブ！のキャラ関係を可視化する - AOI-CAT's diary
Force-Directed Graph 力指向グラフは、nodeの間と描画領域に物理的な作用を計算してうまいぐあいに表示するらしいです。 各node（円）はマウスで動かせます。 元データはPixivのタグ検索集計です。「(ラブライブ！ OR ラブライブ!) にこまき」などそれぞれのキーワードで検索して出てきた作品数を集計しました。 線の太さがタグ数（「にこまき」なら“にこ”“まき”間の線が出現数に応じて太くなる）を表しています。nodeの外周を囲む線は学年ごとの塗り分けをしています。 JSONのデータの構造 nodes配列をdata()でセットして、今までと同じようにcircleとlineをappendします。 links配列は、各nodeの関係を記述します。sourceの0は、nodes[0]です。 graph = { nodes : [ { "name" : "にこ", "color
D3 — Scott Murray — alignedleft
This website is not current and will be retired at some point. See About for latest. D3 Tutorials About these tutorials Fundamentals Setup Adding elements Chaining methods Binding data Using your data Drawing divs The power of data() An SVG primer Drawing SVGs Types of data Making a bar chart Making a scatterplot Scales Axes Transitions These tutorials address an older version of D3 (3.x). See my
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
RとJavaScript Visualizationを俯瞰しよう
