2a:null 2b:["$","title",null,{"children":"Tabla bivariada | Fabián Muñoz | Observable"}] 30:Ta98,// 1. Tipos estandar para asegurar tus datos interface RegistroDeporte { genero: string; deporte: string; } interface FilaTabla { Categoria: string; [columna: string]: string; // Índice dinámico para las columnas extras } // 2. Datos de ejemplo const datos: RegistroDeporte[] = [ { genero: "Mujer", deporte: "Fútbol" }, { genero: "Mujer", deporte: "Fútbol" }, { genero: "Mujer", deporte: "Básquet" }, { genero: "Hombre", deporte: "Fútbol" }, { genero: "Hombre", deporte: "Básquet" }, { genero: "Hombre", deporte: "Básquet" }, { genero: "Hombre", deporte: "Básquet" }, { genero: "Otro", deporte: "Fútbol" } ]; const varFila: keyof RegistroDeporte = "genero"; const varColumna: keyof RegistroDeporte = "deporte"; // 3. Obtener categorías únicas const categoriasFila: string[] = Array.from(new Set(datos.map(d => d[varFila]))).sort(); const categoriasColumna: string[] = Array.from(new Set(datos.map(d => d[varColumna]))).sort(); const totalDatos: number = datos.length; // 4. Inicializar matriz de conteos const conteos: { [key: string]: { [key: string]: number } } = {}; categoriasFila.forEach(f => { conteos[f] = {}; categoriasColumna.forEach(c => { conteos[f][c] = 0; }); }); // Contar las frecuencias datos.forEach(d => { const f = d[varFila]; const c = d[varColumna]; if (conteos[f] && conteos[f][c] !== undefined) { conteos[f][c]++; } }); // 5. Construir las filas planas para la tabla const filasTabla: FilaTabla[] = categoriasFila.map(f => { const filaObjeto: FilaTabla = { Categoria: f }; let totalFila = 0; categoriasColumna.forEach(c => { const cantidad = conteos[f][c]; totalFila += cantidad; const porcentaje = totalDatos > 0 ? ((cantidad / totalDatos) * 100).toFixed(1) : "0.0"; filaObjeto[c] = `${cantidad} (${porcentaje}%)`; }); const porcTotalFila = totalDatos > 0 ? ((totalFila / totalDatos) * 100).toFixed(1) : "0.0"; filaObjeto["Total"] = `${totalFila} (${porcTotalFila}%)`; return filaObjeto; }); // 6. Calcular e insertar la fila final de Totales const filaTotales: FilaTabla = { Categoria: "Total" }; let granTotal = 0; categoriasColumna.forEach(c => { let totalCol = 0; categoriasFila.forEach(f => { totalCol += conteos[f][c]; }); granTotal += totalCol; const porcTotalCol = totalDatos > 0 ? ((totalCol / totalDatos) * 100).toFixed(1) : "0.0"; filaTotales[c] = `${totalCol} (${porcTotalCol}%)`; }); filaTotales["Total"] = `${granTotal} (100.0%)`; filasTabla.push(filaTotales); // 7. RENDERIZAR LA VISTA EN NOTEBOOKS 2.0 // Usamos la nueva función nativa 'display()' para pintar la tabla en la interfaz display(Inputs.table(filasTabla, { autoWidth: true, sortable: false })); 31:Tad3,// 1. Datos de ejemplo en formato JSON plano (JavaScript Vanilla) const datos = [ { genero: "Mujer", deporte: "Fútbol" }, { genero: "Mujer", deporte: "Fútbol" }, { genero: "Mujer", deporte: "Básquet" }, { genero: "Hombre", deporte: "Fútbol" }, { genero: "Hombre", deporte: "Básquet" }, { genero: "Hombre", deporte: "Básquet" }, { genero: "Hombre", deporte: "Básquet" }, { genero: "Otro", deporte: "Fútbol" }, { genero: "Hombre", deporte: "Básquet" }, { genero: "Otro", deporte: "Fútbol" }, { genero: "Hombre", deporte: "Básquet" }, { genero: "Otro", deporte: "Fútbol" } ]; const varFila = "genero"; const varColumna = "deporte"; // 2. Obtener las categorías únicas para filas y columnas const categoriasFila = Array.from(new Set(datos.map(d => d[varFila]))).sort(); const categoriasColumna = Array.from(new Set(datos.map(d => d[varColumna]))).sort(); const totalDatos = datos.length; // 3. Crear el objeto para contar las frecuencias de las variables cruzadas const conteos = {}; categoriasFila.forEach(f => { conteos[f] = {}; categoriasColumna.forEach(c => { conteos[f][c] = 0; }); }); // Contar cuántas veces ocurre cada combinación datos.forEach(d => { const f = d[varFila]; const c = d[varColumna]; if (conteos[f] && conteos[f][c] !== undefined) { conteos[f][c]++; } }); // 4. Armar las filas de datos con los porcentajes sobre el total general const filasTabla = categoriasFila.map(f => { const filaObjeto = { Categoria: f }; let totalFila = 0; categoriasColumna.forEach(c => { const cantidad = conteos[f][c]; totalFila += cantidad; const porcentaje = totalDatos > 0 ? ((cantidad / totalDatos) * 100).toFixed(1) : "0.0"; filaObjeto[c] = `${cantidad} (${porcentaje}%)`; }); const porcTotalFila = totalDatos > 0 ? ((totalFila / totalDatos) * 100).toFixed(1) : "0.0"; filaObjeto["Total"] = `${totalFila} (${porcTotalFila}%)`; return filaObjeto; }); // 5. Calcular la fila de cierre con los Totales de las columnas const filaTotales = { Categoria: "Total" }; let granTotal = 0; categoriasColumna.forEach(c => { let totalCol = 0; categoriasFila.forEach(f => { totalCol += conteos[f][c]; }); granTotal += totalCol; const porcTotalCol = totalDatos > 0 ? ((totalCol / totalDatos) * 100).toFixed(1) : "0.0"; filaTotales[c] = `${totalCol} (${porcTotalCol}%)`; }); filaTotales["Total"] = `${granTotal} (100.0%)`; filasTabla.push(filaTotales); // 6. RENDERIZAR LA SALIDA VISUAL // En Notebooks 2.0 usamos 'display()' para mostrar el componente interactivo display(Inputs.table(filasTabla, { autoWidth: true, sortable: false, format: { Categoria: (valor) => html`${valor}`, } })); 32:T680,// Datos de ejemplo (misma estructura que la tabla bivariada, con valores numéricos y % separados) const filasFormato = [ {Categoria: "Mujer", Futbol: 2, FutbolPct: 16.7, Basquet: 1, BasquetPct: 8.3, Total: 3, TotalPct: 25.0}, {Categoria: "Hombre", Futbol: 1, FutbolPct: 8.3, Basquet: 4, BasquetPct: 33.3, Total: 5, TotalPct: 41.7}, {Categoria: "Otro", Futbol: 3, FutbolPct: 25.0, Basquet: 0, BasquetPct: 0.0, Total: 3, TotalPct: 25.0}, {Categoria: "Total", Futbol: 6, FutbolPct: 50.0, Basquet: 5, BasquetPct: 41.7, Total: 12, TotalPct: 100.0} ]; const tablaFormateada = Inputs.table(filasFormato, { columns: ["Categoria", "Futbol", "Basquet", "Total"], header: {Futbol: "Fútbol", Basquet: "Básquet"}, sortable: false, format: { // Negrita para la fila de "Total" Categoria: (valor) => html`${valor}`, // Muestra número + porcentaje, con una barra de color según el % (usando el objeto completo de la fila) Futbol: (valor, i, filas) => { const pct = filas[i].FutbolPct; return html`${valor} (${pct.toFixed(1)}%)`; }, Basquet: (valor, i, filas) => { const pct = filas[i].BasquetPct; return html`${valor} (${pct.toFixed(1)}%)`; }, // Total en negrita con color según magnitud Total: (valor, i, filas) => { const pct = filas[i].TotalPct; const color = pct <=30 ? "#0a7d2c" : "#333"; return html`${valor} (${pct.toFixed(1)}%)`; } } }); display(tablaFormateada);33:[] 2e:{"id":"c9136fccd16232c7","slug":"tabla-bivariada","title":"Tabla bivariada","thumbnail":"0e87d8f1f34a9cbb8bd6792bfd2d792790317ecff573ee93d6e966494569153c","access_level":"public","create_time":"$D2026-09-15T16:41:54.807Z","update_time":"$D2026-09-15T17:46:13.194Z","view_time":null,"first_public_time":"$D2026-09-15T17:48:36.558Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"e0b7557b34627be8","login":"fmunoz","name":"Fabián Muñoz","avatar_url":"https://avatars-next.observableusercontent.com/033ac165682aef09b8d2c1d302b892db1d594352e2b15239c6683ffb8c50b1a5","tier":"starter_2024"},"version":95,"publish_version":95,"role":null,"authored":false,"authors":[{"type":"individual","id":"4c962e83bdbbe170","login":"fmunoz","name":"Fabián Muñoz","avatar_url":"https://avatars-next.observableusercontent.com/033ac165682aef09b8d2c1d302b892db1d594352e2b15239c6683ffb8c50b1a5","tier":null}],"members":[{"type":"team","id":"e0b7557b34627be8","login":"fmunoz","name":"Fabián Muñoz","avatar_url":"https://avatars-next.observableusercontent.com/033ac165682aef09b8d2c1d302b892db1d594352e2b15239c6683ffb8c50b1a5","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":"Tabla bivariada","cells":[{"id":1,"value":"# Tabla bivariada\nEjemplo para el cálculo de tablas bivariadas\n### Ejemplo con TypeScript","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"$30","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"### Ejemplo con JS Vanilla","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"$31","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"### Ejemplo con `format` en Inputs.table","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"$32","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"2"}} 2f:"$2e:body"