# ネットワークをデータアートとして描く方法：配置、束ね、時間、流れの文献

- 著者：小川 修一郎（デザイン研究者／デザインコンサルタント）https://jamjet-iqbal.com/
- 初出：2026-09-23、更新：2026-09-24
- 正規の URL（HTML）：https://jamjet-iqbal.com/notes/network-data-art-methods-literature/
- 英語版：https://jamjet-iqbal.com/en/notes/network-data-art-methods-literature/（Markdown：https://jamjet-iqbal.com/en/notes/network-data-art-methods-literature.md）
- 言語：ja
- キーワード：network-visualization, force-directed-layout, edge-bundling, arc-diagram, streamgraph, marbling, data-art, hive-plot, watercolor, ink-diffusion, literature

> 力学配置で描いたネットワークは、そのネットワークの唯一の形に見えるが、実際には多くの並べ方の一つである。力学配置の式（Eades 1984、ForceAtlas2）と球面の上の力学配置（Kobourov と Wampler 2005）、属性で座標を決める hive plot、辺の束ね（Holten 2006）、一本の軸と時間に並べる図法（arc diagram、ThemeRiver、streamgraph、alluvial diagram）、水面に滴を落として模様を作る数学的マーブリング（Lu ら 2012、Jaffer の滴の写像）、データを作品として扱う先行例、線を引くための曲線と数値計算（中心化 Catmull–Rom 曲線、一様 B-spline、中点法、ガウス核、流れ関数）、紙と墨のにじみの表現（Curtis ら 1997 の水彩、Chu と Tai 2005 の MoXi、Guo と Kunii 1991 の墨絵）を、確かめた範囲（本文、要旨、書誌のみ）を添えて並べる。この wiki の /network では、共引用の関係を固定したまま、並べ方だけを方法とシードで替えてこれらを使い分けた。力学配置を置く空間は作品ごとに固定した（墨流しは描画域と同じ縦横比の平面、織物は枠の無い自由な平面、星座は立体射影で写す球面）。シードによる絵の変化は、織物では初期配置の族と力の係数の範囲（ForceAtlas2 の LinLog 型と strong gravity を含む）から、墨流しと星座では初期配置の揺らぎと係数の小さな幅から作った。

力学配置で描いたネットワークの絵は、そのネットワークの形そのものに見える。
群は島のようにまとまり、島と島のあいだを数本の辺がつなぐ。
見る側は、近くにあるものは似ていて、真ん中にあるものは中心的だと読みたくなる。

この wiki の[引用ネットワーク](/network)を作ったとき、同じ読み方に引き寄せられた。
ところが、同じ文献と同じ共引用の組から、乱数のシードを変えるだけで、島の位置も向きも違う絵が出てくる。
絵を見比べても、どれが本当の形なのかは決まらない。

文献の側では、この不安は前提として扱われている。
Gansner, Koren, North（2005）は、stress majorization による配置の利点として局所最小に陥りにくいことを挙げ、25 通りの乱数の初期化で結果を比べた（本文確認）。
比較をこの形で組むこと自体が、配置の結果が初期配置に左右されうることを前提にしている。
Venturini, Jacomy, Jensen（2021）は、力学配置で近くに置かれたことが意味の近さを必ずしも表さないことを、**関係的曖昧性**（relational ambiguity）として論じている。
Krzywinski ら（2012）は、配置の側でこの問題を避ける hive plot を提案した。
出版社の要旨は、ノードの属性で軸と座標を決めるので、力学配置と違って再現でき、比べられると述べる（要旨確認）。

力学配置の絵は、多くの並べ方の一つである。
では、ほかの並べ方にはどんな系統があり、それぞれ何を固定して何を動かしているのか。

各文献には、どこまで読んで確かめたか（本文確認、要旨確認、書誌のみ）を添える。
書誌しか確かめていない文献については、題名を超える内容を書かない。

## 力学配置は何を釣り合わせているか

力学配置は、ノードどうしに働く力を決め、力が釣り合う位置を探す。
何を力とみなすかで、絵の形が変わる。

Eades（1984）の spring embedder は、頂点を輪に、辺をばねに見立てた（本文確認）。
ばねの力は距離に比例せず、`c1 · log(d / c2)` という対数の強さで働く。
d はばねの長さ（2 頂点の距離）、c1 と c2 は定数である。

ForceAtlas2（Jacomy ら、2014）は、Gephi のために設計された連続的な配置法で、力を次の式で定める（本文確認）。

- **引力**：`F_a = d`（式 1）。距離 d に比例する。
- **斥力**：`F_r = k_r (deg1 + 1)(deg2 + 1) / d`（式 2）。2 ノードの次数に 1 を足した値の積に比例し、距離に反比例する。
- **LinLog 型の引力**：`F_a = log(1 + d)`（式 3）。引力を距離の対数に置き換える選択肢である。
- **重力**：`F_g = k_g (deg + 1)`（式 4）。strong gravity を選ぶと、これに距離 d を掛ける（式 5）。
- **辺の重み**：`F_a = w^δ · d`（式 6）。辺の重み w を δ 乗して引力に掛ける。

式を並べると、次数がどこに入るかがわかる。
deg + 1 は斥力と重力の係数として現れ、次数の多いノードほど強く押しのけ合い、強い重力を受ける。
一方で、本文には「質量（mass）」という語が出てこない。
ForceAtlas2 は次数を力の係数として使っており、質量を定義してはいない。

d3-force の公式ドキュメントは、質量をはっきり固定している。
シミュレーションは velocity Verlet 法で、時間刻みを Δt = 1 とし、すべての粒子の質量を m = 1 とする。
質量が 1 なので、力はそのまま加速度になる。
alpha は焼きなましの温度にあたる値で、alphaMin を下回るとシミュレーションが止まる。
多体の斥力（forceManyBody）は、四分木と Barnes–Hut 近似（theta 0.9）で計算する。
既定の乱数源は、固定シードの線形合同法である。

乱数を固定すれば、同じ絵を何度でも再現できる。
ただし、それは一つの配置を再現できるということで、配置が一つに決まることとは別である。

Barnes–Hut 近似の原典は、Barnes と Hut（1986）の階層的な O(N log N) の力の計算法である。
D3 そのものの設計は Bostock, Ogievetsky, Heer（2011）にまとめられている。
グラフ描画の古典としては、Fruchterman と Reingold（1991）の force-directed placement と、Kamada と Kawai（1989）の無向グラフの描画算法もある。
Noack（2009）は「モジュラリティによるクラスタリングは力学配置である」という命題を題名に掲げる。
この段落の 5 件は書誌のみの確認である。

## 力ではなく属性で座標を決める

力学配置では、位置は力の釣り合いから決まる。
Krzywinski ら（2012）の hive plot は、位置を属性から決める。
要旨によれば、ノードの属性で、置く軸と軸の上の座標を決める。
同じデータからは同じ図が出るので、別のネットワークの図と並べて比べられる、というのが要旨の主張である（要旨確認）。

Krzywinski は 2009 年に、共著者と Circos を発表している。
題名は Circos を「比較ゲノミクスのための情報美学（information aesthetic）」と呼ぶ。
可視化の手法の論文が、題名で美学を名乗っている例である。
要旨までは確かめたが、配置の方法の記述は確かめていないので、ここには書かない。

## 辺を束ねる

ノードの置き方を決めても、辺が多いと絵は線の塊になる。
Holten（2006）の hierarchical edge bundles は、階層を持つデータの隣接関係を描く方法である。
束ねの強さ β という一つの値が、直線（生の接続）から束（階層の親どうしの暗黙の隣接）までを連続的に制御する（本文確認）。
同じデータから、一本一本の接続を見せる絵と、群と群の関係を見せる絵のあいだを、β だけで行き来できる。

Holten と van Wijk（2009）の force-directed edge bundling は、要旨によれば、辺どうしを引き合うばねとみなして束ねる（要旨確認）。

## 一本の軸と時間に並べる

二次元のどこに置くかを決めずに、要素を一本の軸に並べる方法もある。
Wattenberg（2002）の arc diagram は、要旨によれば、文字列の中で同じ部分文字列が現れる組を弧で結び、反復の構造を見せる（要旨確認）。
弧の高さに何を符号化しているかは、本文に到達できず確かめていない。

時間を軸にとると、量の推移を帯の太さで描く系統になる。
Havre ら（2002）の ThemeRiver は、要旨によれば、文書群のテーマの強さを、時間に沿って流れる川の帯の幅で表す（要旨確認）。
Byron と Wattenberg（2008）は、積み上げグラフ、ThemeRiver、Streamgraph が、それぞれ異なるエネルギー関数を最小化していることを示した（本文確認）。
同じ論文は、層の色付けと並べ方も提案している。
基線の形の違いは、見た目の好みではなく、最小化する量の違いとして説明できる。

時間の中でネットワークそのものが組み替わる様子を描く図もある。
Rosvall と Bergstrom（2010）は、大きなネットワークの変化を写す図として alluvial diagram を示した（本文確認）。

## 水面の模様として描く

墨流し（marbling）は、水面に絵の具や墨を落とし、水の流れで模様を作る技法である。
ネットワークのための方法ではない。
それでも、滴を落とす順と場所をデータから決めれば、ネットワークの歴史を水面の模様として描ける（この wiki での使い方は後述する）。

Lu, Jaffer, Jin, Zhao, Mao（2012）は、墨流しを数式で模す方法を *IEEE Computer Graphics and Applications* に発表した。
要旨によれば、閉じた式で墨流しを模すことで、制御のしやすさ、実装の容易さ、並列性、速さを改善し、実時間で見た目を確かめながら流れるアニメーションを作れる（要旨確認、本文は未入手）。
要旨は、白紙のほか、ラスター画像や動画から模様を始められるとも述べる。

滴の式そのものは、共著者の Jaffer が解説ページ *Dropping Paint* に書いている（本文確認）。
中心 C、半径 r の滴を落とすと、水面の点 P は C + (P − C) · √(1 + r² / |P − C|²) へ中心から放射状に動く。
同じ中心に面積 a の滴を落とし、続けて面積 b の滴を落とすと、覆われた面積は a + b になる。
ページは、環の面積を比べて、この写像が C を含まないどの近傍の面積も保つことを示している。
押し広げられた環は、面積を保ったまま元より細くなる。
先に落とした滴の輪郭ほど、あとの滴の写像を多く受けて歪み、最後に落とした滴だけが丸い輪郭のまま残る。

## 曲線を作る

点の位置が決まっても、点と点をどういう曲線で結ぶかで線の見え方が変わる。
結ぶ曲線がたるみすぎたり、区間の中で輪を作ったりすると、関係のない場所に線が通り、読み違えの元になる。

**Catmull–Rom 曲線**は、制御点をすべて通る 3 次の補間曲線である。
標準的な出典として Catmull と Rom（1974）を挙げる（書誌のみ）。
Yuksel, Schaefer, Keyser（2009）は、節点の列を t_{i+1} = |P_{i+1} − P_i|^α + t_i で決める族を扱う（式 (1)、本文確認）。
α = 0 が一様、α = 1/2 が求心的（centripetal）、α = 1 が弦長のパラメータ化である。
同論文は、3 次の Catmull–Rom 曲線では求心的なパラメータ化だけが、区間の中にカスプも自己交差も作らないことを証明した（第 3 節の定理 1 から 3）。
同論文の図 3 は、区間の値を線形補間の重ね合わせで求める Barry と Goldman の算法を、ピラミッドの形で図解している。
その原典の Barry と Goldman（1988）は、標準的な出典として挙げる（書誌のみ）。
同じ著者の論文誌版（Yuksel, Schaefer, Keyser, 2011）は、書誌と要旨まで確かめた。

**一様な 3 次 B-spline** の基底の式は、de Boor（1978）と Bartels, Beatty, Barsky（1987）を標準的な出典として挙げる（どちらも書誌のみ）。
Holten（2006）の hierarchical edge bundles は、階層の経路を制御点にした曲線で辺を描き、制御点を端点どうしの直線へ寄せる式 P'_i = β P_i + (1 − β)(P_0 + i/(N − 1)(P_{N−1} − P_0)) で束ねの強さを決める（3.2 節の式 (1)、本文確認）。

墨流しの水面の流れと、流れの図の帯は、曲線を数値計算で作る。
水面の点を流れに沿って 1 歩ずつ運ぶ**中点法**（2 次の Runge–Kutta 法）は Press ら（1992）を、ガウス核による**密度の推定**は Silverman（1986）を、**流れ関数** ψ から速度場 v = (∂ψ/∂y, −∂ψ/∂x) を作る方法は Batchelor（1967/2000）を、それぞれ標準的な出典として挙げる。
いずれも書誌のみの確認で、Press らについては第 16.1 節が Runge–Kutta 法であることを目次で確かめた。
流れ関数から作った速度場の発散は、偏微分の順序を入れ替えても値が変わらない（∂²ψ/∂x∂y = ∂²ψ/∂y∂x）ので 0 になる。
湧き出しも吸い込みもない流れは面積を保つので、流れで運んでも、水面の模様の面積は数値計算の誤差の分しか変わらない。
Jaffer の滴の写像も、C を除けば面積を保つ。
滴も流れも水面を切り離さずに連続に動かすので、両方を交互にかけても墨の輪どうしは交わらず、押されるたびに細く長く伸びていく。

## 紙と墨のにじみを計算機で表す

ここまでの方法は、点と線をどこに置くかを決める。
置いた線が紙の上でどう見えるかは、別の系統の研究が扱う。
/network のライトの見た目（和紙に墨）は、この系統から着想を借りた。

Curtis ら（1997）は、水彩の見た目を、紙、水、顔料の層の計算で作った（本文確認）。
紙は、高さの場と、水を含む量の場（fluid capacity）で表す（4.1 節）。
濡れた範囲の縁に顔料が溜まって濃くなる**縁の濃さ**（edge darkening）は、濡れた範囲の境界の近くで水を減らし、顔料を外へ運ぶ処理として書かれる（4.3.3 節、式 (3)）。
顔料が紙の谷に沈んで粒に見える**粒状感**（granulation）は、紙の高さが顔料の吸着と脱着を左右する係数 γ で表される（2.1 節、4.5 節）。

吸う紙に墨が広がる様子は、Chu と Tai（2005）の MoXi が扱う。
要旨によれば、格子ボルツマン法で不均質な多孔質の媒体の中の浸透をリアルタイムに計算し、吸う紙の上の墨の分散を再現する（要旨確認）。
墨が紙の繊維に沿って広がるかどうかは、要旨からは確かめられない。

墨絵のにじみを計算で表す試みは、Guo と Kunii（1991）までさかのぼる。
紙の構造、液体の流れ、粒子の吸着からにじみを再現するモデルで、この主題は索引の要旨と、Curtis ら（1997）の関連研究の節で確かめた（要旨相当）。

和紙の繊維の構造を計算で表した査読付きの CG の研究は、見つからなかった。
探したのは英語の文献で、和文のデータベースは探していない。

## データを作品として扱う先行例

データを使った作品の系譜は、本ノートでは所在と書誌を確かめた段階にとどまる。
作品の内容や手法は、確かめたページを超えては書かない。

Viégas と Wattenberg（2007）は、芸術としてのデータ可視化を論じた（要旨確認）。
その定義の読み方は [データビジュアライゼーションとデータアートは何が同じで、何が違うのか](https://jamjet-iqbal.com/notes/data-viz-vs-data-art-literature/) で扱った。
Kosara（2007）の題名は、可視化批評を、情報可視化とアートのあいだの「欠けた環（missing link）」と呼ぶ（書誌のみ）。
Lima（2011）の *Visual Complexity: Mapping Patterns of Information* は、"Networkism" という語の出典として挙げる。
語の定義箇所までは確かめていない。

Lupi と Posavec（2016）の *Dear Data* は出版社のページで、Posavec の *Writing Without Words* は作家の公式ページで、Lombardi の *Narrative Structures* は Whitney Museum の作家ページで、それぞれ所在を確かめた。
Viégas と Wattenberg の *Wind Map*（2012）は、作者の公式ページ（hint.fm）で 2012 年の公開と作者を確かめた。MoMA の所蔵は、独立した資料どうしで一致している。

## この wiki の /network での使い方

[この wiki の引用ネットワーク：note をハイパーエッジとみなした分析と作品](https://jamjet-iqbal.com/notes/citation-weave-of-this-wiki/) は、この wiki の公開 note の参照文献を、引用ネットワークとして分析した。
2 本以上の note に引かれた文献を結び目とし、同じ note に並ぶ結び目の組を共引用として結んでいる。
**共引用**は「2 つの文献が同じ第三の文献に引用される」関係で（Small, 1973）、**書誌結合**は「2 つの文献が同じ第三の文献を引用する」関係である（Kessler, 1963）。

[引用ネットワーク](/network)の作品は、この関係を固定したまま、並べ方だけを替えて描いている。
どの結び目がどの結び目と共引用でつながるかは、どの作品でも変わらない。
変わるのは、それを平面のどこに、どの軸に沿って置くかである。

力学配置の作品（墨流し、織物、星座）では、結び目の位置を、ForceAtlas2 の式の形を借りた力の計算で、閲覧のたびにブラウザの中で決めている。
結び目の質量をその文献を引く note の数とし、力を質量で割った値を加速度として動かした。
押し合う強さ（電荷）は質量の平方根とした（墨流しと星座では、さらに結び目ごとの揺らぎを掛ける）。
これは ForceAtlas2 からも d3-force の既定からも取っていない、この wiki の設計である。
ForceAtlas2 は質量を定義せず、d3-force は質量を 1 に固定するからである。
中心への引力の扱いは作品で違う。
織物では中心への引力に質量を掛けず、重い文献ほど引き寄せられにくい。
墨流しと星座では中心へ寄せる力に質量を掛け、その加速度が質量に依らないようにした。
この設計で言えるのは、同じ力を受けたときの加速度が、引く note の多い文献ほど小さいことまでである。
織物の配置での実測では、多く引かれた文献ほど共引用のばねの重みの合計も質量にほぼ比例して大きく、1 tick あたりの移動量は小さくならなかった（数値は [この wiki の引用ネットワーク：note をハイパーエッジとみなした分析と作品](https://jamjet-iqbal.com/notes/citation-weave-of-this-wiki/) の「作品の式」にある）。
シードは閲覧のたびに変わり、画面には出さず URL のハッシュにだけ残る。
同じシードからは同じ絵が出る。
「もう一度生成」でシードを変えると、群の置き場所と細部は変わるが、共引用の組と重みは変わらない。

配置を置く空間は、作品ごとに固定した。
墨流しは、描画域と同じ縦横比の長方形を一枚の布として端から端まで埋める（群の中は密に、群のあいだは疎になる）。
星座は、単位球面の上に置いて立体射影（Snyder, 1987）で描画域に写す。
Kobourov と Wampler（2005）は、要旨によれば、距離、角度、力のやりとりを、適切に選んだ接空間への射影を通してユークリッド幾何から球面や双曲面へ広げ、力学配置を一般化した（要旨確認）。
/network の星座はその計算を使わず、3 次元の空間で力をかけて動かしたあと、位置を長さ 1 へ戻し、速度を接平面へ落とす簡単な形にした。
墨流しと星座では、違う群の文献どうしの斥力を、同じ群どうしより遠くまで強く届かせ、群を点の粗密だけで読めるようにした。
ForceAtlas2 の斥力（式 2）はすべての組に届く。
届く距離を切り、群の内と外で距離と強さを分けることは ForceAtlas2 になく、この wiki の設計である。
墨流しの布には、文献が網に着いた順を横の軸（左が古い）に割り振る弱いばねもかけた。
ただし、このばねは共引用の引力よりずっと弱く、落ち着いた配置の横の位置から着いた順はほとんど読めない（二つの縦横比 1.605 と 1.638 の 5 つのシードで、順位相関は −0.20 から +0.34）。
墨流しで時間を表すのは、点の位置ではなく、下の墨流しの項目で述べる墨の輪の重なりと伸び、にじみである。
織物だけは、枠を持たない自由な平面に網を広げ、描くときにシードの回転と鏡映をかけて描画域に写す。

シードによる絵の変わり方は、共引用の関係ではなく、初期配置と力の係数から作った。
冒頭で見たとおり、Gansner, Koren, North（2005）の比較は、力学配置の結果が初期配置に左右されうることを前提にしている。
/network は、この初期配置への依存を、一つの配置を答えとして見せないために使う。
墨流しと星座では、シードごとに、着いたときの位置の揺らぎと結び目ごとの電荷の揺らぎを引く。
墨流しではさらに係数の小さな幅（0.85 から 1.15 倍など）を、星座では天球の視点を引く。
織物では、シードごとに、描く向き（回転と鏡映）、初期配置の族（円盤、渦、環、二つの房、帯、散った群）、力の係数の倍率を引く。
円盤以外の族では、結び目ごとの中心への引力を、群と網に着いた順だけから決めた型の位置へ向ける。
さらに確率 0.3 で引力を ForceAtlas2 の LinLog 型（式 3）に、確率 0.2 で重力を strong gravity（式 5）に替える。
この 2 つの形は ForceAtlas2 が選択肢として示しているもので、式は本文で確かめた。
族と型の位置、係数の範囲、形を確率で選ぶことは ForceAtlas2 にはなく、この wiki の設計である。
5 つのシード（7、11、23、101、202）の平均で、共引用の重みと距離の順位相関は、織物で −0.448、星座で −0.426、墨流しで −0.468 だった。
群の分かれ方を表すシルエットは、織物の 0.377 に対し、星座で 0.464、墨流しで 0.623 だった。
どの作品でも、よく一緒に引かれる文献ほど近くに置かれる傾向は保たれ、群は墨流しでいちばんはっきり分かれた。
測り方と数値の詳細は [この wiki の引用ネットワーク：note をハイパーエッジとみなした分析と作品](https://jamjet-iqbal.com/notes/citation-weave-of-this-wiki/) の「一つの配置を正解として見せない理由」にある。

ほかの作品は、それぞれ別の文献から並べ方を借りている。
タブの並びは、動く作品の墨流し（既定で一番左）、年輪、織物、星座と、静止画の束、弧、流れである。
どの作品も、1 本の note にしか引かれない文献を、その note のいる所のまわりに小さく淡い点として置く。

- **墨流し**：note を書いた日の順に、note 1 本ごとに墨の滴を 1 つ落とし、すぐ同じ中心へ水の滴（半径は墨の 0.8 倍）を落とす。墨は水に押されて細い輪になる。滴を落とす所は、その note が引く結び目の、平面の配置での位置の重心で、墨の滴の面積はその note が引く文献の数に比例させた。滴の写像は Jaffer の式で、あとの滴が前の輪を外へ押すので、早く書かれた note の輪ほど外で細く引き伸ばされる。水面の流れは発散 0 の流れ関数（交互に流れて蛇行する帯、流れの向きへ引き伸ばす一様な歪み、四隅へ寄せる流れ、大きい滴の下流に置く小さな渦）で作り、中点法で運ぶ。流れは滴を落としている間に少しずつ配るので、早く落ちた輪ほど長く流される。結び目の点は配置の位置のまま動かさず、その文献を初めて引いた note の滴が落ちたときに現れる。滴の写像と流れで点も運ぶ案では、群の分かれ方の指標が配置の値から大きく落ちた。
- **織物**：1 本の note を、力学配置で決まった結び目を近い順に通る 1 本の糸にし、制御点を通る中心化 Catmull–Rom 曲線で描く。糸は細い線で、にじませず、両端は同じ最小の太さまで細る。
- **星座**：結び目を球面の上の星にし、立体射影で描画域に写す。線は、距離が描画域の短い辺の 0.08 倍以内の共引用の組だけを候補にし、一緒に引かれた回数の多い順に、ほかの線と交わらず 1 つの星座が星 10 個を超えない組だけを結ぶ（Kruskal 法の最大全域森）。空には小さな星座がいくつも散らばる。1 本の note にしか引かれない文献は、その note の星の近くに小さく淡い星として散らす。
- **年輪**：関心の時期で半径の帯を、群で角度の扇形を決める。hive plot と同じく、属性から座標の枠を決める置き方である。帯と扇形が交わる区画の中の位置だけを、区画の中心への強い引力と、同じ区画の中の押し合いと、区画をまたぐ弱いばねで決める。扇形の並びの始まりと終わりのあいだには、くさび形の割れ目を開けた。割れ目の向きはシードで回るが、半径が時期、角度が群の順という対応は変わらない。
- **束**：結び目を円周に並べ、共引用を Holten（2006）の方法で束ねる。階層は根、群、時期、結び目の順に置き、β は 0.85 とした。寄せた制御点は、端点を 3 重にした一様な 3 次 B-spline で結ぶ。
- **弧**：note を書いた日の順に一本の基線に等間隔に並べ、同じ文献を引く note どうし（書誌結合）を半円の弧で結ぶ。arc diagram の形を借りているが、繰り返されるのは部分文字列ではなく、引いた文献である。弧は真の半円にしたので、弧の高さは書いた順の隔たり（あいだに書かれた note の多さ）として読める。
- **流れ**：群ごとに、note が結び目を通る回数を、note を書いた日に沿ってガウス核で広げて積み上げた streamgraph である。基線は層の傾きを太さで重みづけて小さくする形にし、立ち上がりの早い群を中央に、遅い群を外側に足した。どちらも Byron と Wattenberg（2008）が論じた基線と層の並べ方から選んでいる。層の境界は中心化 Catmull–Rom 曲線でなめらかにした。ライトでは層を和紙に置いた淡い墨の面で塗り、境目を細い墨の線で引くだけで、切り抜きも落ち影も付けない。ダークでは層の中心線へ向かってわずかに明るくなる帯を仕上げでだけ重ね、中心線に明るい芯は引かない。

見た目は、サイトのテーマで二つに分かれる。
ライトでは、どの作品も和紙に墨で刷ったように仕上げる。
紙の上の墨や水の広がりは計算しない。
墨流しの水面の流れも、式で与えた流れで点を運ぶだけで、流体の方程式は解かない。
にじみは、描き終えた絵にかける後処理ではなく、線 1 本ずつの幅と縁の描き方として持ち、にじむ量を 5 段に分ける。
にじむ線では、芯のまわりに、外へ行くほど淡い輪郭を重ねた濡れた本体が広がる。
本体はぼかして紙に重ねるので、縁は段を作らず紙へ滑らかに消える。
繊維を伝って縁の外へ延びる毛羽（毛細管の筋）は描かない。
本体の外周のすぐ内側には、細い帯に墨が溜まる。
この帯は Curtis ら（1997）の縁の濃さに着想を得たが、淡く保ち、線が混んでいる所ほど弱めるので、水彩ほど縁は濃くならない。
線が密に並ぶ所では帯が何本も重なり、弱めなければ荒れた縞に見えるからである。
いちばん古い線の本体に置く、紙の歯の谷ほど濃い細かな粒は、同じ論文の粒状感に着想を得た。
MoXi からは計算を借りず、紙の場所ごとに吸い方が違って縁が揺れるという見え方だけを借り、縁の帯の外周だけを和紙の繊維の向きと紙の歯でわずかに揺らした。
にじみを線ごとに持つこと、縁の帯の外周を和紙の繊維で揺らすこと、線の混み具合で縁を弱めること、和紙の繊維の描き方は、上の研究にはないこの wiki の設計である。
にじむ量は、その線が表すつながりの古さに写した（古い線ほどにじむ）。
古さを何の日付で測るかは作品ごとに違い、[この wiki の引用ネットワーク：note をハイパーエッジとみなした分析と作品](https://jamjet-iqbal.com/notes/citation-weave-of-this-wiki/) の「二つの見た目」に並べた。
ダークでは、暗い面に線を加算で重ねて光らせ、同じにじむ量を光の暈の広がりにする。
どちらのテーマでも、赤い線はにじませない。
どの作品も、描いている間はにじみのない細い線で描き、描き終えてから「仕上げ」と表示して、同じ描画を水墨の線で描き直した絵へ約 10 秒かけて移る。
進み具合は経過時間に比例させる。
織物の糸はにじませないので、ライトでは仕上げで線が変わらず、ダークでは全体の光だけが重なる。
完成の状態を、描く過程の続きではなく、はっきり示した最後の一手として見せるためである。
群は論文の割合の順に表し、どちらのテーマも色相を一つに固定した。
ライトでは一つの墨の濃さ（論文が少ない群ほど薄く、論文が多い群ほど濃い）、ダークではわずかに暖かい白い光の明るさ（論文が少ない群ほど暗く、論文が多い群ほど明るい）で示す。
文献の印の形はどちらのテーマでも同じで、学術（論文とプレプリント）を塗りの円、実務（企業、公的機関、ニュースやブログなどのウェブ）を輪にした。
この分け方は論文の割合と同じである。

冒頭で見た島の形は、シードと力の設計が決めた一つの並べ方だった。
束、弧、流れは、同じ共引用の組を、階層や時間という別の軸で並べ直している。
墨流しは、同じ配置の上に、note を書いた順を滴の重なりとして重ねている。
どの並べ方がこの wiki の関心の動きを最もよく写すのかは、絵を並べて見比べるだけでは決まらない。

## まだ確認していないこと

- Fruchterman と Reingold（1991）、Kamada と Kawai（1989）、Barnes と Hut（1986）、Bostock ら（2011）、Noack（2009）は書誌のみの確認で、本文の内容を本ノートの根拠に使っていない。
- Wattenberg（2002）の弧の高さの符号化と、Kosara（2007）の本文には到達していない。
- Catmull と Rom（1974）、Barry と Goldman（1988）、de Boor（1978）、Bartels ら（1987）、Press ら（1992）、Silverman（1986）、Batchelor（1967/2000）は書誌のみの確認で、標準的な式の出典として挙げるにとどめる。Snyder（1987）も書誌のみの確認で、立体射影の標準的な出典として挙げる。Yuksel ら（2011）は要旨まで確かめた。
- Lu ら（2012）は要旨まで確かめ、本文は入手していない。滴の式は共著者 Jaffer の解説ページで確かめたもので、論文の中の式と一致するかは確かめていない。Kobourov と Wampler（2005）も要旨までの確認で、接空間への射影の計算は読んでいない。
- Circos（Krzywinski ら、2009）と Viégas と Wattenberg（2007）は要旨まで確かめたが、本ノートでは題名を超える内容を書いていない。
- Chu と Tai（2005）は要旨まで、Guo と Kunii（1991）は索引の要旨と Curtis ら（1997）の関連研究の節での確認にとどまる。MoXi が紙の繊維をどう扱うかは確かめていない。和文の文献で和紙の繊維を計算で表した研究があるかどうかも調べていない。
- 先行例の作品（Dear Data、Writing Without Words、Narrative Structures、Wind Map）は所在の確認にとどまり、作品の手法とネットワーク図法との関係は調べていない。

## 参照文献

- Barnes, J., & Hut, P. (1986). "A hierarchical O(N log N) force-calculation algorithm". *Nature*, 324(6096), 446-449. https://doi.org/10.1038/324446a0
- Barry, P. J., & Goldman, R. N. (1988). "A recursive evaluation algorithm for a class of Catmull-Rom splines". In *Proceedings of the 15th Annual Conference on Computer Graphics and Interactive Techniques (SIGGRAPH '88)*, 199-204. ACM. https://doi.org/10.1145/54852.378511
- Bartels, R. H., Beatty, J. C., & Barsky, B. A. (1987). *An Introduction to Splines for Use in Computer Graphics and Geometric Modeling*. Morgan Kaufmann. ISBN 0-934613-27-3.
- Batchelor, G. K. (2000). *An Introduction to Fluid Dynamics*. Cambridge University Press（初版 1967）. https://doi.org/10.1017/CBO9780511800955
- Bostock, M., Ogievetsky, V., & Heer, J. (2011). "D3: Data-Driven Documents". *IEEE Transactions on Visualization and Computer Graphics*, 17(12), 2301-2309. https://doi.org/10.1109/TVCG.2011.185
- Byron, L., & Wattenberg, M. (2008). "Stacked Graphs: Geometry & Aesthetics". *IEEE Transactions on Visualization and Computer Graphics*, 14(6). https://doi.org/10.1109/TVCG.2008.166
- Catmull, E., & Rom, R. (1974). "A class of local interpolating splines". In R. E. Barnhill & R. F. Riesenfeld (Eds.), *Computer Aided Geometric Design*, 317-326. Academic Press. https://doi.org/10.1016/B978-0-12-079050-0.50020-5
- Chu, N. S.-H., & Tai, C.-L. (2005). "MoXi: Real-time ink dispersion in absorbent paper". *ACM Transactions on Graphics*, 24(3), 504-511. https://doi.org/10.1145/1073204.1073221
- Curtis, C. J., Anderson, S. E., Seims, J. E., Fleischer, K. W., & Salesin, D. H. (1997). "Computer-generated watercolor". In *Proceedings of the 24th Annual Conference on Computer Graphics and Interactive Techniques (SIGGRAPH '97)*, 421-430. ACM. https://doi.org/10.1145/258734.258896
- D3. (n.d.). "d3-force". *D3 documentation*. https://d3js.org/d3-force （2026-09-23 アクセス）
- de Boor, C. (1978). *A Practical Guide to Splines*. Springer. ISBN 978-0-387-90356-9.
- Eades, P. (1984). "A heuristic for graph drawing". *Congressus Numerantium*, 42, 149-160. https://www.cs.ubc.ca/~will/536E/papers/Eades1984.pdf
- Fruchterman, T. M. J., & Reingold, E. M. (1991). "Graph drawing by force-directed placement". *Software: Practice and Experience*, 21(11), 1129-1164. https://doi.org/10.1002/spe.4380211102
- Gansner, E. R., Koren, Y., & North, S. (2005). "Graph Drawing by Stress Majorization". In *Graph Drawing 2004*, LNCS 3383, 239-250. https://doi.org/10.1007/978-3-540-31843-9_25
- Guo, Q., & Kunii, T. L. (1991). "Modeling the diffuse paintings of 'sumie'". In T. L. Kunii (Ed.), *Modeling in Computer Graphics*, 329-338. Springer. https://doi.org/10.1007/978-4-431-68147-2_21
- Havre, S., Hetzler, E., Whitney, P., & Nowell, L. (2002). "ThemeRiver: Visualizing thematic changes in large document collections". *IEEE Transactions on Visualization and Computer Graphics*, 8(1). https://doi.org/10.1109/2945.981848
- Holten, D. (2006). "Hierarchical Edge Bundles: Visualization of Adjacency Relations in Hierarchical Data". *IEEE Transactions on Visualization and Computer Graphics*, 12(5), 741-748. https://doi.org/10.1109/TVCG.2006.147
- Holten, D., & van Wijk, J. J. (2009). "Force-Directed Edge Bundling for Graph Visualization". *Computer Graphics Forum*, 28(3), 983-990. https://doi.org/10.1111/j.1467-8659.2009.01450.x
- Jacomy, M., Venturini, T., Heymann, S., & Bastian, M. (2014). "ForceAtlas2, a Continuous Graph Layout Algorithm for Handy Network Visualization Designed for the Gephi Software". *PLoS ONE*, 9(6), e98679. https://doi.org/10.1371/journal.pone.0098679
- Jaffer, A. (2010). *Dropping Paint*. Topological Computer Graphics（著者の解説ページ。MIT CSAIL のサーバーにあり、著作権表示は 2006, 2010 年）. https://people.csail.mit.edu/jaffer/Marbling/Dropping-Paint （2026-09-24 アクセス）
- Kamada, T., & Kawai, S. (1989). "An algorithm for drawing general undirected graphs". *Information Processing Letters*, 31(1), 7-15. https://doi.org/10.1016/0020-0190(89)90102-6
- Kessler, M. M. (1963). "Bibliographic coupling between scientific papers". *American Documentation*, 14(1), 10-25. https://doi.org/10.1002/asi.5090140103
- Kobourov, S. G., & Wampler, K. (2005). "Non-Euclidean spring embedders". *IEEE Transactions on Visualization and Computer Graphics*, 11(6), 757-767. https://doi.org/10.1109/TVCG.2005.103
- Kosara, R. (2007). "Visualization Criticism: The Missing Link Between Information Visualization and Art". *Proc. IV 2007*, 631-636. IEEE. https://doi.org/10.1109/IV.2007.130
- Krzywinski, M., Birol, I., Jones, S. J. M., & Marra, M. A. (2012). "Hive plots: Rational approach to visualizing networks". *Briefings in Bioinformatics*, 13(5), 627-644. https://doi.org/10.1093/bib/bbr069
- Krzywinski, M., et al. (2009). "Circos: An information aesthetic for comparative genomics". *Genome Research*, 19(9), 1639-1645. https://doi.org/10.1101/gr.092759.109
- Lima, M. (2011). *Visual Complexity: Mapping Patterns of Information*. Princeton Architectural Press. ISBN 978-1-56898-936-5.
- Lombardi, M. (n.d.). *Narrative Structures*. Whitney Museum of American Art（作家ページ）. https://whitney.org/artists/7340
- Lu, S., Jaffer, A., Jin, X., Zhao, H., & Mao, X. (2012). "Mathematical marbling". *IEEE Computer Graphics and Applications*, 32(6), 26-35. https://doi.org/10.1109/MCG.2011.51
- Lupi, G., & Posavec, S. (2016). *Dear Data*. Princeton Architectural Press. ISBN 978-1-61689-532-7.
- Noack, A. (2009). "Modularity clustering is force-directed layout". *Physical Review E*, 79, 026102. https://doi.org/10.1103/PhysRevE.79.026102
- Posavec, S. (n.d.). *Writing Without Words*. https://www.stefanieposavec.com/archive/writing-without-words
- Press, W. H., Teukolsky, S. A., Vetterling, W. T., & Flannery, B. P. (1992). *Numerical Recipes in C* (2nd ed.). Cambridge University Press. ISBN 0-521-43108-5.
- Rosvall, M., & Bergstrom, C. T. (2010). "Mapping change in large networks". *PLoS ONE*, 5(1), e8694. https://doi.org/10.1371/journal.pone.0008694
- Silverman, B. W. (1986). *Density Estimation for Statistics and Data Analysis*. Chapman & Hall. ISBN 0-412-24620-1.
- Small, H. (1973). "Co-citation in the scientific literature: A new measure of the relationship between two documents". *Journal of the American Society for Information Science*, 24(4), 265-269. https://doi.org/10.1002/asi.4630240406
- Snyder, J. P. (1987). *Map Projections: A Working Manual* (U.S. Geological Survey Professional Paper 1395). U.S. Geological Survey. https://doi.org/10.3133/pp1395
- Venturini, T., Jacomy, M., & Jensen, P. (2021). "What do we see when we look at networks: Visual network analysis, relational ambiguity, and force-directed layouts". *Big Data & Society*, 8(1). https://doi.org/10.1177/20539517211018488
- Viégas, F. B., & Wattenberg, M. (2007). "Artistic Data Visualization: Beyond Visual Analytics". In *Online Communities and Social Computing (HCI International 2007)*, LNCS. https://doi.org/10.1007/978-3-540-73257-0_21
- Viégas, F., & Wattenberg, M. (2012). *Wind Map*. http://hint.fm/wind/
- Wattenberg, M. (2002). "Arc Diagrams: Visualizing Structure in Strings". *IEEE InfoVis 2002*. https://doi.org/10.1109/INFVIS.2002.1173155
- Yuksel, C., Schaefer, S., & Keyser, J. (2009). "On the parameterization of Catmull-Rom curves". In *2009 SIAM/ACM Joint Conference on Geometric and Physical Modeling*, 47-53. ACM. https://doi.org/10.1145/1629255.1629262
- Yuksel, C., Schaefer, S., & Keyser, J. (2011). "Parameterization and applications of Catmull–Rom curves". *Computer-Aided Design*, 43(7), 747-755. https://doi.org/10.1016/j.cad.2010.08.008

## 関連ノート

- [この wiki の引用ネットワーク](https://jamjet-iqbal.com/notes/citation-weave-of-this-wiki/)：本ノートの文献を使って描いた引用ネットワークの分析。結び目、共引用、群、時期の定義はそちらにある。
- [データビジュアライゼーションとデータアートは何が同じで、何が違うのか](https://jamjet-iqbal.com/notes/data-viz-vs-data-art-literature/)：本ノートの先行例の節が前提にしている、可視化とデータアートの区別を扱う。
- [ネットワーク科学とデザイン学はどう関わってきたか](https://jamjet-iqbal.com/notes/network-science-design-studies-literature/)：描く道具を作ったネットワーク科学と、デザイン学が互いをどう使ってきたかを扱う。