图版 (Folio)
图版以自然历史博物馆解释标本的方式解释一个想法。基座上有一个对象，旁边是一个编号键，以及告诉你如何观察它的墙面文本。这里的对象是你发明的一件仪器，例如一个工作台、一座天平、一台织布机或一个蒸馏器，其工作部件执行这个想法。读者可以戳弄它，上面的每个读数都是计算出来的。
三个承诺
- 机制，而非隐喻。 仪器必须执行这个想法，而不是作为插图站在旁边。在绘图之前，写下这样一行："当读者做 X 时，部件 Y 移动，并且这个移动就是想法中的 Z。"
- 单一的数字来源。 一个小的纯模型计算所有内容：指针角度、液位、读数、键、表格。页面只显示模型返回的内容，因此没有两个地方会不一致。
- 引导阅读。 一个好的绘图仍然需要一个指南。每个图版附带一个键、一个逐项阅读、完整的工作过程，以及一个关于哪些内容被简化的诚实说明。
入门
- 仓库附带三个参考图版。图版 I (
examples/attention/，作为分析台的注意力机制) 是用于由离散步骤和公式组成的想法的模型。图版 II (examples/heart/，作为双泵的人心) 是任何随时间运行的模型的模型：每帧集成的模拟、连续流、阶段和每次循环后重绘的图表。图版 III (examples/grid/，微型电网) 是电力、磁力和能量流的模型，以及一个由独立机器（而非带状）构建的工作台：一个涡轮机、一个带有旋转转子的发电机、变压器、电塔和一个城镇。图版 IV (examples/hashmap/，作为分拣办公室的哈希映射) 是用于算法和数据结构的模型，其中的想法是一系列离散操作：每个操作（插入、查找、调整大小）扩展为一小段按时间顺序执行的动作列表（提起、搬运、浸入比较、将每张卡片飞到新位置），一个接一个地播放，以便读者观察算法执行的每一步。首先打开最接近的一个。 - 最快的开始是复制一个参考图版：
node scripts/new-plate.mjs <name>从图版 I 创建examples/<name>/。然后替换其模型、场景和文本。从一个可工作图版开始构建比从空白开始更快且更安全。 - 共享的展览样式位于
kit/folio-page.css中；一个图版的page.html将/*CSS*/放入其<style>并仅添加其自身的规则。 node scripts/build-site.mjs将每个图版以及封面页面 (site/index.html) 构建到docs/中，这是一个准备用于 GitHub Pages 的网站。要添加一个图版，请将其名称添加到PLATES以及封面上的卡片。- 使用
node scripts/build.mjs examples/<name> dist/<name>.html将任何图版构建成一个独立的文件。 - 如果只安装了此文件（没有仓库），附录末尾包含绘图库；将其保存为
folio-kit.js。
一个图版由五个文件组成：
| 文件 | 角色 |
|---|---|
folio-kit.js | 绘图库（共享，每个图版从不编辑） |
folio-live.js | 三个视图：舞台、光照层、轨道、视图切换（共享） |
model.js | 纯模型；将一个对象放在 window 上 |
plate.js | 仪器：静态几何体、活动插槽、输入 |
page.js | 键、控件、墙面文本、账本；监听图版 |
page.html | 基座和样式，带有 /*KIT*/ /*MODEL*/ /*PLATE*/ /*PAGE*/ 占位符 |
A 阶段：简报（尚未绘图）
A1. 范围。 在开始之前，告诉用户他们将获得以下哪一项以及大致需要多长时间：
| 范围 | 内容 | 典型时间 |
|---|---|---|
| 草图 | 仪器 + 键 + 读数，无墙面文本 | 不到一小时 |
| 图版 | 完整的展览页面（'解释 X' 的默认选项） | 一个半到三个小时 |
| 系列 | 共享同一工作台、比例和调色板的多个图版 | 首先商定列表，然后一次一个图版 |
A2. 模型。 在任何可视化之前编写 model.js。收集真实的公式、单位和量级。返回纯对象：输入进来，页面将显示的每个量出去。在 Node 中运行它并打印几个案例。现在寻找边缘情况（空集、被掩码的行、边界值）。如果有任何发明的内容，例如玩具权重或样本数据，请在"关于此标本"的墙面文本中注明。
A2b. 随时间运行的模型。 当想法是一个过程（心跳、队列排空、学习曲线）时，将其编写为状态加上一个 step(s, dt) 函数和一个返回所有显示内容的 read(s)。在绘图之前，根据 Node 中的已知值调整参数，如图版 II 对静息成人所做的那样（约 115/80 mmHg，每次搏动 70 mL，5 L/min）。在绘图画面关闭时保持模拟运行，并且仅跳过绘制；否则，更改页面更下方的控件会冻结数字。
A3. 仪器及其对应表。 从实验室、车间、观察站或印刷厂的世界中寻找一件仪器。然后编写将每个术语与一个部件联系起来的表格：
| 想法中的术语 | 仪器部件 | 读者可以看到什么 |
|---|---|---|
| 查询 | 轨道上的一个滑架 | 它停在正在提问的单词上方 |
| 缩放分数 | 每个单词一个刻度盘 | 指针位置 |
| softmax | 一个密封储液器 | 列只能分割它所持有的内容 |
| 掩码 | 带盖的旋塞 | 后面的单词被关闭 |
| 加权和 | 一个分层沉积物的托盘 | 每层的长度是一个权重 |
每一行都需要一个部件，每个主要部件都需要一行。一些可靠的映射：固定总量变为一个储液器、一个钱包或一袋砝码。比较变为一个刻度盘、一座天平或卡尺。选择变为一个阀门、一个开关或一个道岔杆。累积变为层、一个堆栈或一个计数。排序变为一条轨道、一个架子或一个滑槽。
B 阶段：工作台
B1. 盘点。 在放置之前列出所有部件。目标是 30 到 60 个。按用途分组：术语部件（来自表格，每项重复）、支撑部件（底座、支脚、支柱、轨道、套环、支架）、控制部件（选择器、滚花旋钮、杠杆）和安装细节（目录牌、雕刻标签、刻度条、螺丝）。恰好一个量，即想法所讨论的那个量，用红色表示。
B2. 带状区域。 使用世界坐标，x 沿工作台方向，y 朝向观看者，z 向上。将工作台从前到后划分为深度带状区域，并为每个带状区域赋予一种部件。图版 I 包含轨道、柱子、旋塞、歧管、刻度盘、托盘。在世界单位中在带状区域之间留出间隙，因为一个戳入下一个带状区域的部件会以错误的顺序绘制。在带状区域内部，从远到近绘制。将相机设置为 az 约 -24（对于长工作台），el 为 30，并使用 Folio.fit 将其适配到角落。
B3. 静态字符串，活动插槽。 遍历带状区域一次，并将 SVG 字符串推送到一个有序列表中。只要有东西移动，就改为推送一个命名插槽。在安装时，该列表变成一个 SVG，每个插槽带有一个空的 <g>。每个动画帧仅重绘插槽，使用从追逐模型目标的缓动值。一旦每个值都已到达，绘制停止。
B4. 针。 直接在承载想法的部件上放置 6 到 10 个编号针，按新人应该查看它们的顺序编号。针是唯一铺在绘图上的标记。所有其他文本都刻在表面上：面板正面的名称、刻度上的数字、底座上的目录牌。
C 阶段：基座
页面是解释的一部分。从下到上使用以下模块构建它：
- 刊头。 左侧是系列名称，中心是标志图形，右侧是图版编号。
- 标题块。 一个展示性标题，将想法命名为仪器（