43:["$","title",null,{"children":"Who Holds the Dolphin Community Together? | Zlake | Observable"}] 4b:Tb0b,// Degree vs. Betweenness V2 { // Sets of the top-3 ids for each strategy, the same dolphins the sweep removes at k = 3. const topB = new Set(rankings.Betweenness.slice(0, 3)); const topD = new Set(rankings.Degree.slice(0, 3)); // Label each dolphin, in priority order. This label drives the dot color. const group = d => topB.has(d.id) && topD.has(d.id) ? "Top 3 in both" : topB.has(d.id) ? "Top 3 betweenness (bridges)" : topD.has(d.id) ? "Top 3 degree (popular)" : "Everyone else"; const data = dolphins.map(d => ({...d, group: group(d)})); // add the label to each row const highlighted = data.filter(d => d.group !== "Everyone else"); // drawn big and on top const others = data.filter(d => d.group === "Everyone else"); // drawn small and faint // Tooltip styling: dark box with a light border to match the dark chart. // (Before this, it was pale text on a white box and unreadable.) const tipStyle = {fill: "#0b1d2e", stroke: "#8fb8cc"}; const tipText = d => `${d.name}\nDegree: ${d.degree}\nBetweenness: ${d.betweenness.toFixed(1)}`; display(Plot.plot({ title: "Popular dolphins vs. bridge dolphins", subtitle: "Dots far above the dashed trend line sit on more shortest paths than their number of friends predicts", width: 800, height: 480, marginLeft: 60, // Dark "card" look, and light default text color for readability. style: {background: "#0b1d2e", color: "#e6f1f7", padding: "12px", borderRadius: "12px"}, x: {label: "Degree (number of associations) →", grid: true}, y: {label: "↑ Betweenness centrality", grid: true}, // Colors match the rest of the project: red = bridges, blue = popular. color: { legend: true, domain: ["Top 3 betweenness (bridges)", "Top 3 degree (popular)", "Top 3 in both", "Everyone else"], range: ["#e15759", "#4e79a7", "#b07aa1", "#5f7f93"] }, marks: [ // marks are drawn in order, so later ones sit on top // Best-fit line of betweenness vs. degree. Dolphins ABOVE it are "bridges": // more shortest paths than their connection count would predict. Plot.linearRegressionY(data, {x: "degree", y: "betweenness", stroke: "#8fb8cc", strokeDasharray: "4,3", ci: 0}), // Background dots: small, semi-transparent. Plot.dot(others, {x: "degree", y: "betweenness", r: 4, fill: "group", fillOpacity: 0.6, tip: tipStyle, title: tipText}), // Highlighted dots: bigger, with a white outline. Plot.dot(highlighted, {x: "degree", y: "betweenness", r: 8, fill: "group", stroke: "white", strokeWidth: 1.5, tip: tipStyle, title: tipText}), // Name labels above the highlighted dots only. Plot.text(highlighted, {x: "degree", y: "betweenness", text: "name", dy: -14, fill: "white", fontWeight: "bold"}) ] })); }4c:T4d0,// Defining the graph // GML is a graph file format that D3 can't read directly, so we extract the // data with regular expressions ("regex"). // The (() => { ... })() wrapper is an "immediately invoked function": it lets // us run several statements and return one finished object. const graph = (() => { // Find every block shaped like: node [ id 0 label "Beak" ] // \s* = any whitespace (spaces/newlines) // (\d+) = capture group: one or more digits (the id) // "([^"]+)" = capture group: any text between quotes (the name) // /g = find ALL matches, not just the first // matchAll returns match objects; m[1] is the first capture group, m[2] the second. // The "+" in +m[1] converts the id from a string to a number. const nodes = [...raw.matchAll(/node\s*\[\s*id\s+(\d+)\s+label\s+"([^"]+)"\s*\]/g)] .map(m => ({id: +m[1], name: m[2]})); // -> {id: 0, name: "Beak"} // Same idea for edges: edge [ source 8 target 3 ] const links = [...raw.matchAll(/edge\s*\[\s*source\s+(\d+)\s+target\s+(\d+)\s*\]/g)] .map(m => ({source: +m[1], target: +m[2]})); // -> {source: 8, target: 3} // {nodes, links} is the standard shape D3 expects for network data. return {nodes, links}; })();4d:Ta9d,// Betweenness Calculations V1 // BETWEENNESS CENTRALITY: for every pair of dolphins, look at all the shortest // paths between them. A dolphin's betweenness is the share of those paths that // pass THROUGH it. High betweenness = a bridge/broker between groups. // // This is Brandes' algorithm, the standard efficient way to compute it. // For each "source" dolphin s, it does a search outward, then walks back in. const betweenness = (() => { const ids = graph.nodes.map(n => n.id); const CB = new Map(ids.map(i => [i, 0])); // running betweenness totals for (const s of ids) { // treat every dolphin as the source once const stack = []; // visit order (used to walk BACKWARD later) const pred = new Map(ids.map(i => [i, []])); // predecessors on shortest paths const sigma = new Map(ids.map(i => [i, 0])); // number of shortest paths from s to each dolphin const dist = new Map(ids.map(i => [i, -1])); // hops from s (-1 = not reached yet) sigma.set(s, 1); dist.set(s, 0); // the source reaches itself 1 way, 0 hops const queue = [s]; // STEP 1: Breadth-first search outward from s. for (let qi = 0; qi < queue.length; qi++) { const v = queue[qi]; stack.push(v); for (const w of adj.get(v)) { // First time we see w? Record its distance and enqueue it. if (dist.get(w) < 0) { dist.set(w, dist.get(v) + 1); queue.push(w); } // Is v on a shortest path to w (exactly one hop closer)? // If so, all of v's shortest paths extend to w, and v is a predecessor of w. if (dist.get(w) === dist.get(v) + 1) { sigma.set(w, sigma.get(w) + sigma.get(v)); pred.get(w).push(v); } } } // STEP 2: Walk back from the farthest dolphin to the nearest. // delta = how much "credit" a dolphin earns for lying on shortest paths // to everything beyond it. const delta = new Map(ids.map(i => [i, 0])); while (stack.length) { const w = stack.pop(); for (const v of pred.get(w)) { // v gets a share of w's credit, proportional to how many of the // shortest paths to w run through v (sigma[v] / sigma[w]). delta.set(v, delta.get(v) + (sigma.get(v) / sigma.get(w)) * (1 + delta.get(w))); } // Add this round's credit to the total (the source itself earns nothing). if (w !== s) CB.set(w, CB.get(w) + delta.get(w)); } } // Each pair (A,B) was counted from both A's side and B's side, so halve everything. // This is RAW betweenness (not normalized to 0-1), so Gephi may report a scaled value. for (const [k, v] of CB) CB.set(k, v / 2); return CB; })();4e:T460,// Components Finder V1 // Given a list of removed dolphin ids, returns the groups of dolphins that are // still connected to each other. (A "connected component" = a group where you // can get from any member to any other by following edges.) function components(removedIds) { // Pretend removed dolphins were already visited, so the search never enters them. const seen = new Set(removedIds); const comps = []; for (const n of graph.nodes) { if (seen.has(n.id)) continue; // skip removed or already-grouped dolphins const comp = []; const stack = [n.id]; // depth-first search starting here seen.add(n.id); while (stack.length) { const v = stack.pop(); comp.push(v); // v belongs to the current group for (const w of adj.get(v)) { if (!seen.has(w)) { seen.add(w); stack.push(w); } // follow unvisited neighbors } } comps.push(comp); // one finished search = one component } // Largest first, so comps[0] is always the biggest group. return comps.sort((a, b) => b.length - a.length); }4f:T45a,// Fixed Network Layout V1 // Runs D3's force simulation ONCE and saves the final positions. // Keeping positions fixed is the key design choice: when dolphins are removed, // nothing else moves, so you can see exactly what split off. const layout = (() => { // forceSimulation MODIFIES the objects it's given, so we pass in copies. const nodes = graph.nodes.map(d => ({...d})); const links = graph.links.map(d => ({...d})); const sim = d3.forceSimulation(nodes) // Links act like springs pulling connected dolphins to ~30 units apart. .force("link", d3.forceLink(links).id(d => d.id).distance(30)) // Every node repels every other (negative = repel). Prevents overlap. .force("charge", d3.forceManyBody().strength(-150)) // A gentle pull toward (0,0) so the graph doesn't drift away. .force("center", d3.forceCenter(0, 0)) .stop(); // don't animate live... for (let i = 0; i < 400; i++) sim.tick(); // ...just run 400 steps instantly // Result: Map of dolphin id -> {x, y} return new Map(nodes.map(d => [d.id, {x: d.x, y: d.y}])); })();50:Ta4e,// // The Interactive Network V1 // // The main D3 graph // { // const removedSet = new Set(currentRemoved); // const compOf = new Map(); // currentComps.forEach((c, i) => c.forEach(id => compOf.set(id, i))); // const palette = ["#4e79a7", "#f28e2b", "#e15759", "#76b7b2", "#59a14f", // "#edc948", "#b07aa1", "#ff9da7", "#9c755f", "#bab0ac"]; // const color = id => palette[compOf.get(id) % palette.length]; // const xs = [...layout.values()].map(d => d.x), ys = [...layout.values()].map(d => d.y); // const pad = 30; // const x0 = d3.min(xs) - pad, y0 = d3.min(ys) - pad; // const w = d3.max(xs) - x0 + pad, h = d3.max(ys) - y0 + pad; // const r = d3.scaleSqrt().domain([0, d3.max(dolphins, d => d.degree)]).range([2.5, 10]); // const svg = d3.create("svg") // .attr("viewBox", [x0, y0, w, h]) // .attr("width", "100%") // .style("max-width", "800px") // .style("font", "6px sans-serif"); // const isGone = d => removedSet.has(d.source) || removedSet.has(d.target); // svg.append("g").selectAll("line").data(graph.links).join("line") // .attr("x1", d => layout.get(d.source).x).attr("y1", d => layout.get(d.source).y) // .attr("x2", d => layout.get(d.target).x).attr("y2", d => layout.get(d.target).y) // .attr("stroke", d => isGone(d) ? "#ddd" : "#999") // .attr("stroke-width", 0.6) // .attr("stroke-dasharray", d => isGone(d) ? "1.5,1.5" : null) // .attr("opacity", d => isGone(d) ? 0.5 : 0.7); // const node = svg.append("g").selectAll("circle").data(dolphins).join("circle") // .attr("cx", d => layout.get(d.id).x) // .attr("cy", d => layout.get(d.id).y) // .attr("r", d => r(d.degree)) // .attr("fill", d => removedSet.has(d.id) ? "white" : color(d.id)) // .attr("stroke", d => removedSet.has(d.id) ? "#333" : "white") // .attr("stroke-width", d => removedSet.has(d.id) ? 1 : 0.8) // .attr("stroke-dasharray", d => removedSet.has(d.id) ? "2,1.5" : null); // node.append("title").text(d => // `${d.name}\nDegree: ${d.degree}\nBetweenness: ${d.betweenness.toFixed(1)}`); // node.on("mouseover", (e, d) => { // node.attr("opacity", n => (n.id === d.id || adj.get(d.id).has(n.id)) ? 1 : 0.15); // }) // .on("mouseout", () => node.attr("opacity", 1)); // svg.append("g").selectAll("text").data(dolphins.filter(d => removedSet.has(d.id))).join("text") // .attr("x", d => layout.get(d.id).x) // .attr("y", d => layout.get(d.id).y - r(d.degree) - 2) // .attr("text-anchor", "middle") // .attr("font-weight", "bold") // .text(d => d.name); // display(svg.node()); // }51:Tbb4,// DolphinMode Shape Code V1 // Computes where each of the 62 nodes should go when "dolphin mode" is on. const dolphinShape = (() => { // A hand-drawn dolphin outline as [x, y] points, going around the body // (nose, back, tail fluke, belly, fin). Coordinates are arbitrary drawing units. const outline = [ [190,52],[176,47],[160,40],[148,28],[136,20],[115,15],[95,14],[86,12], [70,-8],[64,14],[45,24],[30,32],[18,38],[2,24],[10,40],[2,58],[18,46], [32,48],[50,56],[75,64],[100,68],[108,70],[98,92],[128,68],[145,60], [165,58],[180,56] ]; // STEP 1: Scale and move the outline so it fills the same area as the force layout. const xs = [...layout.values()].map(d => d.x), ys = [...layout.values()].map(d => d.y); const cx = (d3.min(xs) + d3.max(xs)) / 2, cy = (d3.min(ys) + d3.max(ys)) / 2; // center of the layout const scale = 0.9 * (d3.max(xs) - d3.min(xs)) / 190; // 190 = the outline's approximate width // place(): shift the outline's center (96,42) to the layout's center, then scale. const place = ([x, y]) => [cx + (x - 96) * scale, cy + (y - 42) * scale]; // STEP 2: Pick 62 evenly spaced points ALONG the outline (one slot per dolphin). const poly = [...outline, outline[0]]; // close the loop const seg = d3.pairs(poly).map(([a, b]) => Math.hypot(b[0] - a[0], b[1] - a[1])); // length of each segment const total = d3.sum(seg); // total perimeter const n = dolphins.length; const targets = d3.range(n).map(i => { let t = (i / n) * total, s = 0; // how far around the perimeter this slot sits while (t > seg[s]) { t -= seg[s]; s++; } // find which segment it falls in const f = t / seg[s], [a, b] = [poly[s], poly[s + 1]]; // f = fraction along that segment // linear interpolation between the segment's two endpoints return place([a[0] + (b[0] - a[0]) * f, a[1] + (b[1] - a[1]) * f]); }); // STEP 3: Assign each dolphin to a slot. Greedy: biggest hubs choose first, // each taking the nearest slot that's still free. So hubs move the least. // (Not mathematically optimal, but fast and good enough visually.) const free = new Set(d3.range(n)); const pos = new Map(); for (const d of [...dolphins].sort((a, b) => b.degree - a.degree)) { const p = layout.get(d.id); // where this dolphin is now let best = -1, bestDist = Infinity; for (const i of free) { const dist = Math.hypot(targets[i][0] - p.x, targets[i][1] - p.y); if (dist < bestDist) { bestDist = dist; best = i; } } free.delete(best); // slot is taken pos.set(d.id, {x: targets[best][0], y: targets[best][1]}); } // A smooth closed curve through the outline, drawn faintly behind the nodes. const path = d3.line().curve(d3.curveCardinalClosed.tension(0.5))(outline.map(place)); return {pos, path}; // pos = id -> {x, y}; path = SVG outline string })();52:T1543,//Dolphin Mode Network Code V1 // This cell BUILDS the chart once. It doesn't depend on the controls, so it never // re-runs. The next cell only changes attributes on these existing elements. // This split is what I think lets D3 animate: transitions need elements that persist. const network = (() => { // Compute the bounds of the layout so the SVG fits it. const xs = [...layout.values()].map(d => d.x), ys = [...layout.values()].map(d => d.y); const pad = 30; const x0 = d3.min(xs) - pad, y0 = d3.min(ys) - pad; const w = d3.max(xs) - x0 + pad, h = d3.max(ys) - y0 + pad; // scaleSqrt maps degree -> radius so that circle AREA is proportional to degree // (more honest than mapping radius directly). Range 2.5-10 = min and max radius. const r = d3.scaleSqrt().domain([0, d3.max(dolphins, d => d.degree)]).range([2.5, 10]); // A small object that the hover handlers can read later. The update cell // writes the current removed set into it. (The handlers were created before // any controls changed, so they need a shared place to look up current state.) const state = {removedSet: new Set()}; // viewBox = the internal coordinate system; width 100% makes it scale responsively. const svg = d3.create("svg") .attr("viewBox", [x0, y0, w, h]) .attr("width", "100%") .style("max-width", "800px") .style("display", "block") .style("border-radius", "12px") .style("font", "6px sans-serif"); // holds reusable definitions: a gradient and a glow effect. const defs = svg.append("defs"); const grad = defs.append("radialGradient").attr("id", "ocean") .attr("cx", "50%").attr("cy", "40%").attr("r", "75%"); grad.append("stop").attr("offset", "0%").attr("stop-color", "#1b4965"); // lighter center grad.append("stop").attr("offset", "100%").attr("stop-color", "#0b1d2e"); // dark edges // Glow = blur a copy of the shape, then layer the sharp original on top. const glow = defs.append("filter").attr("id", "glow") .attr("x", "-50%").attr("y", "-50%").attr("width", "200%").attr("height", "200%"); // extra room so the blur isn't clipped glow.append("feGaussianBlur").attr("stdDeviation", 1.5).attr("result", "blur"); const merge = glow.append("feMerge"); merge.append("feMergeNode").attr("in", "blur"); merge.append("feMergeNode").attr("in", "SourceGraphic"); // LAYERS: SVG draws in the order elements are added, so later = on top. // Layer 1: ocean background svg.append("rect").attr("x", x0).attr("y", y0).attr("width", w).attr("height", h) .attr("fill", "url(#ocean)"); // Layer 2: faint dolphin silhouette (invisible until dolphin mode) const silhouette = svg.append("path") .attr("d", dolphinShape.path) .attr("fill", "#9fd3e6").attr("stroke", "#9fd3e6").attr("stroke-width", 0.8) .attr("opacity", 0); // Layer 3: edges. D3's core pattern: .data(array).join("line") creates one // per data item. Attributes written as d => ... get each item as `d`. const link = svg.append("g").selectAll("line").data(graph.links).join("line") .attr("x1", d => layout.get(d.source).x).attr("y1", d => layout.get(d.source).y) .attr("x2", d => layout.get(d.target).x).attr("y2", d => layout.get(d.target).y) .attr("stroke", "#cfe8f3").attr("stroke-width", 0.6).attr("opacity", 0.5); // Layer 4: nodes, one circle per dolphin, sized by degree. Color is set later. const node = svg.append("g").selectAll("circle").data(dolphins).join("circle") .attr("cx", d => layout.get(d.id).x).attr("cy", d => layout.get(d.id).y) .attr("r", d => r(d.degree)) .attr("fill", "#4e79a7") .attr("filter", "url(#glow)"); // Layer 5: name labels, hidden by default (opacity 0). They appear for removed // dolphins and on hover. pointer-events none = labels never block mouse hover. // paint-order "stroke" draws the dark outline BEHIND the white text for readability. const label = svg.append("g").selectAll("text").data(dolphins).join("text") .attr("x", d => layout.get(d.id).x) .attr("y", d => layout.get(d.id).y - r(d.degree) - 2) // just above the node .attr("text-anchor", "middle") .attr("font-weight", "bold") .attr("fill", "white") .attr("stroke", "#0b1d2e").attr("stroke-width", 1.2).attr("paint-order", "stroke") .attr("opacity", 0) .attr("pointer-events", "none") .text(d => d.name); // INTERACTION // Native browser tooltip (appears after hovering a moment). node.append("title").text(d => `${d.name}\nDegree: ${d.degree}\nBetweenness: ${d.betweenness.toFixed(1)}`); node.on("mouseover", (e, d) => { // Dim everyone except the hovered dolphin and its direct neighbors. node.attr("opacity", n => (n.id === d.id || adj.get(d.id).has(n.id)) ? 1 : 0.15); // Thicken only the hovered dolphin's edges. link.attr("stroke-width", l => (l.source === d.id || l.target === d.id) ? 1.6 : 0.6); // Show the hovered name (plus any removed dolphins' names). label.attr("opacity", n => (n.id === d.id || state.removedSet.has(n.id)) ? 1 : 0); }) .on("mouseout", () => { // Reset everything when the mouse leaves. node.attr("opacity", 1); link.attr("stroke-width", 0.6); label.attr("opacity", n => state.removedSet.has(n.id) ? 1 : 0); }); // Hand back the pieces so the update cell can change them later. return {el: svg.node(), link, node, label, silhouette, state, r}; })();53:Tafa,// Dolphin Mode Logic V1 // Re-runs every time strategy, k, or dolphinMode changes. // It doesn't rebuild anything. It only changes attributes on existing elements, // and .transition() makes those changes glide instead of snap. { const {link, node, label, silhouette, state, r} = network; // grab the elements const removedSet = new Set(currentRemoved); state.removedSet = removedSet; // let the hover handlers know what's removed now // Map each remaining dolphin to its component number (0 = largest group). const compOf = new Map(); currentComps.forEach((c, i) => c.forEach(id => compOf.set(id, i))); // Colors by component. Blue is always the largest group. % wraps around if // there are ever more than 10 components. const palette = ["#4e79a7", "#f28e2b", "#e15759", "#76b7b2", "#59a14f", "#edc948", "#b07aa1", "#ff9da7", "#9c755f", "#bab0ac"]; const color = id => palette[compOf.get(id) % palette.length]; // Where should nodes be? The dolphin shape or the normal force layout. const P = dolphinMode ? dolphinShape.pos : layout; // An edge is "gone" if either end was removed. const gone = d => removedSet.has(d.source) || removedSet.has(d.target); // One shared transition: 1.2 seconds, easing slowly at start and end. const t = d3.transition().duration(1200).ease(d3.easeCubicInOut); // EDGES: dashing is set immediately (can't be smoothly animated), and everything // after .transition(t) animates. Removed edges fade and turn gray. link.attr("stroke-dasharray", d => gone(d) ? "1.5,1.5" : null) .transition(t) .attr("x1", d => P.get(d.source).x).attr("y1", d => P.get(d.source).y) .attr("x2", d => P.get(d.target).x).attr("y2", d => P.get(d.target).y) .attr("stroke", d => gone(d) ? "#5c7a8c" : "#cfe8f3") .attr("opacity", d => gone(d) ? 0.25 : (dolphinMode ? 0.22 : 0.5)); // fainter in dolphin mode to avoid a hairball // NODES: removed dolphins become dark with a red dashed outline; the rest // take their component's color. cx/cy sliding is the dolphin-morph animation. node.attr("stroke-dasharray", d => removedSet.has(d.id) ? "2,1.5" : null) .transition(t) .attr("cx", d => P.get(d.id).x).attr("cy", d => P.get(d.id).y) .attr("fill", d => removedSet.has(d.id) ? "#0b1d2e" : color(d.id)) .attr("stroke", d => removedSet.has(d.id) ? "#ff6b6b" : "white") .attr("stroke-width", d => removedSet.has(d.id) ? 1.2 : 0.8); // LABELS: follow their nodes; visible only for removed dolphins. label.transition(t) .attr("x", d => P.get(d.id).x) .attr("y", d => P.get(d.id).y - r(d.degree) - 2) .attr("opacity", d => removedSet.has(d.id) ? 1 : 0); // Silhouette fades in for dolphin mode, out otherwise. silhouette.transition(t).attr("opacity", dolphinMode ? 0.12 : 0); }54:[{"id":"1f709c6357320c0dce10d3a7643c20af8ac1bccf1c30a67d680589dce31b4686d5661bc9a7f61a37c1273921bc3f485ee55cfdc89356d5c194da06950f588a01","href":"https://static.observableusercontent.com/files/1f709c6357320c0dce10d3a7643c20af8ac1bccf1c30a67d680589dce31b4686d5661bc9a7f61a37c1273921bc3f485ee55cfdc89356d5c194da06950f588a01","name":"dolphins.gml","type":"application/octet-stream","lastModified":1793648193711,"size":9518},{"id":"5d4700ba9f7c8da19ee50b90248b9cc4ca9cfcbe6b9f402f40935ff221b7ffc856c85589d7feb6625795d490e7d7486c0f21b4315804b9052696d5cd4fb1e2e2","href":"https://static.observableusercontent.com/files/5d4700ba9f7c8da19ee50b90248b9cc4ca9cfcbe6b9f402f40935ff221b7ffc856c85589d7feb6625795d490e7d7486c0f21b4315804b9052696d5cd4fb1e2e2","name":"image.png","type":"image/png","lastModified":1793750163097,"size":3225},{"id":"5d4700ba9f7c8da19ee50b90248b9cc4ca9cfcbe6b9f402f40935ff221b7ffc856c85589d7feb6625795d490e7d7486c0f21b4315804b9052696d5cd4fb1e2e2","href":"https://static.observableusercontent.com/files/5d4700ba9f7c8da19ee50b90248b9cc4ca9cfcbe6b9f402f40935ff221b7ffc856c85589d7feb6625795d490e7d7486c0f21b4315804b9052696d5cd4fb1e2e2","name":"Screenshot 2026-11-03 165555.png","type":"image/png","lastModified":1793750155447,"size":3225}] 47:{"id":"2ac767076cebcd74","slug":"who-holds-the-dolphin-community-together","title":"Who Holds the Dolphin Community Together?","thumbnail":"1f212981cbb5790f638659c47224f98aab0e6e0ed6c41aa15c18571dfab5fa17","access_level":"public","create_time":"$D2026-10-30T17:11:28.892Z","update_time":"$D2026-11-04T01:17:53.231Z","view_time":null,"first_public_time":"$D2026-11-03T21:55:34.886Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"978a14dc8674d2f5","login":"zlake","name":"Zlake","avatar_url":"https://avatars-next.observableusercontent.com/c7e3848a9fa3d09b667b35497ab442807bf8fb6856a6b71ad67fb1ea70f6f306","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":605,"publish_version":605,"role":null,"authored":false,"authors":[{"type":"individual","id":"dc1385623125e40c","login":"zlake","name":"Zlake","avatar_url":"https://avatars-next.observableusercontent.com/c7e3848a9fa3d09b667b35497ab442807bf8fb6856a6b71ad67fb1ea70f6f306","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"978a14dc8674d2f5","login":"zlake","name":"Zlake","avatar_url":"https://avatars-next.observableusercontent.com/c7e3848a9fa3d09b667b35497ab442807bf8fb6856a6b71ad67fb1ea70f6f306","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":"Who Holds the Dolphin Community Together?","cells":[{"id":1,"value":"# Who Holds the Dolphin Community Together?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"# Intro","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"For this project, we were provided with an optional collection of network datasets from Mark Newman's data page (https://websites.umich.edu/~mejn/netdata/). One of them is a social network of 62 bottlenose dolphins living in the Doubtful Sound, New Zealand, collected by Lusseau et al. (2003). Each dolphin is a node, and an edge means two dolphins were seen together more often than chance would predict. The network has 159 edges in total.\n\nI chose this dataset because it is small enough to read clearly, and because it has real structure: a few dolphins seem to connect otherwise separate groups. That raised a question. Is the most important dolphin the one with the most friends, or the one that links different groups together?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"# Hypothesis","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"Hypothesis: Removing the top ten dolphins by betweenness centrality will fragment the network more than removing the top ten dolphins by degree.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"Null hypothesis: Removing the top ten by betweenness fragments the network the same amount or less than removing the top ten by degree.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"I measure fragmentation two ways: the number of connected components left over, and the size of the largest remaining component. Isolated dolphins whose only neighbors were removed count as their own component. This project is mainly an exploration of the network, with this hypothesis as a guide.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"# Testing the Hypothesis","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"The Data:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"The table below lists every dolphin with four columns:\n1. id: an index assigned to each dolphin in the file\n2. name: the name researchers gave the dolphin\n3. degree: the number of other dolphins it is connected to\n4. betweenness: how often it sits on the shortest paths between other dolphins (explained below)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"// More Dolphins Table Code V1\n// Shows the data as an interactive table, sorted so the highest-betweenness\n// dolphins appear first. Click any column header to re-sort.\nInputs.table(dolphins, {sort: \"betweenness\", reverse: true})","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"Looking at the table, the dolphins with the highest betweenness are not always the ones with the highest degree, and the reverse is also true.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"# What Betweenness Means","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"Degree only counts a dolphin's own connections. Betweenness measures something different: its position in the network. For a dolphin v, betweenness adds up, over every pair of other dolphins s and t, the fraction of shortest paths between s and t that pass through v:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"Below is the formula for betweenness centrality according to Brandes' algorithm:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"FileAttachment(\"Screenshot 2026-11-03 165555.png\").image()","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"A dolphin with high betweenness acts like a bridge, because many of the quickest routes between other dolphins run through it. Computing this directly for every pair is slow, so I used Brandes’ algorithm, which does a breadth-first search from each dolphin and then works backwards to assign each dolphin its share of the shortest paths. I calculated betweenness in the notebook and the values are raw (not normalized), so they may differ from Gephi’s by a scaling factor.\n\nOne detail worth stating: both rankings are computed once on the intact network. They are not recalculated after each removal.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"// Hypothesis Test Graph 1: V1\n// Observable Plot (a high-level charting library) draws this chart.\n// Lower line = that strategy shatters the network's biggest group more effectively.\nPlot.plot({\n title: \"Size of the largest remaining group\",\n x: {label: \"Dolphins removed (k)\", ticks: 10},\n // domain fixed at 0-62 so the y-axis always spans the full network size\n y: {label: \"Dolphins in largest component\", domain: [0, 62], grid: true},\n // Pins blue = Degree and red = Betweenness, so colors match every other chart.\n color: {legend: true, domain: [\"Degree\", \"Betweenness\"], range: [\"#4e79a7\", \"#e15759\"]},\n // One line per strategy: \"stroke: 'strategy'\" colors lines by that field.\n marks: [Plot.line(sweep, {x: \"k\", y: \"largest\", stroke: \"strategy\", marker: \"dot\"})]\n})","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"This chart shows how many dolphins are in the biggest connected group after removing the top k dolphins by each strategy. A lower line means the network has been broken up more. At k = 10, removing by betweenness leaves a largest group of 35 dolphins, while removing by degree leaves 45. Removing the bridge dolphins damages the network’s connectivity more than removing the popular ones.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"// Hypothesis Test Graph 2: V1\n// Same structure as chart 1, but plots the NUMBER of separate groups.\n// Higher line = more fragmentation. This is the metric the hypothesis names.\nPlot.plot({\n title: \"Number of connected components\",\n x: {label: \"Dolphins removed (k)\", ticks: 10},\n y: {label: \"Components\", grid: true},\n color: {legend: true, domain: [\"Degree\", \"Betweenness\"], range: [\"#4e79a7\", \"#e15759\"]},\n marks: [Plot.line(sweep, {x: \"k\", y: \"components\", stroke: \"strategy\", marker: \"dot\"})]\n})","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"This chart counts how many separate groups remain. The pattern is less clear-cut than the first chart. At small k, degree produces as many or more components, but from k >= 10 onward, betweenness overtakes it. At k = 10 the gap is small: 9 components for betweenness and 8 for degree. Part of the reason is that isolated dolphins count as components, which can inflate the count for either strategy. Because of that, I treat largest-component size as the more reliable measure, and the component count as supporting evidence that points the same way.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"Now the main visualization, built with D3","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"// Controls 1: V1\nconst strategy = view(Inputs.radio([\"Degree\", \"Betweenness\"], {label: \"Remove by\", value: \"Betweenness\"}));","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"// Controls 2: V1\nconst k = view(Inputs.range([0, 10], {label: \"Dolphins removed\", step: 1, value: 10}));","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"// Dolphin Mode: Turns the D3 Graph into a dolphin. AI was a massive help with this one.\nconst dolphinMode = view(Inputs.toggle({label: \"Dolphin mode 🐬\", value: false}));","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"network.el\n// code for this chart can be found below","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"// Live Summary V1\n// A text readout that updates with the controls.\n{\n // Look up each removed id's name. This works because each dolphin's id equals\n // its position in graph.nodes (ids run 0-61 in order).\n const names = currentRemoved.map(id => graph.nodes[id].name).join(\", \") || \"none\";\n display(html`

Removed (${strategy}): ${names}
\n Components: ${currentComps.length} | \n Largest component: ${currentComps[0].length} of ${62 - currentRemoved.length} remaining dolphins

`);\n // NOTE: 62 is hardcoded. For a different dataset, use dolphins.length instead.\n}","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"How to read this graph: node size shows degree, color shows which connected component a dolphin belongs to after removal (blue is the largest), and dashed red circles are the removed dolphins. The layout is computed once and kept fixed, so nothing moves when dolphins are removed. That makes it easy to see exactly what broke apart. Edges are shown faintly so the structure stays readable.\n\nWith betweenness removal at k = 10 (SN100, Beescratch, and SN9), the network splits into two clear clusters, and there are 9 components with a largest group of 35. With degree removal at k = 10 (Grin, SN4, and Topless), there are 8 components and the largest group has 45 dolphins. The bridge dolphins were holding the two halves of the network together.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"$4b","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"This scatter plot explains why the two strategies give different results. Each dot is a dolphin, and the dashed line is the overall trend between degree and betweenness. SN100, Beescratch, and SN9 sit far above the line even though they have only about 7 to 8 connections each. They matter because of where they sit, not because they are popular. Meanwhile, Grin and SN4 have the most connections but much lower betweenness, so removing them hurts the network less than their popularity would suggest. This supports the idea that being well connected and being a bridge are different roles.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"# Conclusion","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"The data supports my hypothesis. At k = 10, removing the top ten highest-betweenness dolphins left a largest group of 35 dolphins, compared with 45 after removing the top to highest-degree dolphins. The component counts were close (9 vs. 8), so the clearest evidence comes from the size of the largest group. Betweenness identifies the more critical dolphins, and SN100 has the highest betweenness of all, making it the single most important connector in this network.\n\nLimitations: this is one small network of 62 dolphins, so small differences could be due to chance, and I did not run a statistical test. Rankings were calculated once on the intact network rather than recalculated after each removal, which could change which dolphins a strategy picks. Counting isolated dolphins as components also affects the component totals.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"# Sources:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"Lusseau, D., Schneider, K., Boisseau, O. J., Haase, P., Slooten, E., and Dawson, S. M. (2003). The bottlenose dolphin community of Doubtful Sound features a large proportion of long-lasting associations. Behavioral Ecology and Sociobiology, 54, 396–405.\n\nNewman, M. Network data. https://websites.umich.edu/~mejn/netdata/\n\nBrandes, U. (2001). A faster algorithm for betweenness centrality. Journal of Mathematical Sociology, 25(2), 163–177.\n\nTools: Observable, D3, and Observable Plot. Claude AI assisted with some of the Observable code and the dolphin-mode layout.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"# Code & Revisions:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"Project V1: The Broken Mess","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"// The data\nconst raw = await FileAttachment(\"dolphins.gml\").text();","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"$4c","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"// Sanity Check\n// Confirms parsing worked. You should see 62 dolphins and 159 associations,\n// matching the published dataset. If these numbers are off, the regex failed.\ndisplay(`Parsed ${graph.nodes.length} dolphins and ${graph.links.length} associations.`);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"// Adjacency Map V1\n// Builds a lookup: dolphin id -> Set of its neighbors' ids.\n// Example: adj.get(8) might be Set {3, 20, 28, ...}\n// This is the most reused structure in the project:\n// degree = adj.get(id).size\n// betweenness and component-finding both walk through it.\nconst adj = (() => {\n // Start every dolphin with an empty Set of neighbors.\n const a = new Map(graph.nodes.map(n => [n.id, new Set()]));\n for (const l of graph.links) {\n // The network is UNDIRECTED, so each edge goes in both directions.\n a.get(l.source).add(l.target);\n a.get(l.target).add(l.source);\n }\n return a;\n})();","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"$4d","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"// Dolphins Table Code V1\n// Merges everything into one array of rows: {id, name, degree, betweenness}.\n// Almost every chart reads from this array.\n// DEGREE = number of neighbors = adj.get(id).size.\nconst dolphins = graph.nodes.map(n => ({\n ...n, // copy id and name\n degree: adj.get(n.id).size, // how many dolphins this one associates with\n betweenness: betweenness.get(n.id) // how many shortest paths run through it\n}));","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"// Rankings Finder V1\n// Two lists of dolphin ids, ordered from highest to lowest for each metric.\n// \"Remove the top k\" later becomes rankings[strategy].slice(0, k).\n// [...dolphins] makes a COPY first, because .sort() changes the array it's called on.\nconst rankings = {\n // The \"||\" is a tie-breaker: if two dolphins have equal degree, the one with\n // higher betweenness goes first. This makes \"top 3 by degree\" deterministic.\n Degree: [...dolphins].sort((a, b) => b.degree - a.degree || b.betweenness - a.betweenness).map(d => d.id),\n Betweenness: [...dolphins].sort((a, b) => b.betweenness - a.betweenness).map(d => d.id)\n};","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"$4e","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"// Hypothesis Test V1\n// THE CORE OF THE HYPOTHESIS TEST.\n// For each strategy, remove the top 0, 1, 2 ... 10 dolphins and record:\n// components = how many groups remain (isolated dolphins count as groups)\n// largest = size of the biggest remaining group\n// Loop variables are \"strat\" and \"i\" so they don't clash with the\n// \"strategy\" and \"k\" control names (every top-level name must be unique).\nconst sweep = (() => {\n const rows = [];\n for (const strat of [\"Degree\", \"Betweenness\"]) {\n for (let i = 0; i <= 10; i++) {\n const comps = components(rankings[strat].slice(0, i));\n rows.push({strategy: strat, k: i, components: comps.length, largest: comps[0].length});\n }\n }\n return rows; // 22 rows: 2 strategies x 11 values of k\n})();","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"// Hypothesis Test Graph 1: V1\n// Observable Plot draws this chart.\n// Lower line = that strategy shatters the network's biggest group more effectively.\nPlot.plot({\n title: \"Size of the largest remaining group\",\n x: {label: \"Dolphins removed (k)\", ticks: 10},\n // domain fixed at 0-62 so the y-axis always spans the full network size\n y: {label: \"Dolphins in largest component\", domain: [0, 62], grid: true},\n // Pins blue = Degree and red = Betweenness, so colors match every other chart.\n color: {legend: true, domain: [\"Degree\", \"Betweenness\"], range: [\"#4e79a7\", \"#e15759\"]},\n // One line per strategy: \"stroke: 'strategy'\" colors lines by that field.\n marks: [Plot.line(sweep, {x: \"k\", y: \"largest\", stroke: \"strategy\", marker: \"dot\"})]\n})","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"// Hypothesis Test Graph 2: V1\n// Same structure as chart 1, but plots the NUMBER of separate groups.\n// Higher line = more fragmentation. This is the metric the hypothesis names.\nPlot.plot({\n title: \"Number of connected components\",\n x: {label: \"Dolphins removed (k)\", ticks: 10},\n y: {label: \"Components\", grid: true},\n color: {legend: true, domain: [\"Degree\", \"Betweenness\"], range: [\"#4e79a7\", \"#e15759\"]},\n marks: [Plot.line(sweep, {x: \"k\", y: \"components\", stroke: \"strategy\", marker: \"dot\"})]\n})","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"$4f","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"// The ids of the dolphins being removed right now (top k of the chosen ranking).\n// Re-runs automatically when `strategy` or `k` changes.\nconst currentRemoved = rankings[strategy].slice(0, k);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"// The groups that remain after that removal. Used for coloring and the summary.\nconst currentComps = components(currentRemoved);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"The below graphs are commented out because they mess up the other visuals above. Comment out the visuals above and un-comment these ones to see these the old visuals.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"// // Controls 1: V1\n// // view() displays the control AND makes its current value usable as a variable.\n// // Whenever you click it, every cell that uses `strategy` re-runs automatically.\n// const strategy = view(Inputs.radio([\"Degree\", \"Betweenness\"], {label: \"Remove by\", value: \"Betweenness\"}));","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"// // Controls 2: V1\n// // Slider: how many top-ranked dolphins to remove (0-10). Starts at 3, the hypothesis value.\n// const k = view(Inputs.range([0, 10], {label: \"Dolphins removed\", step: 1, value: 3}));","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"$50","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"// // Live Summary V1\n// // A text readout that updates with the controls.\n// {\n// // Look up each removed id's name. This works because each dolphin's id equals\n// // its position in graph.nodes (ids run 0-61 in order).\n// const names = currentRemoved.map(id => graph.nodes[id].name).join(\", \") || \"none\";\n// display(html`

Removed (${strategy}): ${names}
\n// Components: ${currentComps.length} | \n// Largest component: ${currentComps[0].length} of ${62 - currentRemoved.length} remaining dolphins

`);\n// // NOTE: 62 is hardcoded. For a different dataset, use dolphins.length instead.\n// }","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"// // Degree vs. Betweenness V1\n// Plot.plot({\n// title: \"Popular dolphins vs. bridge dolphins\",\n// x: {label: \"Degree (number of associations)\"},\n// y: {label: \"Betweenness centrality\", grid: true},\n// marks: [\n// Plot.dot(dolphins, {x: \"degree\", y: \"betweenness\", r: 4, fill: \"#4e79a7\", fillOpacity: 0.7, tip: true, title: \"name\"}),\n// Plot.text(dolphins.filter(d => d.betweenness > 40 || d.degree >= 9),\n// {x: \"degree\", y: \"betweenness\", text: \"name\", dy: -8, fontSize: 10})\n// ]\n// })","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"D3 Chart V2 Code:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"$51","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"$52","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"$53","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W54","stdlib":"2"}} 42:null