艦娘沼マップ Ver 0.1.1デレマスVer → カップリングの星空 pixivのイラスト投稿数をもとに各艦娘ごとの近親度を計算してビジュアライズしました。 更新履歴 2015/08/22 Ver 0.0.0 最初のリリース 2015/08/23 Ver 0.1.0 作品数が大きく異なる艦娘の間に線が結ばれにくい問題を修正 2015/08/24 Ver 0.1.1 友人K(推しCP:朝潮×不知火)の提言により「艦娘沼マップ」と改称
D3.js の force layout を試してみる - 雑食性雑感雑記
概要 D3.js で Force layout を動かしてみる。 理解用に簡単なサンプルを作る。 その他、オプションを試してみる。 ラベル表示と矢印を追加。 情報 D3.js って…？ 日本語サイト D3 = Data Driven Document データに基づいてドキュメント (要は DOM) を操作するための Javascriptライブラリ。 svg を使った華麗なグラフのデモが目立つが、DOM操作のライブラリとしても優れている (と、使ってみて思った)。 Force layout force = 『力』とか『エネルギー』とか。 スターウォーズのアレ？？ 要素同士が影響し合っている状態を node (円) と link (線) で表している。 説明よりもサンプル見た方が早い。 Force-Directed Graph 作ったサンプル jsdo.it 上に置きました。 作り方とかは以下
Labeled Force Layout
{"nodes":[{"name":"Myriel","group":1},{"name":"Napoleon","group":1},{"name":"Mlle.Baptistine","group":1},{"name":"Mme.Magloire","group":1},{"name":"CountessdeLo","group":1},{"name":"Geborand","group":1},{"name":"Champtercier","group":1},{"name":"Cravatte","group":1},{"name":"Count","group":1},{"name":"OldMan","group":1},{"name":"Labarre","group":2},{"name":"Valjean","group":2},{"name":"Marguerite"
d3.jsで力指向グラフを使って遊ぶ～force layout & zoom & pan | | Scimpr Blog
forceレイアウトのスケルトンforceレイアウトではオブジェクトに力が作用してその結果をシミュレートできる forceでは、デフォルトで指定したサイズの中心に向かって重力が設定されていて、対象のノードは中心に向かう力が働く tickごとの座標計算のときに条件ごとに座標にプラスマイナスをすればノードの種類に応じて分類することもできる Multi-Foci Force Layout そのほかノード同士の力の作用はchargeで設定する.chargeはマイナスになると斥力になる.デフォルトでは-30となっている またノードはリンクでつなぐことができる.リンク同士では見た目通り張力が働く.リンクの距離はlinkDistanceで設定できる zoom＆pand3.jsではsvgを使ってGoogle Mapライクな操作感も実現できる.ドラッグでスクロール、ホイールで縮小拡大.viewBoxという仕
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で始める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=
D3.jsとRuby on Railsで棒グラフを表示してみる | DevelopersIO
はじめに タイトル通り、D3.jsとRuby on Railsを使い 棒グラフを表示する簡単なサンプルアプリケーションを作成してみました。 D3.jsについては、弊社の以下のブログ等を参考にしてください。 D3.jsで始めるData-Drivenなページ作成 アプリケーションの構成は、上記の弊社ブログ記事内の「Bar Chart」をサンプルとして ・サーバ側(Railsのコントローラ)は、JSON形式でデータをクライアントに渡す ・クライアント側(D3.js)は、受け取ったJSONを棒グラフとして表示する という形としました。 以下に、実装する上でのポイントとなる箇所を記述していきます。 尚、ソースコードは以下のGitHubに置いてあるので、全ソースを見たい方は参考にしてください。 d3_barchart_sample 実装について 1.ルーティング 今回は「Frequency」コントロー
過去1000件のFoursquareチェックイン履歴をD3.jsで可視化してみた
D3.js自体は記事のとおりに書けば理解出来ましたが、「過去1000件の Foursquareチェックイン履歴」を取ってくるのに難儀しました。記事では さらっと書いてあるだけですねw どうにかしてoauth_tokenを取得する# 私は http://tdoc.info/foursquare-API/authentication.html を参考にし て、泥臭く手に入れました。Twitterだと簡単なのにね。 https://developer.foursquare.com/ にアクセスし、適当なマイアプリを作る。 以下にアクセスし、“code"を取得する(長いので改行入れてます)。 https://foursquare.com/oauth2/authenticate?client_id=<Client ID> &response_type=code&redirect_uri=<Redir
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://ja.d3js.info/alignedleft/tutorials/d3/
WEBSITE.WS - Your Internet Address For Life™