40:null 41:["$","title",null,{"children":"Dear Data — Mis hábitos del mes | Luis Fernando Ruiz | Observable"}] 47:Tfed,{ const div = document.createElement("div"); div.style.fontFamily = "system-ui, sans-serif"; if (!habs.length) { div.style.cssText += ";color:" + C.mut + ";padding:12px"; div.textContent = "Selecciona al menos un hábito."; } else { const dTot = dias.length; const pct = (t) => Math.round((cumpl.get(t) / dTot) * 100); const peor = ordenTareas[0], mejor = ordenTareas[ordenTareas.length - 1]; const rojos = ordenTareas.filter((t) => cumpl.get(t) < dTot / 2); const prom = d3.mean(conteo, (d) => d.n).toFixed(1); div.style.cssText += ";background:#fff4ef;border:1px solid #f1d3c8;border-left:4px solid " + C.red + ";border-radius:10px;padding:10px 14px;font-size:14px;line-height:1.5"; div.innerHTML = `Mostrando ${habs.length} hábito(s), días ${dias[0]}–${dias[dias.length - 1]}. ` + (rojos.length ? `Grupo rojo (menos cumplidos): ${rojos.join(", ")}. ` : ``) + `Más difícil: ${peor} (${pct(peor)}%) · más constante: ` + `${mejor} (${pct(mejor)}%). ` + `Promedio: ${prom}/${habs.length} por día.`; } display(div); } { const maxN = Math.max(1, habs.length); const height = 190; const y = d3.scaleLinear().domain([0, maxN]).nice().range([height - margin.bottom, margin.top]); const svg = d3.create("svg").attr("viewBox", [0, 0, W, height]).attr("width", W).style("max-width", "100%").style("height", "auto"); svg.append("g").attr("transform", `translate(0,${height - margin.bottom})`).call(d3.axisBottom(x).tickSizeOuter(0)); svg.append("g").attr("transform", `translate(${margin.left},0)`).call(d3.axisLeft(y).ticks(Math.min(maxN, 5))); const cx = (d) => x(d.dia) + x.bandwidth() / 2; const line = d3.line().x(cx).y((d) => y(d.n)).curve(d3.curveCatmullRom.alpha(0.5)); svg.append("path").datum(conteo).attr("fill", "none").attr("stroke", "#4a4a4a").attr("stroke-width", 1.6).attr("d", line); svg.selectAll("circle").data(conteo).join("circle") .attr("cx", cx).attr("cy", (d) => y(d.n)).attr("r", 5) .attr("fill", C.ink).attr("stroke", "#fff").attr("stroke-width", 1.5) .append("title").text((d) => `Día ${d.dia}: ${d.n}/${maxN}`); display(svg.node()); } { const rightPad = 42; const y = d3.scaleBand().domain(ordenTareas).range([margin.top, margin.top + ordenTareas.length * cell]).paddingInner(0.12); const height = margin.top + ordenTareas.length * cell + margin.bottom; const svg = d3.create("svg").attr("viewBox", [0, 0, W + rightPad, height]).attr("width", W + rightPad).style("max-width", "100%").style("height", "auto"); svg.append("g").selectAll("text").data(ordenTareas).join("text") .attr("x", margin.left - 10).attr("y", (t) => y(t) + y.bandwidth() / 2) .attr("text-anchor", "end").attr("dominant-baseline", "middle").attr("font-size", 12).text((t) => t); svg.append("g").selectAll("text").data(ordenTareas).join("text") .attr("x", margin.left + innerW + 8).attr("y", (t) => y(t) + y.bandwidth() / 2) .attr("dominant-baseline", "middle").attr("font-size", 11).attr("font-weight", 600) .attr("fill", (t) => (cumpl.get(t) < dias.length / 2 ? C.redD : C.greenD)) .text((t) => `${cumpl.get(t)}/${dias.length}`); const celdas = ordenTareas.flatMap((t) => dias.map((d) => ({ tarea: t, dia: d, ok: hecho(t, d) }))); svg.append("g").selectAll("rect").data(celdas).join("rect") .attr("x", (d) => x(d.dia)).attr("y", (d) => y(d.tarea)) .attr("width", x.bandwidth()).attr("height", y.bandwidth()).attr("rx", 6).attr("ry", 6) .attr("fill", (d) => (d.ok ? C.green : C.red)) .attr("stroke", (d) => (d.ok ? C.greenD : C.redD)).attr("stroke-width", 0.75) .attr("opacity", (d) => (soloRojo && d.ok ? 0.15 : 1)) .append("title").text((d) => `Día ${d.dia} · ${d.tarea}: ${d.ok ? "cumplido" : "no cumplido"}`); svg.append("g").attr("transform", `translate(0,${margin.top + ordenTareas.length * cell})`).call(d3.axisBottom(x).tickFormat(fmtDia).tickSizeOuter(0)); display(svg.node()); }48:[] 45:{"id":"3885a74e05a017ad","slug":"dear-data-mis-habitos-del-mes","title":"Dear Data — Mis hábitos del mes","thumbnail":"bbd1fff3395174a1b26778b58b06db381c39a66bc6d70ddc7ce01c8912c0e913","access_level":"public","create_time":"$D2026-09-17T03:51:08.569Z","update_time":"$D2026-09-17T05:28:59.187Z","view_time":null,"first_public_time":"$D2026-09-17T05:50:27.241Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"ec8413e05da3abe5","login":"luis-fernando-ruiz","name":"Luis Fernando Ruiz","avatar_url":"https://avatars-next.observableusercontent.com/b132f553703f3b8bb95791c62ee2e580ab1abca6c1125b3ee0c3666b12bbf8b9","tier":"starter_2024","bio":"","following":false},"version":150,"publish_version":150,"role":null,"authored":false,"authors":[{"type":"individual","id":"ce57477beb3b3edd","login":"luis-fernando-ruiz","name":"Luis Fernando Ruiz","avatar_url":"https://avatars-next.observableusercontent.com/b132f553703f3b8bb95791c62ee2e580ab1abca6c1125b3ee0c3666b12bbf8b9","tier":null,"bio":"","following":false}],"members":[{"type":"team","id":"ec8413e05da3abe5","login":"luis-fernando-ruiz","name":"Luis Fernando Ruiz","avatar_url":"https://avatars-next.observableusercontent.com/b132f553703f3b8bb95791c62ee2e580ab1abca6c1125b3ee0c3666b12bbf8b9","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":"Dear Data — Mis hábitos del mes","cells":[{"id":2,"value":"# Dear Data — Mis hábitos del mes\nRegistro diario · días 1–27 (07/08) · 10 hábitos · 🟢 cumplido (1) · 🔴 no cumplido (0)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"const DIAS = 27;","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"const tareas = [\n \"6:00 Despertar\", \"2L Agua\", \"Ejercicio\", \"10+ páginas libro\", \"Portugués 30min+\",\n \"10+ páginas cómic\", \"30min+ guitarra\", \"Estiramiento\", \"6K pasos\", \"7h sueño\"\n];","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"const matriz = [\n [1,0,1,1,1,1,1,1,0,1,1,1,1,1,1,1,0,1,1,1,0,1,0,0,0,1,1], // 6:00 Despertar\n [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,1,1,1,1,1,1,1], // 2L Agua\n [0,0,1,1,1,0,0,1,0,0,0,0,1,0,1,0,0,1,0,1,0,1,1,1,1,0,1], // Ejercicio\n [0,0,1,0,0,0,1,1,0,0,0,0,1,0,0,1,0,0,0,1,1,0,0,1,0,1,0], // 10+ páginas libro\n [0,0,0,0,1,0,0,1,0,0,0,0,0,0,1,0,0,0,0,0,0,0,1,0,0,1,0], // Portugués 30min+\n [0,1,1,0,0,0,1,0,0,1,1,0,0,0,1,0,0,1,1,0,0,0,1,0,0,1,0], // 10+ páginas cómic\n [1,0,0,0,1,0,0,0,1,0,0,0,1,0,0,0,1,0,0,0,1,0,0,1,0,1,0], // 30min+ guitarra\n [0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,1,0,1], // Estiramiento\n [1,1,0,1,1,1,0,1,1,0,1,1,1,0,1,1,0,1,1,1,0,1,1,0,1,0,1], // 6K pasos\n [1,0,1,1,0,1,1,0,1,1,0,1,1,0,1,1,0,1,1,0,1,1,0,1,1,1,1], // 7h sueño\n];","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"const hecho = (t, d) => matriz[tareas.indexOf(t)][d - 1] === 1;","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"const C = { green: \"#4c9a5b\", greenD: \"#3a7a47\", red: \"#d94b3f\", redD: \"#b93a30\", ink: \"#2b2b2b\", mut: \"#8a8375\" };","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"const dias = d3.range(Math.min(diaDesde, diaHasta), Math.max(diaDesde, diaHasta) + 1);\nconst habs = tareas.filter((t) => habitosSel.includes(t));\nconst cumpl = new Map(habs.map((t) => [t, d3.sum(dias, (d) => (hecho(t, d) ? 1 : 0))]));\nconst ordenTareas = ordenSel === \"Por cumplimiento\"\n ? [...habs].sort((a, b) => d3.ascending(cumpl.get(a), cumpl.get(b)))\n : habs;\nconst conteo = dias.map((d) => ({ dia: d, n: d3.sum(habs, (t) => (hecho(t, d) ? 1 : 0)) }));","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"const cell = 26;\nconst margin = { top: 16, right: 20, bottom: 34, left: 168 };\n\nconst innerW = Math.max(dias.length, 1) * cell;\nconst W = margin.left + innerW + margin.right;\nconst x = d3.scaleBand().domain(dias).range([margin.left, margin.left + innerW]).paddingInner(0.12);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"const habitosSel = view(Inputs.checkbox(tareas, { label: \"Hábitos\", value: tareas }));\nconst ordenSel = view(Inputs.radio([\"Por cumplimiento\", \"Orden original\"], { label: \"Orden\", value: \"Por cumplimiento\" }));\nconst diaDesde = view(Inputs.range([1, DIAS], { step: 1, value: 1, label: \"Día desde\" }));\nconst diaHasta = view(Inputs.range([1, DIAS], { step: 1, value: DIAS, label: \"Día hasta\" }));\nconst soloRojo = view(Inputs.toggle({ label: \"Resaltar no cumplidos\" }));\nconst fmtDia = (d) => [\"V\", \"S\", \"D\", \"L\", \"M\", \"X\", \"J\"][(d - 1) % 7] + d;\n","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"$47","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W48","stdlib":"2"}} 46:"$45:body"