Overview – #equilibria

Filter all tutorials by topic, tag, and label, and explore the relational network of how they connect.

Browse every tutorial on the site. Selecting a topic, tag, or label filters the network, the article list, and the chip counts together. Click any node in the graph to open the tutorial; shift-click adds its topic to the filter, alt-click adds its tags.

Tag network

Each node is a tutorial; nodes share an edge when they have at least two tags in common. Colour encodes topic area. Non-matching nodes fade rather than disappear so the layout stays stable as you filter.

Filter

Year range:

Tutorials

Loading…

Tag co-occurrence heatmap

Top tags: 20

--- title: "Overview – #equilibria" description: "Filter all tutorials by topic, tag, and label, and explore the relational network of how they connect." page-layout: full toc: false --- ::: {.lead} Browse every tutorial on the site. Selecting a topic, tag, or label filters the network, the article list, and the chip counts together. Click any node in the graph to open the tutorial; shift-click adds its topic to the filter, alt-click adds its tags. ::: ## Tag network ::: {.network-help} Each node is a tutorial; nodes share an edge when they have at least two tags in common. Colour encodes topic area. Non-matching nodes fade rather than disappear so the layout stays stable as you filter. ::: ```{=html} <div id="tutorial-network" style="height: 640px;"></div> <div class="network-controls"> <button id="network-reset" type="button">Reset zoom</button> <details class="downloads-menu"> <summary>Download data</summary> <ul> <li><a href="artifacts/graph.json" download>graph.json</a> — nodes, edges, topics, tags, labels</li> <li><a href="artifacts/tutorials.csv" download>tutorials.csv</a> — id, title, url, topic, tags, labels, date</li> <li><a href="artifacts/cooccurrence.csv" download>cooccurrence.csv</a> — tag pairs and counts</li> </ul> </details> </div> ``` ## Filter ```{=html} <div class="search-row"> <label for="overview-search" class="visually-hidden">Search tutorials</label> <input id="overview-search" type="search" placeholder="Search tutorials…" autocomplete="off" spellcheck="false"> </div> <div class="year-row"> <label for="year-slider" class="year-label">Year range: <span id="year-readout"></span></label> <div id="year-slider" aria-label="Filter by year range"></div> </div> <div id="filter-summary" class="filter-summary" aria-live="polite" aria-atomic="true"> <button id="filter-reset" type="button" hidden>Reset all filters</button> </div> <div id="topic-filter-bar" class="filter-bar" aria-label="Filter by topic"></div> <div id="tag-filter-bar" class="filter-bar" aria-label="Filter by tag"></div> <div id="label-filter-bar" class="filter-bar label-bar" aria-label="Filter by label"></div> ``` ## Tutorials ```{=html} <div id="a11y-announcer" class="visually-hidden" role="status" aria-live="polite" aria-atomic="true"></div> <div id="tutorial-list-empty" class="tutorial-list-empty" hidden> <p>No tutorials match the current filters. Try removing one, or <span role="link">reset all</span>.</p> </div> <div id="tutorial-list" class="tutorial-list"><p>Loading…</p></div> <nav id="all-tutorials-nav" class="all-tutorials-nav" aria-label="All tutorials grouped by topic"></nav> <details id="heatmap-wrapper" class="heatmap-wrapper"> <summary>Tag co-occurrence heatmap</summary> <div class="heatmap-controls"> <label for="heatmap-n">Top tags: <span id="heatmap-n-readout">20</span></label> <input id="heatmap-n" type="range" min="10" max="50" step="1" value="20"> </div> <div id="heatmap" class="heatmap"></div> </details> <script src="https://unpkg.com/vis-network@9.1.9/standalone/umd/vis-network.min.js"></script> <script type="module" src="assets/js/overview/main.js"></script> ```