タグ

d3.jsとgraphに関するkeisei_1092のブックマーク (2)

  • 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.jsでForce-Directed Graphを使ってラブライブ!のキャラ関係を可視化する - AOI-CAT's diary
  • D3.jsで始めるData-Drivenなページ作成 | Developers.IO

    D3.jsって? AWSの事しかかけないと思われているかもしれないあけりです。 4月になって、気分一新クラスメソッドぽいことを少し。 今日はAWSとは関係の無いD3.jsです。 D3.jsとは名前から想像出来る通りjavascriptで使えるライブラリで、 データを色々な形に見やすく表示(よくあるグラフなんかもその一つ)するものです。 D3はData-Driven Documentsの略だと思われます。 データとDOMをうまいこと連携させて、表を作ったり、SVGのグラフを描画させたりすることができる、なんか格好良いライブラリです。 ライセンスはBSD Licenseと書いてありますが、リンクを辿ってみると宣伝条項のない修正BSD Licenseとなっているので、なんか色々楽そうです。 使い始め方 使い始め方は簡単で、ここからダウンロードしてくるか、 HTMLに直接 <script src=

  • 1