30:T4a6,mundiales = Plot.plot({ caption: "Datos: Wikidata - por @rusosnith - visualizando.ar", marginLeft: 150, height: 800, width: 800, color: { range: ["#B2B2B2", "#E5A59A", "#ED6258", "#C60000"] }, x: { type: "point", label: "Mundial →", tickFormat: "d" }, y: { label: "↑ IMDb rating", domain: Array.from(jugadoresUnicos).map((d) => d[0]), axis: null }, marks: [ Plot.ruleY( jugadores.filter((d) => jugadoresUnicos.get(d.jugador)), Plot.groupY( { x1: "min", x2: "max" }, { x: "mundial", y: "jugador", stroke: (d) => jugadoresUnicos.get(d.jugador) } ) ), Plot.dot( jugadores.filter((d) => jugadoresUnicos.get(d.jugador)), { x: "mundial", y: "jugador", fill: (d) => jugadoresUnicos.get(d.jugador) } ), Plot.text( jugadores.filter((d) => jugadoresUnicos.get(d.jugador)), Plot.selectFirst({ x: "mundial", y: "jugador", text: "jugador", textAnchor: "end", z: "jugador", dx: -10, fill: (d) => jugadoresUnicos.get(d.jugador) }) ) ] })31:T52a,Plot.plot({ marginTop: 30, x: { type: "point", label: "Mundial →", tickFormat: "d" }, y: { label: "Edad", tickFormat: "d", domain: [18, 38] }, marks: [ Plot.dot(jugadores, { x: "mundial", y: "Edad al Mundial", fill: "silver", r: 5, mixBlendMode: "multiply" }), Plot.line( jugadores, Plot.regression({ x: "mundial", y: "Edad al Mundial", strokeDasharray: [6, 4], curve: "natural", strokeWidth: 1, //stroke: "black", type: "loess", //"loess", order: 5, // for "poly" // stroke: "sitio", bandwidth: 0.15 // for "loess" }) ), Plot.dot( jugadores.filter((d) => d.jugador == "Lionel Messi"), { x: "mundial", y: "Edad al Mundial", stroke: "red", r: 8 } ), Plot.line( jugadores.filter((d) => d.jugador == "Lionel Messi"), { x: "mundial", y: "Edad al Mundial", stroke: "red" } ), Plot.text( jugadores.filter((d) => d.jugador == "Lionel Messi"), Plot.selectLast({ x: "mundial", y: "Edad al Mundial", fill: "red", dx: -13, textAnchor: "end", text: "jugador" }) ) ] })32:T675,Plot.plot({ caption: "Datos: Wikidata - por @rusosnith - visualizando.ar", marginTop: 0, marginLeft: 150, marginRight: 100, y: { label: null, tickSize: 0 }, x: { axis: null }, marks: [ Plot.barX( jugadores, Plot.groupY( { x: "max" }, { y: "jugador", fill: "#7D93D2", x: "PJ sel", sort: { y: "x", reverse: true, limit: 15 } } ) ), Plot.tickX( jugadores, Plot.groupY( { x: "max" }, { y: "jugador", z: "mundial", stroke: "white", x: "PJ sel", sort: { y: "x", reverse: true, limit: 15 } } ) ), Plot.text( jugadores, Plot.groupY( { x: "max", text: (d) => "'" + d[0].mundial.toString().substr(2) }, { y: "jugador", z: "mundial", fill: "white", dx: -3, // text: "mundial", x: "PJ sel", textAnchor: "end", sort: { y: "x", reverse: true, limit: 15 } } ) ), Plot.text( jugadores, Plot.groupY( { x: "max", text: "max" }, { y: "jugador", x: "PJ sel", text: "PJ sel", fontWeight: 600, textAnchor: "start", sort: { y: "x", reverse: true, limit: 15 } } ) ), Plot.tickX( jugadores, Plot.groupY( { z: "max", x: "max" }, { x: 0, y: "jugador", z: "PJ sel", strokeWidth: 2, sort: { y: "x", reverse: true, limit: 15 } } ) ) ] })33:T2f67,{ // ───────────────────────────────────────────── // CONFIGURACIÓN // ───────────────────────────────────────────── const config = { // Dimensiones (todo lo demás se deriva de esto) WIDTH: 700, HEIGHT: 820, MARGIN_TOP: 0, MARGIN_RIGHT: 10, MARGIN_BOTTOM: 10, MARGIN_LEFT: 100, // Radios R: 9, R_GROUP: 6, R_IN: 4, R_PEN_EXTRA: 4, R_CHAMPION: 12, // Grosores de borde STROKE: 1.5, STROKE_FINAL: 3.5, STROKE_LINE: 3, STROKE_PEN: 1.5, STROKE_CHAMPION: 2, // Túnel de grupos STROKE_TUNNEL: 22, COLOR_TUNNEL: "#acacac40", // Toggles NOMBRES_COMPLETOS_KO: true, // true = nombre completo del rival en eliminación MOSTRAR_AUSENCIAS: false, // true = incluir mundiales donde Argentina no jugó // Colores COLOR_LOSS: "#c62828", COLOR_DRAW: "#9e9e9e", COLOR_CIRCLE: "white", COLOR_BORDER: "#333", COLOR_LINE: "#bbb", COLOR_LABEL: "#000", COLOR_ABSENT: "#bbb", COLOR_RIVAL: "#444", COLOR_CHAMPION: "#f2b705", COLOR_CHAMPION_BORDER: "black", // Marco / mapa COLOR_BG: "#f7f3e8", COLOR_FRAME: "#d8cfb8", STROKE_FRAME: 2, // Espaciado horizontal (en unidades de dato) GROUP_STEP: 0.52, KO_STEP: 1.0, // Tipografía FS_LABEL: 12, FS_RIVAL: 10, FS_ABSENT: 11, FS_CHAMPION: 18, DY_GAP: 10, // Etiqueta del mundial (a la izquierda de la 1ª estación) DX_LABEL_GAP: 6, CHAMPION_LABEL: "CAMPEÓN", // Títulos TITLE: "EL CAMINO A LA FINAL", SUBTITLE: "Los recorridos de Argentina en la Copa Mundial", CREDIT: "Hecho por @rusosnith · visualizando.ar" }; // Reemplazos de sede para mundiales multi-país const sedeAbbr = { "2026": "USA", "2002": "COREA/JAPÓN" }; const stageLevel = { Final: 0, "Semi final": 1, "Cuartos de final": 2, "16avos de final": 3, "Segunda ronda": 2, "32avos de final": 4, "Fase de grupos": 5, "Ronda preliminaria": 6 }; const abbr = (s) => (s ?? "").slice(0, 3).toUpperCase(); const isGroup = (d) => d.Stage === "Fase de grupos" || d.Stage === "Ronda preliminaria"; const isFinal = (d) => d.Stage === "Final"; // "RUSIA 2018", "ITALIA '90", "URUGUAY 1930", "USA 2026" const cupLabel = (mundial, pais) => { const y = +mundial; const sede = (sedeAbbr[mundial] ?? pais ?? "").toUpperCase(); const año = y === 1930 || y >= 2000 ? `${y}` : `'${String(y).slice(2)}`; return `${sede} ${año}`; }; const outcome = (d) => { const ga = +d["Goles Arg"], gc = +d["Goles contrincante"]; if (d["Definicion por penales"] === "Sí") return d.Ganador === "Argentina" ? "win" : "loss"; if (ga > gc) return "win"; if (ga < gc) return "loss"; return "draw"; }; const byPenales = (d) => d["Definicion por penales"] === "Sí"; const esCampeon = (partidos) => { const final = partidos.find(isFinal); return final ? outcome(final) === "win" : false; }; const ausenciasBase = [ { mundial: "1938", pais: "Francia", motivo: "no participó (boicot)" }, { mundial: "1950", pais: "Brasil", motivo: "no participó (boicot)" }, { mundial: "1954", pais: "Suiza", motivo: "no participó (boicot)" }, { mundial: "1970", pais: "México", motivo: "no clasificó" } ]; const ausencias = config.MOSTRAR_AUSENCIAS ? ausenciasBase : []; const jugados = d3 .groups(data, (d) => d.Mundial) .map(([mundial, partidos]) => { const sorted = [...partidos].sort( (a, b) => new Date(a.Date) - new Date(b.Date) ); return { mundial, pais: sorted[0]?.Pais, partidos: sorted, minLevel: Math.min( d3.min(sorted, (p) => stageLevel[p.Stage] ?? 9), 4 // los que quedaron en grupos: último grupo cae a la izquierda de octavos ), campeon: esCampeon(sorted), ausente: false }; }); const todos = [ ...jugados, ...ausencias.map((a) => ({ ...a, partidos: [], ausente: true })) ].sort((a, b) => +b.mundial - +a.mundial); const maxMatches = d3.max(jugados, (c) => c.partidos.length); const CHAMPION_STEP = config.KO_STEP; const cups = todos.map((c, rowIndex) => { if (c.ausente) { return { rowIndex, label: cupLabel(c.mundial, c.pais), labelX: 0, ausente: true, motivo: c.motivo, positioned: [], line: null, champion: null, tunnel: null }; } const steps = c.partidos.map((p, i) => i === 0 ? 0 : isGroup(p) ? config.GROUP_STEP : config.KO_STEP ); const xsRel = d3.cumsum(steps); const span = xsRel[xsRel.length - 1]; const rightEdge = maxMatches - 1 - c.minLevel; const offset = rightEdge - span; const positioned = c.partidos.map((p, i) => ({ row: rowIndex, x: xsRel[i] + offset, rival: abbr(p["contrincante"]), rivalFull: p["contrincante"] ?? "", outcome: outcome(p), penales: byPenales(p), grupo: isGroup(p), final: isFinal(p) })); const finalDot = positioned.find((d) => d.final); const champion = c.campeon && finalDot ? { row: rowIndex, x: finalDot.x + CHAMPION_STEP } : null; const lastX = champion ? champion.x : positioned[positioned.length - 1].x; const groupDots = positioned.filter((d) => d.grupo); const tunnel = groupDots.length ? { row: rowIndex, x1: groupDots[0].x, x2: groupDots[groupDots.length - 1].x } : null; return { rowIndex, label: cupLabel(c.mundial, c.pais), labelX: positioned[0].x, ausente: false, positioned, champion, tunnel, line: { row: rowIndex, x1: positioned[0].x, x2: lastX } }; }); const rows = cups.flatMap((c) => c.positioned); const champions = cups.filter((c) => c.champion).map((c) => c.champion); const cupLines = cups.filter((c) => c.line).map((c) => c.line); const tunnels = cups.filter((c) => c.tunnel).map((c) => c.tunnel); const labels = cups.map((c) => ({ row: c.rowIndex, label: c.label, labelX: c.labelX, ausente: c.ausente })); const ausenciasRows = cups .filter((c) => c.ausente) .map((c) => ({ row: c.rowIndex, motivo: c.motivo })); // x real mínimo y máximo entre todo lo dibujado (evita reservar columnas vacías) const allX = [...rows.map((d) => d.x), ...champions.map((d) => d.x)]; const xMin = d3.min(allX); const xMax = d3.max(allX); const radiusOf = (d) => (d.grupo ? config.R_GROUP : config.R); const chart = Plot.plot({ width: config.WIDTH, height: config.HEIGHT, marginLeft: config.MARGIN_LEFT, marginRight: config.MARGIN_RIGHT, marginTop: config.MARGIN_TOP, marginBottom: config.MARGIN_BOTTOM, r: { type: "identity" }, x: { axis: null, domain: [xMin - 0.5, xMax + 0.7] }, y: { axis: null, domain: [-0.5, todos.length - 0.5] }, marks: [ // túnel de grupos Plot.link(tunnels, { x1: "x1", x2: "x2", y1: "row", y2: "row", stroke: config.COLOR_TUNNEL, strokeWidth: config.STROKE_TUNNEL, strokeLinecap: "round" }), // recorrido jugado Plot.link(cupLines, { x1: "x1", x2: "x2", y1: "row", y2: "row", stroke: config.COLOR_LINE, strokeWidth: config.STROKE_LINE }), // etiqueta del mundial, a la izquierda de la 1ª estación, en línea Plot.text(labels, { x: "labelX", y: "row", text: "label", textAnchor: "end", dx: -(config.R + config.DX_LABEL_GAP), dy: 0, fontSize: config.FS_LABEL, fontWeight: "bold", fill: (d) => (d.ausente ? config.COLOR_ABSENT : config.COLOR_LABEL) }), Plot.text(ausenciasRows, { x: 0, y: "row", text: "motivo", textAnchor: "start", fontSize: config.FS_ABSENT, fontStyle: "italic", fill: config.COLOR_ABSENT }), Plot.dot( rows.filter((d) => d.penales), { x: "x", y: "row", r: (d) => radiusOf(d) + config.R_PEN_EXTRA, fill: "none", stroke: config.COLOR_BORDER, strokeWidth: config.STROKE_PEN, strokeDasharray: "3,3" } ), Plot.dot(rows, { x: "x", y: "row", r: radiusOf, fill: config.COLOR_CIRCLE, stroke: config.COLOR_BORDER, strokeWidth: (d) => (d.final ? config.STROKE_FINAL : config.STROKE) }), Plot.dot( rows.filter((d) => d.outcome === "loss"), { x: "x", y: "row", r: config.R_IN, fill: config.COLOR_LOSS, stroke: "none" } ), Plot.dot( rows.filter((d) => d.outcome === "draw"), { x: "x", y: "row", r: config.R_IN, fill: config.COLOR_DRAW, stroke: "none" } ), // estación campeón Plot.dot(champions, { x: "x", y: "row", r: config.R_CHAMPION, fill: config.COLOR_CHAMPION, stroke: config.COLOR_CHAMPION_BORDER, strokeWidth: config.STROKE_CHAMPION }), Plot.text(champions, { x: "x", y: "row", text: () => "★", fontSize: config.FS_CHAMPION + 6, fill: config.COLOR_CHAMPION_BORDER }), Plot.text(champions, { x: "x", y: "row", text: () => config.CHAMPION_LABEL, dy: config.R_CHAMPION + config.DY_GAP, fontSize: config.FS_RIVAL, fill: config.COLOR_CHAMPION_BORDER, fontWeight: "bold" }), // rivales grupos Plot.text( rows.filter((d) => d.grupo), { x: "x", y: "row", text: "rival", dy: config.R_GROUP + config.DY_GAP, fontSize: config.FS_RIVAL, fill: config.COLOR_RIVAL } ), // rivales eliminación (nombre completo o abreviado según config) Plot.text( rows.filter((d) => !d.grupo), { x: "x", y: "row", text: (d) => (config.NOMBRES_COMPLETOS_KO ? d.rivalFull : d.rival), dy: config.R + config.DY_GAP, fontSize: config.FS_RIVAL, fill: config.COLOR_RIVAL } ) ] }); chart.style.maxWidth = "none"; chart.style.height = "auto"; chart.style.background = "transparent"; // ───────────────────────────────────────────── // MARCO + TÍTULOS (wrapper HTML) // ───────────────────────────────────────────── const wrapper = html`

${config.TITLE}

${config.SUBTITLE}

`; wrapper.appendChild(chart); // crédito abajo a la derecha const credito = html`

${config.CREDIT}

`; wrapper.appendChild(credito); return wrapper; }34:[{"id":"f5af92b28a9bbc7f6a2d29927402741b1e97f337d769513b7af2fa2e43f09d1d9c44885406ff2e1cdcc7ac57afb6ba49db4bd13e259f26ed9d6f71ad6280fb76","href":"https://static.observableusercontent.com/files/f5af92b28a9bbc7f6a2d29927402741b1e97f337d769513b7af2fa2e43f09d1d9c44885406ff2e1cdcc7ac57afb6ba49db4bd13e259f26ed9d6f71ad6280fb76","name":"Mundial - Todoslospartidos (2).csv","type":"text/csv","lastModified":1784573368534.508,"size":12475},{"id":"a96b5a9d9aaf0355bfe6c13784a4bab9f0d38f2378ea55d154f57a171fe8c519a8ffdcbd90ed8ac813b5b66c28bb12e119ed1fb46406231e19422c5b430471f4","href":"https://static.observableusercontent.com/files/a96b5a9d9aaf0355bfe6c13784a4bab9f0d38f2378ea55d154f57a171fe8c519a8ffdcbd90ed8ac813b5b66c28bb12e119ed1fb46406231e19422c5b430471f4","name":"Mundial - Jugadores (3).csv","type":"text/csv","lastModified":1781783858802.832,"size":34132}] 2e:{"title":"Mundiales","cells":[{"id":0,"value":"# Mundiales\nhttps://docs.google.com/spreadsheets/d/1zJnesqYf-7kPqLDkWQQGnqhe3TPeG_MOsF0GgCWdKoA/edit?gid=2086536224#gid=2086536224","pinned":false,"hidden":false,"mode":"md"},{"id":82,"value":"### Jugadores de la Selección Argentina que jugaron más de un mundial\n1978 - 2026","pinned":false,"hidden":false,"mode":"md"},{"id":131,"value":"{\n const conteos = d3.rollup(\n Array.from(jugadoresUnicos.values()),\n (v) => v.length,\n (d) => d\n );\n\n return html`

\n Mundiales jugados:\n ${[2, 3, 4, 5, 6].map((n) => {\n const color = mundiales.scale(\"color\").domain.includes(n)\n ? mundiales.scale(\"color\").apply(n)\n : \"white\";\n\n return html`\n \n ${n} (${conteos.get(n) ?? 0})\n \n `;\n })}\n

`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":168,"value":"### Jugadores de la Selección Argentina: Edades\nEdades y edad promedio de cada selección 1978 - 2026","pinned":false,"hidden":false,"mode":"md"},{"id":144,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":327,"value":"### Jugadores de la Selección Argentina: Partidos Jugados\nLos 15 que más partidos jugaron para la selección 1978 - 2026","pinned":false,"hidden":false,"mode":"md"},{"id":332,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":179,"value":"Plot.plot({\n x: {\n type: \"point\",\n label: \"Mundial →\",\n tickFormat: \"d\"\n },\n y: {\n label: \"Edad\",\n tickFormat: \"d\",\n domain: [18, 38]\n },\n marks: [\n Plot.line(\n jugadores,\n Plot.groupX(\n { y: \"median\" },\n {\n x: \"mundial\",\n y: \"Edad al Mundial\"\n }\n )\n )\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":236,"value":"mundialesExperiencia = Plot.plot({\n height: 400,\n width: 800,\n color: {\n range: [\"#B2B2B2\", \"#E5A59A\", \"#ED6258\", \"#C60000\"]\n },\n x: {\n type: \"point\",\n label: \"Mundial →\",\n tickFormat: \"d\"\n },\n y: {\n label: \"↑ Experiencia\"\n },\n marks: [\n Plot.lineX(mundialesRollup, {\n x: \"mundial\",\n y: \"experienciaPlus\",\n curve: \"step\"\n })\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":433,"value":"data = FileAttachment(\"Mundial - Todoslospartidos (2).csv\").csv()","pinned":true,"hidden":false,"mode":"ojs"},{"id":430,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"jugadores = await FileAttachment(\"Mundial - Jugadores (3).csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":13,"value":"jugadoresUnicos = new Map(\n d3\n .rollups(\n jugadores.sort(\n (a, b) =>\n d3.ascending(a.mundial, b.mundial) ||\n d3.ascending(a.jugador, b.jugador)\n ),\n (v) => v.length,\n (d) => d.jugador\n )\n .filter((d) => d[1] > 1)\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":175,"value":"jugadoresTodos = d3.rollup(\n jugadores.sort(\n (a, b) =>\n d3.ascending(a.mundial, b.mundial) || d3.ascending(a.jugador, b.jugador)\n ),\n (v) => v.length,\n (d) => d.jugador\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":218,"value":"jugadoresGroup = d3.group(jugadores, (d) => d.jugador)","pinned":false,"hidden":false,"mode":"ojs"},{"id":159,"value":"import { Plot } from \"@fil/plot-regression\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":205,"value":"mundialesFull = d3\n .groups(jugadores, (d) => d.mundial)\n .sort((a, b) => d3.ascending(a.mundial, b.mundial))","pinned":false,"hidden":false,"mode":"ojs"},{"id":212,"value":"mundialesRollup = mundialesFull.map((d, i) => {\n return {\n mundial: d[0],\n jugadores: d[1].length,\n edadMediana: d3.median(d[1], (d) => d[\"Edad al Mundial\"]),\n dt: d[1][0].Tecnico,\n exjug: jugadores.filter(\n (e) => e.mundial <= d[0] && d[1].map((j) => j.jugador).includes(e.jugador)\n ),\n experiencia: d3.sum(\n d3\n .rollups(\n jugadores.filter(\n (e) =>\n e.mundial <= d[0] &&\n d[1].map((j) => j.jugador).includes(e.jugador)\n ),\n (v) => v.length,\n (d) => d.jugador\n )\n .map((e) => (e[1] == 1 ? 0 : 1))\n ),\n experienciaPlus: d3.sum(\n d3\n .rollups(\n jugadores.filter(\n (e) =>\n e.mundial <= d[0] &&\n d[1].map((j) => j.jugador).includes(e.jugador)\n ),\n (v) => v.length,\n (d) => d.jugador\n )\n .map((e) => (e[1] == 1 ? 0 : e[1]))\n )\n };\n})","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}