Shuichiro Ogawa
English

ノートの分析と作品

引用ネットワーク

142 本のノートが引いた 4,227 件の文献を、ネットワークとして分析し、7 点の作品にする。

このサイトのノートは、末尾に参考文献（論文やウェブページ）を載せています。ここでは文献を点、1 本のノートを「そのノートが引いた文献をまとめて結ぶ線」とみなし、ノートどうしが同じ文献で出会う場所を描きます。

対象は2026年6月から2026年9月に書いた公開ノートです。同じデータを 7 通りに描き、分析でわかったことと方法、元データもあわせて公開します。

全体像

  1. 01

    作品

    同じデータを、動く作品 3 点と静止画 4 点に描く。

  2. 02

    わかったこと

    グループと時期、つなぎ役の文献、ノートどうしの重なりについて 4 点。

  3. 03

    しくみ

    ノートから何を数え、どう形にするか。グループ、時期、数字、元データ、参考文献。

01

作品

動く作品（織物、星座、年輪）は、開くたびにブラウザの中で力の計算をして、文献の位置を決める。静止画（束、弧、流れ、流線）は、完成した形を一度に描く。束、弧、流れは決まった並びに置き、流線は動く作品と同じ力の計算で求めた位置を使う。

1 本の糸が 1 本のノートで、糸の集まる結び目が、2 本以上のノートが引いた文献である。

マウスを重ねると名前が、押すとカード（ノートや文献へのリンク）が出る。Esc か余白を押すと閉じる。動く作品は「別の配置で生成」で配置を変えられ、「画像を保存」でいまの絵を保存できる。

実装：TypeScript と p5.js 2.3（p5 は canvas と描画ループを受け持ち、図形は Canvas 2D に直接描く）。ノートの集計とグループ分けはビルド時に graphology（Louvain 法、媒介中心性）で行い、配置の力の計算と各作品の描画は自作のコードで行う。サイトは Astro で静的に生成する。

この作品のしくみ （織物）

使うデータ

  • 引用数
  • 共引用数
  • 書いた日と時期
  • グループ
  • 種類

量の定義を見る ↓

対応表
見た目 表すもの
結び目 文献（2 本以上のノートが引いたもの）
結び目の大きさ 引用数
塗り／輪 種類（塗りは論文、輪はウェブページ）
結び目の濃さ グループ（薄いほどウェブ寄り）
結び目どうしの近さ 共引用数（多いほど近くに寄る）
糸 ノート（引いた文献を、近いものから順に通る）
糸のまわりの粒 そのノートだけが引いた文献（粒の位置に意味はない）
小さな輪の糸 2 本以上のノートが引く文献を 1 件も引かないノート
糸が加わる順（左下に時期） 書いた日と時期（古いノートから）
赤 選んだものと、引用数が最も多い文献

作り方

文献どうしを共引用数に応じたばねで引き合わせ、すべての文献を互いに押し合わせて、釣り合った場所に置く。ノートは書いた日の順に 1 本ずつ加わり、そのたびに糸が 1 本増え、新しい文献とばねが足される。開くたびに始まりの配置を変えるので形は変わるが、どれとどれが近いかはおおむね保たれる。

近さ ← 共引用数、重さ ← 引用数

参考

Jacomy et al.（2014）、Eades（1984）、Fruchterman & Reingold（1991）、Small（1973）、Yuksel et al.（2009）

実装

自作の力学シミュレーションと、結び目を通る糸の曲線（中心化 Catmull-Rom）。 src/lib/weave-works/weave.ts、src/lib/weave-works/physics.ts

02

わかったこと

文献は 11 のグループ（よく一緒に引かれる文献のまとまり）に分かれ、ノートは書いた日で 6 つの時期に分かれる。

  • 6 つの時期のすべてで引かれたグループは、「産業の観測」だけである。

    文献 96 件、論文の割合 9%。ほかの 10 グループには、どれも引かれない時期がある。

  • 論文がほぼすべてのグループは、1 つの時期に集中して引かれる。

    論文の割合が 95% 以上の 4 グループは、どれも引用の 74% 以上が 1 つの時期に集まる。

  • グループどうしを最も強くつなぐ文献は、Doshi & Hauser 2024 である。

    媒介中心性（ほかの文献どうしを結ぶ近道に出てくる度合い。Freeman, 1977）が最大の文献。これを引くノート 8 本は、11 グループのうち 7 グループの文献を引いている。

    Doshi & Hauser 2024 を開く ↗

  • 同じ文献を 1 件以上共有するノートの組は 524 組ある。

    ノート 142 本からできる 10,011 組の 5% にあたる。

03

しくみ

ノートから数を取り出し、その数を作品ごとの規則で形にする。数えるのはサイトを生成するときの 1 回だけなので、同じノートからは毎回同じ数になる。

  1. 01

    ノート

    公開ノート 142 本。下書きは数えない。

  2. 02

    引いた文献の一覧

    各ノートの参考文献の節から DOI と URL を拾い、同じ文献を 1 件にまとめる。4,227 件になる。

  3. 03

    数える

    下の 6 つの量を数える。

  4. 04

    作品ごとの規則で形にする

    量を、位置、大きさ、濃さ、線に置き換える。規則は、各作品の下の「この作品のしくみ」にある。

数える 6 つの量

作品の下の「この作品のしくみ」も、この名前で使うデータを示す。

引用数
その文献を引いたノートの本数。
共引用数
2 つの文献を、同じノートの中で一緒に引いたノートの本数。
分析の用語では共引用（Small, 1973）
共有数
2 本のノートが、共通して引いた文献の数。
分析の用語では書誌結合（Kessler, 1963）
書いた日と時期
ノートが初めて書かれた日と、トップページと同じ 6 つの時期。
グループ
一緒に引かれやすい文献のまとまり（自動で分けた 11 個）と、その中の論文の割合（ウェブ寄りか学術寄りか）。
種類
論文（DOI やプレプリント）か、ウェブページか。

織物、星座、年輪、束、流線で点（結び目）になるのは、2 本以上のノートが引いた文献 445 件だけである（引いた文献 4,227 件のうち）。1 本のノートだけが引いた文献は、織物で糸のまわりの粒になる。

式と係数は、分析ノートの「作品の式」にある。

グループの一覧

よく一緒に引かれる文献を、Louvain 法（Blondel et al., 2008）でグループに分ける。分かれ方の明瞭さはモジュラリティ（Newman & Girvan, 2004）で測る。計算が決めるのはどの文献が同じグループに入るかまでで、名前と説明は人が中身を読んで付けた。

一覧はウェブ寄り（論文の割合が低い）から学術寄りの順で、絵の濃さと年輪の扇形も同じ順に並ぶ。論文は DOI のある論文と arXiv などのプレプリント、ウェブページはあとから中身が変わりうるページを指す。

  1. スキルの公的標準

    デジタル人材のスキルを国が定めた標準です。

    論文の割合 0%

    文献 1 件、よく引かれた時期：時期 5（2026年9月中旬）

  2. 産業の観測

    デザインツールの更新履歴、AI 企業の発表、市場の調査、規制のページ。週次ウォッチが毎週見に行く場所です。

    論文の割合 9%

    文献 96 件、よく引かれた時期：時期 1（2026年6月上旬〜7月中旬）

  3. AI に任せる判断と評価の標準

    判断を返す AI の設計資料と、AI をどう評価するかを決める公的な文書です。

    論文の割合 25%

    文献 51 件、よく引かれた時期：時期 6（2026年9月中旬〜下旬）

  4. デザインシステム

    デザインシステムの仕様と、その効果を確かめた研究です。

    論文の割合 63%

    文献 8 件、よく引かれた時期：時期 5（2026年9月中旬）

  5. LLM による評価

    言語モデルに採点や評価をさせる方法とその限界の研究です。

    論文の割合 80%

    文献 15 件、よく引かれた時期：時期 2（2026年7月中旬〜下旬）

  6. 研究のすき間と問題の立て直し

    研究の空白を探し、問題の立て方そのものを見直すときに引いた文献です。

    論文の割合 83%

    文献 58 件、よく引かれた時期：時期 2（2026年7月中旬〜下旬）

  7. AI とデザインの実務、教育

    生成 AI がデザインの現場と教室に入ったとき何が起きるかを調べた研究です（HCI の学会 CHI が中心）。

    論文の割合 90%

    文献 52 件、よく引かれた時期：時期 1（2026年6月上旬〜7月中旬）

  8. 構えと能力を測る

    人の構えや能力を、何を手がかりにどう測るかを考えた文献です。

    論文の割合 95%

    文献 39 件、よく引かれた時期：時期 3（2026年8月上旬〜下旬）

  9. 生成と創造性

    ジェネラティブアートと、AI が人の創造性や発想の多様さをどう変えるかの研究です。

    論文の割合 98%

    文献 43 件、よく引かれた時期：時期 3（2026年8月上旬〜下旬）

  10. 研究の問いの立て方

    新しい問いの見つけ方と、つくることで研究する方法（Research through Design）の文献です。

    論文の割合 100%

    文献 42 件、よく引かれた時期：時期 2（2026年7月中旬〜下旬）

  11. 学ぶことと認知負荷

    人が学ぶとき頭にかかる負担と、学びを支える手立ての研究です。

    論文の割合 100%

    文献 40 件、よく引かれた時期：時期 3（2026年8月上旬〜下旬）

6 つの時期

時期はトップページの「関心の推移」と同じ 6 つである。時間はノートを初めて書いた日（更新記録に初めて出た日）で数え、最後に直した日では数えない。

  1. 1

    2026年6月上旬〜7月中旬

    AI でデザイナーの仕事と稼ぎはどう変わるか

    初めて書いたノート 44 本、初めて引かれた文献 149 件

    最も多く引かれたグループ：産業の観測

  2. 2

    2026年7月中旬〜下旬

    研究の方法と、問いの立て方

    初めて書いたノート 37 本、初めて引かれた文献 121 件

    最も多く引かれたグループ：研究のすき間と問題の立て直し

  3. 3

    2026年8月上旬〜下旬

    学ぶことと、能力を測ること

    初めて書いたノート 34 本、初めて引かれた文献 115 件

    最も多く引かれたグループ：生成と創造性

  4. 4

    2026年8月下旬

    AI スロップと、デザインという分野の来歴

    初めて書いたノート 10 本、初めて引かれた文献 18 件

    最も多く引かれたグループ：産業の観測

  5. 5

    2026年9月中旬

    デザインシステムと、仕事を載せる標準

    初めて書いたノート 5 本、初めて引かれた文献 11 件

    最も多く引かれたグループ：デザインシステム

  6. 6

    2026年9月中旬〜下旬

    AI に任せる判断と、つくって考える方法

    初めて書いたノート 12 本、初めて引かれた文献 31 件

    最も多く引かれたグループ：AI に任せる判断と評価の標準

初めて引かれた文献は、2 本以上のノートが引く文献のうち、その時期のノートが初めて引いたものである。トップページと数が違うのは、ここでは公開ノートだけを数え、定期収集のウォッチのノートも含めるためである。

位置と距離が表すもの
  • 織物、星座、流線では、文献の位置を前もって決めず、次の力が釣り合う場所に置く。共引用数が多い文献どうしほど強く引き合う。すべての文献は互いに押し合う。全体は真ん中へ弱く引かれる。引用数が多い文献ほど重く、押す力も少し強い。年輪も似た力を使うが、文献は決まった区画の中だけを動く。力の形は ForceAtlas2（Jacomy et al., 2014）にならい、重さはこのサイトで加えた。
  • 重さの効き目を実測すると、重い文献は、同じ力を受けたときの動きは小さいが、実際の移動量は軽い文献とほぼ変わらなかった。多く引かれる文献ほど、引き合う相手も多いためである。
  • 意味を持つのは相対的な近さだけである。近い文献ほど、同じノートで一緒に使われやすい。全体の形と向き（どちらが上か、右か）は開くたびに変わり、意味を持たない。距離を定規で測って比べることもできず、力で配置した図の近さには読みのあいまいさが残る（Venturini et al., 2021）。
  • 力で配置した図は、始めの置き方で仕上がりが変わる。Gansner et al.（2005）は、同じ図を 25 通りのランダムな始め方で描いて比べている。1 つの配置だけを見せると偶然の形が答えに見えるので、このページは開くたびに別の配置を生む。ボタンの横の番号（「配置 1234」など）は配置の種（シード）で、URL の # の後にも入る。同じ番号の URL を開くと、同じ配置が再現される。何度生み直しても近くにいる文献どうしは、それだけ強く結びついている。
  • 「スキルの公的標準」のグループは文献が 1 件だけで、ほかの文献と一度も一緒に引かれていないため、位置に意味はない。
数字
公開ノート
142 本
引かれた文献
4,227 件
うち DOI（論文ごとの識別番号）つき 2,089 件
2 本以上のノートが引く文献
445 件
織物の結び目、星座の星
一緒に引かれた文献の組
5,870 組
星座の線
グループ
11 個
よく一緒に引かれる文献のまとまり
モジュラリティ
0.73
グループの分かれ方の明瞭さ。1 に近いほど明瞭

文献を 1 件以上読み取れたノートは 137 本。公開前の下書き（draft）のノート 33 本は数えていない。

元データと分析ノート
  • 元データ（JSON）

    このページと同じデータ。サイトを生成するたびに作り直す。

  • 分析ノート

    計算の手順と結果を記録したノート。

  • 文献ノート

    ネットワークの可視化とデータアートの方法について、先行研究をまとめたノート。

参考文献

分析と 7 点の作品は、次の文献の方法と考え方にもとづく。引用で分野の地図を描く試みは知識領域の可視化として Börner et al.（2003）にまとめられ、専用の道具に Chen（2006）の CiteSpace がある。

作品ごとの土台

織物
Jacomy et al.（2014）、Eades（1984）、Fruchterman & Reingold（1991）、Small（1973）、Yuksel et al.（2009）
星座
Jacomy et al.（2014）、Eades（1984）、Fruchterman & Reingold（1991）、Small（1973）
年輪
Jacomy et al.（2014）、Eades（1984）、Fruchterman & Reingold（1991）、Small（1973）、Krzywinski et al.（2012）
束
Holten（2006）、Holten & van Wijk（2009）、de Boor（1978）
弧
Wattenberg（2002）、Kessler（1963）
流れ
Byron & Wattenberg（2008）、Havre et al.（2002）、Silverman（1986）
流線
Jobard & Lefer（1997）、Turk & Banks（1996）、Batchelor（1967/2000）

分析の方法

配置を力で生む方法（織物、星座、年輪）

静止画の作品のアルゴリズム（束、弧、流れ、流線）

  • 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
  • Wattenberg, M. (2002). Arc diagrams: Visualizing structure in strings. In IEEE Symposium on Information Visualization (InfoVis 2002) (pp. 110–116). IEEE. https://doi.org/10.1109/INFVIS.2002.1173155
  • Byron, L., & Wattenberg, M. (2008). Stacked graphs: Geometry & aesthetics. IEEE Transactions on Visualization and Computer Graphics, 14(6), 1245–1252. https://doi.org/10.1109/TVCG.2008.166
  • 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), 9–20. https://doi.org/10.1109/2945.981848
  • Jobard, B., & Lefer, W. (1997). Creating evenly-spaced streamlines of arbitrary density. In Visualization in Scientific Computing ’97 (pp. 43–55). Springer. https://doi.org/10.1007/978-3-7091-6876-9_5
  • Turk, G., & Banks, D. (1996). Image-guided streamline placement. In Proceedings of the 23rd Annual Conference on Computer Graphics and Interactive Techniques (SIGGRAPH ’96) (pp. 453–460). ACM. https://doi.org/10.1145/237170.237285

曲線と数値計算

  • Catmull, E., & Rom, R. (1974). A class of local interpolating splines. In R. E. Barnhill & R. F. Riesenfeld (Eds.), Computer aided geometric design (pp. 317–326). Academic Press. https://doi.org/10.1016/B978-0-12-079050-0.50020-5
  • 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) (pp. 199–204). ACM. https://doi.org/10.1145/54852.378511
  • 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 (pp. 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
  • de Boor, C. (1978). A practical guide to splines. Springer. ISBN 978-0-387-90356-9
  • 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
  • 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
  • Silverman, B. W. (1986). Density estimation for statistics and data analysis. Chapman & Hall. ISBN 0-412-24620-1
  • Batchelor, G. K. (2000). An introduction to fluid dynamics. Cambridge University Press. (Original work published 1967) https://doi.org/10.1017/CBO9780511800955 リンクは Cambridge Mathematical Library 版（2000 年）の DOI です。

作品としての先行例

  • Lima, M. (2011). Visual complexity: Mapping patterns of information. Princeton Architectural Press. ISBN 978-1-56898-936-5
  • Lupi, G., & Posavec, S. (2016). Dear data. Princeton Architectural Press. ISBN 978-1-61689-532-7
  • Posavec, S. (n.d.). Writing without words [Artwork]. Stefanie Posavec. https://www.stefanieposavec.com/archive/writing-without-words
  • Lombardi, M. (n.d.). Narrative structures [Drawings]. Whitney Museum of American Art. https://whitney.org/artists/7340
  • Viégas, F. B., & Wattenberg, M. (2007). Artistic data visualization: Beyond visual analytics. In Online Communities and Social Computing (OCSC 2007) (Lecture Notes in Computer Science, pp. 182–191). Springer. https://doi.org/10.1007/978-3-540-73257-0_21
  • Kosara, R. (2007). Visualization criticism: The missing link between information visualization and art. In Proceedings of the 11th International Conference Information Visualization (IV ’07) (pp. 631–636). IEEE. https://doi.org/10.1109/IV.2007.130
  • Viégas, F., & Wattenberg, M. (2012). Wind map [Interactive artwork]. hint.fm. http://hint.fm/wind/ 公式ページで 2012 年の公開と作者を確かめました（https では開けないので、http のアドレスを載せています）。