44:["$","title",null,{"children":"Diseño de gráficos | Andrea Coa | Observable"}] 4c:T46b,medalStatistics = { const medals = data.filter(d => d.Medal != null); const grouped = d3.rollup( medals, v => ({ Total: v.length, Gold: v.filter(d => d.Medal === "Gold").length, Silver: v.filter(d => d.Medal === "Silver").length, Bronze: v.filter(d => d.Medal === "Bronze").length }), d => d.Team ); const countries = Array.from(grouped, ([Country, stats]) => ({ Country, ...stats })); const metrics = ["Total", "Gold", "Silver", "Bronze"]; const result = metrics.flatMap(metric => { const min = d3.min(countries, d => d[metric]); const max = d3.max(countries, d => d[metric]); return [ { Metric: metric, Type: "Minimum", Value: min, Countries: countries .filter(d => d[metric] === min) .map(d => d.Country) .join(", ") }, { Metric: metric, Type: "Maximum", Value: max, Countries: countries .filter(d => d[metric] === max) .map(d => d.Country) .join(", ") } ]; }); return Inputs.table(result); }4d:T6a6,olimpiadas = { const tipos = ["Gold", "Silver", "Bronze"]; const conMedalla = data.filter(d => tipos.includes(d.Medal)); // Valor más frecuente de un campo (para nombres de país y sedes) const masFrecuente = (v, campo) => d3.greatest(d3.rollups(v, g => g.length, d => d[campo]), d => d[1])[0]; // Una medalla por (Juegos, evento, país, tipo): los equipos no cuentan por atleta const medallas = d3.groups(conMedalla, d => `${d.Games}|${d.Event}|${d.NOC}|${d.Medal}`) .map(([, filas]) => filas[0]); // Nombre legible del país (evita "United States-1") const nombre = new Map(d3.rollups(conMedalla, v => masFrecuente(v, "Team"), d => d.NOC)); const medalleroOrden = (a, b) => d3.descending(a.Gold, b.Gold) || d3.descending(a.Silver, b.Silver) || d3.descending(a.Bronze, b.Bronze); // Top 10 por total, ordenado como medallero const top10 = meds => d3.rollups( meds, v => ({ Gold: v.filter(d => d.Medal === "Gold").length, Silver: v.filter(d => d.Medal === "Silver").length, Bronze: v.filter(d => d.Medal === "Bronze").length }), d => d.NOC ) .map(([noc, c]) => ({ noc, pais: nombre.get(noc), ...c, Total: c.Gold + c.Silver + c.Bronze })) .sort((a, b) => d3.descending(a.Total, b.Total) || medalleroOrden(a, b)) .slice(0, 10) .sort(medalleroOrden); const ediciones = d3.groups(medallas, d => d.Games) .map(([games, v]) => ({ games, year: v[0].Year, season: v[0].Season, city: masFrecuente(v, "City"), top: top10(v) })) .sort((a, b) => a.year - b.year || d3.ascending(a.season, b.season)); return { global: top10(medallas), ediciones }; }4e:T1de7,chart2 = { const tipos = [ { key: "Gold", label: "Oro", fill: "#8F5E00", ink: "#FFFFFF" }, { key: "Silver", label: "Plata", fill: "#D19A2E", ink: "#2B1D00" }, { key: "Bronze", label: "Bronce", fill: "#F0D49A", ink: "#3D2E00" } ]; const vacio = "#EEEEEE", textoFuera = "#333333", acento = "#8F5E00", inactivo = "#9A9A9A"; const temporada = { Summer: "Verano", Winter: "Invierno" }; const { global, ediciones } = olimpiadas; const margin = { top: 44, right: 10, bottom: 10, left: 160 }; const rowH = 50, gap = 4, totalW = 70, pad = 8, anchoMax = 560, nFilas = 10; const bandH = rowH - gap; const height = margin.top + nFilas * rowH + margin.bottom; const disponible = Math.min( width - margin.left - margin.right - totalW - gap * tipos.length, anchoMax ); const totalX = margin.left + disponible + gap * tipos.length; const dur = 750; const contenedor = d3.create("div").style("font", "14px system-ui, sans-serif"); // ───────── Controles: botón global + título de la vista ───────── const barra = contenedor.append("div") .style("display", "flex").style("align-items", "center") .style("gap", "14px").style("margin-bottom", "6px"); const botonGlobal = barra.append("button") .text("Vista global") .style("font", "inherit").style("padding", "4px 12px") .style("border", `1px solid ${acento}`).style("border-radius", "4px") .style("cursor", "pointer") .on("click", () => seleccionar(null)); const titulo = barra.append("div").style("font-size", "18px").style("font-weight", 600); // ───────── Línea temporal (filtro) ───────── const tlH = 80, carril = { Summer: 16, Winter: 40 }, ejeY = 56; const tl = contenedor.append("svg") .attr("width", width).attr("height", tlH) .attr("viewBox", [0, 0, width, tlH]); const xT = d3.scaleLinear() .domain(d3.extent(ediciones, d => d.year)) .range([margin.left, width - margin.right - 10]); tl.append("g").selectAll("line").data(Object.values(carril)).join("line") .attr("x1", xT.range()[0]).attr("x2", xT.range()[1]) .attr("y1", d => d).attr("y2", d => d) .attr("stroke", "#E3E3E3"); tl.append("g").selectAll("text").data(Object.entries(carril)).join("text") .attr("x", margin.left - 12).attr("y", d => d[1]).attr("dy", "0.35em") .attr("text-anchor", "end").attr("fill", "#555") .text(d => temporada[d[0]]); tl.append("g") .attr("transform", `translate(0,${ejeY})`) .call(d3.axisBottom(xT).tickFormat(d3.format("d")).ticks(Math.min(12, width / 70))) .call(g => g.selectAll("text").attr("font-size", 12)) .call(g => g.select(".domain").attr("stroke", "#999")); const puntos = tl.append("g").selectAll("circle").data(ediciones).join("circle") .attr("cx", d => xT(d.year)) .attr("cy", d => carril[d.season] ?? (carril.Summer + carril.Winter) / 2) .attr("r", 6) .attr("fill", inactivo) .attr("stroke", "#FFF").attr("stroke-width", 1.5) .style("cursor", "pointer") .on("click", (event, d) => seleccionar(seleccion === d ? null : d)); puntos.append("title").text(d => `${d.city} ${d.year} · ${temporada[d.season] ?? d.season}`); // ───────── Matriz ───────── const svg = contenedor.append("svg") .attr("width", width).attr("height", height) .attr("viewBox", [0, 0, width, height]) .style("margin-top", "8px"); const gHead = svg.append("g"); const gFilas = svg.append("g"); svg.append("text") .attr("x", totalX + totalW / 2).attr("y", margin.top - 14) .attr("text-anchor", "middle").attr("font-size", 15).attr("font-weight", 600) .text("Total"); function actualizar(datos) { const maxes = tipos.map(t => d3.max(datos, d => d[t.key]) ?? 0); const x = d3.scaleLinear().domain([0, d3.sum(maxes) || 1]).range([0, disponible]); let acc = margin.left; const cols = tipos.map((t, i) => { const c = { ...t, i, x0: acc, w: x(maxes[i]) }; acc += c.w + gap; return c; }); const t = svg.transition().duration(dur); // Encabezados centrados (se mueven si cambian los anchos) gHead.selectAll("text").data(cols, c => c.key) .join(enter => enter.append("text") .attr("x", c => c.x0 + c.w / 2) .attr("y", margin.top - 14) .attr("text-anchor", "middle") .attr("font-size", 15).attr("font-weight", 600) .text(c => c.label)) .transition(t) .attr("x", c => c.x0 + c.w / 2); // Filas: clave = país, para que se reordenen animadas const filas = gFilas.selectAll("g.fila").data(datos, d => d.noc).join( enter => { const g = enter.append("g").attr("class", "fila") .attr("opacity", 0) .attr("transform", (d, i) => `translate(0,${margin.top + i * rowH})`); g.append("text").attr("class", "pais") .attr("x", margin.left - 12).attr("y", bandH / 2).attr("dy", "0.35em") .attr("text-anchor", "end") .text(d => d.pais); for (const c of cols) { const gc = g.append("g").attr("class", `col-${c.i}`) .attr("transform", `translate(${c.x0},0)`); gc.append("rect").attr("class", "fondo") .attr("height", bandH).attr("width", c.w).attr("fill", vacio); gc.append("rect").attr("class", "barra") .attr("height", bandH).attr("width", 0).attr("fill", c.fill) .append("title"); gc.append("text").attr("class", "num") .attr("y", bandH / 2).attr("dy", "0.35em") .attr("font-variant-numeric", "tabular-nums"); } g.append("text").attr("class", "total") .attr("x", totalX + totalW / 2).attr("y", bandH / 2).attr("dy", "0.35em") .attr("text-anchor", "middle").attr("font-weight", 700) .attr("font-variant-numeric", "tabular-nums"); return g; }, update => update, exit => exit.transition(t).attr("opacity", 0).remove() ); filas.transition(t) .attr("opacity", 1) .attr("transform", (d, i) => `translate(0,${margin.top + i * rowH})`); for (const c of cols) { const dentro = d => { const bw = x(d[c.key]); return bw >= c.w - bw; }; const gc = filas.select(`.col-${c.i}`); gc.transition(t).attr("transform", `translate(${c.x0},0)`); gc.select(".fondo").transition(t).attr("width", c.w); gc.select(".barra").transition(t).attr("width", d => x(d[c.key])); gc.select(".barra title").text(d => `${d.pais} · ${c.label}: ${d[c.key]}`); gc.select(".num") .text(d => d[c.key]) .attr("text-anchor", d => dentro(d) ? "end" : "start") .attr("fill", d => dentro(d) ? c.ink : textoFuera) .attr("font-weight", d => dentro(d) ? 600 : 400) .transition(t) .attr("x", d => dentro(d) ? x(d[c.key]) - pad : x(d[c.key]) + pad); } filas.select(".total").text(d => d.Total); } // ───────── Selección ───────── let seleccion = null; function seleccionar(ed) { seleccion = ed; puntos.transition().duration(300) .attr("r", d => d === ed ? 9 : 6) .attr("fill", d => d === ed ? acento : inactivo); puntos.filter(d => d === ed).raise(); botonGlobal .style("background", ed ? "#FFF" : acento) .style("color", ed ? acento : "#FFF"); titulo.text(ed ? `${ed.city} ${ed.year} · ${temporada[ed.season] ?? ed.season}` : "Todas las ediciones"); actualizar(ed ? ed.top : global); } seleccionar(null); return contenedor.node(); }4f:T561,medallero = { const tipos = ["Gold", "Silver", "Bronze"]; const conMedalla = data.filter(d => tipos.includes(d.Medal)); // En deportes de equipo, cada atleta tiene su propia fila. Una medalla // cuenta una sola vez por país en cada evento de cada edición de los Juegos. const medallas = d3.groups(conMedalla, d => `${d.Games}|${d.Event}|${d.NOC}|${d.Medal}`) .map(([, filas]) => filas[0]); // Nombre legible del país: el "Team" más frecuente de cada NOC // (evita etiquetas como "United States-1") const nombre = new Map(d3.rollups( conMedalla, v => d3.greatest(d3.rollups(v, g => g.length, d => d.Team), d => d[1])[0], d => d.NOC )); const paises = d3.rollups( medallas, v => ({ Gold: v.filter(d => d.Medal === "Gold").length, Silver: v.filter(d => d.Medal === "Silver").length, Bronze: v.filter(d => d.Medal === "Bronze").length }), d => d.NOC ).map(([noc, c]) => ({ noc, pais: nombre.get(noc), ...c, Total: c.Gold + c.Silver + c.Bronze })); const medalleroOrden = (a, b) => d3.descending(a.Gold, b.Gold) || d3.descending(a.Silver, b.Silver) || d3.descending(a.Bronze, b.Bronze); // Top 10 por total de medallas, ordenado como medallero return paises .sort((a, b) => d3.descending(a.Total, b.Total) || medalleroOrden(a, b)) .slice(0, 10) .sort(medalleroOrden); }50:T1233,chart = { // Paleta: tonos distintos y luminosidad decreciente (oro claro → plata media → bronce oscuro). // Así la jerarquía también se distingue en escala de grises y con daltonismo rojo-verde. const tipos = [ { key: "Gold", label: "Oro", fill: "#F2C14E", ink: "#3D2E00" }, { key: "Silver", label: "Plata", fill: "#A3A8AD", ink: "#1F2328" }, { key: "Bronze", label: "Bronce", fill: "#8C5A2B", ink: "#FFFFFF" } ]; const vacio = "#EEEEEE", textoFuera = "#333333"; // Paleta "metal apagado": luminosidad ≈ 78% → 62% → 33% // const tipos = [ // { key: "Gold", label: "Oro", fill: "#8F5E00", ink: "#FFFFFF" }, // { key: "Silver", label: "Plata", fill: "#D19A2E", ink: "#2B1D00" }, // { key: "Bronze", label: "Bronce", fill: "#F0D49A", ink: "#3D2E00" } // ]; const datos = medallero; const margin = { top: 44, right: 10, bottom: 10, left: 160 }; const rowH = 50; // alto de cada fila: más alto = más "celda" const gap = 4; // separación entre columnas (rejilla fina) const totalW = 70, pad = 8; const anchoMax = 560; // ancho máximo de toda la matriz: más chico = celdas más angostas const height = margin.top + datos.length * rowH + margin.bottom; // Una sola escala para todas las columnas: el ancho de cada columna es su máximo const maxes = tipos.map(t => d3.max(datos, d => d[t.key])); const disponible = Math.min( width - margin.left - margin.right - totalW - gap * tipos.length, anchoMax ); const x = d3.scaleLinear().domain([0, d3.sum(maxes)]).range([0, disponible]); let acc = margin.left; const cols = tipos.map((t, i) => { const c = { ...t, max: maxes[i], x0: acc, w: x(maxes[i]) }; acc += c.w + gap; return c; }); const totalX = acc; const y = d3.scaleBand() .domain(datos.map(d => d.noc)) .range([margin.top, height - margin.bottom]) .paddingInner(gap / rowH); // mismo grosor de línea horizontal que vertical const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .style("font", "14px system-ui, sans-serif"); // Encabezados svg.append("g").selectAll("text").data(cols).join("text") .attr("x", c => c.x0 + c.w / 2) // centro de la columna .attr("y", margin.top - 14) .attr("text-anchor", "middle") .attr("font-size", 15) .attr("font-weight", 600) .text(c => c.label) .append("tspan") .attr("font-size", 12) .attr("font-weight", 400) .attr("fill", "#777"); // .text(c => ` (máx. ${c.max})`); svg.append("text") .attr("x", totalX + totalW / 2) .attr("y", margin.top - 14) .attr("text-anchor", "middle") .attr("font-size", 15) .attr("font-weight", 600) .text("Total"); // Nombres de países svg.append("g").selectAll("text").data(datos).join("text") .attr("x", margin.left - 12) .attr("y", d => y(d.noc) + y.bandwidth() / 2) .attr("dy", "0.35em") .attr("text-anchor", "end") .text(d => d.pais); const fila = svg.append("g").selectAll("g").data(datos).join("g") .attr("transform", d => `translate(0,${y(d.noc)})`); // Celdas-barra for (const c of cols) { const g = fila.append("g").attr("transform", `translate(${c.x0},0)`); g.append("rect") // fondo de la celda (parte sin colorear) .attr("width", c.w) .attr("height", y.bandwidth()) .attr("fill", vacio); g.append("rect") // barra rellenada de izquierda a derecha .attr("width", d => x(d[c.key])) .attr("height", y.bandwidth()) .attr("fill", c.fill) .append("title") .text(d => `${d.pais} · ${c.label}: ${d[c.key]}`); g.append("text") .attr("y", y.bandwidth() / 2) .attr("dy", "0.35em") .attr("font-variant-numeric", "tabular-nums") .each(function (d) { const bw = x(d[c.key]); const dentro = bw >= c.w - bw; // el número va en el lado con más espacio d3.select(this) .attr("x", dentro ? bw - pad : bw + pad) .attr("text-anchor", dentro ? "end" : "start") .attr("fill", dentro ? c.ink : textoFuera) .attr("font-weight", dentro ? 600 : 400); }) .text(d => d[c.key]); } // Columna de totales (solo número) fila.append("text") .attr("x", totalX + totalW / 2) .attr("y", y.bandwidth() / 2) .attr("dy", "0.35em") .attr("text-anchor", "middle") .attr("font-weight", 700) .attr("font-variant-numeric", "tabular-nums") .text(d => d.Total); return svg.node(); }51:T3b4b,function beeswarmPaises(atletas, { valor, // d => número para el eje horizontal etiquetaX, // título del eje formato = d3.format(".1f"), // formato de la mediana colorear, // d => color de cada punto leyenda, // () => elemento con la leyenda (vertical) densidad = false, // panel inferior con curvas de distribución inicial = [], // códigos NOC seleccionados al cargar ajustarEje = true, // true: eje según la selección · false: eje fijo para todos anchoLeyenda = 130, width = 900 } = {}) { const sexos = [{ key: "F", label: "Mujeres" }, { key: "M", label: "Hombres" }]; const margin = { top: 16, right: 20, bottom: 44, left: 120 }; const W = Math.max(420, width - anchoLeyenda - 24); // ancho del gráfico sin la leyenda const innerW = W - margin.left - margin.right; const fmt = d3.format(","); const dominioTodos = d3.extent(atletas, valor); const x = d3.scaleLinear().range([margin.left, W - margin.right]); function ajustarDominio(sel) { const [a, b] = ajustarEje && sel.length ? d3.extent(sel, valor) : dominioTodos; const m = Math.max((b - a) * 0.04, 1); x.domain([a - m, b + m]).nice(); } // Densidad por kernel (Epanechnikov) con ancho de banda de Silverman function kde(valores, puntos) { const n = valores.length; const sd = d3.deviation(valores) || 0; const iqr = d3.quantile(valores, 0.75) - d3.quantile(valores, 0.25); const [a, b] = x.domain(); const h = Math.max(0.9 * Math.min(sd, (iqr || sd) / 1.34) * n ** -0.2, (b - a) / 60); return puntos.map(p => [p, d3.sum(valores, v => { const u = (p - v) / h; return Math.abs(u) <= 1 ? 0.75 * (1 - u * u) / h : 0; }) / n]); } const nombrePorNoc = new Map(atletas.map(d => [d.noc, d.pais])); const opciones = d3.rollups(atletas, v => v.length, d => d.noc) .map(([noc, n]) => ({ noc, n, pais: nombrePorNoc.get(noc) })) .sort((a, b) => a.pais.localeCompare(b.pais, "es")); // ---------- Estructura ---------- const root = document.createElement("div"); root.className = "bs-root"; root.value = []; root.innerHTML = `

`; const campo = root.querySelector(".bs-campo"); const input = root.querySelector(".bs-input"); const lista = root.querySelector(".bs-lista"); const estado = root.querySelector(".bs-estado"); const grafico = root.querySelector(".bs-grafico"); root.querySelector(".bs-leyenda").append(leyenda()); // ---------- Selector con búsqueda ---------- const seleccion = new Set(inicial.filter(noc => nombrePorNoc.has(noc))); // vacío = todos los países let filtradas = [], activo = 0; const normalizar = s => s.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase(); function pintarChips() { campo.querySelectorAll(".bs-chip").forEach(c => c.remove()); if (!seleccion.size) { const c = document.createElement("span"); c.className = "bs-chip bs-chip-todos"; c.textContent = "Todos los países"; campo.insertBefore(c, input); } for (const noc of seleccion) { const c = document.createElement("span"); c.className = "bs-chip"; c.textContent = nombrePorNoc.get(noc); const b = document.createElement("button"); b.type = "button"; b.textContent = "×"; b.setAttribute("aria-label", `Quitar ${nombrePorNoc.get(noc)}`); b.addEventListener("mousedown", e => e.preventDefault()); b.addEventListener("click", () => quitar(noc)); c.append(b); campo.insertBefore(c, input); } } function pintarLista() { const q = normalizar(input.value.trim()); filtradas = opciones.filter(o => !seleccion.has(o.noc) && (!q || normalizar(o.pais).includes(q) || normalizar(o.noc).includes(q))); activo = Math.min(activo, Math.max(0, filtradas.length - 1)); const items = filtradas.map((o, i) => { const li = document.createElement("li"); li.setAttribute("role", "option"); if (i === activo) li.className = "activo"; const nombre = document.createElement("span"); nombre.textContent = o.pais; const meta = document.createElement("small"); meta.textContent = `${o.noc} · ${o.n}`; li.append(nombre, meta); li.addEventListener("click", () => agregar(o.noc)); return li; }); if (!items.length) { const li = document.createElement("li"); li.className = "bs-vacio"; li.textContent = "Sin coincidencias"; items.push(li); } lista.replaceChildren(...items); } function mover(paso) { if (!filtradas.length) return; activo = (activo + paso + filtradas.length) % filtradas.length; lista.querySelectorAll("li").forEach((li, i) => li.classList.toggle("activo", i === activo)); lista.children[activo]?.scrollIntoView({ block: "nearest" }); } function agregar(noc) { seleccion.add(noc); input.value = ""; activo = 0; pintarChips(); pintarLista(); actualizar(); } function quitar(noc) { seleccion.delete(noc); pintarChips(); pintarLista(); actualizar(); } input.addEventListener("input", e => { e.stopPropagation(); activo = 0; lista.hidden = false; pintarLista(); }); input.addEventListener("focus", () => { lista.hidden = false; pintarLista(); }); input.addEventListener("blur", () => { lista.hidden = true; }); input.addEventListener("keydown", e => { if (e.key === "ArrowDown") { e.preventDefault(); lista.hidden = false; mover(1); } else if (e.key === "ArrowUp") { e.preventDefault(); mover(-1); } else if (e.key === "Enter") { e.preventDefault(); if (filtradas[activo]) agregar(filtradas[activo].noc); } else if (e.key === "Backspace" && !input.value && seleccion.size) quitar([...seleccion].at(-1)); else if (e.key === "Escape") input.blur(); }); lista.addEventListener("mousedown", e => e.preventDefault()); campo.addEventListener("click", () => input.focus()); root.querySelector(".bs-btn").addEventListener("click", () => { seleccion.clear(); pintarChips(); pintarLista(); actualizar(); }); // ---------- Beeswarm ---------- function dibujar(sel) { ajustarDominio(sel); const filas = sexos.map(s => ({ ...s, datos: sel.filter(d => d.sexo === s.key) })); const nMax = d3.max(filas, f => f.datos.length) || 1; const r = Math.max(1.2, Math.min(5, Math.sqrt(innerW * 170 / (9 * nMax)))); const rng = d3.randomLcg(42); for (const f of filas) { f.nodos = f.datos.map(d => ({ d, tx: x(valor(d)), x: x(valor(d)), y: (rng() - 0.5) * r })); if (f.nodos.length) { d3.forceSimulation(f.nodos) .force("x", d3.forceX(n => n.tx).strength(1)) .force("y", d3.forceY(0).strength(0.05)) .force("collide", d3.forceCollide(r + 0.3).iterations(2)) .stop() .tick(f.nodos.length > 4000 ? 100 : 180); } const extension = f.nodos.length ? d3.max(f.nodos, n => Math.abs(n.y)) : 0; f.alto = Math.max(80, 2 * (extension + r) + 24); } let acc = margin.top; for (const f of filas) { f.y0 = acc; acc += f.alto; } const altoDensidad = densidad ? 90 : 0; const height = acc + altoDensidad + margin.bottom; const ticks = x.ticks(W / 70); const svg = d3.create("svg") .attr("width", W) .attr("height", height) .attr("viewBox", [0, 0, W, height]) .style("max-width", "100%") .style("height", "auto") .style("font", "12px system-ui, sans-serif"); // Rejilla vertical svg.append("g").attr("stroke", "#EEE") .selectAll("line").data(ticks).join("line") .attr("x1", x).attr("x2", x) .attr("y1", margin.top).attr("y2", height - margin.bottom); // Separador entre géneros svg.append("line") .attr("x1", 0).attr("x2", W - margin.right) .attr("y1", filas[1].y0).attr("y2", filas[1].y0) .attr("stroke", "#CCC"); // Eje X svg.append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x).ticks(W / 70)) .call(g => g.select(".domain").remove()) .call(g => g.append("text") .attr("x", W - margin.right).attr("y", 36) .attr("fill", "currentColor").attr("text-anchor", "end").attr("font-weight", 600) .text(etiquetaX)); const g = svg.append("g").selectAll("g").data(filas).join("g") .attr("transform", f => `translate(0,${f.y0 + f.alto / 2})`); // Etiquetas de cada enjambre g.append("text").attr("x", 8).attr("dy", "-0.4em") .attr("font-size", 14).attr("font-weight", 600).text(f => f.label); g.append("text").attr("x", 8).attr("dy", "1em").attr("fill", "#666") .text(f => `n = ${fmt(f.datos.length)}`); g.append("text").attr("x", 8).attr("dy", "2.3em").attr("fill", "#666") .text(f => f.datos.length ? `mediana ${formato(d3.median(f.datos, valor))}` : ""); // Puntos g.append("g").selectAll("circle").data(f => f.nodos).join("circle") .attr("cx", n => n.x) .attr("cy", n => n.y) .attr("r", r) .attr("fill", n => colorear(n.d)) .attr("stroke", r > 2 ? "#FFF" : "none") .attr("stroke-width", 0.5) .append("title") .text(n => `${n.d.nombre} — ${n.d.pais}\n${n.d.altura} cm · ${n.d.peso} kg · IMC ${n.d.imc.toFixed(1)}\n${n.d.deporte} (${n.d.anio})`); // Línea de mediana g.filter(f => f.datos.length).append("line") .attr("x1", f => x(d3.median(f.datos, valor))) .attr("x2", f => x(d3.median(f.datos, valor))) .attr("y1", f => -f.alto / 2 + 4) .attr("y2", f => f.alto / 2 - 4) .attr("stroke", "#222").attr("stroke-width", 1.5).attr("stroke-dasharray", "4 3"); g.filter(f => !f.datos.length).append("text") .attr("x", margin.left + innerW / 2).attr("dy", "0.35em") .attr("text-anchor", "middle").attr("fill", "#999") .text("Sin atletas para esta selección"); // Panel inferior: distribución de los puntos (complemento del beeswarm) if (densidad) { const top = acc + 8, bottom = acc + altoDensidad; const [a, b] = x.domain(); const puntos = d3.range(121).map(i => a + (b - a) * i / 120); const curvas = filas .filter(f => f.datos.length >= 2) .map(f => ({ ...f, dens: kde(f.datos.map(valor), puntos) })); const yD = d3.scaleLinear() .domain([0, d3.max(curvas, c => d3.max(c.dens, d => d[1])) || 1]) .range([bottom, top + 14]); const estilos = { F: { stroke: "#666", dash: "5 3", fill: "#66666614" }, M: { stroke: "#222", dash: null, fill: "#2222220F" } }; const panel = svg.append("g"); panel.append("line") .attr("x1", 0).attr("x2", W - margin.right) .attr("y1", top).attr("y2", top) .attr("stroke", "#CCC"); panel.append("text") .attr("x", 8).attr("y", (top + bottom) / 2).attr("dy", "0.35em") .attr("fill", "#666").attr("font-weight", 600) .text("Distribución"); for (const c of curvas) { const st = estilos[c.key]; panel.append("path").datum(c.dens) .attr("fill", st.fill) .attr("d", d3.area().x(d => x(d[0])).y0(bottom).y1(d => yD(d[1])).curve(d3.curveBasis)); panel.append("path").datum(c.dens) .attr("fill", "none") .attr("stroke", st.stroke) .attr("stroke-width", 1.5) .attr("stroke-dasharray", st.dash) .attr("d", d3.line().x(d => x(d[0])).y(d => yD(d[1])).curve(d3.curveBasis)); const pico = d3.greatest(c.dens, d => d[1]); panel.append("text") .attr("x", x(pico[0])).attr("y", yD(pico[1]) - 5) .attr("text-anchor", "middle").attr("font-size", 11) .attr("fill", st.stroke) .text(c.label); } } return svg.node(); } let turno = 0; function actualizar() { const sel = seleccion.size ? atletas.filter(d => seleccion.has(d.noc)) : atletas; root.value = [...seleccion]; root.dispatchEvent(new Event("input", { bubbles: true })); estado.textContent = "Calculando…"; const t = ++turno; setTimeout(() => { if (t !== turno) return; grafico.replaceChildren(dibujar(sel)); estado.textContent = `${fmt(sel.length)} atletas · ` + (seleccion.size ? `${seleccion.size} país${seleccion.size > 1 ? "es" : ""}` : "todos los países"); }, 16); } pintarChips(); actualizar(); return root; }52:T79b,beeswarmPeso = { const lo = d3.quantile(atletas, 0.02, d => d.altura); const hi = d3.quantile(atletas, 0.98, d => d.altura); const color = d3.scaleSequential([lo, hi], t => d3.interpolateViridis(0.05 + 0.85 * t)).clamp(true); return beeswarmPaises(atletas, { width: 800, valor: d => d.peso, etiquetaX: "Peso (kg) →", formato: d3.format(".0f"), densidad: true, inicial: ["IRL"], colorear: d => color(d.altura), leyenda: () => { // Barra vertical: más alto arriba, igual que la intuición de "altura" const h = 170, w = 12; const id = "grad-altura-" + Math.random().toString(36).slice(2); const yL = d3.scaleLinear([lo, hi], [h, 0]); const valores = [lo, ...yL.ticks(4).filter(t => t > lo + 3 && t < hi - 3), hi]; const svg = d3.create("svg") .attr("width", 110) .attr("height", h + 34) .style("overflow", "visible") .style("font", "11px system-ui, sans-serif"); const grad = svg.append("defs").append("linearGradient") .attr("id", id).attr("x1", 0).attr("x2", 0).attr("y1", 1).attr("y2", 0); grad.selectAll("stop").data(d3.range(0, 1.001, 0.1)).join("stop") .attr("offset", t => t) .attr("stop-color", t => color(lo + t * (hi - lo))); svg.append("text") .attr("y", 11).attr("font-size", 12).attr("font-weight", 600) .text("Altura (cm)"); const g = svg.append("g").attr("transform", "translate(0,24)"); g.append("rect") .attr("width", w).attr("height", h).attr("rx", 2) .attr("fill", `url(#${id})`); g.append("g") .attr("transform", `translate(${w},0)`) .call(d3.axisRight(yL) .tickValues(valores) .tickSize(4) .tickFormat(v => v === lo ? `≤ ${Math.round(lo)}` : v === hi ? `≥ ${Math.round(hi)}` : v)) .call(g => g.select(".domain").remove()); return svg.node(); } }); }53:T14e1,violinAltura = { // Naranja y celeste (Okabe-Ito): se distinguen con daltonismo y evocan verano/invierno const grupos = [ { key: "Summer", label: "Verano", fill: "#F5C46B", stroke: "#C98500", marca: "#A86A00" }, { key: "Winter", label: "Invierno", fill: "#A7D8F5", stroke: "#3A8FC7", marca: "#1F6FA3" } ]; const fmt = d3.format(".1~f"); const W = Math.min(width, 560), H = 480; const margin = { top: 20, right: 24, bottom: 60, left: 64 }; // Estadísticos y densidad de cada grupo for (const g of grupos) { const v = alturasTemporada.filter(d => d.temporada === g.key).map(d => d.altura).sort(d3.ascending); g.n = v.length; g.q1 = d3.quantileSorted(v, 0.25); g.med = d3.quantileSorted(v, 0.5); g.q3 = d3.quantileSorted(v, 0.75); const iqr = g.q3 - g.q1; // Bigotes de Tukey: último dato dentro de 1.5 × IQR g.bajo = d3.min(v.filter(x => x >= g.q1 - 1.5 * iqr)); g.alto = d3.max(v.filter(x => x <= g.q3 + 1.5 * iqr)); // KDE Epanechnikov con ancho de banda de Silverman const sd = d3.deviation(v) || 1; const h = Math.max(0.9 * Math.min(sd, (iqr || sd) / 1.34) * v.length ** -0.2, 1); const [min, max] = [v[0] - h, v[v.length - 1] + h]; g.dens = d3.range(161).map(i => { const p = min + (max - min) * i / 160; return [p, d3.sum(v, x => { const u = (p - x) / h; return Math.abs(u) <= 1 ? 0.75 * (1 - u * u) / h : 0; }) / v.length]; }); } const x = d3.scaleBand(grupos.map(g => g.label), [margin.left, W - margin.right]).padding(0.2); const y = d3.scaleLinear() .domain(d3.extent(grupos.flatMap(g => g.dens), d => d[0])).nice() .range([H - margin.bottom, margin.top]); // Misma escala de ancho para ambos violines: las formas son comparables const ancho = d3.scaleLinear() .domain([0, d3.max(grupos, g => d3.max(g.dens, d => d[1]))]) .range([0, x.bandwidth() / 2]); const cx = g => x(g.label) + x.bandwidth() / 2; const svg = d3.create("svg") .attr("width", W) .attr("height", H) .attr("viewBox", [0, 0, W, H]) .style("max-width", "100%") .style("height", "auto") .style("font", "12px system-ui, sans-serif"); // Rejilla y eje Y svg.append("g") .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y).ticks(8)) .call(g => g.selectAll(".tick line").clone() .attr("x2", W - margin.left - margin.right) .attr("stroke", "#EEE")) .call(g => g.append("text") .attr("transform", "rotate(-90)") .attr("x", -(margin.top + (H - margin.top - margin.bottom) / 2)) .attr("y", -46) .attr("text-anchor", "middle") .attr("fill", "currentColor") .attr("font-size", 13) .attr("font-weight", 600) .text("Altura (cm)")); // Eje X con n por grupo svg.append("g") .attr("transform", `translate(0,${H - margin.bottom})`) .call(d3.axisBottom(x).tickSize(0).tickPadding(10)) .call(g => g.select(".domain").attr("stroke", "#999")) .call(g => g.selectAll(".tick text").attr("font-size", 14).attr("font-weight", 600)) .call(g => g.selectAll(".tick").append("text") .attr("y", 40) .attr("fill", "#666") .text((_, i) => `n = ${d3.format(",")(grupos[i].n)}`)); // Capas en orden: siluetas → guías de mediana → marcas const capaViolines = svg.append("g"); const capaGuias = svg.append("g"); const capaMarcas = svg.append("g"); // Silueta del violín capaViolines.selectAll("path").data(grupos).join("path") .attr("transform", g => `translate(${cx(g)},0)`) .attr("fill", g => g.fill) .attr("stroke", g => g.stroke) .attr("stroke-width", 1.2) .attr("d", g => d3.area() .y(d => y(d[0])) .x0(d => -ancho(d[1])) .x1(d => ancho(d[1])) .curve(d3.curveBasis)(g.dens)) .append("title") .text(g => `${g.label} (n = ${g.n})\nQ3: ${fmt(g.q3)} cm\nMediana: ${fmt(g.med)} cm\nQ1: ${fmt(g.q1)} cm`); // Guía horizontal desde el eje Y hasta la mediana capaGuias.selectAll("line").data(grupos).join("line") .attr("x1", margin.left) .attr("x2", g => cx(g)) .attr("y1", g => y(g.med)) .attr("y2", g => y(g.med)) .attr("stroke", g => g.marca) .attr("stroke-width", 1.2) .attr("stroke-dasharray", "4 3"); const marcas = capaMarcas.selectAll("g").data(grupos).join("g") .attr("transform", g => `translate(${cx(g)},0)`); // Bigotes (línea delgada) marcas.append("line") .attr("y1", g => y(g.bajo)) .attr("y2", g => y(g.alto)) .attr("stroke", g => g.marca) .attr("stroke-width", 1.5); // Rango intercuartil (barra gruesa) marcas.append("rect") .attr("x", -5) .attr("width", 10) .attr("y", g => y(g.q3)) .attr("height", g => y(g.q1) - y(g.q3)) .attr("rx", 2) .attr("fill", g => g.marca); // Mediana (punto blanco) marcas.append("circle") .attr("cy", g => y(g.med)) .attr("r", 3.5) .attr("fill", "#FFF"); // Etiqueta de la mediana, a la derecha del punto marcas.append("text") .attr("x", 10) .attr("y", g => y(g.med)) .attr("dy", "0.35em") .attr("font-size", 12) .attr("font-weight", 700) .attr("fill", g => g.marca) .attr("stroke", "#FFF") .attr("stroke-width", 3) .attr("paint-order", "stroke") .text(g => `mediana ${fmt(g.med)} cm`); return svg.node(); }54:[{"id":"0ca300c2880aca628a11e21a1b9c42214ee01c19b8113365a060f03442a70ef15cf14cadaaa1ddc0459c42b207426524a230df6eddf72a9b56f91c91ac413ac6","href":"https://static.observableusercontent.com/files/0ca300c2880aca628a11e21a1b9c42214ee01c19b8113365a060f03442a70ef15cf14cadaaa1ddc0459c42b207426524a230df6eddf72a9b56f91c91ac413ac6","name":"olympics_2014_2016.csv","type":"text/csv","lastModified":1793717926767,"size":2644322}] 48:{"id":"8ecce4df02c27af9","slug":"diseno-de-graficos","title":"Diseño de gráficos","thumbnail":"8cd72312dd203380eabd82bb751f21e86f6ce1357278524ff972291314bffadc","access_level":"public","create_time":"$D2026-11-03T14:59:07.524Z","update_time":"$D2026-11-10T15:26:36.722Z","view_time":null,"first_public_time":"$D2026-11-10T14:19:06.983Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"b124c595b5807207","login":"andrea-coa","name":"Andrea Coa","avatar_url":"https://avatars-next.observableusercontent.com/c7cc14c99065ef3784b6ffec257dae31f834373f2f8f89c3919125210054d22c","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":222,"publish_version":222,"role":null,"authored":false,"authors":[{"type":"individual","id":"7494928e2038613e","login":"andrea-fernanda-coa-cruz","name":"Andrea Coa","avatar_url":"https://avatars-next.observableusercontent.com/c7cc14c99065ef3784b6ffec257dae31f834373f2f8f89c3919125210054d22c","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"b124c595b5807207","login":"andrea-coa","name":"Andrea Coa","avatar_url":"https://avatars-next.observableusercontent.com/c7cc14c99065ef3784b6ffec257dae31f834373f2f8f89c3919125210054d22c","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":"Diseño de gráficos","cells":[{"id":1,"value":"# Diseño de gráficos","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"data = FileAttachment(\"olympics_2014_2016.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"top10Medals = {\n const medals = data.filter(d => d.Medal != null);\n\n const grouped = d3.rollup(\n medals,\n v => ({\n Total: v.length,\n Gold: v.filter(d => d.Medal === \"Gold\").length,\n Silver: v.filter(d => d.Medal === \"Silver\").length,\n Bronze: v.filter(d => d.Medal === \"Bronze\").length\n }),\n d => d.Team\n );\n\n const result = Array.from(grouped, ([Country, stats]) => ({\n Country,\n ...stats\n }))\n .sort((a, b) => b.Total - a.Total)\n .slice(0, 10);\n\n return Inputs.table(result);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"nDeportes = new Set(data.map(d => d.Sport)).size","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"$4c","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"ediciones = d3.rollups(\n data,\n v => ({\n Year: v[0].Year,\n Season: v[0].Season,\n City: [...new Set(v.map(d => d.City))].join(\", \"), // algunas ediciones tuvieron más de una sede\n Filas: v.length\n }),\n d => d.Games\n )\n .map(([Games, info]) => ({ Games, ...info }))\n .sort((a, b) => d3.ascending(a.Year, b.Year) || d3.ascending(a.Season, b.Season))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"$4d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"$4e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"$4f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"$50","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"# Atletas\n\n- Cuál es la relación entre el peso y la altura de los atletas de Irlanda? Existen tendencias diferentes entre los atletas masculinos y femeninos del país?\n- Cuáles son las distribuciones de altura de los atletas en los Juegos Olímpicos Verano vs Invierno?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"atletas = {\n const valido = d => +d.Height > 0 && +d.Weight > 0 && (d.Sex === \"F\" || d.Sex === \"M\");\n\n // Nombre legible del país: el \"Team\" más frecuente de cada NOC\n const nombre = new Map(d3.rollups(\n data,\n v => d3.greatest(d3.rollups(v, g => g.length, d => d.Team), d => d[1])[0],\n d => d.NOC\n ));\n\n // Un atleta aparece una vez por evento y edición: nos quedamos con su registro más reciente\n return d3.rollups(data.filter(valido), v => d3.greatest(v, d => d.Year), d => d.ID)\n .map(([, d]) => ({\n id: d.ID,\n nombre: d.Name,\n sexo: d.Sex,\n noc: d.NOC,\n pais: nombre.get(d.NOC),\n altura: +d.Height,\n peso: +d.Weight,\n imc: +d.Weight / (+d.Height / 100) ** 2,\n deporte: d.Sport,\n anio: d.Year\n }));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"$51","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"// beeswarmIMC = {\n// // Okabe-Ito: bermellón y azul se distinguen con cualquier tipo de daltonismo\n// const colores = { F: \"#D55E00\", M: \"#0072B2\" };\n// return beeswarmPaises(atletas, {\n// width,\n// valor: d => d.imc,\n// etiquetaX: \"Índice de masa corporal (kg/m²) →\",\n// colorear: d => colores[d.sexo],\n// leyenda: () => {\n// const el = document.createElement(\"div\");\n// el.innerHTML = `Mujeres\n// Hombres`;\n// el.style.display = \"flex\";\n// el.style.gap = \"14px\";\n// return el;\n// }\n// });\n// }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"$52","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"alturasTemporada = {\n const filas = data.filter(d => +d.Height > 0 && (d.Season === \"Summer\" || d.Season === \"Winter\"));\n\n // Un valor por atleta y temporada (su registro más reciente en esa temporada)\n return d3.rollups(filas, v => d3.greatest(v, d => d.Year), d => d.ID, d => d.Season)\n .flatMap(([, porTemporada]) => porTemporada.map(([temporada, d]) => ({\n id: d.ID,\n nombre: d.Name,\n temporada,\n sexo: d.Sex,\n deporte: d.Sport,\n altura: +d.Height\n })));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"$53","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W54","stdlib":"2"}} 24:null