4e:I[132969,["$2"],"IconMark"] 25:["$","title",null,{"children":"Ejercicio | Luis Elías López Freitas | Observable"}] 4c:T339f, (async () => { // ========================================== // 1. IMPORTAR D3 Y CARGAR BASE DE DATOS // ========================================== const d3 = await import("https://cdn.jsdelivr.net/npm/d3@7/+esm"); const datos = await FileAttachment("medical_dataset.csv").csv({ typed: true }); // ========================================== // 2. LIMPIAR Y CLASIFICAR LOS DATOS // ========================================== const registros = datos .filter(d => Number.isFinite(+d.age) && Number.isFinite(+d.heart_rate) && +d.age >= 18 ) .map(d => ({ edad: +d.age, ritmo: +d.heart_rate, grupo: +d.age <= 30 ? "Adultos jóvenes" : +d.age <= 50 ? "Adultos" : "Adultos mayores" })); if (registros.length === 0) { throw new Error("No se encontraron registros válidos."); } const grupos = [ "Adultos jóvenes", "Adultos", "Adultos mayores" ]; // ========================================== // 3. CREAR INTERVALOS DE RITMO CARDÍACO // ========================================== const paso = 10; const minimo = Math.floor( d3.min(registros, d => d.ritmo) / paso ) * paso; const maximo = Math.floor( d3.max(registros, d => d.ritmo) / paso ) * paso; const intervalos = d3.range( minimo, maximo + paso, paso ); const rangos = intervalos.map(inicio => ({ inicio, fin: inicio + paso - 1, etiqueta: `${inicio}-${inicio + paso - 1} lpm` })); // ========================================== // 4. CALCULAR PROBABILIDADES // ========================================== const resultados = grupos.map(grupo => { const pacientes = registros.filter( d => d.grupo === grupo ); const total = pacientes.length; const probabilidades = rangos.map(rango => { const cantidad = pacientes.filter(d => d.ritmo >= rango.inicio && d.ritmo < rango.inicio + paso ).length; return { ...rango, cantidad, probabilidad: total > 0 ? cantidad / total * 100 : 0 }; }); return { grupo, total, probabilidades }; }); // ========================================== // 5. CREAR EL DASHBOARD // ========================================== const dashboard = document.createElement("div"); dashboard.style.width = "100%"; dashboard.style.maxWidth = "1050px"; dashboard.style.margin = "auto"; dashboard.style.fontFamily = "Arial, sans-serif"; dashboard.style.color = "#263238"; // Estilos generales const estilos = document.createElement("style"); estilos.textContent = ` .dash-section { margin-top: 25px; margin-bottom: 18px; } .dash-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 12px; } .dash-card { border: 1px solid #e2e8f0; border-radius: 10px; padding: 15px; background: white; min-width: 0; } .dash-card .percentage { font-size: 27px; font-weight: bold; margin: 10px 0; } .dash-bar-bg { height: 10px; border-radius: 10px; background: #e5e7eb; overflow: hidden; } .dash-bar { height: 100%; border-radius: 10px; } .dash-table-wrap { overflow-x: auto; width: 100%; } .dash-table { width: 100%; border-collapse: separate; border-spacing: 4px; text-align: center; font-size: 12px; min-width: 500px; } .dash-table th { padding: 9px 5px; background: #f1f5f9; border-radius: 5px; } .dash-table td { padding: 13px 6px; border-radius: 5px; font-weight: bold; } .dash-table tr.selected-row th { outline: 2px solid #334155; } .dash-select { width: 100%; max-width: 400px; padding: 11px; border: 1px solid #cbd5e1; border-radius: 7px; font-size: 14px; background: white; } .dash-info { background: #f1f5f9; padding: 14px; border-radius: 8px; line-height: 1.5; font-size: 13px; } `; dashboard.appendChild(estilos); // ========================================== // 6. ENCABEZADO // ========================================== const encabezado = document.createElement("div"); encabezado.innerHTML = `

Análisis de probabilidad del ritmo cardíaco

Comparación de la distribución del ritmo cardíaco según la edad

`; dashboard.appendChild(encabezado); // ========================================== // 7. SELECTOR DE EDAD // ========================================== const seccionSelector = document.createElement("div"); seccionSelector.className = "dash-section"; const etiqueta = document.createElement("label"); etiqueta.textContent = "Selecciona el grupo de edad:"; etiqueta.style.display = "block"; etiqueta.style.fontWeight = "bold"; etiqueta.style.marginBottom = "9px"; const selector = document.createElement("select"); selector.className = "dash-select"; grupos.forEach(grupo => { const opcion = document.createElement("option"); opcion.value = grupo; opcion.textContent = grupo; selector.appendChild(opcion); }); etiqueta.appendChild(selector); seccionSelector.appendChild(etiqueta); dashboard.appendChild(seccionSelector); // ========================================== // 8. TARJETAS DE PROBABILIDAD // ========================================== const tituloTarjetas = document.createElement("h3"); tituloTarjetas.textContent = "Probabilidad según el rango de ritmo cardíaco"; const subtituloTarjetas = document.createElement("p"); subtituloTarjetas.style.color = "#64748b"; subtituloTarjetas.style.fontSize = "13px"; const tarjetas = document.createElement("div"); tarjetas.className = "dash-card-grid"; const seccionTarjetas = document.createElement("div"); seccionTarjetas.className = "dash-section"; seccionTarjetas.appendChild(tituloTarjetas); seccionTarjetas.appendChild(subtituloTarjetas); seccionTarjetas.appendChild(tarjetas); dashboard.appendChild(seccionTarjetas); // ========================================== // 9. MATRIZ COMPARATIVA // ========================================== const seccionMatriz = document.createElement("div"); seccionMatriz.className = "dash-section"; const tituloMatriz = document.createElement("h3"); tituloMatriz.textContent = "Matriz comparativa de probabilidades"; const descripcionMatriz = document.createElement("p"); descripcionMatriz.textContent = "Cada celda muestra el porcentaje de pacientes de cada grupo que pertenece al intervalo correspondiente."; descripcionMatriz.style.fontSize = "13px"; descripcionMatriz.style.color = "#64748b"; const tablaContenedor = document.createElement("div"); tablaContenedor.className = "dash-table-wrap"; seccionMatriz.appendChild(tituloMatriz); seccionMatriz.appendChild(descripcionMatriz); seccionMatriz.appendChild(tablaContenedor); dashboard.appendChild(seccionMatriz); // ========================================== // 10. INFORMACIÓN E INTERPRETACIÓN // ========================================== const seccionInterpretacion = document.createElement("div"); seccionInterpretacion.className = "dash-section"; const tituloInterpretacion = document.createElement("h3"); tituloInterpretacion.textContent = "Interpretación de resultados"; const interpretacion = document.createElement("div"); interpretacion.className = "dash-info"; seccionInterpretacion.appendChild(tituloInterpretacion); seccionInterpretacion.appendChild(interpretacion); dashboard.appendChild(seccionInterpretacion); // ========================================== // 11. FUNCIÓN PARA ACTUALIZAR EL DASHBOARD // ========================================== function actualizar() { const grupoSeleccionado = selector.value; const seleccionado = resultados.find( d => d.grupo === grupoSeleccionado ); const total = seleccionado.total; // ACTUALIZAR TARJETAS tarjetas.innerHTML = ""; subtituloTarjetas.textContent = `Grupo: ${grupoSeleccionado} | Total de pacientes: ${total}`; seleccionado.probabilidades.forEach(d => { const tarjeta = document.createElement("div"); tarjeta.className = "dash-card"; const color = d3.interpolateYlOrRd( Math.min(d.probabilidad / 100, 1) ); const nombre = document.createElement("div"); nombre.textContent = d.etiqueta; nombre.style.fontSize = "13px"; nombre.style.fontWeight = "bold"; nombre.style.color = "#475569"; const porcentaje = document.createElement("div"); porcentaje.className = "percentage"; porcentaje.textContent = `${d.probabilidad.toFixed(1)}%`; porcentaje.style.color = color; const fondo = document.createElement("div"); fondo.className = "dash-bar-bg"; const barra = document.createElement("div"); barra.className = "dash-bar"; barra.style.width = `${d.probabilidad}%`; barra.style.background = color; fondo.appendChild(barra); const cantidad = document.createElement("div"); cantidad.textContent = `${d.cantidad} de ${total} pacientes`; cantidad.style.fontSize = "11px"; cantidad.style.color = "#64748b"; cantidad.style.marginTop = "9px"; tarjeta.appendChild(nombre); tarjeta.appendChild(porcentaje); tarjeta.appendChild(fondo); tarjeta.appendChild(cantidad); tarjetas.appendChild(tarjeta); }); // ACTUALIZAR MATRIZ COMPARATIVA tablaContenedor.innerHTML = ""; const tabla = document.createElement("table"); tabla.className = "dash-table"; const thead = document.createElement("thead"); const filaEncabezado = document.createElement("tr"); const primeraCelda = document.createElement("th"); primeraCelda.textContent = "Grupo de edad"; filaEncabezado.appendChild(primeraCelda); rangos.forEach(rango => { const th = document.createElement("th"); th.textContent = rango.etiqueta; filaEncabezado.appendChild(th); }); thead.appendChild(filaEncabezado); tabla.appendChild(thead); const tbody = document.createElement("tbody"); resultados.forEach(grupo => { const fila = document.createElement("tr"); if (grupo.grupo === grupoSeleccionado) { fila.className = "selected-row"; } const nombreGrupo = document.createElement("th"); nombreGrupo.textContent = grupo.grupo; fila.appendChild(nombreGrupo); grupo.probabilidades.forEach(d => { const celda = document.createElement("td"); celda.textContent = grupo.total > 0 ? `${d.probabilidad.toFixed(1)}%` : "Sin datos"; if (grupo.total > 0) { const intensidad = d.probabilidad / 100; celda.style.background = d3.interpolateYlOrRd(intensidad); celda.style.color = intensidad > 0.48 ? "white" : "#263238"; } else { celda.style.background = "#f1f5f9"; celda.style.color = "#64748b"; } celda.title = `${grupo.grupo}: ${d.cantidad} de ${grupo.total} pacientes`; fila.appendChild(celda); }); tbody.appendChild(fila); }); tabla.appendChild(tbody); tablaContenedor.appendChild(tabla); // LEYENDA DE LA MATRIZ const leyenda = document.createElement("p"); leyenda.style.fontSize = "12px"; leyenda.style.color = "#64748b"; leyenda.textContent = "Colores claros: menor probabilidad. Colores intensos: mayor probabilidad."; tablaContenedor.appendChild(leyenda); // ACTUALIZAR INTERPRETACIÓN const valido = seleccionado.probabilidades; const mayor = valido.reduce((a, b) => b.probabilidad > a.probabilidad ? b : a ); interpretacion.innerHTML = ` En el grupo de ${grupoSeleccionado} se observa que el intervalo con mayor frecuencia es ${mayor.etiqueta}, con una probabilidad observada de ${mayor.probabilidad.toFixed(2)}%.

Esto significa que ${mayor.cantidad} de los ${total} pacientes de este grupo presentan un ritmo cardíaco dentro de ese intervalo. `; if (total === 0) { interpretacion.textContent = "No existen pacientes registrados en este grupo."; } } // ========================================== // 12. ACTIVAR SELECTOR // ========================================== selector.addEventListener("change", actualizar); // ========================================== // 13. MOSTRAR RESULTADOS INICIALES // ========================================== actualizar(); return dashboard; })() 4d:[{"id":"25bb568a942eb1430d25ecc9e8c82720465f4deeb1fbc790e4765b99493457fab9f3355f464b42120fc25bdadde34671f6b399d4405b0067ea596657d8a51618","href":"https://static.observableusercontent.com/files/25bb568a942eb1430d25ecc9e8c82720465f4deeb1fbc790e4765b99493457fab9f3355f464b42120fc25bdadde34671f6b399d4405b0067ea596657d8a51618","name":"medical_dataset.csv","type":"text/csv","lastModified":1794254019000,"size":23413}] 48:{"id":"022284933537e7e5","slug":"ejercicio","title":"Ejercicio","thumbnail":"a85a95083630fe905ac150df0d9e11f7df770e12bda08985bdefd7947704512d","access_level":"public","create_time":"$D2026-11-12T19:18:53.326Z","update_time":"$D2026-11-12T20:24:01.944Z","view_time":null,"first_public_time":"$D2026-11-13T18:03:13.683Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"cb4c7e1a622c93b6","login":"el-lo-pez","name":"Luis Elías López Freitas","avatar_url":"https://avatars-next.observableusercontent.com/2444c597866fd37462f8f963e59ebf39eb2252b7f0e998b37cc342380145b2e1","tier":"free_2026","bio":"","followed_by_you":false,"follows_you":false},"version":42,"publish_version":42,"role":null,"authored":false,"authors":[{"type":"individual","id":"213d093fe83ff791","login":"el-lo-pez","name":"Luis Elías López Freitas","avatar_url":"https://avatars-next.observableusercontent.com/2444c597866fd37462f8f963e59ebf39eb2252b7f0e998b37cc342380145b2e1","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"cb4c7e1a622c93b6","login":"el-lo-pez","name":"Luis Elías López Freitas","avatar_url":"https://avatars-next.observableusercontent.com/2444c597866fd37462f8f963e59ebf39eb2252b7f0e998b37cc342380145b2e1","tier":"free_2026","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Ejercicio","cells":[{"id":1,"value":"# Ejercicio\n## este es el ejercicio de hoy","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"FileAttachment(\"medical_dataset.csv\").csv({typed: \"auto\"})\n\n\n","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"$4c","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4d","stdlib":"2"}} 24:null 3d:[["$","title","0",{"children":"Ejercicio | Luis Elías López Freitas | Observable"}],["$","meta","1",{"property":"og:title","content":"Ejercicio"}],["$","meta","2",{"property":"og:description","content":"An Observable notebook by Luis Elías López Freitas"}],["$","meta","3",{"property":"og:url","content":"https://observablehq.com/@el-lo-pez/ejercicio"}],["$","meta","4",{"property":"og:site_name","content":"Observable"}],["$","meta","5",{"property":"og:image","content":"https://images.observableusercontent.com/thumbnail/a85a95083630fe905ac150df0d9e11f7df770e12bda08985bdefd7947704512d.jpg"}],["$","meta","6",{"property":"og:image:width","content":"640"}],["$","meta","7",{"property":"og:image:height","content":"400"}],["$","meta","8",{"property":"og:type","content":"article"}],["$","meta","9",{"name":"twitter:card","content":"summary_large_image"}],["$","meta","10",{"name":"twitter:title","content":"Ejercicio"}],["$","meta","11",{"name":"twitter:description","content":"An Observable notebook by Luis Elías López Freitas"}],["$","meta","12",{"name":"twitter:image","content":"https://images.observableusercontent.com/thumbnail/a85a95083630fe905ac150df0d9e11f7df770e12bda08985bdefd7947704512d.jpg"}],["$","meta","13",{"name":"twitter:image:width","content":"640"}],["$","meta","14",{"name":"twitter:image:height","content":"400"}],["$","link","15",{"rel":"icon","href":"/favicon.ico?favicon.2hqc0rwsy9zm6.ico","sizes":"96x96","type":"image/x-icon"}],["$","link","16",{"rel":"icon","href":"/icon.png?icon.1mhghqfpotdlb.png","sizes":"512x512","type":"image/png"}],["$","$L4e","17",{}]] 4b:null