グラフの自動レイアウトに挑戦 #1 グラフ構造をSVGで表示 | matarillo.com
2022-08-12 13:50:22 作成したアプリケーションとソースコード アプリケーション： https://refd6y.csb.app/ （ブラウザで実行します） ソースコード： https://codesandbox.io/s/graph-layout1-refd6y はじめに 連載記事のトップのところに書いた図はこのようなものだ。 これをコンピュータに自動配置させたい。 Eadesのばねモデル このような、つながった複数の物体をコンピュータに自動配置させるのは「グラフ描画」または「グラフレイアウト」と呼ばれる分野であり、さまざまなアルゴリズムが研究されている。この連載記事では比較的単純な「Eadesのばねモデル」というアルゴリズムを採用する。 Eadesのばねモデルとは、次のようなモデルをつくって物理シミュレーションすることで、物体を配置するアルゴリズムだ。 各ノード(頂点)
ユーザーのページ遷移をグラフで可視化してみた
takada-atです。 サイトを運営するとき、ユーザーがサイト上でどんな行動をとっているのか知りたくなることがあります。ページからページへリンクをたどって移動する動きは、テキストで表現してもいまいち理解しづらいので、グラフをつかって図にしてみます。 以下のリンクからデモを表示してみてください。 ユーザーがたくさん訪れたページほど、ノードのサイズが大きくなり、またページからページへ移動した人の数が増えるほど、線が太くなります。 HTML5のcanvasをつかって描画しているので、InternetExplorerでは見れません。InternetExplorer以外のブラウザで閲覧してください。 グーグルマップのようにドラッグで移動したり、カーソルキーで移動できます。 デモ github ■アルゴリズムなど ノード同士が適切に距離をとりあうようにEadesのバネモデルというアルゴリズムを
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
kazu wiki - ばねモデル
