3f:null 40:["$","title",null,{"children":"Dear data: “semana de entrenamientos” | | Observable"}] 46:T470,const data = ([ { day:"Jueves", date:"6 ago", rest:false, group:"chest", label:"Pecho, tríceps y hombro", intensity:9.0, kcal:8.2, duration:70, motivation:9, milestone:false }, { day:"Viernes", date:"7 ago", rest:false, group:"back", label:"Espalda y bíceps", intensity:5.0, kcal:6.1, duration:45, motivation:6, milestone:false }, { day:"Sábado", date:"8 ago", rest:true }, { day:"Domingo", date:"9 ago", rest:true }, { day:"Lunes", date:"10 ago", rest:false, group:"chest", label:"Pecho, tríceps y hombro", intensity:8.0, kcal:7.8, duration:65, motivation:8, milestone:false }, { day:"Martes", date:"11 ago", rest:false, group:"back", label:"Espalda y bíceps", intensity:6.2, kcal:6.5, duration:50, motivation:8, milestone:true }, { day:"Miércoles", date:"12 ago", rest:false, group:"legs", label:"Pierna completa", intensity:9.6, kcal:9.0, duration:75, motivation:9.5, milestone:false }, { day:"Jueves", date:"13 ago", rest:false, group:"chest", label:"Pecho, tríceps y hombro", intensity:9.8, kcal:9.3, duration:80, motivation:10, milestone:true } ])47:T49c,// Genera el path de una montaña con un ligero temblor para q se parezca al original function mountainPath(cx, halfWidth, height, rng){ const j = () => (rng() - 0.5) * 10; // jitter en px const pts = [ [cx - halfWidth, baseline], [cx - halfWidth*0.55, baseline - height*0.32 + j()], [cx - halfWidth*0.15, baseline - height*0.82 + j()], [cx, baseline - height + j()*0.5], [cx + halfWidth*0.2, baseline - height*0.78 + j()], [cx + halfWidth*0.6, baseline - height*0.30 + j()], [cx + halfWidth, baseline] ]; const line = d3.line().curve(d3.curveCatmullRom.alpha(0.8)); return line(pts) + `L${cx + halfWidth},${baseline} Z`; } // Genera el path de un valle punteado para los días de descanso function valleyPath(cx, halfWidth, rng){ const depth = 26; const j = () => (rng() - 0.5) * 6; const pts = [ [cx - halfWidth, baseline], [cx - halfWidth*0.4, baseline + depth*0.5 + j()], [cx, baseline + depth + j()], [cx + halfWidth*0.4, baseline + depth*0.5 + j()], [cx + halfWidth, baseline] ]; const line = d3.line().curve(d3.curveCatmullRom.alpha(0.8)); return line(pts); }48:T575,const legend = (() => { const w = 900, h = 90; const svg = d3.create("svg") .attr("viewBox", [0, 0, w, h]) .attr("width", w) .attr("height", h) .attr("font-family", "Inter, sans-serif"); // grupos musculares const groups = Object.entries(groupColor); const gStart = 20; groups.forEach(([g, c], i) => { const x = gStart + i * 190; svg.append("rect").attr("x", x).attr("y", 10).attr("width", 16).attr("height", 16).attr("rx", 3).attr("fill", c); svg.append("text").attr("x", x + 22).attr("y", 22).attr("font-size", 13).attr("fill", "#2f2b22") .text({chest:"Pecho / hombro / tríceps", back:"Espalda / bíceps", legs:"Pierna"}[g]); }); // descanso svg.append("line").attr("x1", gStart + 3*190).attr("x2", gStart + 3*190 + 30).attr("y1", 18).attr("y2", 18) .attr("stroke", restColor).attr("stroke-width", 3).attr("stroke-dasharray", "4 4"); svg.append("text").attr("x", gStart + 3*190 + 38).attr("y", 22).attr("font-size", 13).attr("fill", "#2f2b22").text("Descanso"); // escalas: altura=intensidad, ancho=duración, color=motivación, 🔥=hito svg.append("text").attr("x", gStart).attr("y", 55).attr("font-size", 12).attr("fill", "#6b6555") .text("Altura = intensidad (0–10) · Ancho = duración (min) · Color más oscuro/saturado = mayor motivación · 🔥 = sesión destacada"); return svg.node(); })(); display(legend);49:Tcc4,const chartWidth = 900, chartHeight = 420; const chart = (() => { const svg = d3.create("svg") .attr("viewBox", [0, 0, chartWidth, chartHeight]) .attr("width", chartWidth) .attr("height", chartHeight) .attr("font-family", "Kalam, cursive") .style("background", "#fbf8f1"); // línea base a mano (ligeramente ondulada) const baseRng = mulberry32(42); const baseLine = d3.line().curve(d3.curveCatmullRom.alpha(0.8))( d3.range(0, chartWidth + 1, 60).map(x => [x, baseline + (baseRng() - 0.5) * 4]) ); svg.append("path") .attr("d", baseLine) .attr("fill", "none") .attr("stroke", "#6b5b95") .attr("stroke-width", 1.5) .attr("opacity", 0.5); const g = svg.selectAll("g.day") .data(data) .join("g") .attr("class", "day") .attr("transform", (d,i) => `translate(${xScale(i)},0)`); g.each(function(d, i){ const node = d3.select(this); const rng = mulberry32(i * 97 + 3); if (d.rest){ node.append("path") .attr("d", valleyPath(0, 55, rng)) .attr("fill", "none") .attr("stroke", restColor) .attr("stroke-width", 3) .attr("stroke-dasharray", "6 6") .attr("stroke-linecap", "round"); node.append("text") .attr("x", 0) .attr("y", baseline + 55) .attr("text-anchor", "middle") .attr("fill", "#8a8474") .attr("font-size", 15) .text("descanso"); } else { const hw = durationScale(d.duration); const h = intensityScale(d.intensity); const color = shadeByMotivation(d.group, d.motivation); node.append("path") .attr("d", mountainPath(0, hw, h, rng)) .attr("fill", color) .attr("stroke", d3.color(color).darker(0.8)) .attr("stroke-width", 2) .attr("stroke-linejoin", "round"); // etiqueta de duración y kcal bajo la montaña node.append("text") .attr("x", 0) .attr("y", baseline + 30) .attr("text-anchor", "middle") .attr("fill", "#4a4436") .attr("font-size", 13) .attr("font-family", "Inter, sans-serif") .text(`${d.duration} min · ${d.kcal} kcal`); node.append("text") .attr("x", 0) .attr("y", baseline + 48) .attr("text-anchor", "middle") .attr("fill", "#4a4436") .attr("font-size", 12) .attr("font-family", "Inter, sans-serif") .style("font-style", "italic") .text(d.label); // llama para hitos (milestone) if (d.milestone){ node.append("text") .attr("x", 0) .attr("y", baseline - h - 14) .attr("text-anchor", "middle") .attr("font-size", 22) .text("🔥"); } } // día y fecha arriba node.append("text") .attr("x", 0) .attr("y", 30) .attr("text-anchor", "middle") .attr("fill", "#2f2b22") .attr("font-size", 18) .attr("font-weight", 700) .text(d.day); node.append("text") .attr("x", 0) .attr("y", 50) .attr("text-anchor", "middle") .attr("fill", "#6b6555") .attr("font-size", 13) .attr("font-family", "Inter, sans-serif") .text(d.date); }); return svg.node(); })(); display(chart);4a:T4b2,const hitosTesis = ([ { hallazgo:"Encontré el paper clave que define la métrica base", hH:3, hI:8, dificultad:"Bug en el pipeline de limpieza de datos", dH:5, dI:6 }, { hallazgo:"Validé la primera hipótesis con datos piloto", hH:2, hI:7, dificultad:"Dataset incompleto, faltaban registros", dH:4, dI:5 }, { hallazgo:"Encontré un dataset público que complementa el mío", hH:1.5, hI:6, dificultad:"El modelo no converge con los hiperparámetros", dH:6, dI:7 }, { hallazgo:"Reorganicé notas y bibliografía", hH:1, hI:3, dificultad:"Ninguna dificultad relevante", dH:0.5, dI:2 }, { hallazgo:"Mejoró el accuracy tras ajustar el preprocesamiento", hH:2.5, hI:7, dificultad:"Conflicto de versiones entre librerías", dH:3, dI:4 }, { hallazgo:"Reunión con el asesor: nueva perspectiva del alcance",hH:1, hI:9, dificultad:"Rehacer una sección del marco teórico", dH:7, dI:8 }, { hallazgo:"Cerré el primer borrador del capítulo de resultados", hH:4, hI:9, dificultad:"Errores de formato en las referencias APA", dH:1.5, dI:2 } ])4b:T706,### Cómo está construido **La curva base.** Una espiral de Arquímedes cumple `r(t) = r₀ + k·t`, donde `t` es el ángulo acumulado en radianes y `r` el radio. Como `r` crece linealmente con `t`, la separación entre vueltas es constante — eso da la espiral pareja del boceto. Con siete vueltas (`t` de 0 a 7·2π), `k` se despeja para que el radio vaya de 34px en el centro a 400px en el borde. **Los picos.** Sobre ese radio base se suma un desplazamiento que puede ser positivo (pico hacia afuera = hallazgo) o negativo (hacia adentro = dificultad). Tres mecanismos lo controlan: 1. **Envolvente de agitación** — una suma de dos senos de baja frecuencia decide si el tramo va picudo o liso. Bajo cierto umbral el desplazamiento es 0 y la línea sigue la espiral limpia, que es lo que produce los tramos tranquilos del dibujo. 2. **Dirección de la ráfaga** — otro seno, más un sesgo propio del día, define si ese grupo de picos apunta hacia afuera o hacia adentro. Cambia de signo un par de veces por vuelta, así no queda una alternancia mecánica. 3. **Solo los puntos impares se desplazan** — la secuencia base→punta→base→punta es lo que produce el zigzag agudo en vez de una curva ondulada. **El color cambiante.** Es una sola espiral, pero se dibuja como siete sub-paths (uno por día) para poder darle color distinto a cada vuelta. Cada tramo incluye el primer punto del día siguiente, de modo que los extremos se tocan y no queda corte visible. **La animación.** Técnica de `stroke-dasharray` / `stroke-dashoffset`: se fija el dasharray al largo total del path y se anima el offset de ese largo hasta 0, lo que hace que la línea parezca dibujarse sola. Cada tramo arranca cuando termina el anterior, y las vueltas externas duran más porque son más largas.4c:T191e,const chartTesis = (function(){ const { W, H, TURNS, SAMPLES, r0, rEnd, k } = geoTesis; const container = html`

`; // --- estilos propios de este gráfico, autocontenidos --- container.appendChild(html`