45:["$","title",null,{"children":"Project 4: Networks | Stellios Bonadurer | Observable"}] 4d:Td60,edgeMapAll2 = { const { width, height } = mapSize; const kh = "kettlehouse-amphitheater-bonner-mt"; const shown = edgesAll .filter(e => e.weight >= minWeightAll) .sort((a, b) => a.weight - b.weight); // heavy edges go on top const maxW = Math.max(d3.max(shown, d => d.weight) ?? minWeightAll, minWeightAll + 1); const w = d3.scaleLinear().domain([minWeightAll, maxW]).range([0.4, 6]); const op = d3.scaleLinear().domain([minWeightAll, maxW]).range([0.15, 0.7]); const path = d3.geoPath(projection); const edgeColor = e => e.source === kh || e.target === kh ? "#d1495b" : "#3a6ea5"; const arc = e => { const a = filteredNodesAll.get(e.source), b = filteredNodesAll.get(e.target); const dx = b.x - a.x, dy = b.y - a.y; if (Math.hypot(dx, dy) === 0) return null; const mx = (a.x + b.x) / 2 - dy * 0.15, my = (a.y + b.y) / 2 + dx * 0.15; return `M${a.x},${a.y}Q${mx},${my} ${b.x},${b.y}`; }; const container = d3.create("div").style("position", "relative"); const svg = container.append("svg") .attr("viewBox", [0, 0, width, height]) .style("max-width", "100%") .style("height", "auto") .style("display", "block"); const { show, hide } = tooltipAll.attach(container); svg.append("path") .datum(topojson.feature(us, us.objects.nation)) .attr("d", path).attr("fill", "#f2f2ef"); svg.append("path") .datum(topojson.mesh(us, us.objects.states, (a, b) => a !== b)) .attr("d", path).attr("fill", "none").attr("stroke", "#fff"); svg.append("g") .attr("fill", "none") .selectAll("path") .data(shown) .join("path") .attr("d", arc) .attr("stroke", edgeColor) .attr("stroke-width", e => w(e.weight)) .attr("stroke-opacity", e => op(e.weight)) .style("cursor", "pointer") .on("pointerenter", function (event, e) { d3.select(this).raise().attr("stroke", "#111").attr("stroke-opacity", 1); show(event, tooltipAll.edgeHTML(e)); }) .on("pointermove", (event, e) => show(event, tooltipAll.edgeHTML(e))) .on("pointerleave", function (event, e) { d3.select(this).attr("stroke", edgeColor(e)).attr("stroke-opacity", op(e.weight)); hide(); }); const data = [...filteredNodesAll.values()].sort((a, b) => a.kh - b.kh); // KettleHouse on top const node = svg.append("g") .selectAll("g") .data(data, d => d.id) .join("g") .attr("transform", d => `translate(${d.x},${d.y})`) .style("cursor", "pointer"); node.append("circle") .attr("r", d => 2) .attr("fill", d => d.kh ? "#d1495b" : "#3a6ea5"); node.append("circle") // invisible, larger hover target .attr("r", 7) .attr("fill", "transparent") .on("pointerenter", function (event, d) { d3.select(this.parentNode).raise().select("circle").attr("r", 4).attr("fill", "#111"); show(event, tooltipAll.nodeHTML(d)); }) .on("pointermove", (event, d) => show(event, tooltipAll.nodeHTML(d))) .on("pointerleave", function (event, d) { d3.select(this.parentNode).select("circle").attr("r", 2).attr("fill", d.kh ? "#d1495b" : "#3a6ea5"); hide(); }); svg.append("text") .attr("x", 10).attr("y", height - 10) .attr("font-size", 12).attr("fill", "#666") .text(`${yearAll} · ${filteredNodesAll.size} venues · ${shown.length} edges (≥ ${minWeightAll} shared acts)`); return container.node(); } 4e:T1a9a,forceGraph2 = { const { width, height } = mapSize; const kh = "kettlehouse-amphitheater-bonner-mt"; const fmt = d3.utcFormat("%b %-d"); const day = s => fmt(d3.utcParse("%Y-%m-%d")(s)); const days = ds => ds.map(day).join(", "); const artistName = id => names.artists[id] ?? id; // ---- data: copies, because d3-force mutates its inputs ---- const shownEdges = edges.filter(e => e.weight >= minWeight); const connected = new Set([kh, ...shownEdges.flatMap(e => [e.source, e.target])]); const nodes = [...filteredNodes.values()] .filter(n => connected.has(n.id)) .map(n => ({ ...n })); // start from map positions, so the layout is stable between runs const links = shownEdges .map(e => ({ ...e })) .sort((a, b) => a.weight - b.weight); // heavy edges go on top const hidden = filteredNodes.size - nodes.length; const maxW = Math.max(d3.max(links, d => d.weight) ?? minWeight, minWeight + 1); const w = d3.scaleLinear().domain([minWeight, maxW]).range([0.4, 6]); const op = d3.scaleLinear().domain([minWeight, maxW]).range([0.15, 0.7]); const strength = d3.scaleLinear().domain([minWeight, maxW]).range([0.05, 0.6]); const edgeColor = e => (e.source.id ?? e.source) === kh || (e.target.id ?? e.target) === kh ? "#d1495b" : "#3a6ea5"; // ---- simulation ---- const sim = d3.forceSimulation(nodes) .force("link", d3.forceLink(links).id(d => d.id) .strength(e => strength(e.weight)) .distance(e => 140 / Math.sqrt(e.weight))) .force("charge", d3.forceManyBody().strength(-25).distanceMax(250)) .force("collide", d3.forceCollide(5)) .force("x", d3.forceX(width / 2).strength(0.04)) .force("y", d3.forceY(height / 2).strength(0.06)); const khNode = nodes.find(n => n.id === kh); if (khNode) { khNode.fx = width / 2; khNode.fy = height / 2; } // KettleHouse pinned in the center // ---- tooltip HTML ---- const nodeHTML = d => { const rows = [...d3.group(d.shows, s => s.artist_id)] .sort((a, b) => d3.ascending(a[1][0].date, b[1][0].date)) .map(([id, ss]) => `${artistName(id)}${days(ss.map(s => s.date))}`) .join(""); return `

${d.name}

${d.nActs} act${d.nActs > 1 ? "s" : ""} · ${d.nArtists} artist${d.nArtists > 1 ? "s" : ""}

${rows}

`; }; const edgeHTML = e => { const rows = e.artists .map(a => `${artistName(a.artist_id)}${days(a.sourceDates)} → ${days(a.targetDates)}`) .join(""); return `

${e.source.name}
↔ ${e.target.name}

${e.weight} shared act${e.weight > 1 ? "s" : ""} · ${e.artists.length} artist${e.artists.length > 1 ? "s" : ""} (dates: first venue → second venue)

${rows}

`; }; // ---- layout ---- const container = d3.create("div").style("position", "relative"); container.append("style").text(` .tt { position:absolute; pointer-events:none; background:#fff; border:1px solid #ccc; border-radius:4px; padding:8px 10px; font:12px/1.35 sans-serif; max-width:340px; max-height:320px; overflow:hidden; box-shadow:0 2px 6px rgba(0,0,0,.15); display:none; } .tt-title { font-weight:600; margin-bottom:2px; } .tt-sub { color:#666; margin-bottom:6px; } .tt table { border-collapse:collapse; } .tt td { padding:1px 8px 1px 0; vertical-align:top; } .tt td:last-child { color:#555; white-space:nowrap; } `); const svg = container.append("svg") .attr("viewBox", [0, 0, width, height]) .style("max-width", "100%") .style("height", "auto") .style("display", "block") .style("background", "#fafaf8"); const tip = container.append("div").attr("class", "tt"); const show = (event, html) => { const [x, y] = d3.pointer(event, container.node()); const cw = container.node().clientWidth; tip.html(html).style("display", "block") .style("left", `${Math.min(x + 14, cw - 350)}px`) .style("top", `${y + 14}px`); }; const hide = () => tip.style("display", "none"); const g = svg.append("g"); // zoom / pan target svg.call(d3.zoom().scaleExtent([0.5, 8]).on("zoom", ({ transform }) => g.attr("transform", transform))); // ---- edges ---- const link = g.append("g") .selectAll("line") .data(links) .join("line") .attr("stroke", edgeColor) .attr("stroke-width", e => w(e.weight)) .attr("stroke-opacity", e => op(e.weight)) .style("cursor", "pointer") .on("pointerenter", function (event, e) { d3.select(this).raise().attr("stroke", "#111").attr("stroke-opacity", 1); show(event, edgeHTML(e)); }) .on("pointermove", (event, e) => show(event, edgeHTML(e))) .on("pointerleave", function (event, e) { d3.select(this).attr("stroke", edgeColor(e)).attr("stroke-opacity", op(e.weight)); hide(); }); // ---- nodes ---- const node = g.append("g") .selectAll("g") .data(nodes.sort((a, b) => a.kh - b.kh), d => d.id) // KettleHouse on top .join("g") .style("cursor", "pointer") .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); if (!d.kh) { d.fx = null; d.fy = null; } })); node.append("circle") .attr("r", d => 2) .attr("fill", d => d.kh ? "#d1495b" : "#3a6ea5"); node.append("circle") // invisible, larger hover target .attr("r", 7) .attr("fill", "transparent") .on("pointerenter", function (event, d) { d3.select(this.parentNode).raise().select("circle").attr("r", 4).attr("fill", "#111"); show(event, nodeHTML(d)); }) .on("pointermove", (event, d) => show(event, nodeHTML(d))) .on("pointerleave", function (event, d) { d3.select(this.parentNode).select("circle").attr("r", 2).attr("fill", d.kh ? "#d1495b" : "#3a6ea5"); hide(); }); svg.append("text") .attr("x", 10).attr("y", height - 10) .attr("font-size", 12).attr("fill", "#666") .text(`${nodes.length} venues · ${links.length} edges (≥ ${minWeight} shared acts)` + (hidden ? ` · ${hidden} venues with no edge at this weight hidden` : "")); sim.on("tick", () => { link.attr("x1", e => e.source.x).attr("y1", e => e.source.y) .attr("x2", e => e.target.x).attr("y2", e => e.target.y); node.attr("transform", d => `translate(${d.x},${d.y})`); }); invalidation.then(() => sim.stop()); // stop the old simulation when the cell reruns return container.node(); } 4f:T4f9,venueMap = { const { width, height } = mapSize; const r = d3.scaleSqrt() .domain([1, d3.max(nodes.values(), d => d.kh ? 0 : d.nArtists)]) .range([1.5, 12]); const path = d3.geoPath(projection); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .style("max-width", "100%") .style("height", "auto"); svg.append("path") .datum(topojson.feature(us, us.objects.nation)) .attr("d", path).attr("fill", "#f2f2ef"); svg.append("path") .datum(topojson.mesh(us, us.objects.states, (a, b) => a !== b)) .attr("d", path).attr("fill", "none").attr("stroke", "#fff"); // Small venues go first, so the big ones are drawn on top. const data = [...nodes.values()].sort((a, b) => a.nArtists - b.nArtists); svg.append("g") .selectAll("circle") .data(data, d => d.id) .join("circle") .attr("cx", d => d.x).attr("cy", d => d.y) //.attr("r", d => d.kh ? 8 : r(d.nArtists)) .attr("r", d => 2) .attr("fill", d => d.kh ? "#d1495b" : "#3a6ea5") .attr("fill-opacity", d => d.kh ? 1 : 0.55) .attr("stroke", "#fff").attr("stroke-width", 0.5) .append("title") .text(d => `${d.name}\n${d.nArtists} KettleHouse artist${d.nArtists > 1 ? "s" : ""}`); return svg.node(); } 50:T588,venueMap2 = { const { width, height } = mapSize; const r = d3.scaleSqrt() .domain([1, d3.max(filteredNodes.values(), d => d.kh ? 0 : d.nActs)]) .range([1.5, 12]); const path = d3.geoPath(projection); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .style("max-width", "100%") .style("height", "auto"); svg.append("path") .datum(topojson.feature(us, us.objects.nation)) .attr("d", path).attr("fill", "#f2f2ef"); svg.append("path") .datum(topojson.mesh(us, us.objects.states, (a, b) => a !== b)) .attr("d", path).attr("fill", "none").attr("stroke", "#fff"); // Small venues go first, so the big ones are drawn on top. const data = [...filteredNodes.values()].sort((a, b) => a.nActs - b.nActs); svg.append("g") .selectAll("circle") .data(data, d => d.id) .join("circle") .attr("cx", d => d.x).attr("cy", d => d.y) .attr("r", d => 2) .attr("fill", d => d.kh ? "#d1495b" : "#3a6ea5") .attr("fill-opacity", d => d.kh ? 1 : 0.55) .attr("stroke", "#fff").attr("stroke-width", 0.5) .append("title") .text(d => `${d.name}\n${d.nActs} act${d.nActs > 1 ? "s" : ""} (${d.nArtists} artist${d.nArtists > 1 ? "s" : ""})`); svg.append("text") .attr("x", 10).attr("y", height - 10) .attr("font-size", 12).attr("fill", "#666") .text(`${filteredNodes.size} venues`); return svg.node(); } 51:T517,edges = { // artist -> Map(venue_id -> { tour, dates }), filtered venues only const byArtist = new Map(); for (const [id, n] of filteredNodes) for (const s of n.shows) { if (!byArtist.has(s.artist_id)) byArtist.set(s.artist_id, new Map()); const vs = byArtist.get(s.artist_id); if (!vs.has(id)) vs.set(id, { tour: s.tour_id, dates: [] }); // shows are date-sorted vs.get(id).dates.push(s.date); } const pairs = new Map(); // "u|v" -> { keys: Set, artists: [] } for (const [artist, vs] of byArtist) { const ids = [...vs.keys()].sort(); for (let i = 0; i < ids.length; i++) for (let j = i + 1; j < ids.length; j++) { const k = ids[i] + "|" + ids[j]; if (!pairs.has(k)) pairs.set(k, { keys: new Set(), artists: [] }); const p = pairs.get(k), a = vs.get(ids[i]), b = vs.get(ids[j]); p.keys.add(a.tour + "|" + b.tour); // a main act and their opener count once p.artists.push({ artist_id: artist, sourceDates: a.dates, targetDates: b.dates }); } } return [...pairs].map(([k, p]) => { const [source, target] = k.split("|"); return { source, target, weight: p.keys.size, artists: p.artists.sort((x, y) => d3.ascending(x.sourceDates[0], y.sourceDates[0])) }; }); } 52:Ta96,edgeMap = { const { width, height } = mapSize; const kh = "kettlehouse-amphitheater-bonner-mt"; const shown = edges .filter(e => e.weight >= minWeight) .sort((a, b) => a.weight - b.weight); // heavy edges go on top const maxW = d3.max(shown, d => d.weight) ?? 1; const w = d3.scaleLinear().domain([minWeight, maxW]).range([0.4, 6]); const op = d3.scaleLinear().domain([minWeight, maxW]).range([0.15, 0.7]); const r = d3.scaleSqrt() .domain([1, d3.max(filteredNodes.values(), d => d.kh ? 0 : d.nActs)]) .range([1.5, 12]); const path = d3.geoPath(projection); // Gentle arc, so edges between nearby venues don't overlap. const arc = e => { const a = filteredNodes.get(e.source), b = filteredNodes.get(e.target); const dx = b.x - a.x, dy = b.y - a.y, d = Math.hypot(dx, dy); const mx = (a.x + b.x) / 2 - dy * 0.15, my = (a.y + b.y) / 2 + dx * 0.15; return d === 0 ? null : `M${a.x},${a.y}Q${mx},${my} ${b.x},${b.y}`; }; const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .style("max-width", "100%") .style("height", "auto"); svg.append("path") .datum(topojson.feature(us, us.objects.nation)) .attr("d", path).attr("fill", "#f2f2ef"); svg.append("path") .datum(topojson.mesh(us, us.objects.states, (a, b) => a !== b)) .attr("d", path).attr("fill", "none").attr("stroke", "#fff"); svg.append("g") .attr("fill", "none") .selectAll("path") .data(shown) .join("path") .attr("d", arc) .attr("stroke", e => e.source === kh || e.target === kh ? "#d1495b" : "#3a6ea5") .attr("stroke-width", e => w(e.weight)) .attr("stroke-opacity", e => op(e.weight)) .append("title") .text(e => `${names.venues[e.source]} — ${names.venues[e.target]}\n` + `${e.weight} act${e.weight > 1 ? "s" : ""}: ` + e.artists.map(a => names.artists[a]).join(", ")); const data = [...filteredNodes.values()].sort((a, b) => a.nActs - b.nActs); svg.append("g") .selectAll("circle") .data(data, d => d.id) .join("circle") .attr("cx", d => d.x).attr("cy", d => d.y) .attr("r", d => 2) .attr("fill", d => d.kh ? "#d1495b" : "#3a6ea5") .attr("fill-opacity", d => d.kh ? 1 : 0.55) .attr("stroke", "#fff").attr("stroke-width", 0.5) .append("title") .text(d => `${d.name}\n${d.nActs} act${d.nActs > 1 ? "s" : ""} (${d.nArtists} artist${d.nArtists > 1 ? "s" : ""})`); svg.append("text") .attr("x", 10).attr("y", height - 10) .attr("font-size", 12).attr("fill", "#666") .text(`${filteredNodes.size} venues · ${shown.length} edges (≥ ${minWeight} shared acts)`); return svg.node(); } 53:T15eb,edgeMap2 = { const { width, height } = mapSize; const kh = "kettlehouse-amphitheater-bonner-mt"; const fmt = d3.utcFormat("%b %-d"); const day = s => fmt(d3.utcParse("%Y-%m-%d")(s)); const days = ds => ds.map(day).join(", "); const artistName = id => names.artists[id] ?? id; const shown = edges .filter(e => e.weight >= minWeight) .sort((a, b) => a.weight - b.weight); // heavy edges go on top const maxW = d3.max(shown, d => d.weight) ?? minWeight; const w = d3.scaleLinear().domain([minWeight, Math.max(maxW, minWeight + 1)]).range([0.4, 6]); const op = d3.scaleLinear().domain([minWeight, Math.max(maxW, minWeight + 1)]).range([0.15, 0.7]); const path = d3.geoPath(projection); const arc = e => { const a = filteredNodes.get(e.source), b = filteredNodes.get(e.target); const dx = b.x - a.x, dy = b.y - a.y; if (Math.hypot(dx, dy) === 0) return null; const mx = (a.x + b.x) / 2 - dy * 0.15, my = (a.y + b.y) / 2 + dx * 0.15; return `M${a.x},${a.y}Q${mx},${my} ${b.x},${b.y}`; }; // ---- tooltip HTML ---- const nodeHTML = d => { const byArtist = d3.group(d.shows, s => s.artist_id); const rows = [...byArtist] .sort((a, b) => d3.ascending(a[1][0].date, b[1][0].date)) .map(([id, ss]) => `${artistName(id)}${days(ss.map(s => s.date))}`) .join(""); return `

${d.name}

${d.nActs} act${d.nActs > 1 ? "s" : ""} · ${d.nArtists} artist${d.nArtists > 1 ? "s" : ""}

${rows}

`; }; const edgeHTML = e => { const rows = e.artists .map(a => `${artistName(a.artist_id)}${days(a.sourceDates)} → ${days(a.targetDates)}`) .join(""); return `

${names.venues[e.source]}
↔ ${names.venues[e.target]}

${e.weight} shared act${e.weight > 1 ? "s" : ""} · ${e.artists.length} artist${e.artists.length > 1 ? "s" : ""} (dates: first venue → second venue)

${rows}

${d.name}

${d.nActs} act${d.nActs > 1 ? "s" : ""} · ${d.nArtists} artist${d.nArtists > 1 ? "s" : ""}

${rows}

`; }; const edgeHTML = e => { const rows = e.artists .map(a => `${artistName(a.artist_id)}${days(a.sourceDates)} → ${days(a.targetDates)}`) .join(""); return `

${e.source.name}
↔ ${e.target.name}

${e.weight} shared act${e.weight > 1 ? "s" : ""} · ${e.artists.length} artist${e.artists.length > 1 ? "s" : ""} (dates: first venue → second venue)

${rows}

Click to pin and scroll

`; const nodeHTML = d => { const rows = [...d3.group(d.shows, s => s.artist_id + "|" + s.date.slice(0, 4))] .sort((a, b) => d3.ascending(a[1][0].date, b[1][0].date)) .map(([k, ss]) => `${artistName(k.split("|")[0])}${days(ss.map(s => s.date))}`) .join(""); return `

${d.name}

${plural(d.nActs, "act")} · ${plural(d.nArtists, unit)}

${rows}

${hint}`; }; const edgeHTML = e => { const rows = e.artists .map(a => `${artistName(a.artist_id)}${days(a.sourceDates)} → ${days(a.targetDates)}`) .join(""); return `

${venueName(e.source)}
↔ ${venueName(e.target)}

${plural(e.weight, "shared act")} · ${plural(e.artists.length, unit)} (dates: first venue → second venue)

${rows}

${hint}`; }; // Adds the style + tooltip div to a container; returns show/hide functions. // Hover previews; clicking the hovered node/edge pins the tooltip until × is clicked. const attach = container => { container.append("style").text(css); const tip = container.append("div").attr("class", "tt"); const close = tip.append("button").attr("class", "tt-close").attr("title", "Close").text("×"); const body = tip.append("div"); let pinned = false; let hoverHTML = null; // content of whatever is under the pointer right now const place = event => { const [x, y] = d3.pointer(event, container.node()); const cw = container.node().clientWidth; tip.style("left", `${Math.max(0, Math.min(x + 14, cw - 366))}px`) .style("top", `${y + 14}px`); }; const show = (event, html) => { hoverHTML = html; if (pinned) return; body.html(html); tip.style("display", "block"); place(event); }; const hide = () => { hoverHTML = null; if (!pinned) tip.style("display", "none"); }; container.on("click.tooltip", event => { if (tip.node().contains(event.target)) return; // clicks inside the tooltip itself if (!hoverHTML) return; // background click: keep current state pinned = true; body.html(hoverHTML); tip.classed("pinned", true).style("display", "block"); tip.node().scrollTop = 0; place(event); }); close.on("click", event => { event.stopPropagation(); pinned = false; tip.classed("pinned", false).style("display", "none"); }); return { show, hide }; }; return { nodeHTML, edgeHTML, attach }; } 57:T158b, tooltipAll = { const all = yearAll === "All"; const fmt = d3.utcFormat("%b %-d"); const days = ds => ds.map(s => fmt(d3.utcParse("%Y-%m-%d")(s))).join(", "); const artistName = id => namesAll.artists[id] ?? id; const venueName = v => namesAll.venues[v.id ?? v] ?? (v.id ?? v); const plural = (n, w) => `${n} ${w}${n === 1 ? "" : "s"}`; const unit = all ? "artist-year" : "artist"; const css = ` .tt { position:absolute; z-index:10; pointer-events:none; background:#fff; border:1px solid #ccc; border-radius:4px; padding:8px 10px; font:12px/1.35 sans-serif; width:340px; max-height:320px; overflow:hidden; box-shadow:0 2px 6px rgba(0,0,0,.15); display:none; } .tt.pinned { pointer-events:auto; overflow-y:auto; max-height:380px; border-color:#888; box-shadow:0 4px 14px rgba(0,0,0,.25); } .tt-close { display:none; position:sticky; top:0; float:right; margin:-4px -6px 0 6px; border:none; background:#fff; font-size:18px; line-height:1; cursor:pointer; color:#555; } .tt.pinned .tt-close { display:block; } .tt-close:hover { color:#000; } .tt-hint { color:#999; font-style:italic; margin-top:6px; } .tt.pinned .tt-hint { display:none; } .tt-title { font-weight:600; margin-bottom:2px; } .tt-sub { color:#666; margin-bottom:6px; } .tt table { border-collapse:collapse; width:100%; } .tt td { padding:1px 8px 1px 0; vertical-align:top; } .tt td:last-child { color:#555; } .tt tr.tt-band td { font-weight:600; color:#222; padding-top:5px; } .tt tr.tt-band td.tt-count { font-weight:400; color:#888; text-align:right; padding-right:0; } .tt td.tt-year { color:#888; padding-left:10px; width:1%; white-space:nowrap; }`; const hint = `

Click to pin and scroll

`; // rows: [{ artist_id, year, text }] -> HTML table const table = rows => { if (!all) { return `${rows .map(r => ``) .join("")}

${artistName(r.artist_id)}

${r.text}

`; } const bands = d3.groups(rows, r => r.artist_id) .sort((a, b) => d3.ascending(artistName(a[0]).toLowerCase(), artistName(b[0]).toLowerCase())); return `${bands.map(([id, rs]) => { rs.sort((a, b) => d3.ascending(a.year, b.year)); return `` + rs.map(r => ``).join(""); }).join("")}

${artistName(id)}		${plural(rs.length, "yr")}
${r.year}	${r.text}

`; }; const nodeHTML = d => { const rows = [...d3.group(d.shows, s => s.artist_id + "|" + s.date.slice(0, 4))] .sort((a, b) => d3.ascending(a[1][0].date, b[1][0].date)) .map(([k, ss]) => { const [artist_id, year] = k.split("|"); return { artist_id, year, text: days(ss.map(s => s.date)) }; }); return `

${d.name}

${plural(d.nActs, "act")} · ${plural(d.nArtists, unit)}` + (all ? ` · ${plural(new Set(rows.map(r => r.artist_id)).size, "band")}` : "") + `

${table(rows)}${hint}`; }; const edgeHTML = e => { const rows = e.artists.map(a => ({ artist_id: a.artist_id, year: a.year, text: `${days(a.sourceDates)} → ${days(a.targetDates)}` })); return `

${venueName(e.source)}
↔ ${venueName(e.target)}

${plural(e.weight, "shared act")} · ${plural(e.artists.length, unit)}` + (all ? ` · ${plural(new Set(rows.map(r => r.artist_id)).size, "band")}` : "") + `
dates: first venue → second venue

${table(rows)}${hint}`; }; // Adds the style + tooltip div to a container; returns show/hide functions. // Hover previews; clicking the hovered node/edge pins the tooltip until × is clicked. const attach = container => { container.append("style").text(css); const tip = container.append("div").attr("class", "tt"); const close = tip.append("button").attr("class", "tt-close").attr("title", "Close").text("×"); const body = tip.append("div"); let pinned = false; let hoverHTML = null; // content of whatever is under the pointer right now const place = event => { const [x, y] = d3.pointer(event, container.node()); const cw = container.node().clientWidth; tip.style("left", `${Math.max(0, Math.min(x + 14, cw - 366))}px`) .style("top", `${y + 14}px`); }; const show = (event, html) => { hoverHTML = html; if (pinned) return; body.html(html); tip.style("display", "block"); place(event); }; const hide = () => { hoverHTML = null; if (!pinned) tip.style("display", "none"); }; container.on("click.tooltip", event => { if (tip.node().contains(event.target)) return; // clicks inside the tooltip itself if (!hoverHTML) return; // background click: keep current state pinned = true; body.html(hoverHTML); tip.classed("pinned", true).style("display", "block"); tip.node().scrollTop = 0; place(event); }); close.on("click", event => { event.stopPropagation(); pinned = false; tip.classed("pinned", false).style("display", "none"); }); return { show, hide }; }; return { nodeHTML, edgeHTML, attach }; } 58:Td5f,edgeMapAll = { const { width, height } = mapSize; const kh = "kettlehouse-amphitheater-bonner-mt"; const shown = edgesAll .filter(e => e.weight >= minWeightAll) .sort((a, b) => a.weight - b.weight); // heavy edges go on top const maxW = Math.max(d3.max(shown, d => d.weight) ?? minWeightAll, minWeightAll + 1); const w = d3.scaleLinear().domain([minWeightAll, maxW]).range([0.4, 6]); const op = d3.scaleLinear().domain([minWeightAll, maxW]).range([0.15, 0.7]); const path = d3.geoPath(projection); const edgeColor = e => e.source === kh || e.target === kh ? "#d1495b" : "#3a6ea5"; const arc = e => { const a = filteredNodesAll.get(e.source), b = filteredNodesAll.get(e.target); const dx = b.x - a.x, dy = b.y - a.y; if (Math.hypot(dx, dy) === 0) return null; const mx = (a.x + b.x) / 2 - dy * 0.15, my = (a.y + b.y) / 2 + dx * 0.15; return `M${a.x},${a.y}Q${mx},${my} ${b.x},${b.y}`; }; const container = d3.create("div").style("position", "relative"); const svg = container.append("svg") .attr("viewBox", [0, 0, width, height]) .style("max-width", "100%") .style("height", "auto") .style("display", "block"); const { show, hide } = tooltipAll.attach(container); svg.append("path") .datum(topojson.feature(us, us.objects.nation)) .attr("d", path).attr("fill", "#f2f2ef"); svg.append("path") .datum(topojson.mesh(us, us.objects.states, (a, b) => a !== b)) .attr("d", path).attr("fill", "none").attr("stroke", "#fff"); svg.append("g") .attr("fill", "none") .selectAll("path") .data(shown) .join("path") .attr("d", arc) .attr("stroke", edgeColor) .attr("stroke-width", e => w(e.weight)) .attr("stroke-opacity", e => op(e.weight)) .style("cursor", "pointer") .on("pointerenter", function (event, e) { d3.select(this).raise().attr("stroke", "#111").attr("stroke-opacity", 1); show(event, tooltipAll.edgeHTML(e)); }) .on("pointermove", (event, e) => show(event, tooltipAll.edgeHTML(e))) .on("pointerleave", function (event, e) { d3.select(this).attr("stroke", edgeColor(e)).attr("stroke-opacity", op(e.weight)); hide(); }); const data = [...filteredNodesAll.values()].sort((a, b) => a.kh - b.kh); // KettleHouse on top const node = svg.append("g") .selectAll("g") .data(data, d => d.id) .join("g") .attr("transform", d => `translate(${d.x},${d.y})`) .style("cursor", "pointer"); node.append("circle") .attr("r", d => 2) .attr("fill", d => d.kh ? "#d1495b" : "#3a6ea5"); node.append("circle") // invisible, larger hover target .attr("r", 7) .attr("fill", "transparent") .on("pointerenter", function (event, d) { d3.select(this.parentNode).raise().select("circle").attr("r", 4).attr("fill", "#111"); show(event, tooltipAll.nodeHTML(d)); }) .on("pointermove", (event, d) => show(event, tooltipAll.nodeHTML(d))) .on("pointerleave", function (event, d) { d3.select(this.parentNode).select("circle").attr("r", 2).attr("fill", d.kh ? "#d1495b" : "#3a6ea5"); hide(); }); svg.append("text") .attr("x", 10).attr("y", height - 10) .attr("font-size", 12).attr("fill", "#666") .text(`${yearAll} · ${filteredNodesAll.size} venues · ${shown.length} edges (≥ ${minWeightAll} shared acts)`); return container.node(); } 59:T11e7,forceGraphAll = { const { width, height } = mapSize; const kh = "kettlehouse-amphitheater-bonner-mt"; // copies, because d3-force mutates its inputs const shownEdges = edgesAll.filter(e => e.weight >= minWeightAll); const connected = new Set([kh, ...shownEdges.flatMap(e => [e.source, e.target])]); const simNodes = [...filteredNodesAll.values()] .filter(n => connected.has(n.id)) .map(n => ({ ...n })); // start from map positions, so the layout is stable between runs const links = shownEdges.map(e => ({ ...e })).sort((a, b) => a.weight - b.weight); const hidden = filteredNodesAll.size - simNodes.length; const maxW = Math.max(d3.max(links, d => d.weight) ?? minWeightAll, minWeightAll + 1); const w = d3.scaleLinear().domain([minWeightAll, maxW]).range([0.4, 6]); const op = d3.scaleLinear().domain([minWeightAll, maxW]).range([0.15, 0.7]); const strength = d3.scaleLinear().domain([minWeightAll, maxW]).range([0.05, 0.6]); const edgeColor = e => (e.source.id ?? e.source) === kh || (e.target.id ?? e.target) === kh ? "#d1495b" : "#3a6ea5"; const sim = d3.forceSimulation(simNodes) .force("link", d3.forceLink(links).id(d => d.id) .strength(e => strength(e.weight)) .distance(e => 140 / Math.sqrt(e.weight))) .force("charge", d3.forceManyBody().strength(-25).distanceMax(250)) .force("collide", d3.forceCollide(5)) .force("x", d3.forceX(width / 2).strength(0.04)) .force("y", d3.forceY(height / 2).strength(0.06)); const khNode = simNodes.find(n => n.id === kh); if (khNode) { khNode.fx = width / 2; khNode.fy = height / 2; } // KettleHouse pinned in the center const container = d3.create("div").style("position", "relative"); const svg = container.append("svg") .attr("viewBox", [0, 0, width, height]) .style("max-width", "100%") .style("height", "auto") .style("display", "block") .style("background", "#fafaf8"); const { show, hide } = tooltipAll.attach(container); const g = svg.append("g"); // zoom / pan target svg.call(d3.zoom().scaleExtent([0.5, 8]).on("zoom", ({ transform }) => g.attr("transform", transform))); const link = g.append("g") .selectAll("line") .data(links) .join("line") .attr("stroke", edgeColor) .attr("stroke-width", e => w(e.weight)) .attr("stroke-opacity", e => op(e.weight)) .style("cursor", "pointer") .on("pointerenter", function (event, e) { d3.select(this).raise().attr("stroke", "#111").attr("stroke-opacity", 1); show(event, tooltipAll.edgeHTML(e)); }) .on("pointermove", (event, e) => show(event, tooltipAll.edgeHTML(e))) .on("pointerleave", function (event, e) { d3.select(this).attr("stroke", edgeColor(e)).attr("stroke-opacity", op(e.weight)); hide(); }); const node = g.append("g") .selectAll("g") .data(simNodes.sort((a, b) => a.kh - b.kh), d => d.id) // KettleHouse on top .join("g") .style("cursor", "pointer") .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); if (!d.kh) { d.fx = null; d.fy = null; } })); node.append("circle") .attr("r", d => 2) .attr("fill", d => d.kh ? "#d1495b" : "#3a6ea5"); node.append("circle") // invisible, larger hover target .attr("r", 7) .attr("fill", "transparent") .on("pointerenter", function (event, d) { d3.select(this.parentNode).raise().select("circle").attr("r", 4).attr("fill", "#111"); show(event, tooltipAll.nodeHTML(d)); }) .on("pointermove", (event, d) => show(event, tooltipAll.nodeHTML(d))) .on("pointerleave", function (event, d) { d3.select(this.parentNode).select("circle").attr("r", 2).attr("fill", d.kh ? "#d1495b" : "#3a6ea5"); hide(); }); svg.append("text") .attr("x", 10).attr("y", height - 10) .attr("font-size", 12).attr("fill", "#666") .text(`${yearAll} · ${simNodes.length} venues · ${links.length} edges (≥ ${minWeightAll} shared acts)` + (hidden ? ` · ${hidden} venues with no edge at this weight hidden` : "")); sim.on("tick", () => { link.attr("x1", e => e.source.x).attr("y1", e => e.source.y) .attr("x2", e => e.target.x).attr("y2", e => e.target.y); node.attr("transform", d => `translate(${d.x},${d.y})`); }); invalidation.then(() => sim.stop()); return container.node(); } 5a:T1e45,flowMap = { const { width, height } = mapSize; const fmt = d3.utcFormat("%b %-d"); const day = s => fmt(d3.utcParse("%Y-%m-%d")(s)); const artistName = id => namesAll.artists[id] ?? id; const venueName = id => namesAll.venues[id] ?? id; const plural = (n, w) => `${n} ${w}${n === 1 ? "" : "s"}`; const color = { in: "#2a9d8f", out: "#e76f51" }; const dirs = flowDir === "Both" ? ["in", "out"] : [flowDir === "Arriving from" ? "in" : "out"]; const { kh } = flowPlaces; const places = flowPlaces.places.filter(p => p.onMap); const flows = places.flatMap(p => dirs .filter(dir => (dir === "in" ? p.nIn : p.nOut) > 0) .map(dir => ({ place: p, dir, weight: dir === "in" ? p.nIn : p.nOut, items: dir === "in" ? p.itemsIn : p.itemsOut }))) .sort((a, b) => a.weight - b.weight); // heavy flows on top const offMap = flowPlaces.places.filter(p => !p.onMap) .reduce((n, p) => n + dirs.reduce((m, d) => m + (d === "in" ? p.nIn : p.nOut), 0), 0); const maxF = d3.max(flows, f => f.weight) ?? 1; const w = d3.scaleSqrt().domain([1, Math.max(maxF, 2)]).range([1, 9]); const r = d3.scaleSqrt() .domain([1, Math.max(2, d3.max(places, p => dirs.reduce((m, d) => m + (d === "in" ? p.nIn : p.nOut), 0)) ?? 2)]) .range([2.5, 10]); const path = d3.geoPath(flowProjection); // ---- tooltip content ---- const itemRows = (items, dir) => items .sort((a, b) => d3.ascending(artistName(a.artist_id).toLowerCase(), artistName(b.artist_id).toLowerCase()) || d3.ascending(a.year, b.year)) .map(it => `${artistName(it.artist_id)}${it.year}` + (dir === "in" ? `${day(it.stop.date)} ${venueName(it.stop.venue_id)} → KH ${day(it.khDate)}` : `KH ${day(it.khDate)} → ${day(it.stop.date)} ${venueName(it.stop.venue_id)}`) + ` (${plural(it.stop.gap, "day")})`) .join(""); const section = (p, dir) => { const n = dir === "in" ? p.nIn : p.nOut; if (!n || !dirs.includes(dir)) return ""; return `

${dir === "in" ? "Came to KettleHouse from here" : "Went here after KettleHouse"} · ${plural(n, "act")}

${itemRows(dir === "in" ? p.itemsIn : p.itemsOut, dir)}

`; }; const placeHTML = p => `

${p.label}

${section(p, "in")}${section(p, "out")}

Click to pin and scroll

`; const flowHTML = f => `

${f.dir === "in" ? `${f.place.label} → KettleHouse` : `KettleHouse → ${f.place.label}`}

${plural(f.weight, "act")} within ${plural(maxGap, "day")}

${itemRows(f.items, f.dir)}

Click to pin and scroll

`; // ---- layout ---- const container = d3.create("div").style("position", "relative"); const svg = container.append("svg") .attr("viewBox", [0, 0, width, height]) .style("max-width", "100%") .style("height", "auto") .style("display", "block") .style("background", "#fafaf8"); const { show, hide } = tooltipAll.attach(container); const markers = {}; const defs = svg.append("defs"); for (const dir of ["in", "out"]) { markers[dir] = DOM.uid(`arrow-${dir}`); defs.append("marker") .attr("id", markers[dir].id) .attr("viewBox", "0 -5 10 10").attr("refX", 10).attr("refY", 0) .attr("markerWidth", 7).attr("markerHeight", 7) .attr("markerUnits", "userSpaceOnUse").attr("orient", "auto") .append("path").attr("d", "M0,-5L10,0L0,5").attr("fill", color[dir]); } svg.append("path") .datum(topojson.feature(world, world.objects.countries)) .attr("d", path).attr("fill", "#ecebe6").attr("stroke", "#fff").attr("stroke-width", 0.8); svg.append("path") .datum(topojson.mesh(us, us.objects.states, (a, b) => a !== b)) .attr("d", path).attr("fill", "none").attr("stroke", "#fff").attr("stroke-width", 0.6); // Arcs bend to their left, so inbound and outbound to the same city curve on opposite sides. const arc = f => { const [a, b] = f.dir === "in" ? [f.place, kh] : [kh, f.place]; const dx = b.x - a.x, dy = b.y - a.y, d = Math.hypot(dx, dy); if (d < 1) return null; const bend = 0.18; const mx = (a.x + b.x) / 2 + dy * bend, my = (a.y + b.y) / 2 - dx * bend; const ex = b.x - (dx / d) * 4, ey = b.y - (dy / d) * 4; // stop just short of the node return `M${a.x},${a.y}Q${mx},${my} ${ex},${ey}`; }; svg.append("g") .attr("fill", "none") .selectAll("path") .data(flows) .join("path") .attr("d", arc) .attr("stroke", f => color[f.dir]) .attr("stroke-width", f => w(f.weight)) .attr("stroke-opacity", 0.55) .attr("stroke-linecap", "round") .attr("marker-end", f => markers[f.dir]) .style("cursor", "pointer") .on("pointerenter", function (event, f) { d3.select(this).raise().attr("stroke-opacity", 1); show(event, flowHTML(f)); }) .on("pointermove", (event, f) => show(event, flowHTML(f))) .on("pointerleave", function () { d3.select(this).attr("stroke-opacity", 0.55); hide(); }); const node = svg.append("g") .selectAll("g") .data(places.filter(p => dirs.some(d => (d === "in" ? p.nIn : p.nOut) > 0)), p => p.key) .join("g") .attr("transform", p => `translate(${p.x},${p.y})`) .style("cursor", "pointer"); node.append("circle") .attr("r", p => r(dirs.reduce((m, d) => m + (d === "in" ? p.nIn : p.nOut), 0))) .attr("fill", "#fff").attr("stroke", "#555").attr("stroke-width", 1); node.append("circle") // invisible, larger hover target .attr("r", 9).attr("fill", "transparent") .on("pointerenter", (event, p) => show(event, placeHTML(p))) .on("pointermove", (event, p) => show(event, placeHTML(p))) .on("pointerleave", hide); svg.append("circle") .attr("cx", kh.x).attr("cy", kh.y).attr("r", 6) .attr("fill", "#d1495b").attr("stroke", "#fff").attr("stroke-width", 1.5); // ---- labels for the biggest places ---- const top = places .map(p => ({ p, n: dirs.reduce((m, d) => m + (d === "in" ? p.nIn : p.nOut), 0) })) .filter(d => d.n > 0) .sort((a, b) => b.n - a.n) .slice(0, 12); svg.append("g") .attr("font", "11px sans-serif").attr("fill", "#333") .attr("stroke", "#fafaf8").attr("stroke-width", 3).attr("paint-order", "stroke") .selectAll("text") .data(top) .join("text") .attr("x", d => d.p.x + 7).attr("y", d => d.p.y + 4) .text(d => d.p.label.split(",")[0]); // ---- legend + caption ---- const legend = svg.append("g").attr("transform", `translate(${width - 190},${height - 52})`) .attr("font", "12px sans-serif"); dirs.forEach((dir, i) => { const g = legend.append("g").attr("transform", `translate(0,${i * 18})`); g.append("line").attr("x1", 0).attr("x2", 26).attr("stroke", color[dir]).attr("stroke-width", 3); g.append("text").attr("x", 32).attr("y", 4) .text(dir === "in" ? "Previous stop → KettleHouse" : "KettleHouse → next stop"); }); const s = flowPlaces.skipped; svg.append("text") .attr("x", 10).attr("y", height - 10) .attr("font-size", 12).attr("fill", "#666") .text(`${yearAll} · stops within ${plural(maxGap, "day")} · ${places.length} cities` + (offMap ? ` · ${plural(offMap, "act")} routed off this map` : "") + ` · show-legs skipped: ${s.tooFar} beyond gap, ${s.noStop} no recorded stop`); return container.node(); } 5b:T5d8,flowLegs = { const kh = "kettlehouse-amphitheater-bonner-mt"; const dayDiff = (a, b) => Math.round((Date.parse(b) - Date.parse(a)) / 864e5); // artist-year -> all of that artist's shows that year, any venue const byArtistYear = new Map(); for (const [vid, v] of Object.entries(showsAll)) for (const s of v.shows) { const yr = s.date.slice(0, 4); if (yearAll !== "All" && yr !== yearAll) continue; const k = s.artist_id + "|" + yr; if (!byArtistYear.has(k)) byArtistYear.set(k, []); byArtistYear.get(k).push({ venue_id: vid, date: s.date, tour_id: s.tour_id }); } const legs = []; for (const [k, list] of byArtistYear) { list.sort((a, b) => d3.ascending(a.date, b.date)); const [artist_id, year] = k.split("|"); list.forEach((s, i) => { if (s.venue_id !== kh) return; let p = i - 1; while (p >= 0 && list[p].venue_id === kh) p--; // skip other KettleHouse nights let n = i + 1; while (n < list.length && list[n].venue_id === kh) n++; const prev = p >= 0 ? list[p] : null; const next = n < list.length ? list[n] : null; legs.push({ artist_id, year, act: s.tour_id.split("+")[0], // main act of the bill khDate: s.date, prev: prev && { venue_id: prev.venue_id, date: prev.date, gap: dayDiff(prev.date, s.date) }, next: next && { venue_id: next.venue_id, date: next.date, gap: dayDiff(s.date, next.date) } }); }); } return legs; } 5c:T81e,flowPlaces = { const kh = "kettlehouse-amphitheater-bonner-mt"; const { width, height } = mapSize; const places = new Map(); // "lat,lon" -> place const placeOf = vid => { const v = showsAll[vid]; if (!v || v.lat == null) return null; const key = vid === kh ? "kh" : `${v.lat.toFixed(2)},${v.lon.toFixed(2)}`; if (!places.has(key)) { const [x, y] = flowProjection([v.lon, v.lat]); const loc = namesAll.locations[vid] ?? {}; places.set(key, { key, x, y, label: vid === kh ? "KettleHouse Amphitheater" : [loc.city, loc.state ?? loc.country].filter(Boolean).join(", "), country: loc.country, onMap: x >= 0 && x <= width && y >= 0 && y <= height, in: new Map(), out: new Map() // act-year -> Map(stop key -> item) }); } return places.get(key); }; const khPlace = placeOf(kh); const skipped = { noStop: 0, tooFar: 0, noCoords: 0 }; for (const leg of flowLegs) for (const dir of ["in", "out"]) { const stop = dir === "in" ? leg.prev : leg.next; if (!stop) { skipped.noStop++; continue; } if (stop.gap > maxGap) { skipped.tooFar++; continue; } const p = placeOf(stop.venue_id); if (!p) { skipped.noCoords++; continue; } const actKey = leg.act + "|" + leg.year; // main act + opener count once if (!p[dir].has(actKey)) p[dir].set(actKey, new Map()); const items = p[dir].get(actKey); const itemKey = `${leg.artist_id}|${stop.venue_id}|${stop.date}`; // two-night runs: keep the closest night const old = items.get(itemKey); if (!old || stop.gap < old.stop.gap) items.set(itemKey, { ...leg, stop }); } const list = [...places.values()] .filter(p => p !== khPlace) .map(p => ({ ...p, nIn: p.in.size, nOut: p.out.size, itemsIn: [...p.in.values()].flatMap(m => [...m.values()]), itemsOut: [...p.out.values()].flatMap(m => [...m.values()]) })) .filter(p => p.nIn || p.nOut); return { places: list, kh: khPlace, skipped }; } 5d:T458,aaArtists = { const kh = "kettlehouse-amphitheater-bonner-mt"; const inYear = d => yearAll === "All" || d.startsWith(yearAll); const artists = new Map(); for (const s of showsAll[kh].shows) { if (!inYear(s.date)) continue; if (!artists.has(s.artist_id)) artists.set(s.artist_id, { id: s.artist_id, name: namesAll.artists[s.artist_id] ?? s.artist_id, khDates: [], venues: new Map() }); artists.get(s.artist_id).khDates.push(s.date); } // The export only holds shows from years an artist played KettleHouse, so no extra year check is needed. for (const [vid, v] of Object.entries(showsAll)) { if (vid === kh) continue; for (const s of v.shows) { const a = artists.get(s.artist_id); if (!a || !inYear(s.date)) continue; if (!a.venues.has(vid)) a.venues.set(vid, { dates: [], tours: new Set() }); const e = a.venues.get(vid); e.dates.push(s.date); e.tours.add(s.tour_id); } } for (const a of artists.values()) a.years = [...new Set(a.khDates.map(d => d.slice(0, 4)))].sort(); return artists; } 5e:T678,aaEdges = { // venue -> artists who played it const byVenue = new Map(); for (const a of aaArtists.values()) for (const vid of a.venues.keys()) { if (!byVenue.has(vid)) byVenue.set(vid, []); byVenue.get(vid).push(a.id); } // pair -> shared venues const pairs = new Map(); for (const [vid, ids] of byVenue) { ids.sort(); for (let i = 0; i < ids.length; i++) for (let j = i + 1; j < ids.length; j++) { if (aaIgnoreBills) { const ta = aaArtists.get(ids[i]).venues.get(vid).tours; const tb = aaArtists.get(ids[j]).venues.get(vid).tours; if ([...ta].some(t => t.includes("+") && tb.has(t))) continue; // same bill = touring together } const k = ids[i] + "|" + ids[j]; if (!pairs.has(k)) pairs.set(k, []); pairs.get(k).push(vid); } } const all = []; for (const [k, venues] of pairs) { if (venues.length < aaMinShared) continue; const [source, target] = k.split("|"); const union = aaArtists.get(source).venues.size + aaArtists.get(target).venues.size - venues.length; all.push({ source, target, shared: venues.length, jaccard: venues.length / union, venues }); } // backbone: each artist keeps its aaTopK most similar neighbors const byNode = new Map(); for (const e of all) for (const id of [e.source, e.target]) { if (!byNode.has(id)) byNode.set(id, []); byNode.get(id).push(e); } const keep = new Set(); for (const list of byNode.values()) list.sort((a, b) => b.jaccard - a.jaccard).slice(0, aaTopK).forEach(e => keep.add(e)); return { all, edges: [...keep], byNode }; } 5f:T839,aaCommunities = { const adj = new Map(); for (const e of aaEdges.edges) for (const [a, b] of [[e.source, e.target], [e.target, e.source]]) { if (!adj.has(a)) adj.set(a, []); adj.get(a).push([b, e.jaccard]); } // weighted label propagation (deterministic order, capped iterations) const ids = [...adj.keys()].sort(); const label = new Map(ids.map(id => [id, id])); for (let it = 0; it < 50; it++) { let changed = 0; for (const id of ids) { const tally = new Map(); for (const [n, w] of adj.get(id)) tally.set(label.get(n), (tally.get(label.get(n)) ?? 0) + w); let best = label.get(id), bw = tally.get(best) ?? 0; for (const [l, w] of tally) if (w > bw || (w === bw && l < best)) { best = l; bw = w; } if (best !== label.get(id)) { label.set(id, best); changed++; } } if (!changed) break; } // groups of 3+ artists, numbered by size; smaller ones go to -1 const groups = d3.groups(ids, id => label.get(id)) .map(([, members]) => members) .filter(m => m.length >= 3) .sort((a, b) => b.length - a.length); const of = new Map(ids.map(id => [id, -1])); groups.forEach((m, i) => m.forEach(id => of.set(id, i))); // signature venues: played by far more of this group than of KettleHouse artists overall const N = aaArtists.size; const venueCount = new Map(); for (const a of aaArtists.values()) for (const v of a.venues.keys()) venueCount.set(v, (venueCount.get(v) ?? 0) + 1); const info = groups.map((members, idx) => { const c = new Map(); for (const id of members) for (const v of aaArtists.get(id).venues.keys()) c.set(v, (c.get(v) ?? 0) + 1); const minCount = Math.max(2, Math.ceil(members.length * 0.25)); const signature = [...c] .filter(([, n]) => n >= minCount) .map(([v, n]) => ({ v, n, lift: (n / members.length) / (venueCount.get(v) / N) })) .sort((a, b) => b.lift - a.lift || b.n - a.n) .slice(0, 4) .map(d => ({ ...d, name: namesAll.venues[d.v] ?? d.v })); return { idx, members, signature }; }); return { of, info }; } 60:T2078,artistGraph = { const { width, height } = mapSize; const plural = (n, w) => `${n} ${w}${n === 1 ? "" : "s"}`; const pct = x => `${Math.round(x * 100)}%`; const name = id => aaArtists.get(id)?.name ?? id; const venueLabel = v => { const loc = namesAll.locations[v] ?? {}; return `${namesAll.venues[v] ?? v} ${[loc.city, loc.state ?? loc.country].filter(Boolean).join(", ")}`; }; // ---- data (copies, d3-force mutates) ---- const links = aaEdges.edges.map(e => ({ ...e })); const linked = new Set(links.flatMap(e => [e.source, e.target])); const nodes = [...aaArtists.values()].filter(a => linked.has(a.id)).map(a => ({ ...a })); const isolated = aaArtists.size - nodes.length; const neighbors = new Map(nodes.map(n => [n.id, new Set()])); for (const e of links) { neighbors.get(e.source).add(e.target); neighbors.get(e.target).add(e.source); } // ---- color ---- const years = [...new Set([...aaArtists.values()].flatMap(a => a.years))].map(Number).sort(); const yearColor = d3.scaleSequential(d3.interpolateViridis).domain(d3.extent(years)); const commColor = i => i >= 0 && i < 10 ? d3.schemeTableau10[i] : "#bbb"; const fill = d => aaColor === "Community" ? commColor(aaCommunities.of.get(d.id)) : yearColor(+d.years[0]); const edgeColor = e => { const a = aaCommunities.of.get(e.source.id ?? e.source), b = aaCommunities.of.get(e.target.id ?? e.target); return aaColor === "Community" && a === b && a >= 0 ? commColor(a) : "#999"; }; const r = d => 3 + 1.6 * (d.years.length - 1); // repeat KettleHouse artists are bigger const w = d3.scaleSqrt().domain(d3.extent(links, e => e.shared)).range([0.6, 4]); // ---- tooltips ---- const commLabel = id => { const i = aaCommunities.of.get(id); if (i < 0) return "no group"; const sig = aaCommunities.info[i].signature.slice(0, 2).map(s => s.name).join(", "); return `group ${i + 1}${sig ? ` · ${sig}` : ""}`; }; const nodeHTML = d => { const top = (aaEdges.byNode.get(d.id) ?? []).slice(0, 10) // already sorted by similarity .map(e => { const other = e.source === d.id ? e.target : e.source; return `${name(other)}${e.shared} venues${pct(e.jaccard)}`; }).join(""); return `

${d.name}

KettleHouse ${d.years.join(", ")} · ${plural(d.venues.size, "other venue")}
${commLabel(d.id)}

Most similar routing (shared venues · overlap)

${top}

Click to pin and scroll

`; }; const edgeHTML = e => { const rows = e.venues .map(v => [namesAll.venues[v] ?? v, v]) .sort((a, b) => d3.ascending(a[0], b[0])) .map(([, v]) => `${venueLabel(v)}`).join(""); return `

${name(e.source.id)} ↔ ${name(e.target.id)}

${plural(e.shared, "shared venue")} · ${pct(e.jaccard)} overlap

${rows}

Click to pin and scroll

`; }; // ---- layout ---- const container = d3.create("div").style("position", "relative"); const legend = container.append("div") .style("display", "flex").style("flex-wrap", "wrap").style("gap", "4px 14px") .style("font", "12px sans-serif").style("margin", "4px 0 6px"); if (aaColor === "Community") { aaCommunities.info.slice(0, 10).forEach(g => { const item = legend.append("div").style("display", "flex").style("align-items", "center").style("gap", "5px"); item.append("span").style("width", "10px").style("height", "10px").style("border-radius", "50%") .style("background", commColor(g.idx)).style("display", "inline-block"); item.append("span").text(`${g.idx + 1} (${g.members.length}) ${g.signature.slice(0, 2).map(s => s.name).join(", ")}`); }); } else { years.forEach(y => { const item = legend.append("div").style("display", "flex").style("align-items", "center").style("gap", "5px"); item.append("span").style("width", "10px").style("height", "10px").style("border-radius", "50%") .style("background", yearColor(y)).style("display", "inline-block"); item.append("span").text(y); }); } const svg = container.append("svg") .attr("viewBox", [0, 0, width, height]) .style("max-width", "100%").style("height", "auto") .style("display", "block").style("background", "#fafaf8"); const { show, hide } = tooltipAll.attach(container); const g = svg.append("g"); svg.call(d3.zoom().scaleExtent([0.4, 8]).on("zoom", ({ transform }) => g.attr("transform", transform))); const sim = d3.forceSimulation(nodes) .force("link", d3.forceLink(links).id(d => d.id) .distance(e => 30 + 80 * (1 - e.jaccard)) .strength(e => 0.2 + 0.8 * e.jaccard)) .force("charge", d3.forceManyBody().strength(-45).distanceMax(300)) .force("collide", d3.forceCollide(d => r(d) + 1.5)) .force("x", d3.forceX(width / 2).strength(0.05)) .force("y", d3.forceY(height / 2).strength(0.07)); const link = g.append("g") .selectAll("line") .data(links) .join("line") .attr("stroke", edgeColor) .attr("stroke-width", e => w(e.shared)) .attr("stroke-opacity", 0.45) .style("cursor", "pointer") .on("pointerenter", function (event, e) { d3.select(this).attr("stroke-opacity", 1).attr("stroke", "#111"); show(event, edgeHTML(e)); }) .on("pointermove", (event, e) => show(event, edgeHTML(e))) .on("pointerleave", function (event, e) { d3.select(this).attr("stroke-opacity", 0.45).attr("stroke", edgeColor(e)); hide(); }); const node = g.append("g") .selectAll("circle") .data(nodes, d => d.id) .join("circle") .attr("r", r) .attr("fill", fill) .attr("stroke", "#fff").attr("stroke-width", 0.8) .style("cursor", "pointer") .on("pointerenter", (event, d) => { const nb = neighbors.get(d.id); node.attr("opacity", n => n.id === d.id || nb.has(n.id) ? 1 : 0.15); link.attr("stroke-opacity", e => e.source.id === d.id || e.target.id === d.id ? 0.9 : 0.05); label.attr("opacity", n => n.id === d.id || nb.has(n.id) ? 1 : 0.15); show(event, nodeHTML(d)); }) .on("pointermove", (event, d) => show(event, nodeHTML(d))) .on("pointerleave", () => { node.attr("opacity", 1); link.attr("stroke-opacity", 0.45); label.attr("opacity", 1); hide(); }) .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; })); // label the best-connected artists const deg = d => (aaEdges.byNode.get(d.id) ?? []).length; const labeled = new Set([...nodes].sort((a, b) => deg(b) - deg(a) || b.years.length - a.years.length) .slice(0, 25).map(d => d.id)); const label = g.append("g") .attr("pointer-events", "none") .attr("font", "10px sans-serif").attr("fill", "#222") .attr("stroke", "#fafaf8").attr("stroke-width", 3).attr("paint-order", "stroke") .selectAll("text") .data(nodes.filter(d => labeled.has(d.id)), d => d.id) .join("text") .attr("dx", d => r(d) + 3).attr("dy", 3) .text(d => d.name); svg.append("text") .attr("x", 10).attr("y", height - 10) .attr("font-size", 12).attr("fill", "#666") .text(`${yearAll} · ${nodes.length} artists · ${links.length} links (top ${aaTopK} per artist, ≥ ${aaMinShared} shared venues)` + (isolated ? ` · ${isolated} artists without a link hidden` : "") + ` · node size = KettleHouse years`); sim.on("tick", () => { link.attr("x1", e => e.source.x).attr("y1", e => e.source.y) .attr("x2", e => e.target.x).attr("y2", e => e.target.y); node.attr("cx", d => d.x).attr("cy", d => d.y); label.attr("x", d => d.x).attr("y", d => d.y); }); invalidation.then(() => sim.stop()); return container.node(); } 61:[{"id":"379ba8fe31eea68759ed96e5cd0525ba723efdc66fa9a79818b9494f35c68004081baca88031f7f6cbc5805b2167761e188be1142bad10acff7de1aa431eeaca","href":"https://static.observableusercontent.com/files/379ba8fe31eea68759ed96e5cd0525ba723efdc66fa9a79818b9494f35c68004081baca88031f7f6cbc5805b2167761e188be1142bad10acff7de1aa431eeaca","name":"kettlehouse_2025_min2_names.json","type":"application/json","lastModified":1793387828971,"size":30098},{"id":"2c0cf44ff725f475d9e6699add546bb5bfa0a8d0c601e4fc2b6637a212ee5daac03208c59008eab1275564d30e5a5a40527ef591772389b91bc6fcee9d269e1d","href":"https://static.observableusercontent.com/files/2c0cf44ff725f475d9e6699add546bb5bfa0a8d0c601e4fc2b6637a212ee5daac03208c59008eab1275564d30e5a5a40527ef591772389b91bc6fcee9d269e1d","name":"kettlehouse_2025_shows.json","type":"application/json","lastModified":1793387828476,"size":375429},{"id":"b2f3c9cd188ecd0deab06b84c216ef3db4d89ae33e98303e7e8e566bb5bf4b9c0b6ca39d02b5590c286cd131c1b64c2d086e72b315e71e714c0a2ce241c306bb","href":"https://static.observableusercontent.com/files/b2f3c9cd188ecd0deab06b84c216ef3db4d89ae33e98303e7e8e566bb5bf4b9c0b6ca39d02b5590c286cd131c1b64c2d086e72b315e71e714c0a2ce241c306bb","name":"kettlehouse_2025_names.json","type":"application/json","lastModified":1793387828476,"size":79266},{"id":"99051475baf6474523691ef2d044d39947e5a77a31053e080a8968830f5600f1737a84ab0f050161da53140a4049f5ed58a5a8601164e444765795e2c71fac12","href":"https://static.observableusercontent.com/files/99051475baf6474523691ef2d044d39947e5a77a31053e080a8968830f5600f1737a84ab0f050161da53140a4049f5ed58a5a8601164e444765795e2c71fac12","name":"kettlehouse_2025_min2_shows.json","type":"application/json","lastModified":1793387828969,"size":202665},{"id":"ccfd7b8306432a51b5e06cd59b5c336cc9cf23cbab37d36548417e7191dab2afb20c5e9f21123e9d5bcdcb3f3d54297bb8b1de8b02a62ac50dc2417f27a613e5","href":"https://static.observableusercontent.com/files/ccfd7b8306432a51b5e06cd59b5c336cc9cf23cbab37d36548417e7191dab2afb20c5e9f21123e9d5bcdcb3f3d54297bb8b1de8b02a62ac50dc2417f27a613e5","name":"kettlehouse_all_shows.json","type":"application/json","lastModified":1793654412036,"size":2188656},{"id":"de47c3291484f5c0cb8b94b2630f928dc612309eb901699e4c1b3304d83b2144234fe3d1a73e07dd59fbcee4346a33bade8ab31d720b678615164d28b7f45340","href":"https://static.observableusercontent.com/files/de47c3291484f5c0cb8b94b2630f928dc612309eb901699e4c1b3304d83b2144234fe3d1a73e07dd59fbcee4346a33bade8ab31d720b678615164d28b7f45340","name":"kettlehouse_all_names.json","type":"application/json","lastModified":1793655048416,"size":757032}] 49:{"id":"7f29dc77fc133857","slug":"project-4-networks","title":"Project 4: Networks","thumbnail":"55638b03f20cb7e575d14b4743ee9c2b227d8b36eb2dc2ed25df5f185aafaebd","access_level":"public","create_time":"$D2026-10-29T22:58:00.413Z","update_time":"$D2026-11-04T05:00:07.838Z","view_time":null,"first_public_time":"$D2026-11-04T05:00:19.967Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"a671c05dcf792fdc","login":"stellios-bonadurer","name":"Stellios Bonadurer","avatar_url":"https://avatars-next.observableusercontent.com/afa19a89070b70681752496266e084ba7d02fb86d99e8df269c443c46f5d6a87","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":336,"publish_version":336,"role":null,"authored":false,"authors":[{"type":"individual","id":"5e4ec071dd9acf5d","login":"stellios-bonadurer","name":"Stellios Bonadurer","avatar_url":"https://avatars-next.observableusercontent.com/afa19a89070b70681752496266e084ba7d02fb86d99e8df269c443c46f5d6a87","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"a671c05dcf792fdc","login":"stellios-bonadurer","name":"Stellios Bonadurer","avatar_url":"https://avatars-next.observableusercontent.com/afa19a89070b70681752496266e084ba7d02fb86d99e8df269c443c46f5d6a87","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":"Project 4: Networks","cells":[{"id":1,"value":"# Project 4: Networks","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"The Kettlehouse Amphitheater is a music venue located near Missoula, MT. Every year bands come from far away to play music in the Blackfoot valley. Artists travel to venues across the country (and internationally), from passive observation there appear to be other locations that bands frequent in addition to the Kettlehouse amphitheater.\n\nThe Kettlehouse Amphitheater is a medium sized venue with a stated capacity of 4,250 individuals. This is far too small for large artists such as Taylor Swift or Post Malone, it is also far too large for smaller bands. The Kettlehouse also has unique characteristics such as being an outdoor venue, not located near a very large population center, etc... Because of these observations my thought is that there are other venues that are on a similar tier of size/notoriety as the Kettlehouse Amphitheater which attract similar artists and may form a sort of circuit. **My hypothesis is that the Kettlehouse Amphitheater is strongly linked with ~5 other venues.**\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"viewof yearAll = Inputs.select(\n [\"All\", ...[...new Set(showsAll[\"kettlehouse-amphitheater-bonner-mt\"].shows.map(s => s.date.slice(0, 4)))].sort()],\n { label: \"Year\", value: \"All\" }\n)\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"viewof minActsAll = Inputs.select(\n new Map([\n [\"All venues\", 1],\n [\"2+ acts\", 2],\n [\"3+ acts\", 3],\n [\"5+ acts\", 5],\n [\"8+ acts\", 8],\n [\"15+ acts\", 15]\n ]),\n { label: \"Show venues played by\", value: 3 }\n)\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"viewof minWeightAll = Inputs.range(\n [1, d3.max(edgesAll, d => d.weight)],\n { label: \"Min shared acts per edge\", step: 1, value: yearAll === \"All\" ? 10 : 3 }\n)\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"viewof venueTableAll2 = Inputs.table(\n [...filteredNodesAll.values()]\n .filter(d => !d.kh)\n .map(d => {\n const loc = namesAll.locations[d.id] ?? {};\n return {\n Venue: d.name,\n \"City, State\": [loc.city, loc.state].filter(Boolean).join(\", \"),\n \"# of shared artists\": d.nArtists\n };\n })\n .sort((a, b) => d3.descending(a[\"# of shared artists\"], b[\"# of shared artists\"])\n || d3.ascending(a.Venue, b.Venue)),\n {\n columns: [\"Venue\", \"City, State\", \"# of shared artists\"],\n width: { Venue: 340, \"City, State\": 180, \"# of shared artists\": 140 },\n rows: 25,\n sort: \"# of shared artists\",\n reverse: true\n }\n)\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"## Conclusion\n\nWe can see that across years the Kettlehouse Amphitheater is very strongly linked with Red Rocks Amphitheater in Colorado. Anecdotally this makes sense because they are both outdoor venues that share a similar atmosphere. A relevant factor is also that Red Rocks is very popular and we see this relationship because of that, a further analysis make center on other venues (rate limits and Observable limit the scope for this project).\n\nAfter Red Rocks the next highest shared venue has ~1/2 the relations, showing how it really is in a league of it's own. We also see that Amphitheaters are highly represented on this list, showing that tours may tend to be outdoors or indoors, perhaps this is a seasonal pattern.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"## Load Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"shows = FileAttachment(\"kettlehouse_2025_shows.json\").json()\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"names = FileAttachment(\"kettlehouse_2025_names.json\").json()\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"us = d3.json(\"https://cdn.jsdelivr.net/npm/us-atlas@3/states-10m.json\")\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"projection = d3.geoAlbersUsa()\n .fitSize([975, 610], topojson.feature(us, us.objects.nation))\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"mapSize = ({ width: 975, height: 610 })\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"nodes = {\n const m = new Map();\n for (const [id, v] of Object.entries(shows)) {\n if (v.lat == null) continue;\n const p = projection([v.lon, v.lat]); // null when the venue is outside the US\n if (!p) continue;\n m.set(id, {\n id,\n name: names.venues[id],\n lat: v.lat, lon: v.lon,\n x: p[0], y: p[1],\n shows: v.shows,\n nArtists: new Set(v.shows.map(s => s.artist_id)).size,\n kh: id === \"kettlehouse-amphitheater-bonner-mt\"\n });\n }\n return m;\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"### For all data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"showsAll = FileAttachment(\"kettlehouse_all_shows.json\").json()\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"namesAll = FileAttachment(\"kettlehouse_all_names.json\").json()\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"## END OF CORE DOCUMENT","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"### Iteration 1","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"$4f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"Got a map of all the venues and they appear to be in the correct locations. Because there are many venues which only share one artist I am creating a way to filter these.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"viewof minActs = Inputs.select(\n new Map([\n [\"All venues\", 1],\n [\"2+ acts\", 2],\n [\"3+ acts\", 3],\n [\"5+ acts\", 5],\n [\"8+ acts\", 8]\n ]),\n { label: \"Show venues played by\", value: 2 }\n)\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"filteredNodes = {\n const m = new Map();\n for (const [id, n] of nodes) {\n // tour_id lists the main act first, e.g. \"weird-al-yankovic+puddles-pity-party\"\n const acts = new Set(n.shows.map(s => s.tour_id.split(\"+\")[0]));\n if (n.kh || acts.size >= minActs) m.set(id, { ...n, nActs: acts.size });\n }\n return m;\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"$50","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"Works, now to make the edges.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"$51","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"viewof minWeight = Inputs.range(\n [1, d3.max(edges, d => d.weight)],\n { label: \"Min shared acts per edge\", step: 1, value: 3 }\n)\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"$52","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"### Iteration\n\nNeed to add tooltips with info for nodes and edges.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"$53","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"### Iteration\n\nI like this for what it is, but now I want to make a plot that isn't constrained by geography to see emergent patterns.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"$54","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"### Iteration\n\nOne thing to consider is that we have connections between non Kettlehouse venues, which makes sense because artists played at all three - but it is important to not be misleading because those two may share more that Kettlehouse does not.\n\nThe colors feel appropriate.\n\nNow that we have a proof of concept for one year, I will parse all other years of data and create a selector.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"nodesAll = {\n const m = new Map();\n for (const [id, v] of Object.entries(showsAll)) {\n if (v.lat == null) continue;\n const p = projection([v.lon, v.lat]); // null when the venue is outside the US\n if (!p) continue;\n const vs = yearAll === \"All\" ? v.shows : v.shows.filter(s => s.date.startsWith(yearAll));\n if (!vs.length) continue;\n m.set(id, {\n id,\n name: namesAll.venues[id],\n lat: v.lat, lon: v.lon,\n x: p[0], y: p[1],\n shows: vs,\n // artist-years: an artist who played here in 2019 and 2023 counts twice under \"All\"\n nArtists: new Set(vs.map(s => s.artist_id + \"|\" + s.date.slice(0, 4))).size,\n kh: id === \"kettlehouse-amphitheater-bonner-mt\"\n });\n }\n return m;\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"filteredNodesAll = {\n const m = new Map();\n for (const [id, n] of nodesAll) {\n // one act = main act of the bill, per year\n const acts = new Set(n.shows.map(s => s.tour_id.split(\"+\")[0] + \"|\" + s.date.slice(0, 4)));\n if (n.kh || acts.size >= minActsAll) m.set(id, { ...n, nActs: acts.size });\n }\n return m;\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"$55","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"$56","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"$57","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"$58","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"$59","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"viewof venueTableAll = Inputs.table(\n [...filteredNodesAll.values()]\n .filter(d => !d.kh)\n .map(d => {\n const loc = namesAll.locations[d.id] ?? {};\n return {\n Venue: d.name,\n \"City, State\": [loc.city, loc.state].filter(Boolean).join(\", \"),\n \"# of shared artists\": d.nArtists\n };\n })\n .sort((a, b) => d3.descending(a[\"# of shared artists\"], b[\"# of shared artists\"])\n || d3.ascending(a.Venue, b.Venue)),\n {\n columns: [\"Venue\", \"City, State\", \"# of shared artists\"],\n width: { Venue: 340, \"City, State\": 180, \"# of shared artists\": 140 },\n rows: 25,\n sort: \"# of shared artists\",\n reverse: true\n }\n)\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"## Iteration\n\nInteresting, I want to experiment with some other ideas.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"viewof maxGap = Inputs.range([1, 30], { label: \"Max days between stop and KettleHouse\", step: 1, value: 7 })\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"viewof flowDir = Inputs.radio([\"Arriving from\", \"Departing to\", \"Both\"], { label: \"Show\", value: \"Both\" })\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"$5a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"world = d3.json(\"https://cdn.jsdelivr.net/npm/world-atlas@2/countries-50m.json\")\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"flowProjection = d3.geoAlbers()\n .rotate([100, 0])\n .fitExtent(\n [[10, 10], [mapSize.width - 10, mapSize.height - 10]],\n { type: \"MultiPoint\", coordinates: [[-125, 25], [-67, 25], [-125, 52], [-67, 49]] }\n )\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"$5b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"$5c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"### Iteration\n\nDon't like this, moving on.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"viewof aaTopK = Inputs.range([1, 10], { label: \"Strongest links kept per artist\", step: 1, value: 3 })\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"viewof aaMinShared = Inputs.range([1, 15], { label: \"Min shared venues for a link\", step: 1, value: 3 })\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"viewof aaIgnoreBills = Inputs.toggle({ label: \"Ignore venues where the pair shared a bill\", value: true })\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"viewof aaColor = Inputs.radio([\"Community\", \"First KettleHouse year\"], { label: \"Color by\", value: \"Community\" })\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"$5d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"$5e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"$5f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"$60","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"viewof aaCommunityTable = Inputs.table(\n aaCommunities.info.map(g => ({\n Group: g.idx + 1,\n Artists: g.members.length,\n \"Signature venues\": g.signature.map(s => `${s.name} (${s.n})`).join(\" · \"),\n \"Example artists\": g.members\n .map(id => aaArtists.get(id))\n .sort((a, b) => b.years.length - a.years.length || b.venues.size - a.venues.size)\n .slice(0, 6).map(a => a.name).join(\", \")\n })),\n {\n columns: [\"Group\", \"Artists\", \"Signature venues\", \"Example artists\"],\n width: { Group: 50, Artists: 60, \"Signature venues\": 420, \"Example artists\": 420 },\n rows: 15\n }\n)\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"### Iteration\n\nAgain interesting, but not a good visual (crowded) and doesn't show a meaningful result.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W61","stdlib":"2"}} 44:null