34:["$","title",null,{"children":"The Dependency Network of a Hack Computer | Thomas Butcher | Observable"}] 3c:T956,## Introduction In Jesse's other class that he teaches, Computer Architecture, throughout the course students work through building an entire theoretical version of a computer. This type of computer that we create is called the Hack computer, and it is made up from many chips starting with basic logic gates. Every chip in the Hack computer from *nand2tetris* is made of other chips, down to a single built-in part, the Nand gate. Treated as a network, with each chip represented as a node and an arrow pointing from a part to the chip built from it, the machine is a short list of reused parts. This project asks which of those parts everything else depends on. **I test the hypothesis that:** *more chips depend on the Not gate than on all of the memory chips I implemented combined.* * A chip is **needed by** another if the other is built from it, directly or through chips below it. * The **memory chips I implemented** are RAM8, RAM64, RAM512, RAM4K, RAM16K and Memory. ROM32K, Screen and Keyboard are built-in parts of the course, not mine. * **Combined** adds up their counts, so a chip that needs several of them counts once for each. * Every count is out of the same 38 chips. * The hypothesis is wrong if the memory chips' counts add up to as many as Not's, or more. ## Data Sources 1. **My own HDL files** from my Computer Architecture course (nand2tetris projects 1, 2, 3 and 5): 31 chips, each written by me. Every file was parsed and wired down to Nand gates and flip-flops, then simulated; about 200,000 tests pass, including my own Hack programs (*Mult.hack* and *add.hack*) run on the CPU and compared with a software Hack emulator. 2. **The built-in parts of the course** (Nand, DFF, ROM32K, Screen, Keyboard), which are not broken down further, and ARegister and DRegister, which my CPU takes from the course's built-ins and which are counted as one 16-bit Register each. Together with my 31 chips this makes the **38 chips** and **79 "is built from" links** in `chips.json`. 3. **Copies in one Computer** (used in the tooltips): every chip placed anywhere in one Computer, at every level, so a Not inside an And counts as a Not and the And also counts. Resources Used: * [nand2tetris.org](https://www.nand2tetris.org), the course the chips come from. * Generative AI (Claude) was used to write some of the code, and went through my chip implementation files. 3d:T410,selNote = { const box = html`

`; if (chip === null) { box.textContent = "Click a chip to light up everything that depends on it. Click it again to see what it is built from, and a third time to clear."; return box; } const k = dependents.get(chip).size, inside = below(chip), list = [...inside].sort().join(", "); box.innerHTML = mode === "Built from" ? (inside.size === 0 ? `${chip} is a built-in part: nothing is inside it.` : `${chip} is built from ${inside.size} other chip${inside.size === 1 ? "" : "s"}, directly or through chips below it${inside.size <= 12 ? ": " + list + "." : ". They are all lit above."}`) : (k === 0 ? `${chip}: nothing is built from it. It is the top of the machine, or a chip that was never used.` : `${chip} is needed by ${k} of the ${OUTOF} chips (${pc0(k / OUTOF)}). Take it away and none of them can be built.`); return box; }3e:T2222,network = { const W = 1130, PH = 640, N = courseOrder.length, vc = chipView, vm = modeView; const nodes = chips.nodes.map(d => ({...d, r: 4 + 21 * Math.sqrt(dependents.get(d.id).size / BUILT)})); // dot area grows with the chips that depend on it const links = chips.links.map(l => ({source: l.target, target: l.source, count: l.count})); // from a part to the chip built from it const lw = d3.scaleLinear([1, d3.max(links, l => l.count)], [0.8, 3.6]); const sim = d3.forceSimulation(nodes) .force("link", d3.forceLink(links).id(d => d.id).distance(l => 90 + l.source.r + l.target.r).strength(0.3)) .force("charge", d3.forceManyBody().strength(d => -300 - d.r * 24)) .force("collide", d3.forceCollide(d => d.r + 26).strength(0.95)) .force("x", d3.forceX(W / 2).strength(0.03)) .force("y", d3.forceY(PH / 2).strength(0.06)) .stop(); links.forEach(l => { l.s = l.source; l.t = l.target; }); const keepInside = () => nodes.forEach(d => { d.x = Math.max(d.r + 16, Math.min(W - d.r - 16, d.x)); d.y = Math.max(d.r + 22, Math.min(PH - d.r - 26, d.y)); }); for (let i = 0; i < 500; i++) { sim.tick(); keepInside(); } // settled before the first draw, so the layout is the same every time nodes.forEach(d => { d.x0 = d.x; d.y0 = d.y; }); const svg = d3.create("svg").attr("viewBox", [0, 0, W, PH + 72]).style("width", "100%").style("display", "block") .style("background", "#fff").style("border", "1px solid #e2ded5").style("border-radius", "10px").style("font-family", "Inter, system-ui, sans-serif"); svg.append("style").text(` .link{fill:none;stroke:#a39e95;stroke-opacity:.45;marker-end:url(#hk-a)} .link.path{stroke:#24212b;stroke-opacity:.85;marker-end:url(#hk-b)} .faded{opacity:.13} .mark{cursor:grab} .mark .shape{stroke-width:1.2} .mark.dep .shape{stroke:#24212b;stroke-width:2.4} .mark.sel .shape{stroke:#24212b;stroke-width:4.5} .lab{font-size:13px;font-weight:500;pointer-events:none;paint-order:stroke;stroke:#fff;stroke-width:4px;stroke-linejoin:round;fill:#24212b} .unbuilt{opacity:.08;pointer-events:none} text.unbuilt{opacity:0} .mark.newest .shape{stroke:#24212b;stroke-width:3.5} .pinring{display:none;fill:none;stroke:#24212b;stroke-width:1.4;stroke-dasharray:2.5 2.5;pointer-events:none} .mark.pinned .pinring{display:inline} .mark,.lab,.link{transition:opacity .25s} .keytext{font-size:11.5px;fill:#6f6a64}`); svg.append("defs").selectAll("marker").data([["hk-a", "#a39e95"], ["hk-b", "#24212b"]]).join("marker") .attr("id", d => d[0]).attr("viewBox", "0 -5 10 10").attr("refX", 9).attr("refY", 0).attr("markerWidth", 8).attr("markerHeight", 8) .attr("markerUnits", "userSpaceOnUse").attr("orient", "auto").append("path").attr("d", "M0,-4L10,0L0,4Z").attr("fill", d => d[1]); svg.append("rect").attr("width", W).attr("height", PH).attr("fill", "transparent").on("click", () => clickChip(null)); const link = svg.append("g").selectAll("path").data(links).join("path").attr("class", "link").attr("stroke-width", l => lw(l.count)); const node = svg.append("g").selectAll("g").data(nodes).join("g").attr("class", "mark"); node.append("circle").attr("class", "shape").attr("r", d => d.r).attr("fill", d => fillOf(d.id)).attr("stroke", d => edgeOf(d.id)); node.append("circle").attr("class", "pinring").attr("r", d => d.r + 5); node.append("title").text(d => { const k = dependents.get(d.id).size, parts = Object.entries(d.parts).map(([c, v]) => `${v}× ${c}`).join(", ") || "built-in"; return `${d.id}\nNeeded by ${k} of ${OUTOF} chips\nBuilt from: ${parts}\nAppears ${d.copies_in_computer.toLocaleString("en-US")} time${d.copies_in_computer === 1 ? "" : "s"} in one Computer`; }); const labels = svg.append("g").selectAll("text").data(nodes).join("text").attr("class", "lab").text(d => d.id); const segOf = l => { const s = l.s, t = l.t, dx = t.x - s.x, dy = t.y - s.y, len = Math.hypot(dx, dy) || 1, ux = dx / len, uy = dy / len; return [s.x + ux * s.r, s.y + uy * s.r, t.x - ux * (t.r + 2), t.y - uy * (t.r + 2)]; }; const ctx = document.createElement("canvas").getContext("2d"); ctx.font = "500 13px Inter, system-ui, sans-serif"; const drawLabels = () => labels.attr("x", d => d.x + (d.lx ?? -10)).attr("y", d => d.y + (d.ly ?? d.r + 14)); function layoutLabels() { const items = nodes.map(d => ({x: d.x, y: d.y, r: d.r, w: ctx.measureText(d.id).width + 2, h: 14})); const rects = placeLabels(items, {dots: nodes.map(d => ({x: d.x, y: d.y, r: d.r})), segs: links.map(segOf), W, H: PH}); nodes.forEach((d, i) => { d.lx = rects[i].x0 - d.x; d.ly = rects[i].y1 - 3.5 - d.y; }); drawLabels(); } function ticked() { link.attr("d", l => { const [a, b, c, e] = segOf(l); return `M${a},${b}L${c},${e}`; }); node.attr("transform", d => `translate(${d.x},${d.y})`); drawLabels(); } ticked(); layoutLabels(); sim.on("tick", () => { keepInside(); ticked(); }); node.call(d3.drag() .on("start", (ev, d) => { if (!ev.active) sim.alphaTarget(0.25).restart(); d.fx = d.x; d.fy = d.y; }) .on("drag", (ev, d) => { d.fx = ev.x; d.fy = ev.y; }) .on("end", (ev, d) => { if (!ev.active) sim.alphaTarget(0); if (!d.pinned) d.fx = d.fy = null; setTimeout(layoutLabels, 900); })); // click cycle; a double-click pins a chip and leaves the selection as it was before its two clicks let before = null; node.on("click", (ev, d) => { ev.stopPropagation(); if (ev.detail < 2) before = {chip: vc.value, mode: vm.value}; clickChip(d.id); }); node.on("dblclick", (ev, d) => { ev.stopPropagation(); if (before) { setChip(before.chip); setMode(before.mode); } d.pinned = !d.pinned; if (d.pinned) { d.fx = d.x; d.fy = d.y; } else { d.fx = d.fy = null; sim.alphaTarget(0).alpha(0.3).restart(); setTimeout(layoutLabels, 1500); } node.classed("pinned", n => n.pinned); }); // key strip, in the same coordinates as the dots so the sizes are exact const radDep = k => 4 + 21 * Math.sqrt(k / OUTOF); const key = svg.append("g").attr("transform", `translate(24, ${PH + 6})`); key.append("line").attr("x1", -24).attr("x2", W - 24).attr("stroke", "#e2ded5"); key.append("text").attr("class", "keytext").attr("y", 38).text("Dot size = chips that depend on it:"); let kx = 214; [[0, "none"], [8, "8"], [16, "16"], [32, "32"]].forEach(([k, t]) => { const r = radDep(k); key.append("circle").attr("cx", kx + r).attr("cy", 34).attr("r", r).attr("fill", "none").attr("stroke", "#8b867e"); key.append("text").attr("class", "keytext").attr("x", kx + 2 * r + 6).attr("y", 38).text(t); kx += 2 * r + 6 + ctx.measureText(t).width + 22; }); key.append("line").attr("x1", 620).attr("x2", 664).attr("y1", 34).attr("y2", 34).attr("class", "link").style("stroke-opacity", .9); key.append("text").attr("class", "keytext").attr("x", 674).attr("y", 38).text("Arrow points from a part to the chip built from it"); const el = svg.node(); el.update = (chipId, modeName, builtN) => { // called whenever the selection, the mode or the slider changes const unb = id => rank.get(id) >= builtN; node.classed("unbuilt", n => unb(n.id)).classed("newest", n => builtN < N && rank.get(n.id) === builtN - 1); labels.classed("unbuilt", n => unb(n.id)); link.classed("unbuilt", l => unb(l.s.id) || unb(l.t.id)); if (chipId === null) { node.classed("faded dep sel", false); labels.classed("faded", false); link.classed("faded path", false); return; } const parts = modeName === "Built from", rel = parts ? below(chipId) : dependents.get(chipId), lit = n => n.id === chipId || rel.has(n.id); node.classed("sel", n => n.id === chipId).classed("dep", n => rel.has(n.id)).classed("faded", n => !lit(n)); labels.classed("faded", n => !lit(n)); const onPath = parts ? l => rel.has(l.s.id) && (l.t.id === chipId || rel.has(l.t.id)) : l => (l.s.id === chipId || rel.has(l.s.id)) && rel.has(l.t.id); link.classed("path", onPath).classed("faded", l => !onPath(l)); }; el.reset = () => { // glide every chip back to its first position and let go of all pins sim.stop(); const from = nodes.map(d => [d.x, d.y]); nodes.forEach(d => { d.fx = d.fy = null; d.pinned = false; d.vx = d.vy = 0; }); node.classed("pinned", false); const t = d3.timer(elapsed => { const k = Math.min(1, elapsed / 700), e = d3.easeCubicInOut(k); nodes.forEach((d, i) => { d.x = from[i][0] + (d.x0 - from[i][0]) * e; d.y = from[i][1] + (d.y0 - from[i][1]) * e; }); ticked(); if (k === 1) { t.stop(); layoutLabels(); } }); }; invalidation.then(() => sim.stop()); return el; }3f:Tc27,cmpChart = { const W = 1130, rowH = 36, M = {l: 200, t: 12, r: 190, b: 40}; const H = M.t + 2 * rowH + M.b, isBuilt = id => rank.get(id) < built; const x = d3.scaleLinear([0, OUTOF], [M.l, W - M.r]); const count = id => [...dependents.get(id)].filter(isBuilt).length; const segs = MEMCHIPS.map(id => ({id, k: count(id)})).sort((a, b) => dependents.get(b.id).size - dependents.get(a.id).size || a.id.localeCompare(b.id)); let at = 0; segs.forEach(d => { d.x0 = at; at += d.k; }); const kNot = count("Not"); const rel = chip === null ? new Set() : mode === "Built from" ? below(chip) : dependents.get(chip); const lit = id => id === chip || rel.has(id); const op = id => chip === null ? 1 : (lit(id) ? 1 : 0.13); const svg = d3.create("svg").attr("viewBox", [0, 0, W, H]).style("width", "100%").style("display", "block").style("background", "#fff") .style("border", "1px solid #e2ded5").style("border-radius", "10px").style("font-family", "Inter, system-ui, sans-serif"); [0, 10, 20, 30].forEach(t => { svg.append("line").attr("x1", x(t)).attr("x2", x(t)).attr("y1", M.t).attr("y2", M.t + 2 * rowH).attr("stroke", "#eeebe4"); svg.append("text").attr("x", x(t)).attr("y", M.t + 2 * rowH + 17).attr("text-anchor", "middle").attr("font-size", 11.5).attr("fill", "#6f6a64").text(t); }); svg.append("text").attr("x", (M.l + W - M.r) / 2).attr("y", M.t + 2 * rowH + 34).attr("text-anchor", "middle").attr("font-size", 11.5).attr("fill", "#6f6a64").text("Chips that depend on it"); [["Not", 0], ["Memory chips added up", 1]].forEach(([t, i]) => svg.append("text").attr("x", M.l - 12).attr("y", M.t + i * rowH + rowH / 2 + 4) .attr("text-anchor", "end").attr("font-size", 12.5).attr("font-weight", 650).attr("fill", "#24212b").text(t)); [[`${kNot} chips`, 0], [`${at} chips`, 1]].forEach(([t, i]) => svg.append("text").attr("x", W - M.r + 14).attr("y", M.t + i * rowH + rowH / 2 + 4) .attr("font-size", 12).attr("font-weight", 600).attr("fill", "#24212b").text(t)); svg.append("rect").attr("x", M.l).attr("y", M.t + 5).attr("height", rowH - 10).attr("width", Math.max(0, x(kNot) - M.l)).attr("rx", 2) .attr("fill", fillOf("Not")).attr("stroke", chip === "Not" ? "#24212b" : edgeOf("Not")).attr("stroke-width", chip === "Not" ? 3.5 : 1).attr("opacity", op("Not")).style("cursor", "pointer") .on("click", () => clickChip("Not")).append("title").text(`Not: needed by ${kNot} chips`); svg.append("g").selectAll("rect").data(segs).join("rect").attr("x", d => x(d.x0)).attr("y", M.t + rowH + 5).attr("height", rowH - 10) .attr("width", d => Math.max(0, x(d.x0 + d.k) - x(d.x0))).attr("fill", fillOf("RAM8")).attr("stroke", "#fff").attr("stroke-width", 2) .attr("opacity", d => op(d.id)).style("cursor", "pointer").on("click", (ev, d) => clickChip(d.id)).append("title").text(d => `${d.id}: needed by ${d.k} chips`); svg.append("rect").attr("x", M.l).attr("y", M.t + rowH + 5).attr("height", rowH - 10).attr("width", Math.max(0, x(at) - M.l)).attr("fill", "none") .attr("stroke", edgeOf("RAM8")).attr("pointer-events", "none"); return svg.node(); }40:Tdd3,bars = { const W = 1130, rowH = 18, M = {l: 160, t: 30, r: 170, b: 46}; const isBuilt = id => rank.get(id) < built; const NAMED = new Set(["Not", ...MEMCHIPS]); const COMB = "Memory chips combined"; // one extra bar: the counts of the six memory chips added up const rows = chips.nodes.map(n => ({id: n.id, kFinal: dependents.get(n.id).size, k: [...dependents.get(n.id)].filter(isBuilt).length})); rows.push({id: COMB, combined: true, kFinal: memSum, k: d3.sum(MEMCHIPS, m => rows.find(r => r.id === m).k)}); rows.sort((a, b) => b.kFinal - a.kFinal || a.id.localeCompare(b.id)); const fillRow = d => d.combined ? fillOf("RAM8") : fillOf(d.id), edgeRow = d => d.combined ? edgeOf("RAM8") : edgeOf(d.id); const litRow = d => d.combined ? MEMCHIPS.some(m => lit(m)) : lit(d.id); const H = M.t + rows.length * rowH + M.b; const x = d3.scaleLinear([0, OUTOF], [M.l, W - M.r]), y = i => M.t + i * rowH; const rel = chip === null ? new Set() : mode === "Built from" ? below(chip) : dependents.get(chip); const lit = id => id === chip || rel.has(id); const svg = d3.create("svg").attr("viewBox", [0, 0, W, H]).style("width", "100%").style("display", "block").style("background", "#fff") .style("border", "1px solid #e2ded5").style("border-radius", "10px").style("font-family", "Inter, system-ui, sans-serif"); [0, 10, 20, 30].forEach(t => { svg.append("line").attr("x1", x(t)).attr("x2", x(t)).attr("y1", M.t - 4).attr("y2", y(rows.length)).attr("stroke", "#eeebe4"); svg.append("text").attr("x", x(t)).attr("y", y(rows.length) + 17).attr("text-anchor", "middle").attr("font-size", 11.5).attr("fill", "#6f6a64").text(t); }); svg.append("text").attr("x", (M.l + W - M.r) / 2).attr("y", y(rows.length) + 36).attr("text-anchor", "middle").attr("font-size", 11.5).attr("fill", "#6f6a64").text("Chips that depend on it"); svg.append("text").attr("x", W - M.r + 14).attr("y", M.t - 12).attr("font-size", 11.5).attr("fill", "#6f6a64").text("Needed by"); const row = svg.append("g").selectAll("g").data(rows).join("g").attr("transform", (d, i) => `translate(0,${y(i)})`) .style("cursor", "pointer").on("click", (ev, d) => { if (!d.combined) clickChip(d.id); }) .attr("opacity", d => !d.combined && !isBuilt(d.id) ? 0.08 : chip === null ? 1 : (litRow(d) ? 1 : 0.13)); row.append("title").text(d => d.combined ? `${MEMCHIPS.map(m => m + " " + dependents.get(m).size).join(" + ")} = ${d.k}` : `${d.id}: needed by ${d.k} of ${OUTOF} chips (${pc0(d.k / OUTOF)})`); row.append("rect").attr("x", M.l).attr("y", 3).attr("height", rowH - 6).attr("rx", 2).attr("width", d => Math.max(0, x(d.k) - M.l)) .attr("fill", fillRow).attr("stroke", d => d.id === chip ? "#24212b" : edgeRow(d)).attr("stroke-dasharray", d => d.combined ? "5 3" : null) .attr("stroke-width", d => d.combined ? 1.8 : d.id === chip ? 3.5 : chip !== null && rel.has(d.id) ? 2 : 1); row.append("text").attr("x", M.l - 10).attr("y", rowH / 2 + 4).attr("text-anchor", "end").attr("font-size", 12.5).attr("fill", "#24212b") .attr("font-weight", d => NAMED.has(d.id) || d.combined ? 650 : 400).text(d => d.id); const vl = row.append("text").attr("x", W - M.r + 14).attr("y", rowH / 2 + 4).attr("font-size", 12).attr("fill", "#6f6a64"); vl.append("tspan").attr("font-weight", 600).attr("fill", "#24212b").text(d => d.combined ? `${d.k} added up` : d.k === 0 ? "none" : `${d.k} of ${OUTOF}`); vl.append("tspan").attr("dx", 9).text(d => d.combined || d.k === 0 ? "" : pc0(d.k / OUTOF)); return svg.node(); }41:Te0e,matrix = { const isBuilt = id => rank.get(id) < built; const rows = chips.nodes.filter(n => !n.builtin).map(n => n.id).sort((a, b) => below(b).size - below(a).size || a.localeCompare(b)); const cols = chips.nodes.map(n => n.id).filter(id => dependents.get(id).size > 0).sort((a, b) => dependents.get(b).size - dependents.get(a).size || a.localeCompare(b)); const c = 17, M = {l: 96, t: 86, r: 44, b: 10}; const W = M.l + cols.length * c + M.r, H = M.t + rows.length * c + M.b; const ci = new Map(cols.map((id, j) => [id, j])), ri = new Map(rows.map((id, i) => [id, i])); const cx = j => M.l + j * c, cy = i => M.t + i * c; const rel = chip === null ? new Set() : mode === "Built from" ? below(chip) : dependents.get(chip); const svg = d3.create("svg").attr("viewBox", [0, 0, W, H]).style("max-width", "760px").style("width", "100%").style("display", "block") .style("background", "#fff").style("border", "1px solid #e2ded5").style("border-radius", "10px").style("font-family", "Inter, system-ui, sans-serif"); svg.append("g").selectAll("rect").data(d3.cross(rows, cols)).join("rect").attr("fill", "#f4f2ed").attr("rx", 1.5) .attr("x", d => cx(ci.get(d[1])) + .75).attr("y", d => cy(ri.get(d[0])) + .75).attr("width", c - 1.5).attr("height", c - 1.5); const cells = []; rows.forEach(r => cols.forEach(col => { if (below(r).has(col)) cells.push({r, c: col, direct: partsOf.get(r).includes(col)}); })); const cellOpacity = d => { if (!isBuilt(d.r) || !isBuilt(d.c)) return 0.08; if (chip === null) return d.direct ? 1 : .4; const keep = mode === "Built from" ? d.r === chip : ci.has(chip) ? d.c === chip : d.r === chip; return keep ? (d.direct ? 1 : .4) : 0.13; }; svg.append("g").selectAll("rect").data(cells).join("rect").attr("rx", 1.5).style("cursor", "pointer") .attr("x", d => cx(ci.get(d.c)) + .75).attr("y", d => cy(ri.get(d.r)) + .75).attr("width", c - 1.5).attr("height", c - 1.5) .attr("fill", d => fillOf(d.c)).attr("opacity", cellOpacity).on("click", (ev, d) => clickChip(d.c)) .append("title").text(d => d.direct ? `${d.r} is built directly from ${d.c}` : `${d.r} is built from ${d.c} through other chips`); const rowLabOpacity = t => !isBuilt(t) ? 0.08 : chip === null ? 1 : mode === "Built from" ? (t === chip ? 1 : 0.13) : (t === chip || rel.has(t) ? 1 : 0.13); svg.append("g").selectAll("text").data(rows).join("text").attr("x", M.l - 7).attr("y", d => cy(ri.get(d)) + c / 2 + 4).attr("text-anchor", "end") .attr("font-size", 11.5).attr("fill", "#24212b").attr("opacity", rowLabOpacity).style("cursor", "pointer") .text(d => d).on("click", (ev, d) => clickChip(d)); svg.append("g").selectAll("text").data(cols).join("text").attr("transform", d => `translate(${cx(ci.get(d)) + c / 2 + 3},${M.t - 6}) rotate(-60)`) .attr("font-size", 11.5).attr("fill", "#24212b").style("cursor", "pointer").text(d => d).on("click", (ev, d) => clickChip(d)) .attr("opacity", d => !isBuilt(d) ? 0.08 : chip === null ? 1 : mode === "Built from" ? (rel.has(d) ? 1 : 0.13) : (d === chip ? 1 : 0.13)); if (chip !== null) { const byRow = mode === "Built from" || !ci.has(chip); if (!byRow) svg.append("rect").attr("x", cx(ci.get(chip))).attr("y", M.t).attr("width", c).attr("height", rows.length * c).attr("fill", "none").attr("stroke", "#24212b").attr("stroke-width", 2); else if (ri.has(chip)) svg.append("rect").attr("x", M.l).attr("y", cy(ri.get(chip))).attr("width", cols.length * c).attr("height", c).attr("fill", "none").attr("stroke", "#24212b").attr("stroke-width", 2); } return svg.node(); }42:T4f7,matrix_caption = { const rows = chips.nodes.filter(n => !n.builtin).map(n => n.id).sort((a, b) => below(b).size - below(a).size || a.localeCompare(b)); const cols = chips.nodes.map(n => n.id).filter(id => dependents.get(id).size > 0).sort((a, b) => dependents.get(b).size - dependents.get(a).size || a.localeCompare(b)); const first = cols.slice(0, 4), mem = cols.filter(id => nodeById.get(id).group === "memory"); return md`This plot shows each pair of chips as one square, so every dependence is visible with no crossing lines: a filled square means the row chip is built from the column chip (solid if it is in the recipe, pale if it is reached through other chips), and the square takes the column chip's color. **Read down a column** to see every chip built from that chip. Columns are sorted by how many chips depend on them; rows by how many chips each is built from. **The left edge is solid:** the first four columns (${first.join(", ")}) are filled in ${first.map(id => dependents.get(id).size).join(", ")} of the ${rows.length} rows. **The memory columns are nearly empty:** there are ${mem.length} memory columns, and the fullest has ${d3.max(mem, id => dependents.get(id).size)} squares. Click a square or a name to light that chip up everywhere.`; }43:T698,conclusion = { const kNot = dependents.get("Not").size, mem = MEMCHIPS.map(id => ({id, k: dependents.get(id).size})).sort((a, b) => b.k - a.k); const union = new Set(); MEMCHIPS.forEach(id => dependents.get(id).forEach(q => union.add(q))); const held = kNot > memSum; return md`## Data Conclusion Finally, after looking at the network, the two bar charts and the matrix, the Not gate is needed by ${kNot} of the ${OUTOF} chips (${pc0(kNot / OUTOF)}), while the memory chips I implemented are needed by ${mem.map(d => `${d.k} (${d.id})`).join(", ")}, which adds up to ${memSum}. ${held ? `So the Not gate has ${kNot - memSum} more dependent chips than all of the memory chips combined.` : "So the memory chips together are needed by as many chips as the Not gate, or more."} The matrix shows why: the chips everything depends on are built from almost nothing, and the big chips that are built from almost everything are needed by almost nothing, so the dependence piles up in a few small gates. It is fairly important to note that adding the counts counts a chip once for each memory chip it needs; counted once each, only ${union.size} chips need any memory chip at all, so the result holds either way. These counts also describe my own implementation of the chips, so a different design of the same computer could give different numbers, and the ${OUTOF} chips include five built-in parts that cannot depend on anything, so no chip reaches ${OUTOF}. ${held ? "With these results it is reasonable to confirm that:" : "With these results it is not possible to confirm that:"} > ***More chips depend on the Not gate than on all of the memory chips I implemented combined***.`; }44:T1fdb,chips = ({"nodes":[{"id":"Nand","project":0,"group":"primitive","builtin":true,"parts":{},"copies_in_computer":4279046},{"id":"DFF","project":0,"group":"primitive","builtin":true,"parts":{},"copies_in_computer":262192},{"id":"ROM32K","project":0,"group":"memory","builtin":true,"parts":{},"copies_in_computer":1},{"id":"Screen","project":0,"group":"memory","builtin":true,"parts":{},"copies_in_computer":1},{"id":"Keyboard","project":0,"group":"memory","builtin":true,"parts":{},"copies_in_computer":1},{"id":"Not","project":1,"group":"gate","builtin":false,"parts":{"Nand":1},"copies_in_computer":2672319},{"id":"And","project":1,"group":"gate","builtin":false,"parts":{"Nand":1,"Not":1},"copies_in_computer":1082039},{"id":"Or","project":1,"group":"gate","builtin":false,"parts":{"Not":2,"Nand":1},"copies_in_computer":524641},{"id":"Xor","project":1,"group":"gate","builtin":false,"parts":{"Nand":1,"Or":1,"And":1},"copies_in_computer":47},{"id":"Mux","project":1,"group":"gate","builtin":false,"parts":{"Not":1,"And":2,"Or":1},"copies_in_computer":524560},{"id":"DMux","project":1,"group":"gate","builtin":false,"parts":{"Not":1,"And":2},"copies_in_computer":16386},{"id":"Not16","project":1,"group":"bus","builtin":false,"parts":{"Not":16},"copies_in_computer":3},{"id":"And16","project":1,"group":"bus","builtin":false,"parts":{"And":16},"copies_in_computer":2},{"id":"Or16","project":1,"group":"bus","builtin":false,"parts":{"Or":16},"copies_in_computer":0},{"id":"Mux16","project":1,"group":"bus","builtin":false,"parts":{"Mux":16},"copies_in_computer":16398},{"id":"Or8Way","project":1,"group":"bus","builtin":false,"parts":{"Or":7},"copies_in_computer":2},{"id":"Mux4Way16","project":1,"group":"bus","builtin":false,"parts":{"Mux16":3},"copies_in_computer":4682},{"id":"Mux8Way16","project":1,"group":"bus","builtin":false,"parts":{"Mux4Way16":2,"Mux16":1},"copies_in_computer":2340},{"id":"DMux4Way","project":1,"group":"bus","builtin":false,"parts":{"DMux":3},"copies_in_computer":4682},{"id":"DMux8Way","project":1,"group":"bus","builtin":false,"parts":{"DMux":1,"DMux4Way":2},"copies_in_computer":2340},{"id":"HalfAdder","project":2,"group":"arithmetic","builtin":false,"parts":{"And":1,"Xor":1},"copies_in_computer":47},{"id":"FullAdder","project":2,"group":"arithmetic","builtin":false,"parts":{"HalfAdder":2,"Or":1},"copies_in_computer":15},{"id":"Add16","project":2,"group":"arithmetic","builtin":false,"parts":{"HalfAdder":1,"FullAdder":15},"copies_in_computer":1},{"id":"Inc16","project":2,"group":"arithmetic","builtin":false,"parts":{"HalfAdder":16},"copies_in_computer":1},{"id":"ALU","project":2,"group":"arithmetic","builtin":false,"parts":{"Mux16":6,"Not16":3,"Add16":1,"And16":1,"Or8Way":2,"Or":1,"Not":1},"copies_in_computer":1},{"id":"Bit","project":3,"group":"sequential","builtin":false,"parts":{"Mux":1,"DFF":1},"copies_in_computer":262192},{"id":"Register","project":3,"group":"sequential","builtin":false,"parts":{"Bit":16},"copies_in_computer":16387},{"id":"RAM8","project":3,"group":"memory","builtin":false,"parts":{"DMux8Way":1,"Register":8,"Mux8Way16":1},"copies_in_computer":2048},{"id":"RAM64","project":3,"group":"memory","builtin":false,"parts":{"DMux8Way":1,"RAM8":8,"Mux8Way16":1},"copies_in_computer":256},{"id":"RAM512","project":3,"group":"memory","builtin":false,"parts":{"DMux8Way":1,"RAM64":8,"Mux8Way16":1},"copies_in_computer":32},{"id":"RAM4K","project":3,"group":"memory","builtin":false,"parts":{"DMux8Way":1,"RAM512":8,"Mux8Way16":1},"copies_in_computer":4},{"id":"RAM16K","project":3,"group":"memory","builtin":false,"parts":{"DMux4Way":1,"RAM4K":4,"Mux4Way16":1},"copies_in_computer":1},{"id":"PC","project":3,"group":"sequential","builtin":false,"parts":{"Register":1,"Inc16":1,"Mux16":4},"copies_in_computer":1},{"id":"Memory","project":5,"group":"architecture","builtin":false,"parts":{"Keyboard":1,"DMux4Way":1,"Or":1,"Screen":1,"RAM16K":1,"Mux4Way16":1},"copies_in_computer":1},{"id":"CPU","project":5,"group":"architecture","builtin":false,"parts":{"Not":3,"And":21,"Or":3,"Mux16":2,"ARegister":1,"DRegister":1,"ALU":1,"And16":1,"PC":1},"copies_in_computer":1},{"id":"Computer","project":5,"group":"architecture","builtin":false,"parts":{"ROM32K":1,"Memory":1,"CPU":1},"copies_in_computer":1},{"id":"ARegister","project":5,"group":"sequential","builtin":false,"parts":{"Register":1},"copies_in_computer":1},{"id":"DRegister","project":5,"group":"sequential","builtin":false,"parts":{"Register":1},"copies_in_computer":1}],"links":[{"source":"Not","target":"Nand","count":1},{"source":"And","target":"Nand","count":1},{"source":"And","target":"Not","count":1},{"source":"Or","target":"Not","count":2},{"source":"Or","target":"Nand","count":1},{"source":"Xor","target":"Nand","count":1},{"source":"Xor","target":"Or","count":1},{"source":"Xor","target":"And","count":1},{"source":"Mux","target":"Not","count":1},{"source":"Mux","target":"And","count":2},{"source":"Mux","target":"Or","count":1},{"source":"DMux","target":"Not","count":1},{"source":"DMux","target":"And","count":2},{"source":"Not16","target":"Not","count":16},{"source":"And16","target":"And","count":16},{"source":"Or16","target":"Or","count":16},{"source":"Mux16","target":"Mux","count":16},{"source":"Or8Way","target":"Or","count":7},{"source":"Mux4Way16","target":"Mux16","count":3},{"source":"Mux8Way16","target":"Mux4Way16","count":2},{"source":"Mux8Way16","target":"Mux16","count":1},{"source":"DMux4Way","target":"DMux","count":3},{"source":"DMux8Way","target":"DMux","count":1},{"source":"DMux8Way","target":"DMux4Way","count":2},{"source":"HalfAdder","target":"And","count":1},{"source":"HalfAdder","target":"Xor","count":1},{"source":"FullAdder","target":"HalfAdder","count":2},{"source":"FullAdder","target":"Or","count":1},{"source":"Add16","target":"HalfAdder","count":1},{"source":"Add16","target":"FullAdder","count":15},{"source":"Inc16","target":"HalfAdder","count":16},{"source":"ALU","target":"Mux16","count":6},{"source":"ALU","target":"Not16","count":3},{"source":"ALU","target":"Add16","count":1},{"source":"ALU","target":"And16","count":1},{"source":"ALU","target":"Or8Way","count":2},{"source":"ALU","target":"Or","count":1},{"source":"ALU","target":"Not","count":1},{"source":"Bit","target":"Mux","count":1},{"source":"Bit","target":"DFF","count":1},{"source":"Register","target":"Bit","count":16},{"source":"RAM8","target":"DMux8Way","count":1},{"source":"RAM8","target":"Register","count":8},{"source":"RAM8","target":"Mux8Way16","count":1},{"source":"RAM64","target":"DMux8Way","count":1},{"source":"RAM64","target":"RAM8","count":8},{"source":"RAM64","target":"Mux8Way16","count":1},{"source":"RAM512","target":"DMux8Way","count":1},{"source":"RAM512","target":"RAM64","count":8},{"source":"RAM512","target":"Mux8Way16","count":1},{"source":"RAM4K","target":"DMux8Way","count":1},{"source":"RAM4K","target":"RAM512","count":8},{"source":"RAM4K","target":"Mux8Way16","count":1},{"source":"RAM16K","target":"DMux4Way","count":1},{"source":"RAM16K","target":"RAM4K","count":4},{"source":"RAM16K","target":"Mux4Way16","count":1},{"source":"PC","target":"Register","count":1},{"source":"PC","target":"Inc16","count":1},{"source":"PC","target":"Mux16","count":4},{"source":"Memory","target":"Keyboard","count":1},{"source":"Memory","target":"DMux4Way","count":1},{"source":"Memory","target":"Or","count":1},{"source":"Memory","target":"Screen","count":1},{"source":"Memory","target":"RAM16K","count":1},{"source":"Memory","target":"Mux4Way16","count":1},{"source":"CPU","target":"Not","count":3},{"source":"CPU","target":"And","count":21},{"source":"CPU","target":"Or","count":3},{"source":"CPU","target":"Mux16","count":2},{"source":"CPU","target":"ARegister","count":1},{"source":"CPU","target":"DRegister","count":1},{"source":"CPU","target":"ALU","count":1},{"source":"CPU","target":"And16","count":1},{"source":"CPU","target":"PC","count":1},{"source":"Computer","target":"ROM32K","count":1},{"source":"Computer","target":"Memory","count":1},{"source":"Computer","target":"CPU","count":1},{"source":"ARegister","target":"Register","count":1},{"source":"DRegister","target":"Register","count":1}]})45:T62f,buildControls = { // the same control twice: one above the network, one above the bar chart const total = courseOrder.length; let timer = null; const vb = builtView; const make = () => { const button = html``; const range = html``; return {button, range, box: html`

${button}${range}

`}; }; const parts = [make(), make()]; const set = n => { vb.value = n; vb.dispatchEvent(new Event("input", {bubbles: true})); }; const sync = () => parts.forEach(p => { p.range.value = vb.value; p.button.textContent = timer ? "Pause" : "Build it up"; }); const stop = () => { if (timer) { clearInterval(timer); timer = null; } sync(); }; parts.forEach(p => { p.range.addEventListener("input", () => { const n = +p.range.value; stop(); set(n); }); p.button.addEventListener("click", () => { if (timer) return stop(); if (vb.value >= total) set(1); timer = setInterval(() => { if (vb.value >= total) return stop(); set(vb.value + 1); }, 450); sync(); }); }); vb.addEventListener("input", sync); invalidation.then(() => clearInterval(timer)); return parts.map(p => p.box); }46:T88e,function placeLabels(items, ob) { // greedy label placement: try 8 spots around each mark, keep the one that covers the fewest marks and words const g = 3, placed = []; const spots = [["below", 0], ["above", .4], ["right", .8], ["left", 1], ["below-right", 1.6], ["above-right", 1.8], ["below-left", 2], ["above-left", 2.2]]; const rectAt = (it, k) => { const {x, y, r, w, h} = it, d = r * .72 + g; const at = { "below": [x - w / 2, y + r + g], "above": [x - w / 2, y - r - g - h], "right": [x + r + g + 1, y - h / 2], "left": [x - r - g - 1 - w, y - h / 2], "below-right": [x + d, y + d], "above-right": [x + d, y - d - h], "below-left": [x - d - w, y + d], "above-left": [x - d - w, y - d - h] }[k]; return {x0: at[0], y0: at[1], x1: at[0] + w, y1: at[1] + h}; }; const area = (a, b) => Math.max(0, Math.min(a.x1, b.x1) - Math.max(a.x0, b.x0)) * Math.max(0, Math.min(a.y1, b.y1) - Math.max(a.y0, b.y0)); const hitsDot = (c, R) => { const px = Math.max(R.x0, Math.min(c.x, R.x1)), py = Math.max(R.y0, Math.min(c.y, R.y1)); const d = Math.hypot(px - c.x, py - c.y); return d < c.r + 1 ? c.r + 1 - d : 0; }; const crosses = (s, R) => { const [x1, y1, x2, y2] = s, dx = x2 - x1, dy = y2 - y1; let t0 = 0, t1 = 1; for (const [p, q] of [[-dx, x1 - R.x0], [dx, R.x1 - x1], [-dy, y1 - R.y0], [dy, R.y1 - y1]]) { if (p === 0) { if (q < 0) return false; } else { const t = q / p; if (p < 0) t0 = Math.max(t0, t); else t1 = Math.min(t1, t); if (t0 > t1) return false; } } return true; }; const order = items.map((it, i) => i).sort((a, b) => items[b].r - items[a].r); const out = new Array(items.length); for (const i of order) { let best = null; for (const [k, cost] of spots) { const R = rectAt(items[i], k); let s = cost * 6; if (R.x0 < 2 || R.y0 < 2 || R.x1 > ob.W - 2 || R.y1 > ob.H - 2) s += 5000; for (const P of placed) s += area(P, R) * 4; for (const c of ob.dots) s += hitsDot(c, R) * 60; for (const sg of ob.segs || []) if (crosses(sg, R)) s += 7; if (!best || s < best.s) best = {s, R}; } placed.push(best.R); out[i] = best.R; } return out; }47:[{"id":"203cdc67d95915c24238eb9d167ebc6e75361dfcb95c787e562605be4f71869a2a99f3cb58ab00a99cb9ad4db22c2ac64dced3c6a748e76f092cb11b03689ebb","href":"https://static.observableusercontent.com/files/203cdc67d95915c24238eb9d167ebc6e75361dfcb95c787e562605be4f71869a2a99f3cb58ab00a99cb9ad4db22c2ac64dced3c6a748e76f092cb11b03689ebb","name":"chips.json","type":"application/json","lastModified":1793791916831,"size":8145},{"id":"d0c7daaefecdbf0f2c8538792686e44204e0d63cd0bfc39f8b4799bcb26ece9b0eedeac528dc592415d56393ceefd034b33494e9fe17a76b8b9975f7ab5227c0","href":"https://static.observableusercontent.com/files/d0c7daaefecdbf0f2c8538792686e44204e0d63cd0bfc39f8b4799bcb26ece9b0eedeac528dc592415d56393ceefd034b33494e9fe17a76b8b9975f7ab5227c0","name":"revision_1.jpg","type":"image/jpeg","lastModified":1793799117395,"size":126710},{"id":"9287491a82993404306dc2ebfaffaf6dc9d6bfef390042ea873d9d30b3126b3afaf2c725d723ef973c50d2db843ca1c986318048b23bbda829479b553dca04e6","href":"https://static.observableusercontent.com/files/9287491a82993404306dc2ebfaffaf6dc9d6bfef390042ea873d9d30b3126b3afaf2c725d723ef973c50d2db843ca1c986318048b23bbda829479b553dca04e6","name":"revision_2.jpg","type":"image/jpeg","lastModified":1793799117420,"size":79875},{"id":"3b6f71e0dd98fd65808c60795d2298420ca28cc4cafc0d11b68472541361d9c393beefde7429b496989766b21bed02096d26f565e3f90a7342b8d3db3a4b9e30","href":"https://static.observableusercontent.com/files/3b6f71e0dd98fd65808c60795d2298420ca28cc4cafc0d11b68472541361d9c393beefde7429b496989766b21bed02096d26f565e3f90a7342b8d3db3a4b9e30","name":"revision_3.jpg","type":"image/jpeg","lastModified":1793799117455,"size":135437},{"id":"051c3a20f6766f0e6f08963188d8f4622637932e60c0a89fa50a03bb6551306cd4e108acd24a823f09421ddf0b6aa97b9b7912b88dc123b53537d6488eb10dea","href":"https://static.observableusercontent.com/files/051c3a20f6766f0e6f08963188d8f4622637932e60c0a89fa50a03bb6551306cd4e108acd24a823f09421ddf0b6aa97b9b7912b88dc123b53537d6488eb10dea","name":"revision_4.jpg","type":"image/jpeg","lastModified":1793799117493,"size":117383},{"id":"1c584af8695450058c0813fe45b15878ef230ce4fd84bdda75e2a2731ee90705ea68f905efd71da23c8ff4017e64b7d239e45fe8ad20ed4fe26fe22885b354e8","href":"https://static.observableusercontent.com/files/1c584af8695450058c0813fe45b15878ef230ce4fd84bdda75e2a2731ee90705ea68f905efd71da23c8ff4017e64b7d239e45fe8ad20ed4fe26fe22885b354e8","name":"revision_5.jpg","type":"image/jpeg","lastModified":1793799117529,"size":144775}] 38:{"id":"637fd388779eea8c","slug":"the-dependency-network-of-a-hack-computer","title":"The Dependency Network of a Hack Computer","thumbnail":"c5cc7c23570f276d043f5029dee3bc49ecfda9aa4c14389cd1fc90235a8bd22f","access_level":"public","create_time":"$D2026-11-04T11:42:21.938Z","update_time":"$D2026-11-04T18:11:11.221Z","view_time":null,"first_public_time":"$D2026-11-04T13:46:28.672Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"6892435a406ffad9","login":"thomas-butcher","name":"Thomas Butcher","avatar_url":"https://avatars-next.observableusercontent.com/29c8bc8df0eb2be218365ecfea2a967467e030183be3eb4ad91ce9ce087ae457","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":288,"publish_version":288,"role":null,"authored":false,"authors":[{"type":"individual","id":"5279211d076af583","login":"thomas-butcher","name":"Thomas Butcher","avatar_url":"https://avatars-next.observableusercontent.com/29c8bc8df0eb2be218365ecfea2a967467e030183be3eb4ad91ce9ce087ae457","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"6892435a406ffad9","login":"thomas-butcher","name":"Thomas Butcher","avatar_url":"https://avatars-next.observableusercontent.com/29c8bc8df0eb2be218365ecfea2a967467e030183be3eb4ad91ce9ce087ae457","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"The Dependency Network of a Hack Computer","cells":[{"id":1,"value":"# The Dependency Network of a Hack Computer","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"$3c","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"# Final Plots","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"colorKey = html`

${ROLES.map(([k, name, c]) =>\n html`${name} (${chips.nodes.filter(n => roleOf(n.id) === k).length})`)}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"// the three controls share their state through hidden \"views\", so a click on a chart and a choice in the menus stay in step\nviewof chip = Inputs.select([null, ...chips.nodes.map(n => n.id).sort()], {label: \"Chip\", format: d => d ?? \"none\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"viewof mode = Inputs.radio([\"Needed by it\", \"Built from\"], {value: \"Needed by it\", label: \"Show\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"viewof resetLayout = Inputs.button(\"Reset layout\", {reduce: () => network.reset()})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"buildControls[0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"buildNote = {\n const total = courseOrder.length;\n if (built >= total) return md`All ${total} chips are built. Move the slider left to take the computer apart, or press Build it up to watch it assemble from the Nand.`;\n const id = courseOrder[built - 1], parts = partsOf.get(id), project = nodeById.get(id).project;\n return md`Step ${built} of ${total}: **${id}** ${parts.length ? \"is built from \" + parts.join(\", \") : \"is a built-in part\"}${project ? \" (course project \" + project + \")\" : \"\"}. The network, the bars and the matrix show only the chips built so far.`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"networkUpdate = { network.update(chip, mode, built); }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"md`This plot shows every chip in the Hack computer as a dot and every \"is built from\" link as an arrow from a part to the chip built from it. The size of a dot is the number of chips that depend on it, and the color is the chip's role. Linked chips sit close together; the layout means nothing else. Pick a chip in the menu or click one to light up what depends on it, then choose **Built from** to see what is inside it. Drag a chip to move it, double-click to pin it where it is, and press **Reset layout** to put everything back. The slider builds the computer up from the Nand one chip at a time, in the order of the course.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"$3f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"cmp_caption = md`This plot compares the Not gate with all of the memory chips I implemented. The top bar is **Not**, needed by **${dependents.get(\"Not\").size}** chips. The bottom bar adds up the memory chips, which together reach **${memSum}**: ${MEMCHIPS.map(id => ({id, k: dependents.get(id).size})).sort((a, b) => b.k - a.k).map(d => d.id + \" \" + d.k).join(\" + \")} = ${memSum}. Each block in the lower bar is one memory chip, and a chip that needs several of them is counted once for each. Click a bar or a block to light that chip up everywhere. The slider builds the computer up in course order, so you can watch both bars grow.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"buildControls[1]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"$40","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"bars_caption = md`This plot gives the exact count for every chip, longest first: how many of the ${OUTOF} chips depend on it. The dashed bar is the six memory chips added up. Bold names are the chips the hypothesis names. Every count is out of the same ${OUTOF} chips, so the bars can be compared directly (a chip never depends on itself, and the five built-in parts cannot depend on anything, so the most any chip can reach is ${BUILT - 1}). A chip that needs several memory chips is counted once for each in the combined bar.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"$41","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"$42","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"$43","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"## Revisions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"md`### Revision 1\n\nDots were sized by how many chips depend on them, and I added a sorted bar chart of those counts with the two lines my hypothesis named.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"rev1_image = FileAttachment(\"revision_1.jpg\").image({style: \"max-width: 100%; height: auto\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"md`### Self Reflection\n\n* Bars on one scale starting at zero make the counts easy to compare, so the chart stayed.\n* The two lines were numbers I picked, so I later dropped them.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"md`### Revision 2\n\nThe network first put each chip in a column by level. I replaced the columns with a force layout where linked chips sit close together.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"rev2_image = FileAttachment(\"revision_2.jpg\").image({style: \"max-width: 100%; height: auto\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"md`### Self Reflection\n\nThe columns made the tower of levels the main picture, which is not what the hypothesis is about.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"md`### Revision 3\n\nThe network hides some links, so I added a matrix with one square for each pair of chips, and moved the keys beside the plots.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"rev3_image = FileAttachment(\"revision_3.jpg\").image({style: \"max-width: 100%; height: auto\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"md`### Self Reflection\n\n* Every dependence is visible and no lines cross.\n* The rotated column names are harder to read than horizontal ones.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"md`### Revision 4\n\nI replaced seven colors for kinds of chip with colors that follow the hypothesis: orange for Not, And and Or, blue for the memory chips, and stone for the rest.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"rev4_image = FileAttachment(\"revision_4.jpg\").image({style: \"max-width: 100%; height: auto\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"md`### Self Reflection\n\n* The colors now say what the hypothesis is about before any text is read.\n* The kind of chip is only in the tooltips now.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"md`### Revision 5\n\nCounted out of 38 chips, my old thresholds no longer held, so I changed the hypothesis to compare the Not gate with the memory chips added up, and drew one bar for each.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"rev5_image = FileAttachment(\"revision_5.jpg\").image({style: \"max-width: 100%; height: auto\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"md`### Self Reflection\n\n* Comparing two bars needs no cut-off number, so it cannot be tuned after seeing the data.\n* The claim is easier to satisfy than before, because Not is needed by almost every chip.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"md`## Data and helpers\n\nEverything below feeds the charts above. Observable cells are reactive, so the order does not matter to the notebook; the helpers sit here so the charts read first.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"$44","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"nodeById = new Map(chips.nodes.map(n => [n.id, n]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"partsOf = new Map(chips.nodes.map(n => [n.id, Object.keys(n.parts)]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"below = {\n const cache = new Map();\n const f = id => { // every chip inside this chip, at any depth\n if (!cache.has(id)) {\n const s = new Set();\n partsOf.get(id).forEach(p => { s.add(p); f(p).forEach(q => s.add(q)); });\n cache.set(id, s);\n }\n return cache.get(id);\n };\n return f;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"dependents = { // a chip \"depends on\" another if it is built from it, directly or through chips below it\n const m = new Map(chips.nodes.map(n => [n.id, new Set()]));\n chips.nodes.forEach(n => below(n.id).forEach(p => m.get(p).add(n.id)));\n return m;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"BUILT = chips.nodes.filter(n => !n.builtin).length","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"OUTOF = chips.nodes.length // every count and percentage is out of this many chips (38); one place to change it","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"share = id => dependents.get(id).size / OUTOF","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"pc0 = d3.format(\".0%\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"// the order of the course: project folders 1, 2, 3 and 5, then the nand2tetris book order inside each project.\n// A built-in part comes right before the first project that uses it.\ncourseOrder = {\n const order = [\"Nand\",\n \"Not\", \"And\", \"Or\", \"Xor\", \"Mux\", \"DMux\", \"Not16\", \"And16\", \"Or16\", \"Mux16\", \"Or8Way\", \"Mux4Way16\", \"Mux8Way16\", \"DMux4Way\", \"DMux8Way\",\n \"HalfAdder\", \"FullAdder\", \"Add16\", \"Inc16\", \"ALU\",\n \"DFF\", \"Bit\", \"Register\", \"RAM8\", \"RAM64\", \"RAM512\", \"RAM4K\", \"RAM16K\", \"PC\",\n \"Screen\", \"Keyboard\", \"Memory\", \"ARegister\", \"DRegister\", \"CPU\", \"ROM32K\", \"Computer\"];\n if (order.length !== chips.nodes.length || !order.every((id, i) => [...below(id)].every(p => order.indexOf(p) < i))) throw new Error(\"build order is wrong\");\n return order;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"rank = new Map(courseOrder.map((id, i) => [id, i]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"// Color follows the hypothesis. Chosen with a color-blind simulation (Machado, Oliveira and Fernandes 2009) and CIEDE2000; every pair stays apart.\nROLES = [\n [\"nand\", \"Nand: the one gate everything is built from\", \"#2B2733\"],\n [\"keystone\", \"Not: predicted to be needed by more chips than all memory chips combined\", \"#D9622B\"],\n [\"gates\", \"Other basic gates: And, Or, Xor, Mux and DMux\", \"#2F7F6F\"],\n [\"memory\", \"Memory chips: RAM, Memory, ROM32K, Screen and Keyboard\", \"#6E9BC9\"],\n [\"other\", \"Every other chip\", \"#DDD8CF\"]\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"color = Object.fromEntries(ROLES.map(r => [r[0], r[2]]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"MEMCHIPS = [\"RAM8\", \"RAM64\", \"RAM512\", \"RAM4K\", \"RAM16K\", \"Memory\"] // the memory chips I implemented; ROM32K, Screen and Keyboard are built-in parts of the course","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"memSum = d3.sum(MEMCHIPS, id => dependents.get(id).size)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"roleOf = id => id === \"Nand\" ? \"nand\" : id === \"Not\" ? \"keystone\"\n : [\"And\", \"Or\", \"Xor\", \"Mux\", \"DMux\"].includes(id) ? \"gates\" : MEMCHIPS.includes(id) || nodeById.get(id).group === \"memory\" ? \"memory\" : \"other\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"fillOf = id => color[roleOf(id)]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"edgeOf = id => d3.color(fillOf(id)).darker(0.8).formatHex()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"chipView = viewof chip","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"modeView = viewof mode","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"builtView = viewof built","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"viewof built = {\n const e = html``;\n e.value = courseOrder.length;\n return e;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"setChip = id => { const v = chipView; v.value = id; v.dispatchEvent(new Event(\"input\", {bubbles: true})); }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"setMode = m => { const v = modeView; v.value = m; v.dispatchEvent(new Event(\"input\", {bubbles: true})); }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"clickChip = id => { // click cycle: what depends on it, then what it is built from, then clear\n const vc = chipView, vm = modeView, cur = vc.value, m = vm.value;\n if (id === null || (cur === id && m === \"Built from\")) { setChip(null); setMode(\"Needed by it\"); }\n else if (cur === id) setMode(\"Built from\");\n else { setChip(id); setMode(\"Needed by it\"); }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W47","stdlib":"2"}} 33:null