Notes · updated 2026-09-23
The Citation Network of This Wiki: Analysis and Artworks Treating Each Note as a Hyperedge
Of the 4,227 references cited in the reference sections of 142 public notes, the 445 cited by two or more notes were taken as knots, and their co-citation graph (5,870 edges) was split by the Louvain method into 11 clusters (modularity 0.7263).
Contents (11)
- Why treat a note as a bundle rather than a line
- What was counted, and how
- The whole in numbers
- What the 11 clusters correspond to in this wiki
- Most-cited references, and references that connect clusters
- The 17 notes with no knots
- Clusters passed through, period by period
- A reading from design theory
- Drawing it as artworks
- Formulas of the works
- Limitations
The public notes in this wiki are written under a rule that they end with a list of references. Each reference carries a DOI or a URL wherever possible.
Stack those lists across 142 notes and you can see which references are cited by how many notes, and which notes stand on the same literature. A wikilink is a connection the writer made on purpose. Overlaps in the reference lists accumulate without the writer noticing. Do those unnoticed overlaps match the picture the writer holds of this wiki?
Why treat a note as a bundle rather than a line
The obvious way to draw connections between notes is to make each note a node and each wikilink an edge. This note does something else: it makes each reference a node and treats each note as a hyperedge that binds, all at once, every reference that note cites. An ordinary edge joins exactly two points; a hyperedge joins any number of points at once.
The reason to keep the bundle is that breaking it into pairs loses information. Battiston et al. (2020) review how projecting many-body interactions onto a pairwise network loses which sets were involved together. For example, a triangle in which references A, B, and C are all connected could come from one note citing all three, or from three notes each citing two of them. A pairwise graph cannot tell these apart.
That said, cluster detection and centrality were computed on the pairwise graph (the co-citation graph). It is the drawing that keeps the bundles: each note is drawn as one thread passing through the references it cites.
In the pairwise graph, each edge is what the citation-analysis literature calls co-citation. Small (1973) called it co-citation when two documents are cited together by a third, and took the number of documents citing both as its strength. Here the citing documents are notes. The weight of an edge between two references is the number of notes that cite both.
There is also the reverse relation. Kessler (1963) called it bibliographic coupling when two documents cite the same third document. In this wiki, that corresponds to two notes sharing a reference. This note does not compute a separate coupling network, but when threads bundle at a single knot in the drawing, you are seeing bibliographic coupling directly.
Efforts to map the structure of a field from citation relations have been surveyed as the visualization of knowledge domains (Börner et al., 2003). There are also dedicated tools, such as CiteSpace, for detecting and visualizing trends in a literature (Chen, 2006). This note applies that approach not to a field but to one writer’s wiki.
What was counted, and how
All numbers come from dist/client/network.json as built on 2026-09-23.
The computation is done by src/lib/citation-weave.ts, as follows.
- Scope: the 142 Japanese notes directly under
wiki/note/that are not drafts. The 33 drafts were excluded. English versions were not counted. Sections hidden on the public pages were removed, as they are on those pages. - Extraction: only lines in a
##section whose heading begins with 参照文献, References, 参考文献, or 出典 were read, up to the next##heading. URLs in related-notes or unverified-items sections were not counted as citations. - Identification: DOIs were lowercased into a single key. doi.org URLs and publisher URLs of the
/doi/form were also converted to DOIs. Other URLs were keyed after droppingwww.from the host, any trailing/, and parameters beginning withutm_. Links to this site itself were excluded. - Paper or not: a reference with a DOI, or one without a DOI but written as an arXiv (
/abs/or/pdf/), ACL Anthology, or OpenReview (/forumor/pdf) URL, counts as a paper; everything else counts as a web page. Preprints and conference proceedings are fixed documents even without a DOI. - Knots: a reference cited by two or more public notes is called a knot, where threads gather.
- Co-citation graph: knots are nodes; for every pair of knots listed in the same note, the pair’s weight goes up by 1.
- Clusters: the weighted Louvain method (Blondel et al., 2008) searches for a partition with high modularity (Newman & Girvan, 2004). Its randomness comes from a fixed seed, so the same wiki always yields the same partition. Clusters were numbered from 0 in order of size.
- Paper share and order: the share of a cluster’s knots that are papers is its paper share. Clusters were ordered by paper share, smallest first (ties by number), and the figures use this order as an axis from web-leaning to academic-leaning.
- Theme names: each cluster was given a readable name and a one-line description. These names are not computed. The writer assigned them by hand after reading each cluster’s most-cited references and the notes that cite them. Names are matched to clusters through a few representative references chosen for each theme. Pairs with more representative references in common are assigned first, and no theme is used for two clusters. Louvain’s cluster numbers change as the wiki grows, so the match goes through references rather than numbers. In this build, all 11 clusters received a theme name.
- Machine names: separately from the theme names, the tags of notes passing through a cluster’s knots were counted, weighted by how many of those knots each note passes, and the top two were joined into a name that is also kept. Tags found on nearly every note (ai, design, generative-ai, research, literature, literature-review, literature-map) and year tags were excluded.
- Betweenness: Freeman’s (1977) betweenness centrality was computed with Brandes’s (2001) algorithm, without weights, and normalized so that the maximum is 1. Co-citation weight expresses closeness, so feeding it into shortest paths as a distance would invert its meaning. That is why weights were not used.
- Reference layout: at build time, ForceAtlas2 (Jacomy et al., 2014) was run for 500 iterations with the graphology implementation. The settings are the values graphology infers from the number of nodes (strong gravity on, gravity 0.05, scalingRatio 10). Initial positions come from a fixed-seed random generator. These coordinates are kept in
network.jsonas a record of the analysis. The live works on the page do not use them; they generate a new arrangement in the browser on every view (see below). - Date written: the first day a note’s slug appears in the target column of
wiki/log.mdis taken as the day the note was written. Rows for English versions (targets beginning withen/) are not counted. All 142 notes have a log record, so no note fell back on the frontmatterupdated. - Periods: the dates written were grouped into the same six periods as Interests over time on the top page. The period boundaries come from a separate analysis that read the shift in interests from first log appearances. A note written on a day between two periods goes into the earlier period (the two watches written on 09-07 fall in period 4).
- Segments by period: each time a note passes through one of a cluster’s knots, one segment is counted for that note’s period. The period with the most segments is the cluster’s thickest period. For each knot, the period of the first note citing it is the period in which the knot first appeared.
This note itself and Drawing Networks as Data Art: Literature on Placement, Bundling, Time, and Flow, which collects the methods behind the artworks, are excluded from the computation. It cites only methodological literature, so counting it as a thread would rewrite its own results. For example, Kosara (2007) is cited only by What Data Visualization and Data Art Share, and Where They Differ; counting this note would turn it into a knot.
The whole in numbers
Of the 142 notes, 137 yielded at least one reference. There are 4,227 distinct references, of which 2,089 (49.4%) have a DOI.
There are 445 knots, 10.5% of all references. The remaining 3,782 (89.5%) appear in only one note. Among the knots, 332 (74.6%) are cited by exactly two notes. 65 are cited by three notes, 26 by four, 10 by five, 6 by six, 3 by seven, 1 by eight, and 2 by nine. 295 of the knots (66.3%) are papers: 247 with a DOI and 48 papers without one, such as arXiv preprints.
The co-citation graph has 5,870 edges, and the Louvain method returned 11 clusters. The modularity is 0.7263. Of the edges, 4,876 lie inside clusters and 994 (16.9%) cross between them, so the cluster boundaries are clear.
What the 11 clusters correspond to in this wiki
The table runs from the cluster with the smallest paper share to the largest. Theme names were assigned by the writer after reading the contents; machine names were computed from tags.
“Watching the industry” is made almost entirely of web pages. Of its 96 knots, 9 are papers (8 with a DOI, 1 on arXiv) and the other 87 are web pages. The web pages come from vendors’ changelogs and announcements, such as Figma (8), Anthropic (5), and Adobe and Vercel (4 each); from pages of public bodies such as the European Commission, EUR-Lex, the U.S. Bureau of Labor Statistics, and Japan’s Agency for Cultural Affairs; from survey reports by McKinsey, Gartner, and the World Economic Forum; and from practitioner writing such as Nielsen Norman Group. The most-cited knot in the cluster is Figma’s Release Notes, cited at the same URL by 9 weekly watches. Of the 274 thread segments passing through this cluster, 139 belong to the 16 public watches (weekly and monthly scholarly). 32 of the 96 knots are cited only by watches.
“Delegating judgment to AI, and evaluation standards” is the cluster whose tag-based name is ai-frontier / jev. It consists mostly of the three notes on TypeSafe AI’s Jev, which account for 84 of the 118 thread segments passing through it. It holds Jev’s official documentation (8 knots) and NIST documents, and it also contains the design-research paper Dorst et al. (2001). Only 13 of its 51 knots are papers (9 with a DOI, 4 on arXiv).
“LLMs as judges” was formed almost single-handedly by the two LLM-as-a-Judge notes. None of its 15 knots has a DOI, but 12 are papers on arXiv (10) and in the ACL Anthology (2), which gives a paper share of 80%. The other 3 are OpenAI’s list of API deprecations, the page of the UK AI Security Institute’s evaluation framework Inspect, and a page in the NeurIPS proceedings. The last is a paper, but because the NeurIPS proceedings are not among the places treated as holding papers, it is counted as a web page.
“Research gaps and reframing problems” is the cluster of the series of notes looking for research gaps and of notes on reframing problems. At the top are Dorst (2011), Rittel & Webber (1973), and Lee et al. (2025), on generative AI and critical thinking. Physics references shared by the gap-finding series (such as Davisson & Germer, 1927) also land here. 12 of its 48 papers are arXiv papers without a DOI.
“AI in design practice and education” is the cluster of CHI-style research on generative AI entering design practice and education. Jansson & Smith (1991) and Wadinambiarachchi et al. (2024), both on design fixation, are near the top. Of the 11 clusters, this one has the most outside connections. Of the 665 edges attached to its knots, 349 (52%) go to other clusters.
“Measuring dispositions and ability”, “Generative art and creativity”, “How to frame research questions”, and “Learning and cognitive load” are academic clusters whose paper share is 95% or more (37 of 39, 42 of 43, 42 of 42, and 40 of 40 papers, respectively). They correspond to construct measurement and attempts to measure the gyaru mind, to generative art and computational creativity, to how research questions are constructed and to Research through Design, and to cognitive load theory and scaffolding. At the top of “Measuring dispositions and ability” are Costanza-Chock (2020), Buchanan (1992), and Lave & Wenger (1991).
“Design systems” is the cluster of the two design-system notes (09-11), and “Public skill standards” is a cluster of a single knot. That knot is IPA’s Digital Skill Standards, cited by Which standard can design and new-business work actually sit on? and How do you measure a business analyst's skills?. Neither of these two notes has any other knot. So in the co-citation graph the knot is an isolated node with no edges, and the Louvain method returned it as a cluster of its own.
Most-cited references, and references that connect clusters
The most-cited references are as follows. The first period is the period of the first note that cited the reference.
| Reference | Notes | Cluster | Betweenness | First period |
|---|---|---|---|---|
| Dorst 2011, The core of “design thinking” and its application | 9 | Research gaps and reframing problems | 0.119 | Period 1 |
| Figma, Release Notes | 9 | Watching the industry | 0.055 | Period 1 |
| Doshi & Hauser 2024, Generative AI enhances individual creativity but reduces the collective diversity of novel content | 8 | Generative art and creativity | 1 | Period 1 |
| McKinsey / QuantumBlack 2025, The State of AI | 7 | Watching the industry | 0.18 | Period 1 |
| Sandberg & Alvesson 2011, Ways of constructing research questions | 7 | How to frame research questions | 0.094 | Period 2 |
| Framer, Updates | 7 | Watching the industry | 0.051 | Period 1 |
The top of the betweenness ranking is a different set. Doshi & Hauser (2024) is at 1 (the maximum), followed by Gaver (2012) at 0.2568, Dorst et al. (2001) at 0.1864, McKinsey’s State of AI at 0.18, Zimmerman et al. (2007) at 0.1631, and Lee et al. (2025) at 0.1549.
Being cited often and connecting clusters are not the same thing. Figma’s Release Notes is cited by 9 notes, but its betweenness is only 0.055. This is probably because all 9 citing notes are watches, and most of its co-citation partners lie inside “Watching the industry”. Rittel & Webber (1973) is also cited by 6 notes, but its betweenness is only 0.019. Three of the 6 citing notes belong to one series on reframing problems. Conversely, Gaver (2012) is cited by only 4 notes, but those include both notes forming “How to frame research questions” and What Was Measured as "Gyaru-Mind": The Provenance of Eight Factors and Its Limits, on measuring the gyaru mind, which makes it the second strongest bridge.
From the side of the notes, the number of clusters a thread passes through (its cluster span) is distributed as follows. 62 notes pass through one cluster, 31 through two, 23 through three, 5 through four, 3 through five, and 1 through seven; 17 notes have no knots. The only note spanning seven clusters is Writing Material for a Review Article: The Assumption Ledger and Nearest-Neighbour Literature Left by 17 Novelty Audits, which gathers nearby literature from several surveys as material for a review paper. The three notes spanning five clusters are AI Slop: Reading It as Outsourced Verification, Not Low Quality, AI Adaptation in Design Education — The Current State and Structural Challenges of Curriculum Reform, and Adversarial Review of Two Generative Art Surveys: Examining the Literature Map and the Citation Strategy Against the Design-Theory Canon.
The 17 notes with no knots
Five of the 17 have a reference section, but it contains no DOI and no URL at all. They are The Role of Designers in the AI Era — Industry x Academia Roundtable (Business-Only Revision), The Democratization-Recommodification Paradox: How AI Turns 'Anyone Can Do It' into 'No One Can Charge for It', AI Commoditization Resilience of Design Billing Models — Output-Based Billing Is Most Vulnerable, and Retainer Stickiness Does Not Mean High Margins, AX and Design: A Cross-Comparison of Academic and Industry Perspectives, and 'Design Is Not Craft' — Industry x Academia Roundtable, all roundtable or synthesis notes written in June, in period 1. The roundtable notes from that period either listed references by bibliographic details alone or left their sources to the parent note or the working ledger. The method here picks up nothing from them.
The remaining 12 do cite references, but no other public note cites any of them. Those citing the most are Slop Seen Through Design History: The Profession Began as a Countermeasure to Shoddy Mass Production (62), Novice Group Work with a Shared AI Agent: A Literature Map of CSCL and AI-Supported Collaborative Learning (2026) (48), design-craft-relationship-industry (42), forward-deployed-designer (32), and What Data Visualization and Data Art Share, and Where They Differ (29), among others. These notes are not isolated within the wiki. They connect to other notes through wikilinks. Having no knot means that no other public note has yet entered the region of literature that the note opened.
Clusters passed through, period by period
The notes were grouped into the six periods by the date they were written, and the knot segments passed by each period’s notes were counted per cluster. Knots first appearing are the knots that a note of that period cited for the first time.
| Period | Dates | Notes (with knots) | Segments | Top three clusters by segments (share) | Knots first appearing (papers) |
|---|---|---|---|---|---|
| 1 | 06-07 to 07-12 | 44 (36) | 272 | Watching the industry (64%), AI in design practice and education (20%), Research gaps and reframing problems (4%) | 149 (73) |
| 2 | 07-15 to 07-29 | 37 (35) | 290 | Research gaps and reframing problems (40%), How to frame research questions (29%), LLMs as judges (10%) | 121 (105) |
| 3 | 08-02 to 08-24 | 34 (30) | 305 | Generative art and creativity (27%), Measuring dispositions and ability (26%), Learning and cognitive load (24%) | 115 (101) |
| 4 | 08-27 to 08-31 | 10 (8) | 77 | Watching the industry (36%), AI in design practice and education (35%), Delegating judgment to AI, and evaluation standards (10%) | 18 (9) |
| 5 | 09-11 to 09-14 | 5 (5) | 28 | Design systems (54%), Watching the industry (39%), Public skill standards (7%) | 11 (5) |
| 6 | 09-18 to 09-22 | 12 (11) | 124 | Delegating judgment to AI, and evaluation standards (68%), Watching the industry (10%), Research gaps and reframing problems (9%) | 31 (2) |
In period 1, “Research gaps and reframing problems” and “Delegating judgment to AI, and evaluation standards” tie at 12 segments (4%). Only three clusters have segments in period 5. Period 4 also includes the two watches written on 09-07, between periods.
Only “Watching the industry” has segments in all six periods. Its segments lean heavily on period 1, with 175, but it shows up in every period after that too, with 15, 32, 28, 11, and 13. 90 of its 99 segments from period 2 onward come from watches; the watches, written in every period, keep this cluster going.
The academic clusters gather in a single period. Period 2 holds 116 of the 152 segments (76%) of “Research gaps and reframing problems”, 83 of the 112 (74%) of “How to frame research questions”, and 28 of the 30 of “LLMs as judges”. Period 3 holds 81 of the 100 segments of “Generative art and creativity”, 79 of the 90 of “Measuring dispositions and ability”, and 74 of the 86 of “Learning and cognitive load”. Period 6 holds 84 of the 118 segments of “Delegating judgment to AI, and evaluation standards”, and period 5 holds 15 of the 16 of “Design systems”.
The exception is “AI in design practice and education”. Of its 116 segments, 54 fall in period 1 and 27 in period 4, giving it two peaks. The 27 segments in period 4 come from notes on slop, such as AI Slop: Reading It as Outsourced Verification, Not Low Quality (11), Does Seeming Common Online Mean It Is Common? (7), and The History of Slop and Countermeasures: Why the Same Wager Keeps Failing (6). 15 of those 27 pass through knots that had already appeared in periods 1 to 3, and 8 of them through knots that first appeared in period 1 (such as Jansson & Smith, 1991, and Wadinambiarachchi et al., 2024). The other 12 pass through knots that first appeared in period 4: literature newly shared among the slop notes. Part of the CHI-style research gathered in period 1 to study changes in work and education is cited again in period 4 as footing for the argument about slop, alongside new literature.
What first appears as a knot also differs by period. Of the knots first appearing in periods 2 and 3, 105 of 121 and 101 of 115 are papers. In period 1 it is 73 of 149, roughly half papers and half web pages. In period 6 only 2 of 31 are papers, and 27 of the 31 belong to “Delegating judgment to AI, and evaluation standards”, such as Jev’s documentation.
A reading from design theory
What follows is interpretation based on the numbers above.
First, the knowledge in this wiki seems to be anchored in literature in two different ways. On the industry side (“Watching the industry”), the knots are URLs of pages that keep being updated. Figma’s Release Notes is cited by 9 weekly watches, but its content differs each time it is cited. Small’s (1973) co-citation presupposes that the cited item is a single fixed document. With a continuously updated page, the same knot need not point to the same content. The knots of “Watching the industry” are therefore closer to observation posts visited repeatedly than to a shared intellectual base. That this cluster alone appears in all six periods also fits the reading of observation posts. On the academic side, the knots are papers and point to fixed documents. Many of those knots, however, are made by pairs of notes written on the same day on neighboring topics. Of the 43 knots in “Generative art and creativity”, 35 are cited by both generative-art notes written on 08-02, and each of the two passes 39. In “How to frame research questions” as well, the two notes written on 07-27 each pass 28 of its 42 knots. Such knots are more naturally read as consecutive surveys building on the same body of literature than as separate questions independently arriving at the same references. That 74.6% of the knots are cited by exactly two notes is consistent with this reading.
Second, industry observation and research on learning and measurement never meet within a single note. There are zero co-citation edges between “Watching the industry” and “Learning and cognitive load” and between “Watching the industry” and “Measuring dispositions and ability”, and only 4 between “Watching the industry” and “How to frame research questions”. The outside connections of “Watching the industry” lean toward “Delegating judgment to AI, and evaluation standards” (73 edges) and “AI in design practice and education” (61 edges). Industry observation reaches the academic clusters through CHI-style research on generative AI in design practice and through the cluster that includes documents such as NIST’s. Notes like AI Adaptation in Design Education — The Current State and Structural Challenges of Curriculum Reform and From Maker to Editor: A Structural Analysis of the Designer Role Transition in the Age of AI, which pass through “Watching the industry” and academic clusters at once, are few, and within this wiki they act as bridges.
Third, the classics of design theory gather not in the cluster that discusses design practice but in the clusters that discuss how to construct research questions. The 9 notes citing Dorst (2011), one of the two most-cited references, are all about reframing, the methodology and epistemology of design research, gap-finding, reframing problems, and new research questions, and they were written between 07-09 and 07-27. Zimmerman et al. (2007), Gaver (2012), and Cross’s Designerly Ways of Knowing (the 1982 article and the 2006 book) are in “How to frame research questions”; Buchanan (1992) and Kimbell (2011) are in “Measuring dispositions and ability”. “Watching the industry” holds only 9 papers out of 96 knots. One reading is that in this wiki, design theory has been used less as a frame for explaining changes in industry than as a tool for thinking about how to pose the writer’s own research questions.
Fourth, some references return across periods. Doshi & Hauser (2024) is cited by 8 notes, from The Economics of AI and Design — Reading the Structural Transformation of Design Labor Through Six Economic Theories, written on 06-28, to What Social Coordination Costs Arise from Collaborating with Others on Creative Work, written on 09-22. The 8 notes span periods 1, 2, 3, 4, and 6; the only period without it is period 5, on design systems. It also has the highest betweenness. As its title states, it deals with the finding that generative AI raises individual creativity while lowering the collective diversity of what is produced. Anderson et al. (2024), on the homogenizing effect of LLMs on human ideation, is also cited by 5 notes in periods 2, 3, 4, and 6, and has a betweenness of 0.1422. Since a finding about homogenization sits at the top of the betweenness ranking, one concern that crosses the period-by-period turnover of academic clusters can be read as homogenization.
Fifth, the thickest clusters of each period broadly match the headings of “Interests over time” on the top page, but in some periods half of the heading does not show up in the citations. In period 2 (Research methods, and how questions are framed), 69% of the segments fall in “Research gaps and reframing problems” and “How to frame research questions”. In period 5 (Design systems, and the standards work sits on) and period 6 (Judgments handed to AI, and thinking by making), too, the thickest cluster matches the first half of the heading. The second half of period 6, however, the 5 notes on data visualization, SF prototyping, and creative collaboration, holds only 16 segments (13%) in all. In period 4 (AI slop, and where design as a field came from), the notes on history, The Genealogy of Design Research in Japan: Three Origins, and the University That Passed the Presidency Around and Was the 'Absence of a Science of Design' Asserted Three Times? Rereading the Observations of 1978, 2008, and 2023 in Their Sources, pass through only 2 knots between them. In period 3 (Learning, and measuring ability), the thickest cluster is “Generative art and creativity”, which is not in the heading, and 78 of its 81 segments come from the pair of generative-art notes.
Two causes overlap in this fifth mismatch. The period headings read topics by the number of notes, while segments are weighted by the number of knots a note cites. A pair of notes passing 39 knots each can, on its own, make the thickest cluster of a period. The other cause is that literature on a new topic needs time to be cited again by another note before it becomes a knot. The notes of the second half of period 6 and the history notes of period 4 opened regions of literature that no later note has entered yet. The gap does not show that the headings are wrong. It shows that interest seen through the number of notes and interest seen through citations are two maps that measure different things.
Drawing it as artworks
The Citation Network page draws this result as seven works. Three of them, the weave, the constellation, and the rings, are live works that generate a new arrangement on every page view. The other four, the bundle, the arcs, the river, and the streamlines, are stills that draw their finished form at once.
The shape and shade of marks follow the same rules in all seven works. A filled mark is a paper, and a ring is a web page. Shade shows the cluster: the smaller a cluster’s paper share, the lighter; the larger, the darker. Theme names, not cluster numbers, are written over the figure.
The forces that arrange the live works
In the weave, the constellation, and the streamlines, the positions of the knots are computed in the viewer’s browser from a balance of forces that push points apart and pull them together. The form of the forces is borrowed from ForceAtlas2 (Jacomy et al., 2014). In ForceAtlas2, repulsion is proportional to the product of the two nodes’ degrees plus one and inversely proportional to distance (F_r = k_r (deg_1 + 1)(deg_2 + 1) / d, eq. 2 of the paper). Gravity is proportional to degree plus one (F_g = k_g (deg + 1), eq. 4), and the attraction along a weighted edge is proportional to the weight and the distance (F_a = w^δ d, eq. 6).
This site takes the number of notes citing a knot as its mass m and the square root of that as its charge q = √m. Repulsion is F_r = k_r q_i q_j / d, the form of eq. 2 with the product of charges in place of the product of (deg + 1). Attraction along co-citation edges is F_a = k_a w d: eq. 6 with δ = 1, multiplied by a coefficient k_a = 0.04. ForceAtlas2’s attraction has no coefficient; k_a keeps each tick’s step small enough for the explicit integration to stay stable. Gravity is F_g = k_g g: the form of eq. 4 without its (deg + 1) factor, so its size is constant. The ForceAtlas2 paper does not use the word “mass”; deg + 1 appears there as a coefficient of repulsion and gravity. Using mass as inertia, so that acceleration is F / m, is this site’s own design.
The charge is kept apart from the mass so that the inertia actually takes effect. If both repulsion and gravity carried the mass, a knot’s own mass would cancel in F / m, and a heavy knot would get the same acceleration as a light one. In the present form, under every force, the same force accelerates a knot less the heavier it is. The measurements, however, showed no tendency for knots cited by more notes to move less per tick. The more notes cite a knot, the larger the total weight of its co-citation springs, roughly in proportion to its mass, so the spring strength per unit of mass does not fall. What the design supports is therefore “the same force accelerates a heavy knot less”, not “heavier sources move less”. The formulas and the measured values are under “The force computation” in “Formulas of the works” below.
The order in time also enters the computation.
Notes arrive one at a time in the order they were written, and each arrival adds the knots that note cites and the springs between them.
The arrangement shifts a little with each arrival and settles after the last note has arrived.
The random seed changes on every page view and is written to the URL hash (#<work>/<seed>).
Opening the same hash reproduces the same arrangement.
Drawing a graph by letting points push apart while springs pull edges together goes back to Eades’s (1984) spring embedder. Eades treated vertices as rings and edges as springs of logarithmic strength (C_1 log(d / c_2)). Fruchterman & Reingold (1991) also belong to this line of force-directed methods.
Why no single arrangement is shown as the answer
The earlier page showed every viewer the same arrangement, computed once at build time with a fixed seed. When the same picture appears every time, viewers tend to take the positions themselves as meaningful. Positions found by forces, however, depend on the starting positions. Gansner et al. (2005) used 25 random initial layouts when comparing their method, which presupposes that layouts vary with the starting positions. Venturini et al. (2021) argue that when viewing a network laid out by a force-directed model, the closeness a viewer reads retains relational ambiguity.
The live works therefore generate a different arrangement on every view. What survives from one arrangement to the next is only relative closeness: which knots sit near which. The overall shape and orientation change every time and carry no meaning. For example, in the build-time reference layout, “Public skill standards” sat at the right edge (x = 0.95). Since this cluster has no edges, that position says nothing about its relation to other clusters. Relations between clusters are more reliably read from the edge counts given above than from positions in any arrangement.
Why the rings are not left to the forces
In the rings, the six rings from the center outward are the six periods, with period 1 at the center. Each knot sits on the ring of the period in which it was first cited. Angle shows the cluster: going clockwise from the top, the slices run from the smallest paper share to the largest. Forces run in the rings too, but they are applied differently from the weave and the constellation. A knot cannot leave the cell where the band of its period meets the slice of its cluster, and after each tick it is put back inside the cell. It is pulled to the cell’s center by a strong gravity proportional to distance (the form of ForceAtlas2’s eq. 5 without the mass), and repulsion works only between knots of the same cell. Co-citation attraction still works weakly across cells, so a knot leans a little toward the side where its partners are. That is about all a position inside a cell shows; small shifts mean nothing.
The rings and slices were kept out of the forces’ hands so that the data values, period and cluster, map straight onto position. The hive plots of Krzywinski et al. (2012) set the axes and the coordinates along them from node attributes. According to the publisher’s abstract, unlike force-directed layouts, this makes the plots reproducible and comparable. The bands and slices of the rings borrow this idea and confine the part decided by forces to the inside of each band and slice.
The weave and the constellation
In the weave, each note becomes one thread that passes through the knots it cites in order. The order starts from the knot farthest from the knots’ centroid and then connects to the nearest remaining one. References cited only by that note are scattered around the thread as fine grains. Threads with no knots join the simulation as mass-1 particles with no springs and three times the pull toward the center, so they settle in the gaps or at the edge of the network, and each such thread is drawn as a small loop around its particle.
In the constellation, knots become stars and co-citation edges become straight lines between stars. The size of a star is the number of notes citing that reference.
The four stills
The bundle draws the co-citation edges with Holten’s (2006) hierarchical edge bundling. Knots are placed on a circle, and a four-level hierarchy is built: root, cluster, period, knot. The curve joining two knots is a B-spline whose control points are the path between them in the hierarchy tree. Holten showed that a bundling strength β varies the drawing continuously from straight lines, the raw connections, to bundles, the implicit adjacency between parents. This work sets β to 0.85. Inserting the period level inside each cluster is this work’s choice, and it makes the bundles branch once more within a cluster. Edges can also be bundled by treating the edges themselves as attracting springs (Holten & van Wijk, 2009).
The arcs borrow the form of Wattenberg’s (2002) arc diagram. According to the abstract, an arc diagram joins pairs of identical substrings that repeat within a string, showing its structure of repetition. Here notes are placed at equal intervals on a single baseline in the order they were written, and a semicircular arc joins two notes that cite at least one reference in common. What repeats is not a string but the references cited. The relation an arc shows is Kessler’s (1963) bibliographic coupling. Making each arc a true semicircle is this work’s choice: the height of an arc reads directly as how many notes were written between the two.
The river is a streamgraph that stacks the amount of each cluster’s segments along the dates notes were written. According to its abstract, the ThemeRiver of Havre et al. (2002) shows the strength of themes as the width of bands in a river flowing through time. Byron & Wattenberg (2008) showed that stacked graphs, ThemeRiver, and Streamgraph each minimize a different energy function, and they also proposed ways to color and order the layers. This work uses their weighted wiggle as the baseline and adopts the inside-out ordering, placing layers that appear early in the middle and adding later ones alternately to the outside. The horizontal axis is taken by day rather than rounded to the six periods, and each note’s segments are spread with a Gaussian kernel and summed.
The streamlines build a smooth vector field from the arrangement of the knots and place its streamlines at even spacing. The field is this work’s own design, derived from a stream function that combines a vortex for each knot with a gentle flow from left to right. A field built as a curl has no sources or sinks, so streamlines do not jam into a single point. The placement of streamlines follows Jobard & Lefer (1997). They control line density with two distances: the separation between streamlines d_sep, and the distance d_test at which integration stops (0 < d_test < d_sep). This work sets d_test = 0.5 d_sep. According to its abstract, Turk & Banks (1996) treated streamline placement as energy optimization and obtained drawings that look hand-drawn. Following them, this work makes the ends of each line thinner and lighter. The field is built from knot positions computed by the forces.
Precedents the works drew on
In deciding how the works look, precedents that turned data into artworks were consulted. Lima (2011) gives the spread of network drawings the name Networkism. Others consulted were Lupi & Posavec’s (2016) Dear Data, Posavec’s Writing Without Words, Lombardi’s Narrative Structures, and Viégas & Wattenberg’s (2012) Wind Map. According to its official page, Wind Map is a personal art project, launched in 2012, that draws near-term surface wind forecasts over the US as flowing lines. Viégas & Wattenberg (2007), as the title says, deal with artistic data visualization beyond visual analytics.
The figure can be seen both as an analytical chart and as a woven picture. Kosara (2007), as the title says, positions visualization criticism as the link connecting information visualization and art. How the language of evaluation changes depending on which one a figure is treated as was examined in What Data Visualization and Data Art Share, and Where They Differ. So that the analysis holds even if the woven picture invites misreading, the page sets out the numerical analysis in text below the figure.
Formulas of the works
The formulas below are transcribed from the implementation as of 2026-09-23, and match those under “Method” on the Citation Network page.
They are written in ASCII (* multiplies, ^ is a power, sqrt a square root, sum a sum, U(a, b) a uniform random number between a and b).
Lengths are in simulation units in the force computation and in screen pixels elsewhere.
To match the page, this section says “group” and “source” where the rest of this note says “cluster” and “reference”.
From notes to numbers
Three things are counted from the notes: how many notes cite each source, how many notes cite two sources together, and the day each note was written. The groups, the paper share, and the periods are computed from these three.
Counting
T = the set of published notes (drafts and the 2 notes on this analysis excluded)
refs(n) = source keys read from the reference section of note n
(DOIs lower-cased; URLs without www., trailing / and utm_)
count(r) = |{ n in T : r in refs(n) }| # notes citing source r
K = { r : count(r) >= 2 } # knots (sources cited by 2+ notes)
w(a, b) = |{ n in T : a in refs(n), b in refs(n) }| # co-citation weight (a, b in K)
paper(r) = 1 if r is a DOI, arXiv, ACL Anthology or OpenReview (a paper)
0 otherwise (a web page)
C = Louvain(K, w) # groups (weighted, fixed random seed)
share(c) = sum_{k in c} paper(k) / |c| # paper share
order(c) = rank of c by share(c), ascending # 0 = most web-leaning
bc(k) = C_B(k) / max_j C_B(j) # betweenness (unweighted, Brandes)
born(n) = the first day note n appears in wiki/log.md
period(n) = max{ p : start_p <= born(n) } # the six periods
first(k) = period(the first note citing k)
pass(c, p) = sum_{n : period(n) = p} |refs(n) intersect c| # segments per period
Implementation: src/lib/citation-weave.ts, src/data/interest-periods.ts
From numbers to marks
A knot’s radius grows with the square root of the number of citing notes, so its area is roughly proportional to that number.
r(c) = r_min + 1.35 * u * sqrt(max(0, c - 2)) # knot radius (c = notes citing it)
u = clamp(W / 960, 0.5, 1.3) # scale from the drawing width W
r_min = clamp(3.5 * W / 1000, 2.6, 4)
factor per work: bundle 0.5, streamlines 0.48 (at least 0.55 * r_min), others 1
tone(c) = 0.46 + 0.44 * order(c) / (G - 1) # ink opacity (G = number of groups)
shape = paper: filled disc; web page: ring
red = the selected element and its own marks, and always the most cited knot
Implementation: src/lib/weave-works/common.ts
The force computation
Sources push each other apart, sources cited together pull on each other through springs, and everything is pulled toward the center. A source cited by more notes is heavier, so the same force changes its velocity less.
Placement for the weave, constellation and streamlines
m_i = count_i # mass: notes citing the source (1 for a particle of a note without knots)
q_i = sqrt(m_i) # charge: how hard it pushes
F_r = k_r * q_i * q_j / d # push (every pair, d >= 0.5) k_r = 2.25
F_a = k_a * w_ij * d # spring (co-cited pairs) k_a = 0.04
F_g = k_g * g_i # pull to the center (constant size) k_g = 4
# g_i = 1 (knot), 3 (particle of a note without knots)
if d < R_i + R_j # push overlapping marks apart (added to the velocity)
v_i += (x_i - x_j) * (R_i + R_j - d) / d * 0.5 * R_j^2 / (R_i^2 + R_j^2)
R_i = 0.0055 * S * (1 + 0.39 * sqrt(max(0, m_i - 2))) # S = current width of the web
v_i <- (v_i + alpha * F_i / m_i) * 0.6, |v_i| <= 12 # one tick with inertia
x_i <- x_i + v_i
alpha <- alpha * 0.001^(1/300) # cooling (1 to 0.001 in 300 ticks)
note t arrives at tick 3 * t: a new knot starts near the centroid of its partners already present,
w_ij += 1 for each of its pairs, and alpha <- max(alpha, 0.3)
stop when every note has arrived and alpha < 0.001
Implementation: src/lib/weave-works/physics.ts
Fitting to the frame
Rotation and scaling keep the ratios of distances, so the relations of closeness stay as they are.
theta = 0.5 * atan2(2 * S_xy, S_xx - S_yy) # principal axis of the second moments about the centroid
rotate the axis onto the long side of the frame; fit the extent without the outer 1% at each end
outliers: x' = hi + m * tanh((x - hi) / m) # eased into the margin m
Implementation: src/lib/weave-works/physics.ts (Fitter)
What follows the literature: the push has the form of equation 2 of ForceAtlas2 (Jacomy et al., 2014), with the product of charges q_i q_j in place of the product of degrees plus one, (deg_i + 1)(deg_j + 1). The spring is equation 6 with δ = 1, times a coefficient k_a. ForceAtlas2’s attraction has no coefficient; multiplying by k_a is the same as changing the unit of the coordinates, and it keeps each tick’s step small enough for the explicit integration to stay stable. The pull to the center is the form of equation 4 without its (deg + 1) factor. The velocity update and the cooling (velocityDecay 0.4, alphaDecay, alphaMin) follow the defaults of d3-force (D3, n.d.), and pushing overlapping marks apart follows the same idea as its forceCollide.
This site’s own design: using mass as inertia (ForceAtlas2 has no inertia, and d3-force fixes every point’s mass at 1), making the charge the square root of the mass, the shape of the overlap radius, growing the web in the order the notes were written and reheating at each arrival, and the fitting to the frame are taken from no source. The charge is √m and the pull to the center carries no mass so that the acceleration F/m shrinks with a source’s own mass. If both the push and the pull carried the mass, the mass would cancel in F/m and a heavy source would get the same acceleration as a light one. In the present form the acceleration is k_r q_j / (d √m_i) from the push, k_g g_i / m_i from the pull to the center, and k_a w_ij d / m_i from a spring.
Measured with seed 48213, the mean acceleration α|F|/m that each force gives per tick falls from knots cited by 2 notes to knots cited by 6 or more: from 0.84 to 0.49 for the push, 0.67 to 0.41 for the springs, and 0.31 to 0.11 for the pull to the center. Yet the mean distance moved per tick is not smaller for heavy sources. The rank correlation (Spearman) between mass and distance moved is +0.068 (seed 48213), +0.107 (seed 7), and +0.049, +0.073, +0.130 (seeds 1, 2, 3): close to zero or slightly positive (the earlier implementation, which put the mass on both the push and the pull, gave +0.10 to +0.16). The more notes cite a source, the larger the total weight Σw of its co-citation springs, roughly in proportion to its mass, so the spring strength per unit of mass does not fall. The velocity loses 40% every tick, so a knot follows its moving point of balance. The measurement therefore does not support “heavier sources move less”; it supports only that the same force accelerates them less.
At build time, positions are also computed once with ForceAtlas2 (the graphology implementation) and kept in the raw data as a record of the analysis. The settings are those returned by inferSettings (strong gravity on, gravity 0.05, scalingRatio 10, slowDown 1 + ln N, no Barnes–Hut), with 500 iterations and initial positions from a fixed-seed generator (mulberry32, 0x5eed). The works do not use these positions.
The weave
One thread runs through the knots placed by the forces, nearest first. Between knots the thread sags a little, and its two ends fray out briefly.
order: start at the knot farthest from the knots' centroid, then go to the nearest unvisited knot
(while moving, re-order only if the path gets at least 1% shorter)
control points P = [ T_s, A_1, M_12, A_2, M_23, ..., A_k, T_e ] # A_j = knot positions
sag M_j = (A_{j-1} + A_j) / 2 + s_j * n_j
n_j = (-(y_j - y_{j-1}), x_j - x_{j-1}) / |A_j - A_{j-1}| # unit normal of the span
s_j = min(40 * u, 0.18 * |A_j - A_{j-1}|) * sigma_j, sigma_j ~ U(-1, 1)
fray T_s = A_1 + L * (cos(phi + delta), sin(phi + delta)), phi = direction from A_2 to A_1
delta ~ U(-0.6, 0.6), L ~ U(10 * u, 32 * u) # T_e likewise
thread with 0 or 1 knot: closed loop of 5 points c + rho * r_j * (cos theta_j, sin theta_j)
theta_j = start + pi + 2 * pi * j / 5, r_0 = 1, r_j ~ U(0.75, 1.25), rho ~ U(6 * u, 13 * u)
one knot: c = A_1 + rho * (cos start, sin start) # point 0 lies on the knot
no knot: c = the position of the note's particle
dust (sources only this note cites) = point at fraction f of the curve + normal offset (U + U + U - 1.5) * 7 * u
thread opacity = clamp(18 / T, 0.1, 0.2), width = max(0.7, 0.9 * u)
knot radius = r(threads that have passed through it so far)
jitter random numbers = prng(hash(slug) xor seed * 0x9e3779b1)
Implementation: src/lib/weave-works/weave.ts
How the line is built
A thread is a centripetal Catmull–Rom curve through all control points, converted to one cubic Bézier per span for drawing.
t_0 = 0
t_{i+1} = t_i + |P_{i+1} - P_i|^(1/2) # knot spacing = square root of point distance (alpha = 1/2)
the span from P_1 to P_2 as a cubic Bezier (B_0, B_1, B_2, B_3):
l_ab = |P_b - P_a|, a_ab = sqrt(l_ab)
B_0 = P_1, B_3 = P_2
B_1 = (P_1 * (2 * l_01 + 3 * a_01 * a_12 + l_12) - P_0 * l_12 + P_2 * l_01) / (3 * a_01 * (a_01 + a_12))
B_2 = (P_2 * (2 * l_23 + 3 * a_23 * a_12 + l_12) + P_1 * l_23 - P_3 * l_12) / (3 * a_23 * (a_23 + a_12))
C(s) = (1-s)^3 * B_0 + 3 * (1-s)^2 * s * B_1 + 3 * (1-s) * s^2 * B_2 + s^3 * B_3, s in [0, 1]
ends: an open curve adds P_-1 = 2 * P_0 - P_1 and P_n = 2 * P_{n-1} - P_{n-2}; a closed curve wraps around
Implementation: src/lib/weave-works/common.ts (catmullRomBeziers)
Among the family of Catmull–Rom curves whose knot spacing is |P_{i+1} − P_i|^α, the centripetal one with α = 1/2 is used. Yuksel et al. (2009) proved that for cubic Catmull–Rom curves only α = 1/2 guarantees no cusps and no self-intersections within a span. Yuksel et al. (2011) is the journal version by the same authors. The conversion to Bézier uses the same formula as curveCatmullRom in d3-shape and draws the same curve. For Catmull–Rom curves themselves, Catmull & Rom (1974) is given as the standard source.
The constellation
Stars are knots, and a line joins two sources cited together. The more notes cite them together, the thicker and darker the line.
star i at the force position x_i, radius = r(count_i)
line (i, j) is drawn when w_ij >= 1
opacity(w) = [0.05, 0.10, 0.20, 0.30, 0.40][min(w, 5) - 1]
width(w) = max(0.6, u * (0.5 + 0.35 * (w - 1)))
timing: a star lights up when the first note citing it arrives
a line starts 220 ms after the first note citing both sources arrives
Implementation: src/lib/weave-works/constellation.ts
How the line is built
A line is a straight segment between two stars, grown from one end.
x(s) = (1 - s) * x_i + s * x_j, s in [0, pr] # pr grows from 0 to 1 as the line is drawn
Implementation: src/lib/weave-works/common.ts (segment)
The rings
Each source can sit only in the cell where the band of the period it was first cited meets the slice of its group. Its place inside the cell comes from a strong pull to the cell’s center, pushing among sources of the same cell, and weak springs that reach across cells.
R_p = R_max * (0.5 * (p + 1) / P + 0.5 * sqrt(N_p / N)) # outer radius of period p's band (P periods)
N_p = knots first cited in periods 0..p, inner radius of the first band = 0.22 * R_0
theta_c = (2 * pi - 0.2) * max(4, size_c) / S # width of group c's slice
clockwise from the top in order(c), gaps of 0.03, then a slice for notes without knots
cell(i) = (the slice of its group) meets (the band of first(i))
coordinates below: R_max = 1
F_g = k_g * d # strong pull to the cell center k_g = 0.4
center = middle angle of the slice, radius sqrt((r_0^2 + r_1^2) / 2)
F_r = s_c * k_r * q_i * q_j / d # push (pairs in the same cell only) k_r = 1
s_c = k_g * rho_c^2 * n_c / (k_r * Q_c^2)
Q_c = sum_{i in c} q_i, n_c = knots in the cell, rho_c = sqrt(cell area / pi)
F_a = k_a * w_ij * d # spring (works across cells) k_a = 0.002
v_i <- (v_i + alpha * F_i / m_i) * 0.6, |v_i| <= 0.02, d >= 0.002
after each tick: angle back into the slice without 8% at each side; radius into the band without 10% inside and 12% outside (by area)
no pushing apart of overlaps
note tick: on the outer circle of its period; angle = mean angle of its knots in the slice of its main group
Implementation: src/lib/weave-works/rings.ts, src/lib/weave-works/physics.ts
How the line is built
A straight segment runs from a note’s tick to each knot the note cites.
x(s) = (1 - s) * x_note + s * x_knot, s in [0, 1]
Implementation: src/lib/weave-works/rings.ts
The pull to the center grows with distance (the form of ForceAtlas2’s equation 5 without the mass) so that each cell fills evenly. With a pull of constant size balanced against a 1/d push, the charge inside radius r grows like r and the density peaks at the center; with a pull proportional to distance it grows like r², and the cell fills evenly. The factor s_c comes from the balance condition Σ_i x_i·F_i = 0 (the virial): k_g Σ r_i² = s_c k_r Σ_{i<j} q_i q_j, and treating the cell as a uniform disc of radius ρ_c gives Σ r_i² = n_c ρ_c² / 2 and Σ_{i<j} q_i q_j ≈ Q_c² / 2. Fixing the bands and slices by values in the data follows the idea of hive plots (Krzywinski et al., 2012).
The bundle
Sources sit around a circle, and each line between two sources bends along the route of its groups and periods, so lines bundle.
angle: slot = (2 * pi - 0.05 * (G + 1)) / N; knot j of a group: theta = start_g + slot * (j + 0.5)
groups clockwise from the top in order(c); inside a group by first-cited day (same day: more notes first)
tree: root (center O) -> group (radius 0.36R, middle of its arc) -> period (0.66R, mean angle of its knots) -> knot (R)
control polygon for knots a, b = path in the tree (through their lowest common ancestor)
same group and period: [P_a, S_a, P_b]
same group: [P_a, S_a, G_a, S_b, P_b]
different groups: [P_a, S_a, G_a, O, G_b, S_b, P_b]
straightening (beta = 0.85):
P'_i = beta * P_i + (1 - beta) * (P_0 + i / (N - 1) * (P_{N-1} - P_0))
line opacity(w) = dens * min(0.32, 0.045 + 0.04 * (w - 1)) * (tone_a + tone_b) / 2
x 0.5 for pairs in the same group and period, dens = clamp(R / 320, 0.55, 1.15)
line width(w) = min(1.3, 0.55 + 0.12 * (w - 1)) * max(0.9, 0.9 * u)
mark radius = 0.5 * r(count)
Implementation: src/lib/weave-works/bundle.ts
How the line is built
The straightened control polygon is smoothed by a uniform cubic B-spline. The end points are tripled, so each line starts and ends on a knot.
Q = [P'_0, P'_0, P'_0, P'_1, ..., P'_{N-1}, P'_{N-1}, P'_{N-1}]
segment s (s = 0 .. |Q| - 4), t in [0, 1):
C_s(t) = (1/6) * [t^3 t^2 t 1] * | -1 3 -3 1 | * [ Q_s ]
| 3 -6 3 0 | [ Q_s+1 ]
| -3 0 3 0 | [ Q_s+2 ]
| 1 4 1 0 | [ Q_s+3 ]
k = max(4, round(R / 60)) samples per segment, drawn as a polyline
Implementation: src/lib/weave-works/bundle.ts (bspline, straighten)
The straightening formula and β = 0.85 follow equation (1) in Section 3.2 of Holten (2006): with β = 1 the line follows the tree path, and with β = 0 it becomes straight. For the basis of the uniform cubic B-spline, de Boor (1978) and Bartels et al. (1987) are given as the standard sources. Inserting the period level inside each group is this site’s choice.
The arcs
Notes are spaced evenly in the order they were written, and a half circle joins two notes that cite the same source. The further apart in that order, the bigger the arc.
position of note i (in order written): u_i = u_0 + i * (u_1 - u_0) / (n - 1)
arc (a, b) is drawn when S_ab = refs_K(a) intersect refs_K(b) is not empty # bibliographic coupling
w = |S_ab|, tone = shade of the group holding most of S_ab
opacity = min(0.6, 0.09 + 0.11 * (sqrt(w) - 1)) * (0.55 + 0.5 * tone)
width = max(0.5, u * (0.5 + 0.5 * (sqrt(w) - 1)))
note tick: length max(5, 6 * u) outward from the baseline; 0.55 x and lighter for notes sharing nothing
Implementation: src/lib/weave-works/arcs.ts
How the line is built
An arc is a half circle centerd between the two notes; only when it does not fit is its height scaled down, the same factor for every arc.
c = (u_a + u_b) / 2, r = (u_b - u_a) / 2
x(theta) = c - r * cos(theta)
y(theta) = y_0 - s * r * sin(theta), theta in [0, pi] # y_0 = baseline
s = min(1, available height / max r) # s = 1: a true half circle
portrait (4:5): x and y swap; the baseline stands on the left and arcs open to the right
Implementation: src/lib/weave-works/arcs.ts
Joining with arcs is borrowed from the arc diagram (Wattenberg, 2002), and the relation joined is bibliographic coupling (Kessler, 1963). Making each arc a true half circle, so that its height reads as the distance in writing order, is this site’s choice.
The river
Each time a note passes through a group’s sources, a gentle hill centerd on the day it was written is added, and the hills of all groups are stacked.
p_{n,c} = knots of group c that note n cites
f_c(t) = sum_n p_{n,c} * K(t - t_n) # thickness of group c's layer (t_n = born(n))
K(x) = exp(-x^2 / (2 * h^2)) / (h * sqrt(2 * pi)), h = 6 days # Gaussian kernel of area 1
t on a daily grid from the first born - 15 days to the last born + 15 days; kernel cut at 4h
layer order (inside-out): from the earliest onset, add each layer to the lighter side, top or bottom
baseline (weighted wiggle):
g_0(t_j) = g_0(t_{j-1}) - sum_i (df_i / 2 + sum_{k<i} df_k) * f_i(t_j) / sum_i f_i(t_j)
df_i = f_i(t_j) - f_i(t_{j-1})
boundaries y_i(t) = g_0(t) + sum_{k<i} f_k(t), i = 0 .. L
fill opacity = 0.12 + 0.43 * (tone - 0.46) / (0.90 - 0.46)
selected note's band: half height p_{n,c} * K(t - t_n) * scale / 2 around the layer's midline
Implementation: src/lib/weave-works/river.ts
How the line is built
Each layer boundary (one point per day) is smoothed with a centripetal Catmull–Rom curve. A span is evaluated by three levels of linear interpolation.
t_0 = 0
t_{i+1} = t_i + |P_{i+1} - P_i|^(1/2) # knot spacing = square root of point distance (alpha = 1/2)
span from P_1 to P_2, t in [t_1, t_2]:
A_1 = ((t_1 - t) * P_0 + (t - t_0) * P_1) / (t_1 - t_0) # A_2, A_3 likewise
B_1 = ((t_2 - t) * A_1 + (t - t_0) * A_2) / (t_2 - t_0)
B_2 = ((t_3 - t) * A_2 + (t - t_1) * A_3) / (t_3 - t_1)
C(t) = ((t_2 - t) * B_1 + (t - t_1) * B_2) / (t_2 - t_1)
points are taken every max(2, 3 * u) px along the curve
ends: an open curve adds P_-1 = 2 * P_0 - P_1 and P_n = 2 * P_{n-1} - P_{n-2}; a closed curve wraps around
currents inside a layer: k = min(7, floor(max thickness / (9 * u)) - 1) lines at fractions q / (k + 1) between its boundaries
Implementation: src/lib/weave-works/common.ts (spline), src/lib/weave-works/river.ts
The baseline formula and the inside-out order follow Byron & Wattenberg (2008). The baseline comes from minimizing the squared slopes of the layers weighted by their thickness, and its differencing is the same as d3’s stackOffsetWiggle. Showing an amount along time by the width of a band belongs to the line of ThemeRiver (Havre et al., 2002). For density estimation with a Gaussian kernel, Silverman (1986) is given as the standard source. Evaluating a span by three levels of linear interpolation is what Yuksel et al. (2009) illustrate in their Figure 3 as the algorithm of Barry and Goldman; the original, Barry & Goldman (1988), is given as the standard source.
The streamlines
A small vortex is placed at each source, a gentle left-to-right flow is added, and lines are drawn along that flow at an even spacing.
stream function (px coordinates, grid g = max(3, round(min(W, H) / 220))):
psi(p) = sum_k s_k * w_k * exp(-|p - p_k|^2 / (2 * sigma^2)) + U * (y + A * sin(2 * pi * x / lambda))
p_k = force positions, w_k = count_k^0.8
s_k = +1 (group order odd), -1 (even) # neighboring groups turn opposite ways
sigma = max(14, 0.042 * min(W, H))
U = 0.16 * (90th percentile of speed from the vortices alone), A = 0.05 * H, lambda = 0.9 * W
velocity v = (dpsi/dy, -dpsi/dx) # central differences on the grid, bilinear in between
div v = 0 # no sources, no sinks
line width = max(0.55, u * (0.4 + 1.5 * rho^0.8)) * taper
rho = min(1, knot density / 97th percentile of density)
taper = 0.2 + 0.8 * smoothstep(length from the line end / (2.5 * d_sep))
knot marks = max(0.55 * r_min, 0.48 * r(count))
Implementation: src/lib/weave-works/streamlines.ts
How the line is built
From a seed point, a line steps along the direction of the velocity both ways, and stops when it comes close to another line.
direction e(x) = v(x) / |v(x)| # stop if |v| < 0.08 * U
midpoint method (2nd-order Runge-Kutta), step h = max(1, 0.22 * d_sep), both ways sigma = +1 and -1:
x_mid = x_k + sigma * (h / 2) * e(x_k)
x_{k+1} = x_k + sigma * h * e(x_mid)
stop when e(x_k) . e(x_mid) < 0.5, the turn from the previous step has dot < 0.6, outside the margin,
or within d_test of another line (of its own line, of parts more than 2.2 * d_sep away along it)
placement after Jobard and Lefer:
d_sep = clamp(min(W, H) / 80, 6, 12), d_test = 0.5 * d_sep
seeds = points at +-d_sep along the normal from each point of placed lines; taken if no point lies within 0.98 * d_sep
first seed = just upstream of the most cited knot (x_0 - 2 * d_sep, y_0 + d_sep)
when seeds run out, a jittered grid with spacing 1.4 * d_sep fills the gaps
lines shorter than 4 * d_sep are dropped
Implementation: src/lib/weave-works/streamlines.ts
A velocity field made from a stream function ψ as v = (∂ψ/∂y, −∂ψ/∂x) has zero divergence, because ∂²ψ/∂x∂y − ∂²ψ/∂y∂x = 0. Streamlines are then contours of ψ, and closed vortices wind around dense knots. For the stream function Batchelor (1967/2000), and for the midpoint method Press et al. (1992), are given as the standard sources. The placement of streamlines with d_sep and d_test follows Jobard & Lefer (1997), and thinning and fading line ends follows the drawings of Turk & Banks (1996). The shape of the field (vortices plus a gentle flow) and stepping along the unit direction of the velocity are this site’s design.
Limitations
- References with neither DOI nor URL are not counted: 5 of the 142 notes yielded no references at all (137 yielded some). References listed only by bibliographic details never become knots, however often they are cited.
- URL normalization has errors: a continuously updated page merges content from different times under one key. Conversely, the arXiv and published versions of the same paper are counted as separate references.
- Whether something is a paper depends on where it is hosted: only arXiv, the ACL Anthology, and OpenReview are treated as places that hold papers. A paper without a DOI hosted elsewhere, like the page in the NeurIPS proceedings, is counted as a web page and lowers its cluster’s paper share.
- Theme names are the writer’s reading: the partition is computed, but the theme names and descriptions were written by the writer after reading the contents. Matching through representative references keeps the same name on the same contents when clusters are reshuffled; it does not guarantee that the name is apt. The tag-based machine names can also drift from a cluster’s contents (“AI in design practice and education” has the machine name design-education / chi, but notes on slop also pass through it).
- The date written is the first log appearance: the log can record a note later than it was actually written. Four notes have a frontmatter
updatedearlier than their first log appearance (such as AI Adaptation in Design Education — The Current State and Structural Challenges of Curriculum Reform, withupdatedon 07-09 or 07-10 and a first log appearance on 07-12), so for at least these four the record lags the writing. - The period boundaries are borrowed from another analysis: the six periods come from the analysis that read the shift in interests from first log appearances, not from the citation data. Moving the boundaries would change the segments per period and the number of knots first appearing.
- Recent periods form knots less easily: a reference becomes a knot only when a second note cites it, so references from periods that have had less time since writing are less likely to count as knots. The small number of knots first appearing in periods 4 to 6 includes this truncation effect.
- Paired notes inflate the knots: two notes written consecutively on the same body of literature produce many knots by themselves. The number of knots does not equal the number of times notes independently arrived at the same reference.
- This is a network of the public part only: because the 33 drafts are excluded, references shared only through draft notes are invisible. “Interests over time” on the top page counts notes including drafts and excludes the watches, so its note counts per period do not match the ones here.
- An isolated knot is counted as a cluster: “Public skill standards” contains a single knot, and the count of 11 clusters includes it.
- The partition and centralities come from a single setting: no comparison across different random seeds for the Louvain method was made. Betweenness was computed without weights and normalized by the maximum.
- The live arrangement changes with every view: the arrangements of the weave, the constellation, and the rings on the page are regenerated with a new random seed on every view. Statements in this note about coordinates (such as x = 0.95 for “Public skill standards”) record the build-time reference layout. Using mass as inertia, with acceleration F / m, is this site’s own choice. The measurements showed no tendency for heavier knots to move less (rank correlations of +0.05 to +0.13 across five seeds). How much the design changes the readability of the arrangement has not been tested, either in the literature or in this note.
References
- 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
- 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. https://doi.org/10.1017/CBO9780511800955 (Original work published 1967)
- Battiston, F., Cencetti, G., Iacopini, I., Latora, V., Lucas, M., Patania, A., Young, J.-G., & Petri, G. (2020). Networks beyond pairwise interactions: Structure and dynamics. Physics Reports, 874, 1–92. https://doi.org/10.1016/j.physrep.2020.05.004
- Blondel, V. D., Guillaume, J.-L., Lambiotte, R., & Lefebvre, E. (2008). Fast unfolding of communities in large networks. Journal of Statistical Mechanics: Theory and Experiment, 2008(10), P10008. https://doi.org/10.1088/1742-5468/2008/10/P10008
- Börner, K., Chen, C., & Boyack, K. W. (2003). Visualizing knowledge domains. Annual Review of Information Science and Technology, 37(1), 179–255. https://doi.org/10.1002/aris.1440370106
- Brandes, U. (2001). A faster algorithm for betweenness centrality. Journal of Mathematical Sociology, 25(2), 163–177. https://doi.org/10.1080/0022250X.2001.9990249
- 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
- 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
- Chen, C. (2006). CiteSpace II: Detecting and visualizing emerging trends and transient patterns in scientific literature. Journal of the American Society for Information Science and Technology, 57(3), 359–377. https://doi.org/10.1002/asi.20317
- D3. (n.d.). d3-force [Software documentation]. https://d3js.org/d3-force
- 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
- Freeman, L. C. (1977). A set of measures of centrality based on betweenness. Sociometry, 40(1), 35–41. https://doi.org/10.2307/3033543
- 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 (Lecture Notes in Computer Science, Vol. 3383, pp. 239–250). Springer. https://doi.org/10.1007/978-3-540-31843-9_25
- 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
- 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
- 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
- Kessler, M. M. (1963). Bibliographic coupling between scientific papers. American Documentation, 14(1), 10–25. https://doi.org/10.1002/asi.5090140103
- 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
- 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
- Lima, M. (2011). Visual complexity: Mapping patterns of information. Princeton Architectural Press. ISBN 978-1-56898-936-5
- Lombardi, M. (n.d.). Narrative structures [Drawings]. Whitney Museum of American Art. https://whitney.org/artists/7340
- Lupi, G., & Posavec, S. (2016). Dear Data. Princeton Architectural Press. ISBN 978-1-61689-532-7
- Newman, M. E. J., & Girvan, M. (2004). Finding and evaluating community structure in networks. Physical Review E, 69(2), 026113. https://doi.org/10.1103/PhysRevE.69.026113
- 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
- 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
- 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
- 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) (Lecture Notes in Computer Science, pp. 182–191). Springer. https://doi.org/10.1007/978-3-540-73257-0_21
- Viégas, F., & Wattenberg, M. (2012). Wind map [Interactive artwork]. http://hint.fm/wind/
- 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
- 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
Related notes
- What Data Visualization and Data Art Share, and Where They Differ: on the distinction between a chart for analysis and a figure as a work. The woven figure of this note is open to both readings.
- Writing Material for a Review Article: the only note spanning seven clusters. Gathering nearby literature from several surveys in one place has made it a bridge between clusters.
- AI Slop: Reading It as Outsourced Verification, Not Low Quality: spans five clusters and is one of the notes citing the homogenization literature. It is also one of the notes that cite again, in period 4, CHI-style research that first appeared in period 1.
- Literature on Drawing Networks as Data Art: the methods and precedents behind the artworks (placement, bundling, time, flow), each with how far it was verified.
Author: Shuichiro Ogawa (Design Researcher / Consultant) About me →