34:["$","title",null,{"children":"The Sicilian Mafia in Operation Montagna: Who Held the Network Together? | Dusty Wolfe Synek | Observable"}] 3c:T9f6,# The Sicilian Mafia in Operation Montagna: Who Held the Network Together? ### Introduction & Hypothesis Operation Montagna was an anti-Mafia investigation in the province of Messina, Sicily, into two Mafia families. The pre-trial detention order that closed Operation Montagna lists every meeting the police saw and every call they wiretapped, and gives each suspect's rank. Cavallaro et al. turned that order into a network: 144 people, with a tie between two people who met or spoke on the phone. If investigators could take only a few people out of this network, which few would break it apart? The bosses give the orders, but orders have to be carried by someone. **Hypothesis Statement:** In the Sicilian Mafia network exposed by Operation Montagna, the bosses were not what held the organization together; their executives were. Removing the 7 executives breaks the network apart, leaving a largest connected group of 71 people out of 137, while removing the 7 bosses leaves 126, no worse than removing 7 people at random. ### Data Sources & Scope * **Network:** Cavallaro, L., Ficara, A., De Meo, P., Fiumara, G., Catanese, S., Bagdasar, O., and Liotta, A. (2020), *Disrupting resilient criminal networks through data analysis: the case of Sicilian Mafia*, PLOS ONE 15(8). Data: [Zenodo, doi:10.5281/zenodo.3938818](https://doi.org/10.5281/zenodo.3938818), CC BY 4.0, from the pre-trial detention order of the Court of Messina, 14 March 2007. * **Scope:** meetings (undirected) and phone calls (directed in the source, treated here as undirected ties) are merged into one network of 144 people and 327 ties; 42 pairs both met and spoke. Roles come from the court order; many people have no role listed. * **Method:** betweenness centrality and connected components computed with NetworkX in `analyze.py`; the random baseline is 500 draws of k people for each k. ### The Narrative: What the Visualizations Show A force-directed drawing of all 327 ties is a tangle in which bosses, executives and everyone else look alike (Revision 1, at the bottom of the notebook). The final views give the 14 bosses and executives the only colors, size each person by betweenness, and test the hypothesis directly by taking people out. View 1 lets the reader remove the bosses or the executives and watch what is left. View 2 measures how fast the largest connected group shrinks, against 500 random removals. View 3 shows the three cases side by side. The revisions that led here follow the final views, under Exploration and the Visual Editing Process.3d:T1766,{ // Color: Okabe-Ito blue for bosses, vermillion for executives; others gray, mid gray in the largest group, light gray once cut off const bossColor = "#0072B2", execColor = "#D55E00", mainGray = "#8C8C8C", cutGray = "#D0D0D0"; const width = 928, height = 640, top = 84; // Interactive: the radio control above decides who is removed const group = removalFinal === "bosses" ? "boss" : removalFinal === "executives" ? "executive" : null; const removed = new Set(data.nodes.filter(n => n.group === group).map(n => n.id)); const g = groupsWithout(removed); // D3 customization: node objects live in the liveNodes cell, so people keep their place when the radio changes const px = d3.scaleLinear([0, 1], [40, width - 40]), py = d3.scaleLinear([0, 1], [top + 20, height - 20]); for (const n of liveNodes.values()) if (n.x === undefined) { n.x = px(layout.get(n.id)[0]); n.y = py(layout.get(n.id)[1]); } const nodes = [...liveNodes.values()].filter(n => !removed.has(n.id)); const links = data.links.filter(l => !removed.has(l.source) && !removed.has(l.target)).map(l => ({...l})); const r = d => Math.sqrt(d.betweenness) * 14 + 3; const fill = d => d.group === "boss" ? bossColor : d.group === "executive" ? execColor : g.inLargest(d.id) ? mainGray : cutGray; const role = d => (d.role || "no role listed").replace(/''/g, '"'); const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]).attr("style", "max-width: 100%; height: auto; cursor: grab;") .attr("role", "img").attr("aria-label", `Network of 144 suspects${group ? ` without the 7 ${removalFinal}` : ""}: the largest connected group holds ${g.largestSize} of ${g.people} people`); // D3 customization: title, instructions and color key drawn in the SVG svg.append("text").attr("x", 24).attr("y", 22).style("font", "bold 15px sans-serif") .text(group ? `Without the 7 ${removalFinal}, the largest connected group holds ${g.largestSize} of ${g.people} people` : `With everyone present, ${g.largestSize} of ${g.people} people form one connected group`); svg.append("text").attr("x", 24).attr("y", 41).style("font", "12px sans-serif").attr("fill", "#555") .text("Drag a person to pull on their ties; hover to see who they are. Size = betweenness. Data: Cavallaro et al. (2020)."); const key = [["Boss", bossColor], ["Executive", execColor], ["Other, largest group", mainGray], ["Other, cut off", cutGray]]; const kg = svg.append("g").attr("transform", "translate(24,62)").style("font", "12px sans-serif"); // shortcut: key spacing estimates 6.4 px per character of 12px sans-serif; measure text if the font changes let kx = 0; for (const [label, color] of key) { kg.append("circle").attr("cx", kx + 5).attr("cy", 0).attr("r", 5).attr("fill", color); kg.append("text").attr("x", kx + 14).attr("y", 4).text(label); kx += 14 + label.length * 6.4 + 18; } for (const [label, dash] of [["Meeting", null], ["Phone call only", "3,2"]]) { kg.append("line").attr("x1", kx).attr("x2", kx + 22).attr("stroke", "#666").attr("stroke-width", 1.5).attr("stroke-dasharray", dash); kg.append("text").attr("x", kx + 28).attr("y", 4).text(label); kx += 28 + label.length * 6.4 + 18; } const link = svg.append("g").selectAll("line").data(links).join("line") .attr("stroke", "#888").attr("stroke-opacity", 0.35).attr("stroke-width", 0.8) .attr("stroke-dasharray", d => d.meeting ? null : "3,2"); const node = svg.append("g").selectAll("circle").data(nodes).join("circle") .attr("r", r).attr("fill", fill).attr("stroke", "#fff").attr("stroke-width", 1); node.append("title").text(d => `${d.id}: ${role(d)}\n${d.degree} ties, betweenness rank ${d.rank} of 144`); const label = svg.append("text").attr("pointer-events", "none").style("font", "bold 12px sans-serif") .attr("stroke", "#fff").attr("stroke-width", 4).attr("paint-order", "stroke"); // D3 customization: a live force simulation; after a removal the rest settles and cut-off pieces drift apart const sim = d3.forceSimulation(nodes) .force("link", d3.forceLink(links).id(d => d.id).distance(30).strength(0.3)) .force("charge", d3.forceManyBody().strength(-35).distanceMax(250)) .force("x", d3.forceX(width / 2).strength(0.05)) .force("y", d3.forceY((top + height) / 2).strength(0.08)) .force("collide", d3.forceCollide(d => r(d) + 1)) .alpha(group ? 0.8 : 0.3) .on("tick", () => { for (const n of nodes) { n.x = Math.max(12, Math.min(width - 12, n.x)); n.y = Math.max(top + 14, Math.min(height - 12, n.y)); } link.attr("x1", d => d.source.x).attr("y1", d => d.source.y).attr("x2", d => d.target.x).attr("y2", d => d.target.y); node.attr("cx", d => d.x).attr("cy", d => d.y); }); // Interactive: hovering a person names them and darkens their ties (Munzner's select and highlight) const touches = (l, d) => l.source === d || l.target === d; node.on("mouseenter", (event, d) => { link.attr("stroke", l => touches(l, d) ? "#222" : "#888").attr("stroke-opacity", l => touches(l, d) ? 0.9 : 0.08); const left = d.x > width - 260; label.attr("x", left ? d.x - r(d) - 4 : d.x + r(d) + 4).attr("y", d.y + 4).attr("text-anchor", left ? "end" : "start") .attr("fill", d.group === "boss" ? bossColor : d.group === "executive" ? execColor : "#333") .text(`${d.id}, ${d.group === "other" ? role(d) : d.group}: ${d.degree} ties`); }) .on("mouseleave", () => { link.attr("stroke", "#888").attr("stroke-opacity", 0.35); label.text(""); }); // Interactive: drag a person and the network follows like springs node.call(d3.drag() .on("start", (event, d) => { if (!event.active) sim.alphaTarget(0.3).restart(); d.fx = d.x; d.fy = d.y; }) .on("drag", (event, d) => { d.fx = event.x; d.fy = event.y; }) .on("end", (event, d) => { if (!event.active) sim.alphaTarget(0); d.fx = null; d.fy = null; })); invalidation.then(() => sim.stop()); return svg.node(); }3e:T16f4,{ // Color: boss = #0072B2 (blue), executive = #D55E00 (vermillion) const bossColor = "#0072B2", execColor = "#D55E00"; const width = 760, height = 380, margin = {top: 36, right: 180, bottom: 48, left: 52}; const plotW = width - margin.left - margin.right; const plotH = height - margin.top - margin.bottom; const rem = data.removal; const execData = rem.executive.map((size, k) => ({k, size, group: "executive"})); const bossData = rem.boss.map((size, k) => ({k, size, group: "boss"})); const randData = rem.random.flatMap(r => [ {k: r.k, size: r.p5, group: "random-p5"}, {k: r.k, size: r.median, group: "random-median"}, {k: r.k, size: r.p95, group: "random-p95"} ]); const x = d3.scaleLinear().domain([0, 7]).range([0, plotW]); const y = d3.scaleLinear().domain([0, 144]).range([plotH, 0]); const svg = d3.create("svg").attr("width", width).attr("height", height) .attr("viewBox", [0, 0, width, height]).attr("style", "max-width: 100%; height: auto;") .attr("role", "img").attr("aria-label", "Line chart: removing 7 executives shrinks the largest connected group from 135 to 71; removing 7 bosses leaves 126, inside the random range of 117 to 130"); const g = svg.append("g").attr("transform", `translate(${margin.left},${margin.top})`); g.append("g").call(d3.axisLeft(y).ticks(8)) .selectAll("text").style("font", "11px sans-serif"); g.append("text").attr("transform", "rotate(-90)").attr("y", -40).attr("x", -plotH / 2) .attr("text-anchor", "middle").style("font", "12px sans-serif").text("Largest connected group"); g.append("g").attr("transform", `translate(0,${plotH})`).call(d3.axisBottom(x).ticks(8)) .selectAll("text").style("font", "11px sans-serif"); g.append("text").attr("x", plotW / 2).attr("y", plotH + 36) .attr("text-anchor", "middle").style("font", "12px sans-serif").text("People removed (bosses and executives in order of betweenness)"); // Random band g.append("path") .attr("fill", "#E8E8E8").attr("stroke", "none") .datum(randData.filter(d => d.group === "random-p95")) .attr("d", d3.area() .x(d => x(d.k)) .y0(d => { const m = randData.find(r => r.k === d.k && r.group === "random-p5"); return y(m ? m.size : 144); }) .y1(d => y(d.size)) .curve(d3.curveLinear) ); g.append("path").datum(execData).attr("fill", "none").attr("stroke", execColor).attr("stroke-width", 2) .attr("d", d3.line().x(d => x(d.k)).y(d => y(d.size)).curve(d3.curveLinear)); g.append("path").datum(bossData).attr("fill", "none").attr("stroke", bossColor).attr("stroke-width", 2) .attr("d", d3.line().x(d => x(d.k)).y(d => y(d.size)).curve(d3.curveLinear)); g.append("path").datum(randData.filter(d => d.group === "random-median")).attr("fill", "none").attr("stroke", "#999").attr("stroke-width", 1.5).attr("stroke-dasharray", "4,3") .attr("d", d3.line().x(d => x(d.k)).y(d => y(d.size)).curve(d3.curveLinear)); execData.forEach(d => g.append("circle").attr("cx", x(d.k)).attr("cy", y(d.size)).attr("r", 4).attr("fill", execColor)); bossData.forEach(d => g.append("circle").attr("cx", x(d.k)).attr("cy", y(d.size)).attr("r", 4).attr("fill", bossColor)); const lE = execData[7], lB = bossData[7]; g.append("text").attr("x", x(lE.k) + 6).attr("y", y(lE.size) + 4) .style("font", "11px sans-serif").attr("fill", execColor).attr("font-weight", 600) .text(`Executive: 135→${lE.size}`); g.append("text").attr("x", x(lB.k) + 6).attr("y", y(lB.size) + 16) .style("font", "11px sans-serif").attr("fill", bossColor).attr("font-weight", 600) .text(`Boss: 135→${lB.size}`); g.append("text").attr("x", x(7) + 6).attr("y", y(128) - 6) .style("font", "11px sans-serif").attr("fill", "#999").attr("font-weight", 600) .text(`Random median: 135→128`); // D3 customization: label the random band where it is widest, and mark the gap below it at k = 7 const r5 = rem.random[5], r7 = rem.random[7]; g.append("text").attr("x", x(5)).attr("y", y(r5.p5) + 15).attr("text-anchor", "middle") .style("font", "11px sans-serif").attr("fill", "#777").text("Gray band: middle 90% of 500 random 7-person removals"); g.append("line").attr("x1", x(7)).attr("x2", x(7)).attr("y1", y(r7.p5)).attr("y2", y(lE.size) - 5) .attr("stroke", execColor).attr("stroke-dasharray", "2,2"); g.append("text").attr("x", x(7) - 6).attr("y", y((r7.p5 + lE.size) / 2)).attr("text-anchor", "end") .style("font", "11px sans-serif").attr("fill", execColor).text(`${r7.p5 - lE.size} people below the random band`); // Interactive: hover the plot to read the executive, boss and random values at that step const guide = g.append("line").attr("y1", 0).attr("y2", plotH).attr("stroke", "#999").attr("display", "none"); const tip = g.append("text").style("font", "12px sans-serif").attr("display", "none") .attr("stroke", "#fff").attr("stroke-width", 4).attr("paint-order", "stroke"); g.append("rect").attr("width", plotW).attr("height", plotH).attr("fill", "transparent") .on("mousemove", event => { const k = Math.max(0, Math.min(7, Math.round(x.invert(d3.pointer(event)[0])))); const rr = rem.random[k], tx = x(k) + (k > 3 ? -8 : 8); guide.attr("display", null).attr("x1", x(k)).attr("x2", x(k)); tip.attr("display", null).attr("text-anchor", k > 3 ? "end" : "start").attr("y", plotH - 64) .selectAll("tspan").data([`${k} removed`, `Executives out: ${rem.executive[k]}`, `Bosses out: ${rem.boss[k]}`, `Random: median ${rr.median}, middle 90% ${rr.p5} to ${rr.p95}`]) .join("tspan").attr("x", tx).attr("dy", (d, i) => i ? "1.25em" : 0).attr("font-weight", (d, i) => i ? null : "bold").text(d => d); }) .on("mouseleave", () => { guide.attr("display", "none"); tip.attr("display", "none"); }); svg.append("text").attr("x", width / 2).attr("y", 18).attr("text-anchor", "middle") .style("font", "bold 13px sans-serif") .text("Removing 7 executives breaks the network far more than removing 7 bosses"); return svg.node(); }3f:Tf9b,{ // Color: same key as View 1: blue bosses, vermillion executives, mid gray for the largest group, light gray once cut off const bossColor = "#0072B2", execColor = "#D55E00", mainGray = "#8C8C8C", cutGray = "#D0D0D0"; const pw = 300, ph = 260, gap = 24, top = 46; const width = 3 * pw + 2 * gap, height = top + ph + 34; const panels = [["Everyone", null], ["Without the 7 bosses", "boss"], ["Without the 7 executives", "executive"]]; const fill = (d, g) => d.group === "boss" ? bossColor : d.group === "executive" ? execColor : g.inLargest(d.id) ? mainGray : cutGray; const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]).attr("style", "max-width: 100%; height: auto;") .attr("role", "img").attr("aria-label", "Three panels of the same network: everyone, without the bosses (126 of 137 still connected), without the executives (71 of 137)"); const readout = svg.append("text").attr("x", width).attr("y", height - 8).attr("text-anchor", "end") .style("font", "bold 11px sans-serif").attr("fill", "#333"); panels.forEach(([label, group], i) => { const removed = new Set(data.nodes.filter(n => n.group === group).map(n => n.id)); const g = groupsWithout(removed); // D3 customization: each panel starts from the shared layout and settles without the removed people, so cut-off pieces move apart const nodes = data.nodes.filter(n => !removed.has(n.id)).map(n => ({...n, x: layout.get(n.id)[0] * pw, y: layout.get(n.id)[1] * ph})); const links = data.links.filter(l => !removed.has(l.source) && !removed.has(l.target)).map(l => ({...l})); d3.forceSimulation(nodes) .force("link", d3.forceLink(links).id(d => d.id).distance(12).strength(0.3)) .force("charge", d3.forceManyBody().strength(-14)) .force("x", d3.forceX(pw / 2).strength(0.05)).force("y", d3.forceY(ph / 2).strength(0.06)) .stop().tick(200); const x0 = i * (pw + gap); const px = d3.scaleLinear(d3.extent(nodes, d => d.x), [x0 + 10, x0 + pw - 10]); const py = d3.scaleLinear(d3.extent(nodes, d => d.y), [top + 8, top + ph - 8]); const panel = svg.append("g"); panel.append("rect").attr("x", x0).attr("y", top - 4).attr("width", pw).attr("height", ph + 8).attr("fill", "none").attr("stroke", "#e3e3e3"); panel.append("text").attr("x", x0 + pw / 2).attr("y", 15).attr("text-anchor", "middle").style("font", "bold 13px sans-serif").text(label); panel.append("text").attr("x", x0 + pw / 2).attr("y", 33).attr("text-anchor", "middle").style("font", "12px sans-serif").attr("fill", "#333") .text(`Largest connected group: ${g.largestSize} of ${g.people}`); panel.append("g").selectAll("line").data(links).join("line") .attr("x1", d => px(d.source.x)).attr("y1", d => py(d.source.y)).attr("x2", d => px(d.target.x)).attr("y2", d => py(d.target.y)) .attr("stroke", "#888").attr("stroke-opacity", 0.25).attr("stroke-width", 0.6); panel.append("g").selectAll("circle").data(nodes).join("circle").attr("class", "person") .attr("cx", d => px(d.x)).attr("cy", d => py(d.y)).attr("r", d => Math.sqrt(d.betweenness) * 8 + 2) .attr("fill", d => fill(d, g)).attr("stroke", "#fff").attr("stroke-width", 0.6); }); // Interactive: hover a person in any panel to outline them in all three (linked highlighting) const people = svg.selectAll("circle.person"); people.on("mouseenter", (event, d) => { people.filter(c => c.id === d.id).raise().attr("stroke", "#000").attr("stroke-width", 2); readout.text(`${d.id}: ${d.group === "other" ? (d.role || "no role listed").replace(/''/g, '"') : d.group}, ${d.degree} ties`); }) .on("mouseleave", () => { people.attr("stroke", "#fff").attr("stroke-width", 0.6); readout.text(""); }); svg.append("text").attr("x", 0).attr("y", height - 8).style("font", "11px sans-serif").attr("fill", "#666") .text("Mid gray: in the largest connected group. Light gray: cut off from it. Data: Cavallaro et al. (2020)."); return svg.node(); }40:T561,### Was the Hypothesis Supported? **Yes.** Removing the 7 executives leaves a largest connected group of 71 of the 137 people left. Removing the 7 bosses leaves 126, close to the median of 128 for 7 random people and inside the 5th to 95th percentile range of 117 to 130. In View 2 the boss line dips just under the random band after one boss is removed (131 against a 5th percentile of 133) and stays inside it from the second boss on. The executive line falls below the band with the first executive (123) and ends 46 people under it. **The same test on each kind of tie.** On meetings alone (95 people, 249 ties), removing the 7 executives leaves 38 of 88 people connected and removing the 7 bosses leaves 81, against a random range of 73 to 81. On phone calls alone (95 people, 120 ties), the 6 executives who appear on calls leave 41 of 89 when removed, under the 5th percentile of 59 for 7 random people. Only 2 bosses appear on any call, so the calls cannot test the bosses. **A caution, after Cairo's *The Truthful Art*.** A court order records the meetings and calls the police chose to watch. If the police followed the executives more closely than the bosses, the executives would collect more recorded ties and more betweenness for that reason alone. The views show the pattern in the recorded network; they cannot show whether it would hold in a complete record.41:T4e6,## Color justification and accessibility Bosses are blue (`#0072B2`) and executives vermillion (`#D55E00`), two hues from the Okabe-Ito palette, which Okabe and Ito designed to stay distinct for viewers with red-green color blindness. Everyone else is gray and carries no hue, following Tufte's *layering and separation*: the background is lighter than the foreground. Revision 2 uses one light gray (`#CCC`). The final views use two: mid gray (`#8C8C8C`) for people in the largest connected group and light gray (`#D0D0D0`) for people cut off from it, so lightness, not a new hue, shows the split. Boss is blue and executive is vermillion in every view, so the key learned in Revision 2 holds through the final views. ### Accessibility Blue and vermillion differ in lightness as well as hue, and gray differs from both by having no hue, so the three groups stay apart for viewers with red-green color blindness. The screenshots below show each final view under simulated protanopia (no red cones), made with Chrome's protanopia emulation, which applies the color model of Machado, Oliveira and Fernandes (2009) to the rendered page. The blue bosses stay blue, the vermillion executives turn olive, and the two remain distinct; the gray nodes stay gray.42:T43a,## D3 customization These parts go beyond the D3 gallery example; each is marked `// D3 customization:` in the code. * **A live simulation that keeps its people (View 1):** the node objects live in the `liveNodes` cell, outside the view, so changing the removal control takes people out without resetting anyone. The rest of the network settles, and pieces that lose their link to the main group drift away. Nodes can be dragged. * **Panels that settle from one shared layout (View 3):** the `layout` cell runs one `forceSimulation`; each panel starts from those positions and runs 200 more ticks without the removed people. * **Connected groups by depth-first search:** the `groupsWithout` cell finds the groups left after a removal; Views 1 and 3 shade the largest group mid gray and the rest light gray. * **Hover readout, band label and gap marker (View 2):** scales, axes, the random band from `d3.area` and every label are D3 code, not a Plot default. * **Titles, keys and labels inside the SVG** (Revision 2 onward), and dashed lines for phone-only ties (Revision 3, View 1).43:T4cc,{ const width = 928, height = 600; const color = d3.scaleOrdinal(d3.schemeCategory10); const links = data.links.map(d => ({...d})); const nodes = data.nodes.map(d => ({...d})); const simulation = d3.forceSimulation(nodes) .force("link", d3.forceLink(links).id(d => d.id)) .force("charge", d3.forceManyBody()) .force("x", d3.forceX()) .force("y", d3.forceY()); const svg = d3.create("svg").attr("width", width).attr("height", height) .attr("viewBox", [-width / 2, -height / 2, width, height]).attr("style", "max-width: 100%; height: auto;"); const link = svg.append("g").attr("stroke", "#999").attr("stroke-opacity", 0.6) .selectAll("line").data(links).join("line").attr("stroke-width", 1); const node = svg.append("g").attr("stroke", "#fff").attr("stroke-width", 1.5) .selectAll("circle").data(nodes).join("circle").attr("r", 5).attr("fill", d => color(d.group)); node.append("title").text(d => d.id); simulation.on("tick", () => { link.attr("x1", d => d.source.x).attr("y1", d => d.source.y).attr("x2", d => d.target.x).attr("y2", d => d.target.y); node.attr("cx", d => d.x).attr("cy", d => d.y); }); invalidation.then(() => simulation.stop()); return svg.node(); }44:Tabe,{ // Color: Okabe-Ito blue for boss, vermillion for executive, gray for others const bossColor = "#0072B2", execColor = "#D55E00", otherColor = "#CCC"; const color = d => d.group === "boss" ? bossColor : d.group === "executive" ? execColor : otherColor; const width = 928, height = 600; const links = data.links.map(d => ({...d})); const nodes = data.nodes.map(d => ({...d})); const simulation = d3.forceSimulation(nodes) .force("link", d3.forceLink(links).id(d => d.id)) .force("charge", d3.forceManyBody()) .force("x", d3.forceX()) .force("y", d3.forceY()); const svg = d3.create("svg").attr("width", width).attr("height", height) .attr("viewBox", [-width / 2, -height / 2, width, height]).attr("style", "max-width: 100%; height: auto;"); // D3 customization: title in the SVG svg.append("text").attr("x", 0).attr("y", -height / 2 + 20).attr("text-anchor", "middle") .style("font", "14px sans-serif").attr("font-weight", 600) .text("Operation Montagna: 144 suspects, 327 ties"); svg.append("text").attr("x", 0).attr("y", -height / 2 + 38).attr("text-anchor", "middle") .style("font", "11px sans-serif").attr("fill", "#555") .text("Cavallaro et al. (2020), PLOS ONE 15(8)"); // D3 customization: legend in the SVG const legendX = -width / 2 + 16, legendY = -height / 2 + 54; const lg = svg.append("g").attr("transform", `translate(${legendX},${legendY})`); const legendItems = [ { label: "Boss", fill: bossColor }, { label: "Executive", fill: execColor }, { label: "Other (130)", fill: otherColor } ]; legendItems.forEach((item, i) => { const y = i * 20; lg.append("circle").attr("cx", 0).attr("cy", y).attr("r", 5).attr("fill", item.fill); lg.append("text").attr("x", 12).attr("y", y + 4).style("font", "11px sans-serif").text(item.label); }); const link = svg.append("g").attr("stroke", "#999").attr("stroke-opacity", 0.5) .selectAll("line").data(links).join("line").attr("stroke-width", 1); // D3 customization: node radius by sqrt of betweenness const r = d => Math.sqrt(d.betweenness) * 18 + 3; const node = svg.append("g") .selectAll("circle").data(nodes).join("circle") .attr("r", r).attr("stroke", "#fff").attr("stroke-width", 1.5).attr("fill", d => color(d)); // D3 customization: tooltip with role, degree, rank node.append("title").text(d => `${d.id}\nRole: ${d.role || "(none)"}\nDegree: ${d.degree}\nBetweenness rank: ${d.rank}`); simulation.on("tick", () => { link.attr("x1", d => d.source.x).attr("y1", d => d.source.y).attr("x2", d => d.target.x).attr("y2", d => d.target.y); node.attr("cx", d => d.x).attr("cy", d => d.y); }); invalidation.then(() => simulation.stop()); return svg.node(); }45:T1230,{ // Color: consistent Okabe-Ito hues: boss blue, executive vermillion const bossColor = "#0072B2", execColor = "#D55E00"; const width = 928, height = 600; const nodes = data.nodes.map(d => ({...d})); const links = data.links.map(d => ({...d})); // Determine which nodes to remove const bossIds = new Set(data.nodes.filter(n => n.group === "boss").map(n => n.id)); const execIds = new Set(data.nodes.filter(n => n.group === "executive").map(n => n.id)); const removedIds = removal === "bosses" ? bossIds : removal === "executives" ? execIds : new Set(); const activeNodes = nodes.filter(n => !removedIds.has(n.id)); const activeNodeIds = new Set(activeNodes.map(n => n.id)); const activeLinks = links.filter(l => activeNodeIds.has(l.source) && activeNodeIds.has(l.target)); // D3 customization: compute connected components on the remaining graph const adj = new Map(); activeNodes.forEach(n => adj.set(n.id, [])); activeLinks.forEach(l => { adj.get(l.source).push(l.target); adj.get(l.target).push(l.source); }); const visited = new Set(); const components = []; for (const n of activeNodes) { if (visited.has(n.id)) continue; const comp = []; const stack = [n.id]; while (stack.length) { const cur = stack.pop(); if (visited.has(cur)) continue; visited.add(cur); comp.push(cur); for (const nb of adj.get(cur)) { if (!visited.has(nb)) stack.push(nb); } } components.push(comp); } components.sort((a, b) => b.length - a.length); const largestSize = components[0].length; // D3 customization: assign component colors (largest = dark, others = light) const compOf = new Map(); components.forEach((comp, i) => { const isLargest = i === 0; comp.forEach(id => compOf.set(id, { index: i, largest: isLargest })); }); const compColor = d => { const info = compOf.get(d.id); return info?.largest ? "#333" : "#999"; }; const sim = d3.forceSimulation(activeNodes) .force("link", d3.forceLink(activeLinks).id(d => d.id).strength(0.05)) .force("charge", d3.forceManyBody().strength(-20)) .force("center", d3.forceCenter(0, 0)) .stop(); sim.tick(300); const svg = d3.create("svg").attr("width", width).attr("height", height) .attr("viewBox", [-width / 2, -height / 2, width, height]).attr("style", "max-width: 100%; height: auto;"); // Draw edges: meetings solid, phone dashed svg.append("g") .selectAll("line").data(activeLinks).join("line") .attr("x1", d => d.source.x).attr("y1", d => d.source.y) .attr("x2", d => d.target.x).attr("y2", d => d.target.y) .attr("stroke", d => (d.meeting && d.phone) ? "#666" : d.meeting ? "#999" : "#BBB") .attr("stroke-width", d => d.meeting && d.phone ? 0.5 : 0.3) .attr("stroke-opacity", d => d.meeting && d.phone ? 0.5 : 0.3) .attr("stroke-dasharray", d => d.meeting ? null : "3,3"); // Color nodes by group for key people, by component for others const r = d => Math.sqrt(d.betweenness) * 14 + 3; const nodeColor = d => { if (d.group === "boss") return bossColor; if (d.group === "executive") return execColor; return compColor(d); }; const node = svg.append("g") .selectAll("circle").data(activeNodes).join("circle") .attr("r", r).attr("stroke", "#fff").attr("stroke-width", 1) .attr("fill", d => nodeColor(d)); // D3 customization: direct labels on bosses and executives const labeled = activeNodes.filter(d => d.group === "boss" || d.group === "executive"); const labelG = svg.append("g").style("pointer-events", "none"); labeled.forEach(d => { labelG.append("text").attr("x", d.x + r(d) + 4).attr("y", d.y + 3) .style("font", "10px sans-serif").attr("fill", d.group === "boss" ? bossColor : execColor) .attr("font-weight", 600).text(d.id); }); // Caption with component size const caption = svg.append("text").attr("x", 0).attr("y", height / 2 - 16) .attr("text-anchor", "middle").style("font", "12px sans-serif").attr("fill", "#555") .text(`Largest connected component: ${largestSize} of ${activeNodes.length}`); invalidation.then(() => sim.stop()); return html`

${svg.node()}

Solid = meetings; dashed = phone calls. ${removal !== "nobody" ? `Removed: the 7 ${removal}. ` : ""} ● Bosses ● Executives ● Others, largest group ● Others, smaller groups

`; }46:T453,### What is wrong with Revision 3 * **Every click reruns the force simulation.** Each choice on the radio control redraws the network from a new random start, so every node moves and the reader cannot compare the same person before and after a removal. * **The comparison lives in a caption.** The numbers 135, 126 and 71 are the result the hypothesis predicts, yet they are printed in small text under the chart while position, the strongest channel, is spent on the layout. * **Light-gray fragments compete with the labeled people.** Removing the executives leaves dozens of small light-gray groups. Munzner's *select and highlight* works when one or two things are highlighted, and here the highlight is spread across every fragment. * **Dashed lines add a second edge style to a chart that is already dense.** The meeting and phone split is real information, but 42 pairs both met and spoke, and the drawing shows only one of the two styles for them. **Next:** move the removal result onto position: a line chart of the largest group's size against the number of people removed, with a random baseline.47:T1126,{ // Color: same Okabe-Ito hues: boss blue, executive vermillion const bossColor = "#0072B2", execColor = "#D55E00"; const width = 760, height = 420, margin = {top: 36, right: 30, bottom: 48, left: 52}; const plotW = width - margin.left - margin.right; const plotH = height - margin.top - margin.bottom; const rem = data.removal; // Executive removal: list of largest component sizes for k=0..7 const execData = rem.executive.map((size, k) => ({k, size, group: "executive"})); const bossData = rem.boss.map((size, k) => ({k, size, group: "boss"})); // Random: each entry is {k, p5, median, p95} const randData = rem.random.flatMap(r => [ {k: r.k, size: r.p5, group: "random-p5"}, {k: r.k, size: r.median, group: "random-median"}, {k: r.k, size: r.p95, group: "random-p95"} ]); const x = d3.scaleLinear().domain([0, 7]).range([0, plotW]); const y = d3.scaleLinear().domain([0, 144]).range([plotH, 0]); const svg = d3.create("svg").attr("width", width).attr("height", height) .attr("viewBox", [0, 0, width, height]).attr("style", "max-width: 100%; height: auto;"); const g = svg.append("g").attr("transform", `translate(${margin.left},${margin.top})`); // Y axis g.append("g").call(d3.axisLeft(y).ticks(8)) .selectAll("text").style("font", "11px sans-serif"); g.append("text").attr("transform", "rotate(-90)").attr("y", -40).attr("x", -plotH / 2) .attr("text-anchor", "middle").style("font", "12px sans-serif").text("Largest connected group"); // X axis g.append("g").attr("transform", `translate(0,${plotH})`).call(d3.axisBottom(x).ticks(8)) .selectAll("text").style("font", "11px sans-serif"); g.append("text").attr("x", plotW / 2).attr("y", 36) .attr("text-anchor", "middle").style("font", "12px sans-serif").text("People removed (highest betweenness first)"); // D3 customization: random band (p5 to p95) as a light gray area g.append("path") .datum(randData.filter(d => d.group === "random-p95")) .attr("fill", "#E8E8E8").attr("stroke", "none") .attr("d", d3.area() .x(d => x(d.k)) .y0(d => { const match = randData.find(r => r.k === d.k && r.group === "random-p5"); return y(match ? match.size : 144); }) .y1(d => y(d.size)) .curve(d3.curveMonotoneX) ); // Direct line labels instead of a legend // Executive line g.append("path").datum(execData) .attr("fill", "none").attr("stroke", execColor).attr("stroke-width", 2) .attr("d", d3.line().x(d => x(d.k)).y(d => y(d.size)).curve(d3.curveMonotoneX)); // Boss line g.append("path").datum(bossData) .attr("fill", "none").attr("stroke", bossColor).attr("stroke-width", 2) .attr("d", d3.line().x(d => x(d.k)).y(d => y(d.size)).curve(d3.curveMonotoneX)); // Median line g.append("path").datum(randData.filter(d => d.group === "random-median")) .attr("fill", "none").attr("stroke", "#999").attr("stroke-width", 1.5).attr("stroke-dasharray", "4,3") .attr("d", d3.line().x(d => x(d.k)).y(d => y(d.size)).curve(d3.curveMonotoneX)); // Data points execData.forEach(d => { g.append("circle").attr("cx", x(d.k)).attr("cy", y(d.size)).attr("r", 4).attr("fill", execColor); }); bossData.forEach(d => { g.append("circle").attr("cx", x(d.k)).attr("cy", y(d.size)).attr("r", 4).attr("fill", bossColor); }); // Direct labels at the right end of each line const lastExec = execData[execData.length - 1]; const lastBoss = bossData[bossData.length - 1]; g.append("text").attr("x", x(lastExec.k) + 6).attr("y", y(lastExec.size) + 4) .style("font", "11px sans-serif").attr("fill", execColor).attr("font-weight", 600) .text(`Executive drop: 135→${lastExec.size}`); g.append("text").attr("x", x(lastBoss.k) + 6).attr("y", y(lastBoss.size) + 4) .style("font", "11px sans-serif").attr("fill", bossColor).attr("font-weight", 600) .text(`Boss drop: 135→${lastBoss.size}`); g.append("text").attr("x", x(7) + 6).attr("y", y(128) + 4) .style("font", "11px sans-serif").attr("fill", "#999").attr("font-weight", 600) .text(`Random median: 135→128`); // Title stating the finding svg.append("text").attr("x", width / 2).attr("y", 18).attr("text-anchor", "middle") .style("font", "bold 14px sans-serif") .text("Removing 7 executives breaks the network far more than removing 7 bosses"); return svg.node(); }48:T580,### What is wrong with Revision 4 * **The middle points depend on an ordering the hypothesis does not mention.** At k = 7 the chart compares roles: all 7 executives against all 7 bosses. At k = 1 to 6 it compares whichever executives and bosses rank highest in betweenness, and a different order would draw a different curve between the same endpoints. * **The random band hides how extreme the executive result is.** At k = 7 the band runs from 117 to 130. The executive point, 71, sits 46 below the bottom of the band, but nothing on the chart says it is outside the range of 500 draws. * **The curves are smoothed between whole numbers.** `curveMonotoneX` draws a smooth line through k = 0, 1, 2 and so on, as if 2.5 people could be removed. Tufte's *graphical integrity* asks that the line show only the values that exist. * **The line labels run off the right edge.** The right margin is 30 px, so "Executive drop: 135→71" is cut off, and the boss and random-median labels at 126 and 128 print on top of each other. * **The x-axis title sits at the top of the plot,** on top of the gray band, instead of under the axis. * **The network itself is gone.** The chart shows that the network breaks apart, not where it breaks or what the pieces look like. **Next:** draw the network three times from one fixed layout, intact, without bosses, and without executives, so the pieces can be seen side by side.49:T122a,{ // Color: same Okabe-Ito hues for consistency const bossColor = "#0072B2", execColor = "#D55E00", otherColor = "#DDD"; const color = d => d.group === "boss" ? bossColor : d.group === "executive" ? execColor : otherColor; // D3 customization: run a single layout and reuse positions const width = 400, height = 320; const allNodes = data.nodes.map(d => ({...d})); const allLinks = data.links.map(d => ({...d})); // d3.forceLink mutates link.source/target from id strings to node objects; // use this helper to look up nodes either way function linkSourceId(l) { return typeof l.source === "object" ? l.source.id : l.source; } function linkTargetId(l) { return typeof l.target === "object" ? l.target.id : l.target; } const sim = d3.forceSimulation(allNodes) .force("link", d3.forceLink(allLinks).id(d => d.id).strength(0.05)) .force("charge", d3.forceManyBody().strength(-15)) .force("center", d3.forceCenter(0, 0)) .stop(); sim.tick(300); const panels = [ { label: "Full network", nodes: allNodes, links: allLinks }, { label: "Without bosses", nodes: allNodes.filter(n => n.group !== "boss"), links: allLinks.filter(l => { const sid = linkSourceId(l), tid = linkTargetId(l); return allNodes.find(n => n.id === sid && n.group !== "boss") && allNodes.find(n => n.id === tid && n.group !== "boss"); }) }, { label: "Without executives", nodes: allNodes.filter(n => n.group !== "executive"), links: allLinks.filter(l => { const sid = linkSourceId(l), tid = linkTargetId(l); return allNodes.find(n => n.id === sid && n.group !== "executive") && allNodes.find(n => n.id === tid && n.group !== "executive"); }) } ]; const gridW = width * 3 + 40, gridH = height + 50; const svg = d3.create("svg").attr("width", gridW).attr("height", gridH) .attr("viewBox", [-gridW / 2, -10, gridW, gridH]).attr("style", "max-width: 100%; height: auto;"); // D3 customization: compute and label component sizes per panel for (let i = 0; i < panels.length; i++) { const p = panels[i]; const cx = -gridW / 2 + width / 2 + i * (width + 20); const cy = height / 2; const g = svg.append("g").attr("transform", `translate(${cx},${cy})`); // Title + component size g.append("text").attr("y", -height / 2 + 16).attr("text-anchor", "middle") .style("font", "12px sans-serif").attr("font-weight", 600) .text(p.label); // Compute largest component const adj = new Map(); p.nodes.forEach(n => adj.set(n.id, [])); p.links.forEach(l => { const sid = linkSourceId(l), tid = linkTargetId(l); adj.get(sid).push(tid); adj.get(tid).push(sid); }); const visited = new Set(); let largestSize = 0; for (const n of p.nodes) { if (visited.has(n.id)) continue; const comp = []; const stack = [n.id]; while (stack.length) { const cur = stack.pop(); if (visited.has(cur)) continue; visited.add(cur); comp.push(cur); for (const nb of adj.get(cur)) { if (!visited.has(nb)) stack.push(nb); } } if (comp.length > largestSize) largestSize = comp.length; } g.append("text").attr("y", -height / 2 + 30).attr("text-anchor", "middle") .style("font", "11px sans-serif").attr("fill", "#555") .text(`Largest component: ${largestSize} of ${p.nodes.length}`); // Edges g.append("g") .selectAll("line").data(p.links).join("line") .attr("x1", d => d.source.x).attr("y1", d => d.source.y) .attr("x2", d => d.target.x).attr("y2", d => d.target.y) .attr("stroke", "#999").attr("stroke-opacity", 0.3).attr("stroke-width", 0.5); // Nodes const r = d => Math.sqrt(d.betweenness) * 10 + 2; g.append("g") .selectAll("circle").data(p.nodes).join("circle") .attr("r", r).attr("stroke", "#fff").attr("stroke-width", 0.8) .attr("fill", d => color(d)) .attr("cx", d => d.x).attr("cy", d => d.y); // Labels on bosses and executives const labeled = p.nodes.filter(d => d.group === "boss" || d.group === "executive"); const lg = g.append("g").style("pointer-events", "none"); labeled.forEach(d => { lg.append("text").attr("x", d.x + r(d) + 2).attr("y", d.y + 3) .style("font", "9px sans-serif").attr("fill", color(d)).attr("font-weight", 600) .text(d.id); }); } // Source line svg.append("text").attr("x", 0).attr("y", height / 2 + 24).attr("text-anchor", "middle") .style("font", "10px sans-serif").attr("fill", "#888") .text("Single layout run (300 ticks); positions shared across panels. Cavallaro et al. (2020)."); return svg.node(); }4a:T40c,## Revision 6. The final views The views at the top of this notebook are Revision 6. View 1 keeps Revision 3's removal control but runs a live force simulation on node objects that persist between choices: a removal takes people out without resetting anyone, the rest settles, and the pieces cut off from the main group drift away. The title, instructions and color key are drawn in the SVG, the grays are lighter than the 14 colored people (Tufte's *layering and separation*), names appear on hover instead of covering the drawing, and people can be dragged. View 2 has straight lines between whole numbers, line labels that fit, the x-axis title under the axis, a labeled random band, a marked 46-person gap at k = 7, and a hover readout of every value at each step. View 3 starts each panel from the shared layout and lets it settle without the removed people, which answers Revision 5's complaint that a layout computed with everyone present makes cut-off people look connected. Hovering a person outlines them in all three panels.4b:[{"id":"c799b9d499ae85e0872adc40a9250c373d7df0082dbc0101630f84a78450b0c700a79fd55f3a642035857e28d78416971d1142631ca74a785af0069d5656bdfb","href":"https://static.observableusercontent.com/files/c799b9d499ae85e0872adc40a9250c373d7df0082dbc0101630f84a78450b0c700a79fd55f3a642035857e28d78416971d1142631ca74a785af0069d5656bdfb","name":"montagna.json","type":"application/json","lastModified":1793485272975,"size":47607},{"id":"c127dbb5ed63d79144d52e585293fd56aa502661f5a8ad6f628d2dd37abfba951f77933d8c3a86433bfb517e53d3064e66dc1d642300c719c6964e052e7cfdb7","href":"https://static.observableusercontent.com/files/c127dbb5ed63d79144d52e585293fd56aa502661f5a8ad6f628d2dd37abfba951f77933d8c3a86433bfb517e53d3064e66dc1d642300c719c6964e052e7cfdb7","name":"view1-protanopia.png","type":"image/png","lastModified":1793491689775,"size":125171},{"id":"4d8ecba3a26679e3a4da425fd2881ca226f0b47fad36e9586e91a7b10a392e5a2ba3fda779c7bc7e2e4cd70d2bba426783005c73ae24d4acc7f665d7e34e6640","href":"https://static.observableusercontent.com/files/4d8ecba3a26679e3a4da425fd2881ca226f0b47fad36e9586e91a7b10a392e5a2ba3fda779c7bc7e2e4cd70d2bba426783005c73ae24d4acc7f665d7e34e6640","name":"view2-protanopia.png","type":"image/png","lastModified":1793491690844,"size":35680},{"id":"82c08069a16896b782243b95456db8ad0c4f60f833bc60b1930b7ef402c10182172cd17beb28016ef0ce35bab4e3cf30e4cde3cfbf0debd887ba1a8c82c3bfd2","href":"https://static.observableusercontent.com/files/82c08069a16896b782243b95456db8ad0c4f60f833bc60b1930b7ef402c10182172cd17beb28016ef0ce35bab4e3cf30e4cde3cfbf0debd887ba1a8c82c3bfd2","name":"view3-protanopia.png","type":"image/png","lastModified":1793491691921,"size":85206}] 38:{"id":"6204e301b514be00","slug":"the-sicilian-mafia-in-operation-montagna-who-held-the-network-together","title":"The Sicilian Mafia in Operation Montagna: Who Held the Network Together?","thumbnail":"8ac7e7a33d2c89f03b8cf85640ee27c57830bf70ccb80cec7676bd01d30b7060","access_level":"public","create_time":"$D2026-10-31T23:08:10.626Z","update_time":"$D2026-11-01T01:05:18.056Z","view_time":null,"first_public_time":"$D2026-11-01T00:19:34.092Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"dff9b5e6e979adb0","login":"dlw272","name":"Dusty Wolfe Synek","avatar_url":null,"tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":258,"publish_version":258,"role":null,"authored":false,"authors":[{"type":"individual","id":"318cf45c19986f2e","login":"dlw272","name":"Dusty Wolfe Synek","avatar_url":null,"tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"dff9b5e6e979adb0","login":"dlw272","name":"Dusty Wolfe Synek","avatar_url":null,"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 Sicilian Mafia in Operation Montagna: Who Held the Network Together?","cells":[{"id":3,"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":"---\n# Final views","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"## View 1. Who holds the network together?\nEach dot is one of the 144 people in the court order, and a line joins two people who met or spoke on the phone. Blue dots are the 7 bosses and vermillion dots the 7 executives; dot size shows betweenness, how often a person sits on the shortest path between two others. Choose who to remove with the control above the chart. The network then settles without them, and anyone cut off from the main group turns light gray and drifts away. Drag a person to pull on their ties, or hover to see who they are.\n\n**What this shows:** removing the 7 bosses leaves the gray mass almost whole, 126 of 137 people. Removing the 7 executives leaves 71 in the main group, and the other 66 turn light gray and break into small pieces. Five of the 7 bosses end up outside the main group: without their executives, they no longer reach it.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"// Interactive: View 1's removal control, bound with viewof\nviewof removalFinal = Inputs.radio([\"nobody\", \"bosses\", \"executives\"], {label: \"Remove\", value: \"nobody\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"$3d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"## View 2. How fast does the network fall apart?\nThe x axis counts people removed one at a time, highest betweenness first, and the y axis is the size of the largest connected group, starting at 0. The gray band shows where 90% of 500 random 7-person removals land. Hover the chart to read every value at each step.\n\n**What this shows:** the boss line stays at the edge of the random band or inside it at every step. The executive line leaves the band with the first executive and ends 46 people below its 5th percentile. The middle points depend on removing the highest-betweenness person first; the end points at k = 7 do not, since all 7 are gone.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"$3e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"## View 3. The same network three ways\nThree small multiples: everyone, without the 7 bosses, and without the 7 executives. Each panel starts from the same positions and settles without the removed people, so pieces that lose their link to the main group move apart. Mid gray marks the largest connected group and light gray the people cut off from it. Hover a person to find them in all three panels.\n\n**What this shows:** without the bosses, nearly everyone stays in the main group (126 of 137). Without the executives, 66 people turn light gray and 71 remain connected.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"$3f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"$40","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"## Interactive components\nEach interaction has a comment in the code that starts with `// Interactive:`.\n* **View 1, removal control:** choose nobody, the 7 bosses or the 7 executives. The network settles without them, and the title gives the size of the largest connected group.\n* **View 1, drag and hover:** drag any person to pull on their ties. Hover to see their ID, role and number of ties, with their ties darkened and the rest dimmed (Munzner's *select and highlight*).\n* **View 2, hover readout:** move the pointer across the chart to read the executive, boss and random values at each step.\n* **View 3, linked highlight:** hover a person in any panel to outline them in all three panels.\n* **Revision 3** keeps its own removal control, so the revision can be compared with View 1.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"$41","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"// Color: screenshots of the final views under simulated protanopia\nprotanopiaImages = {\n const shots = [\n [\"View 1\", FileAttachment(\"view1-protanopia.png\")],\n [\"View 2\", FileAttachment(\"view2-protanopia.png\")],\n [\"View 3\", FileAttachment(\"view3-protanopia.png\")]\n ];\n return html`

\n ${await Promise.all(shots.map(async ([name, file]) => html`

`))}\n

`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"$42","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"---\n## Exploration and the Visual Editing Process\nSix revisions led to the views above. Each one is followed by what was wrong with it and what the next one changes.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"## Revision 1: D3's force-directed graph example\n\nThe starting point is the [force-directed graph](https://observablehq.com/@d3/force-directed-graph/2) from the D3 gallery, with the Montagna data dropped in and nothing else changed. Color is the example's `schemeCategory10`, keyed on our boss, executive and other groups.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"$43","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"### What is wrong with Revision 1\n* **No question is asked of the picture.** The hypothesis is about what happens when people are *removed*, and nothing on the chart shows removal, ties that would break, or the size of what is left.\n* **Spatial position, Munzner's most effective channel, is spent on a physics simulation.** Where a node lands means only that springs pulled it there, and each reload moves it.\n* **Hue is arbitrary.** `schemeCategory10` gives blue, orange and green to boss, executive and other with no key, and \"other\" (130 of 144 people) takes a loud hue, so Tufte's *layering and separation* is inverted: the background is the loudest layer.\n* **Every node is the same size,** so the executives who sit on most shortest paths look the same as a lawyer seen once.\n* **No title, legend, or source,** and the tooltip shows only an id like \"N37\".\n\n**Next:** give the background a quiet gray, mark bosses and executives with two distinct hues and a legend, and size each node by betweenness.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"## Revision 2: Two hues, quiet gray, betweenness sizing\n\nWhat changed: `schemeCategory10` is gone. Bosses get Okabe-Ito blue (`#0072B2`), executives get vermillion (`#D55E00`), and the 130 other people get light gray (`#CCC`), so the 14 people the hypothesis is about are the only colored marks (Tufte's *layering and separation*). Node radius follows the square root of betweenness, so area grows with the share of shortest paths a person sits on. The title, source line and legend are drawn inside the SVG, and the tooltip gives role, degree and betweenness rank.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"$44","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"### What is wrong with Revision 2\n* **327 ties still cross each other hundreds of times.** Tufte's *data density* is high, but the eye cannot follow a single tie from one person to another.\n* **Position still means nothing.** Munzner ranks spatial position as the most effective channel, and the force layout spends it on spring physics that change on every reload.\n* **Size separates the top of the scale only.** The executives ranked 1, 3, 4 and 5 stand out, but most of the 130 gray nodes have betweenness near zero and draw at about the same 3 px radius.\n* **Nothing shows removal.** The hypothesis is about taking 7 people out, and this chart only shows the network with everyone in it.\n\n**Next:** thin and lighten the edges, split meetings from phone calls, label the 14 bosses and executives, and let the reader remove the bosses or the executives.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"## Revision 3: Lighter ties and a removal control\n\nWhat changed: edges are thinner and lighter. Meetings are solid lines and phone calls are dashed. Bosses and executives get direct labels in place of a tooltip lookup. A radio control (Remove: nobody, the 7 bosses, the 7 executives) removes those people and their ties and shades the connected groups that remain: the largest dark, the rest light. A caption prints the size of the largest group, computed in the cell: 135 of 144, 126 of 137, or 71 of 137.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"// Interactive: Inputs.radio for removal selection\nviewof removal = Inputs.radio([\"nobody\", \"bosses\", \"executives\"], {label: \"Remove\", value: \"nobody\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"$45","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"$46","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"## Revision 4: Removal curve\n\nWhat changed: the x axis is the number of people removed (0 to 7, highest betweenness first within each group) and the y axis is the size of the largest connected group, starting at 0. The executive line is vermillion and the boss line blue, the hues from Revision 2. The gray band runs from the 5th to the 95th percentile of 500 random draws of k people, with the median as a dashed line. Line labels sit at the right end of each line in place of a legend, and the title states the finding.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"$47","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"$48","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"## Revision 5: Small multiples with a fixed layout\n\nWhat changed: Tufte's *small multiples*, the same small chart repeated with one thing changed. Three D3 panels show the full network, the network without bosses, and the network without executives. A single force simulation is stopped and run for 300 ticks once, and all three panels reuse its positions, so a person sits in the same spot in every panel. Each panel title gives the size of its largest connected group. Colors match Revisions 2 to 4.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"$49","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"### What is wrong with Revision 5\n* **The shared layout was computed with everyone present.** Without the executives, people who were pulled together through them stay close on the page even though no tie now joins them, so nearness overstates how connected they still are.\n* **Each panel is 400 by 320 pixels.** At that size the 327 ties of the full network form the same tangle as Revision 1, three times over.\n* **The layout runs past the panel edges.** Nodes N3 and N42 land outside their 400-pixel panels, so their labels are cut off.\n* **The panels show the result but not the cause.** The titles give 135, 126 and 71, but the ties that ran through the executives are simply gone; nothing marks which ones they were.\n\n**Next:** choose the final views: the removal network with its control, the removal curve, and the small multiples, followed by the color, accessibility, D3 and conclusion sections.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"$4a","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"---\n# Appendix: data and helper cells\nThe data cell and the helpers the final views share.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"data = FileAttachment(\"montagna.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"// D3 customization: one force layout for the whole network, run once and shared by Views 1 and 3\nlayout = {\n const nodes = data.nodes.map(d => ({id: d.id}));\n const links = data.links.map(d => ({source: d.source, target: d.target}));\n d3.forceSimulation(nodes)\n .force(\"link\", d3.forceLink(links).id(d => d.id).strength(0.05))\n .force(\"charge\", d3.forceManyBody().strength(-15))\n .force(\"center\", d3.forceCenter(0, 0))\n .stop()\n .tick(300);\n // positions scaled to the unit square; each view fits them to its own size\n const sx = d3.scaleLinear(d3.extent(nodes, d => d.x), [0, 1]);\n const sy = d3.scaleLinear(d3.extent(nodes, d => d.y), [0, 1]);\n return new Map(nodes.map(d => [d.id, [sx(d.x), sy(d.y)]]));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"// D3 customization: the connected groups left after removing a set of people, found by depth-first search\ngroupsWithout = removed => {\n const keep = data.nodes.filter(n => !removed.has(n.id)).map(n => n.id);\n const adj = new Map(keep.map(id => [id, []]));\n for (const l of data.links) {\n if (adj.has(l.source) && adj.has(l.target)) { adj.get(l.source).push(l.target); adj.get(l.target).push(l.source); }\n }\n const groupOf = new Map(), sizes = [];\n for (const start of keep) {\n if (groupOf.has(start)) continue;\n const stack = [start];\n groupOf.set(start, sizes.length);\n let size = 0;\n while (stack.length) {\n const cur = stack.pop();\n size++;\n for (const next of adj.get(cur)) if (!groupOf.has(next)) { groupOf.set(next, sizes.length); stack.push(next); }\n }\n sizes.push(size);\n }\n const largest = sizes.indexOf(d3.max(sizes));\n return {inLargest: id => groupOf.get(id) === largest, largestSize: sizes[largest], people: keep.length};\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"// D3 customization: View 1's node objects live here, outside the view cell, so positions survive a change of the removal control\nliveNodes = new Map(data.nodes.map(d => [d.id, {...d}]))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4b","stdlib":"2"}} 33:null