2c:null 2d:["$","title",null,{"children":"MLB affiliates, 2026 | Alec Barrett | Observable"}] 32:T2cf1,chart = { const W = 960, H = 600; const THETA = 30 * Math.PI / 180, SQUASH = 0.5, GAP = 165; const LINE_OPACITY = 0.3, DIM_OPACITY = 0.06; const RADIUS = { "MLB": 6.5, "Triple-A": 5, "Double-A": 4.4, "High-A": 3.8, "Single-A": 3.3, "Rookie": 2.8 }; const LEVEL_SUB = { "Rookie": "ACL / FCL complexes" }; const visible = new Set(levels.length ? levels : LEVELS); const height = Math.round(Math.min(760, Math.max(420, width * 0.62))); const orgs = affiliates.orgs; const teams = affiliates.rows .filter(r => r.lat != null && r.country !== "Dominican Republic") .map(r => ({ ...r, org: orgs.find(o => o.org_id === r.org_id) })); const conus = id => !["02", "15", "72", "60", "66", "69", "78"].includes(id); const states = topojson.feature(us, us.objects.states); states.features = states.features.filter(f => conus(f.id)); const stateMesh = topojson.mesh(us, { type: "GeometryCollection", geometries: us.objects.states.geometries.filter(g => conus(g.id)) }, (a, b) => a !== b); const neighbors = { type: "FeatureCollection", features: topojson.feature(world, world.objects.countries).features.filter(f => ["124", "484", "192", "044"].includes(f.id)) }; const projection = d3.geoConicEqualArea().parallels([29.5, 45.5]).rotate([96, 0]).center([0, 38.7]) .fitExtent([[24, 24], [W - 24, H - 24]], { type: "FeatureCollection", features: [...states.features, { type: "Feature", geometry: { type: "MultiPoint", coordinates: teams.map(t => [t.lon, t.lat]) } }] }); const geoPath = d3.geoPath(projection); for (const t of teams) [t.x, t.y] = projection([t.lon, t.lat]); let t = 0, hoverOrg = null, pinnedOrg = null, hoverTeam = null; const cx = W / 2, cy = H / 2; const vis = LEVELS.filter(l => visible.has(l)); const stackIndex = level => vis.indexOf(level) - (vis.length - 1) / 2; function planeMatrix(level, tt) { const a = THETA * tt, k = 1 - (1 - SQUASH) * tt; const m = [Math.cos(a), k * Math.sin(a), -Math.sin(a), k * Math.cos(a)]; const off = tt * stackIndex(level) * GAP; return [...m, cx - (m[0] * cx + m[2] * cy), cy + off - (m[1] * cx + m[3] * cy)]; } const apply = (M, x, y) => [M[0] * x + M[2] * y + M[4], M[1] * x + M[3] * y + M[5]]; const container = html`

`; const svg = d3.select(container).append("svg") .attr("width", width).attr("height", height) .attr("preserveAspectRatio", "xMidYMid meet") .style("display", "block").style("background", "#f6f4ef").style("border-radius", "8px"); const uid = DOM.uid("plate"); svg.append("defs").append("clipPath").attr("id", uid.id) .append("rect").attr("width", W).attr("height", H).attr("rx", 10); const root = svg.append("g"); const labelLayer = d3.create("svg:g"); const layer = {}; for (const level of [...LEVELS].reverse()) { const g = root.append("g"); const links = g.append("g"); const plane = g.append("g"); plane.append("rect").attr("class", "plate").attr("width", W).attr("height", H).attr("rx", 10) .attr("fill", "#fbfaf7").attr("stroke", "#c9c3b6").attr("vector-effect", "non-scaling-stroke"); const geo = plane.append("g").attr("clip-path", uid); geo.append("path").attr("d", geoPath(neighbors)).attr("fill", "#e7e3d9").attr("opacity", 0.55); geo.append("path").attr("d", geoPath(states)).attr("fill", "#e7e3d9"); geo.append("path").attr("d", geoPath(stateMesh)).attr("fill", "none").attr("stroke", "#fff") .attr("stroke-width", 0.8).attr("vector-effect", "non-scaling-stroke"); const dots = g.append("g"); const label = labelLayer.append("g"); label.append("text").attr("class", "lvl").attr("font-weight", 650).attr("fill", "#5b5f66").text(level); label.append("text").attr("class", "sub").attr("fill", "#8b9097").text(LEVEL_SUB[level] || ""); layer[level] = { g, links, plane, dots, label }; } const focusLayer = root.append("g").attr("pointer-events", "none"); root.append(() => labelLayer.node()); // tooltip const tip = d3.select(container).append("div") .style("position", "absolute").style("pointer-events", "none").style("opacity", 0) .style("max-width", "330px").style("background", "#fff").style("border", "1px solid #e2ded5") .style("border-radius", "8px").style("box-shadow", "0 6px 24px rgba(0,0,0,.12)") .style("padding", "10px 12px").style("font-size", "12.5px").style("transition", "opacity .12s"); function showTip(ev) { const o = hoverOrg; if (!o) return; const rows = o.teams.filter(tm => tm.country !== "Dominican Republic").map(tm => { const hl = hoverTeam && tm.team_id === hoverTeam.team_id; return `${tm.level} ${tm.team_name}
${tm.league} · ${hl ? tm.venue + ", " : ""}${tm.city}${tm.state ? ", " + tm.state : ""}`; }).join(""); const dsl = o.teams.filter(tm => tm.country === "Dominican Republic").map(tm => tm.team_name).join(", "); tip.html(`

${o.org_name}

${rows}${dsl ? `` : ""}

DSL

${dsl}

`) .style("opacity", 1); moveTip(ev); } function moveTip(ev) { const [mx, my] = d3.pointer(ev, container); const tw = tip.node().offsetWidth, th = tip.node().offsetHeight; let x = mx + 16, y = my + 16; if (x + tw > width - 4) x = mx - tw - 16; if (y + th > height - 4) y = Math.max(4, height - th - 4); tip.style("left", x + "px").style("top", y + "px"); } const hideTip = () => tip.style("opacity", 0); // dots for (const level of LEVELS) layer[level].dots.selectAll("circle") .data(visible.has(level) ? teams.filter(tm => tm.level === level) : []) .join("circle").attr("fill", d => d.org.color).attr("stroke", "#fff").style("cursor", "pointer") .on("mouseenter", (ev, d) => { hoverTeam = d; hoverOrg = d.org; highlight(); showTip(ev); }) .on("mousemove", moveTip) .on("mouseleave", () => { hoverTeam = null; hoverOrg = null; highlight(); hideTip(); }) .on("click", (ev, d) => { pinnedOrg = pinnedOrg === d.org ? null : d.org; highlight(); }); // links between consecutive visible levels const segs = []; for (const o of orgs) { const chain = vis.map(l => teams.find(tm => tm.org_id === o.org_id && tm.level === l)).filter(Boolean); for (let i = 0; i < chain.length - 1; i++) segs.push({ org: o, a: chain[i], b: chain[i + 1] }); } for (const level of LEVELS) { const g = layer[level].links.selectAll("g").data(segs.filter(s => s.a.level === level)).join("g"); g.append("path").attr("class", "line").attr("fill", "none").attr("stroke-linecap", "round"); g.append("path").attr("class", "hit").attr("fill", "none").attr("stroke", "transparent") .style("pointer-events", "stroke").style("cursor", "pointer") .on("mouseenter", (ev, s) => { hoverOrg = s.org; highlight(); showTip(ev); }) .on("mousemove", moveTip) .on("mouseleave", () => { hoverOrg = null; highlight(); hideTip(); }) .on("click", (ev, s) => { pinnedOrg = pinnedOrg === s.org ? null : s.org; highlight(); }); } function render() { const bottom = vis[vis.length - 1]; const M = Object.fromEntries(LEVELS.map(l => [l, planeMatrix(l, t)])); let x0 = Infinity, y0 = Infinity, x1 = -Infinity, y1 = -Infinity; for (const level of vis) for (const [x, y] of [[0, 0], [W, 0], [0, H], [W, H]]) { const [px, py] = apply(M[level], x, y); x0 = Math.min(x0, px); x1 = Math.max(x1, px); y0 = Math.min(y0, py); y1 = Math.max(y1, py); } const wantL = 125 * t + 8, pad = 8; let u = Math.max(1e-3, (x1 - x0) / (width - wantL - pad), (y1 - y0) / (height - 2 * pad)); x0 -= wantL * u; x1 += pad * u; y0 -= pad * u; y1 += pad * u; svg.attr("viewBox", `${x0} ${y0} ${x1 - x0} ${y1 - y0}`); u = Math.max((x1 - x0) / width, (y1 - y0) / height); for (const level of LEVELS) { const L = layer[level], on = visible.has(level); L.g.attr("display", on ? null : "none"); if (!on) { L.label.attr("display", "none"); continue; } L.plane.attr("transform", `matrix(${M[level].join(",")})`) .attr("opacity", level === bottom ? 1 : t * 0.72); L.plane.select(".plate").attr("opacity", level === bottom ? t : 1); L.dots.selectAll("circle").each(function (d) { [d.px, d.py] = apply(M[level], d.x, d.y); d3.select(this).attr("cx", d.px).attr("cy", d.py) .attr("r", RADIUS[level] * u).attr("stroke-width", (level === "MLB" ? 1.6 : 0.9) * u); }); const [lx, ly] = apply(M[level], 0, H); L.label.attr("opacity", t).attr("display", t < 0.02 ? "none" : null); L.label.select(".lvl").attr("x", lx - 14 * u).attr("y", ly).attr("text-anchor", "end").attr("font-size", 14 * u); L.label.select(".sub").attr("x", lx - 14 * u).attr("y", ly + 15 * u).attr("text-anchor", "end").attr("font-size", 11 * u); } for (const level of LEVELS) layer[level].links.selectAll("g").each(function (s) { const { px: ax, py: ay } = s.a, { px: bx, py: by } = s.b; const mx = (ax + bx) / 2, my = (ay + by) / 2, dx = bx - ax, dy = by - ay, bend = 0.18 * (1 - t); const d = `M${ax},${ay}Q${mx - dy * bend},${my + dx * bend} ${bx},${by}`; d3.select(this).select(".line").attr("d", d).attr("stroke", s.org.color).attr("stroke-width", 1.6 * u); d3.select(this).select(".hit").attr("d", d).attr("stroke-width", 9 * u); }); highlight(); } function highlight() { const focus = hoverOrg || pinnedOrg; const fLines = [], fDots = []; for (const level of LEVELS) { layer[level].links.selectAll("g").each(function (s) { if (focus && s.org === focus) fLines.push(this.firstChild); }) .select(".line").attr("stroke-opacity", s => !focus ? LINE_OPACITY : s.org === focus ? 1 : DIM_OPACITY); layer[level].dots.selectAll("circle").each(function (d) { if (focus && d.org === focus) fDots.push(this); }) .attr("opacity", d => !focus || d.org === focus ? 1 : 0.18); } focusLayer.selectAll("path").data(fLines).join("path").attr("fill", "none").attr("stroke-linecap", "round") .attr("d", el => el.getAttribute("d")).attr("stroke", el => el.getAttribute("stroke")) .attr("stroke-width", el => el.getAttribute("stroke-width") * 1.4); focusLayer.selectAll("circle").data(fDots).join("circle") .attr("cx", el => el.getAttribute("cx")).attr("cy", el => el.getAttribute("cy")) .attr("r", el => el.getAttribute("r") * 1.15).attr("fill", el => el.getAttribute("fill")) .attr("stroke", "#fff").attr("stroke-width", el => el.getAttribute("stroke-width") * 1.4); } container.setMode = (m, animate = true) => { const from = t, to = m === "Exploded by level" ? 1 : 0; if (!animate) { t = to; render(); return; } svg.interrupt().transition().duration(1100).ease(d3.easeCubicInOut) .tween("mode", () => p => { t = from + (to - from) * p; render(); }); }; container.setMode(viewof mode.value, false); render(); return container; }33:T8cc,affiliates = { const API = "https://statsapi.mlb.com/api/v1"; const sportLevel = { 1: "MLB", 11: "Triple-A", 12: "Double-A", 13: "High-A", 14: "Single-A", 16: "Rookie" }; const teams = (await d3.json(`${API}/teams?sportIds=1,11,12,13,14,16&season=${season}`)).teams.filter(t => t.active); const venueIds = [...new Set(teams.map(t => t.venue?.id).filter(Boolean))]; const venues = new Map(); for (let i = 0; i < venueIds.length; i += 50) { const res = await d3.json(`${API}/venues?venueIds=${venueIds.slice(i, i + 50).join(",")}&hydrate=location&season=${season}`); for (const v of res.venues) venues.set(v.id, v); } const mlb = new Map(teams.filter(t => t.sport.id === 1).map(t => [t.id, t])); const rows = []; for (const t of teams) { const level = sportLevel[t.sport.id]; const orgId = t.sport.id === 1 ? t.id : t.parentOrgId; const org = mlb.get(orgId); if (!org) continue; const v = venues.get(t.venue?.id) ?? {}, loc = v.location ?? {}; const venue = v.name ?? t.venue?.name ?? ""; let c = loc.defaultCoordinates, coord_source = c ? "api" : ""; if (!c) { const hit = Object.entries(MANUAL_COORDS).find(([prefix]) => venue.startsWith(prefix)); if (hit) { c = { latitude: hit[1][0], longitude: hit[1][1] }; coord_source = "manual"; } } rows.push({ org_id: orgId, org_name: org.name, org_abbrev: org.abbreviation, org_color: CLUB_COLORS[orgId] ?? "#888", level, level_order: LEVELS.indexOf(level), team_id: t.id, team_name: t.name, league: t.league?.name ?? "", division: t.division?.name ?? "", venue, city: loc.city ?? t.locationName ?? "", state: loc.stateAbbrev ?? "", country: loc.country === "DOM" ? "Dominican Republic" : (loc.country ?? ""), lat: c?.latitude ?? null, lon: c?.longitude ?? null, coord_source }); } rows.sort((a, b) => d3.ascending(a.org_name, b.org_name) || a.level_order - b.level_order || d3.ascending(a.team_name, b.team_name)); const orgs = [...mlb.values()].sort((a, b) => d3.ascending(a.name, b.name)).map(o => ({ org_id: o.id, org_name: o.name, org_abbrev: o.abbreviation, color: CLUB_COLORS[o.id] ?? "#888", teams: rows.filter(r => r.org_id === o.id) })); return { rows, orgs }; }34:[] 30:{"id":"6691ada55c6acfca","slug":"mlb-affiliates-2026","title":"MLB affiliates, 2026","thumbnail":"fede31d7d61e68a04900e41bf1afa0a435e5f4b11d6ea8ebdc1960c9d4adb55f","access_level":"public","create_time":"$D2026-10-02T01:12:01.934Z","update_time":"$D2026-10-02T01:19:25.327Z","view_time":null,"first_public_time":"$D2026-10-02T01:19:09.799Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"a22e826d0f3dc150","login":"anbnyc","name":"Alec Barrett","avatar_url":"https://avatars-next.observableusercontent.com/f36768e14bb49782102d13478101b1a5552af4ab66dea95cad1b7e8157bafdff","tier":"starter_2024"},"version":87,"publish_version":87,"role":null,"authored":false,"authors":[{"type":"individual","id":"3efd68de913f5c25","login":"anbnyc","name":"Alec Barrett","avatar_url":"https://avatars-next.observableusercontent.com/f36768e14bb49782102d13478101b1a5552af4ab66dea95cad1b7e8157bafdff","tier":null}],"members":[{"type":"team","id":"a22e826d0f3dc150","login":"anbnyc","name":"Alec Barrett","avatar_url":"https://avatars-next.observableusercontent.com/f36768e14bb49782102d13478101b1a5552af4ab66dea95cad1b7e8157bafdff","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"MLB affiliates, 2026","cells":[{"id":1,"value":"# MLB affiliates, ${season}\n\n_Disclaimer: AI-generated content and code (Claude Opus 5.5). A human has not (yet) manually quality-checked the data for accuracy._\n\nEvery major league club and its minor league affiliates, pulled live from the [MLB Stats API](https://statsapi.mlb.com). Each organization's clubs are joined by a line in its club color, from MLB down through Triple-A, Double-A, High-A, Single-A and the Rookie complex leagues. Hover a line or dot to trace an organization; click to pin it.\n\n**Single map** puts every club on one map. **Exploded by level** gives each level its own map, stacked isometrically, with the lines running between them.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"viewof mode = Inputs.radio([\"Single map\", \"Exploded by level\"], { value: \"Single map\", label: \"View\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"viewof levels = Inputs.checkbox(LEVELS, { value: LEVELS, label: \"Levels\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"{ chart.setMode(mode); return md`${affiliates.rows.filter(r => r.lat != null && r.country !== \"Dominican Republic\").length} clubs mapped. The ${affiliates.rows.filter(r => r.country === \"Dominican Republic\").length} Dominican Summer League clubs are listed in tooltips but not mapped. Club colors and coordinates for a few new parks and spring-training complexes are entered by hand.`; }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"md`## The data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"Inputs.table(affiliates.rows, {\n columns: [\"org_name\", \"level\", \"team_name\", \"league\", \"venue\", \"city\", \"state\", \"lat\", \"lon\"],\n header: { org_name: \"Organization\", level: \"Level\", team_name: \"Club\", league: \"League\", venue: \"Ballpark\", city: \"City\", state: \"State\" },\n sort: \"org_name\", rows: 20\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"season = 2026","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"LEVELS = [\"MLB\", \"Triple-A\", \"Double-A\", \"High-A\", \"Single-A\", \"Rookie\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"CLUB_COLORS = ({\n 108: \"#BA0021\", 109: \"#A71930\", 110: \"#DF4601\", 111: \"#BD3039\", 112: \"#0E3386\",\n 113: \"#C6011F\", 114: \"#E31937\", 115: \"#33006F\", 116: \"#FA4616\", 117: \"#EB6E1F\",\n 118: \"#004687\", 119: \"#005A9C\", 120: \"#AB0003\", 121: \"#FF5910\", 133: \"#006B3F\",\n 134: \"#FDB827\", 135: \"#A2AAAD\", 136: \"#005C5C\", 137: \"#FD5A1E\", 138: \"#C41E3A\",\n 139: \"#8FBCE6\", 140: \"#003278\", 141: \"#134A8E\", 142: \"#002B5C\", 143: \"#E81828\",\n 144: \"#CE1141\", 145: \"#27251F\", 146: \"#00A3E0\", 147: \"#0C2340\", 158: \"#12284B\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"MANUAL_COORDS = ({\n \"Nymeo Field\": [39.3990, -77.3975],\n \"Wilson Ballpark\": [35.7175, -77.9080],\n \"CarMax Park\": [37.5735, -77.4705],\n \"Salt River Fields Complex\": [33.5453, -111.8853],\n \"Lew Wolff Training Complex\": [33.4275, -111.8318],\n \"Twin Lakes Park\": [27.3122, -82.4595],\n \"Camelback Ranch Complex\": [33.5108, -112.2932],\n \"Goodyear Ballpark Complex\": [33.4280, -112.3910],\n \"Tigertown Complex\": [28.0745, -81.9508],\n \"CACTI Park of the Palm Beaches Complex\": [26.7686, -80.1047],\n \"Surprise Stadium Complex\": [33.6286, -112.3786],\n \"Tempe Diablo Stadium Complex\": [33.4004, -111.9681],\n \"Roger Dean Stadium Complex\": [26.8915, -80.1159],\n \"Lee Health Sports Complex\": [26.5372, -81.8424],\n \"St. Lucie Sports Complex\": [27.3249, -80.4053],\n \"Yankee Complex\": [27.9800, -82.5070],\n \"Carpenter Complex\": [27.9718, -82.7310],\n \"Pirate City Complex\": [27.4700, -82.5410],\n \"Peoria Stadium Complex\": [33.6318, -112.2302],\n \"Bobby Mattick Complex\": [28.0420, -82.7600]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"us = d3.json(\"https://cdn.jsdelivr.net/npm/us-atlas@3/states-10m.json\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"world = d3.json(\"https://cdn.jsdelivr.net/npm/world-atlas@2/countries-50m.json\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"2"}} 31:"$30:body"