3e:null 3f:["$","title",null,{"children":"Lucas Mejía Tabares - 202215432 | Lucas Mejia | Observable"}] 45:T49a,# Dear Data: 30 días de hábitos y ansiedad Registro manual diario durante un mes (5 semanas, 6 días, de lunes a sábado). Cada día se dibujó a mano **un glifo** con hasta cinco ramas, una por hábito cumplido, y **un círculo** con el nivel de ansiedad codificado en cuadrantes rellenos. Este notebook lleva ese boceto físico a D3 conservando *las mismas marcas y los mismos canales* del papel: el glifo sigue siendo un nodo con ramas de colores, y la ansiedad sigue siendo un círculo dividido en cuartos. Lo que cambia es lo que el papel no podía dar: orden, comparación entre semanas, resaltado por hábito e interacción. **Las cinco ramas (se dibuja la rama si el día cumplió la condición):** | Rama | Color | Condición | |---|---|---| | Meditar | verde | medité mínimo 10 min. al día | | Dormir | morado | dormí mínimo 7 h la noche pasada | | Compartir | azul oscuro | compartí mínimo 40 min. de calidad con familia o amigos | | Trabajar | negro | trabajé más de 12 h al día | | Pantalla | rojo | *screen time* ≤ 30 min. (redes) | **El círculo:** nivel de ansiedad autorreportado, 1 a 4 cuadrantes rellenos = BAJO - MODERADA - ALTA - EXTREMA.46:T5d5,## Caracterización: *What · Why · How* **WHAT (datos).** Una tabla de 30 ítems (días). Cada ítem tiene: 5 atributos **categóricos binarios** (los hábitos), 1 atributo **ordinal** (ansiedad, 4 niveles) y 2 claves de posición **ordenadas**: semana (1–5) y día de la semana (L–S). No hay atributos cuantitativos: todo el dataset es categórico y ordinal, que es exactamente lo que impone el *data entry* a mano. **WHY (tareas).** - *Descubrir / presentar* la forma del mes: qué hábitos sostuve y cuáles se cayeron. - *Comparar* semanas entre sí y días de la semana entre sí. - *Buscar dependencias* entre los hábitos y el nivel de ansiedad. - *Identificar extremos*: los días de ansiedad `extrema` y qué tenían en común. **HOW (idioma visual).** - **Marcas:** *puntos* (los extremos de cada rama), *líneas* (las ramas), *área* (los cuadrantes del círculo). - **Canales:** **color de tono** → identidad del hábito (canal categórico, 5 categorías, dentro del límite perceptual); **posición angular** → identidad del hábito, redundante con el color, para que el glifo se lea aun sin recordar la leyenda; **área/cantidad de cuadrantes rellenos** → nivel de ansiedad (canal ordenado); **posición espacial en la retícula** → día y semana, el canal más preciso, reservado para la variable clave. - **Separación:** una retícula `semana × día` que replica la hoja; el ojo compara filas (semanas) y columnas (días de la semana) sin esfuerzo.47:Tcf0,datos = [ // semana · día · meditar · dormir · compartir · trabajar · pantalla · ansiedad(1-4) // ——— Semana 1 ——— {semana: 1, dia: "L", meditar: 0, dormir: 0, compartir: 1, trabajar: 1, pantalla: 0, ansiedad: 3}, {semana: 1, dia: "M", meditar: 1, dormir: 1, compartir: 0, trabajar: 1, pantalla: 0, ansiedad: 2}, {semana: 1, dia: "X", meditar: 1, dormir: 0, compartir: 0, trabajar: 1, pantalla: 0, ansiedad: 1}, {semana: 1, dia: "J", meditar: 0, dormir: 1, compartir: 0, trabajar: 1, pantalla: 0, ansiedad: 1}, {semana: 1, dia: "V", meditar: 0, dormir: 0, compartir: 1, trabajar: 1, pantalla: 0, ansiedad: 2}, {semana: 1, dia: "S", meditar: 1, dormir: 1, compartir: 0, trabajar: 1, pantalla: 1, ansiedad: 3}, // ——— Semana 2 ——— {semana: 2, dia: "L", meditar: 0, dormir: 0, compartir: 1, trabajar: 0, pantalla: 1, ansiedad: 4}, {semana: 2, dia: "M", meditar: 1, dormir: 1, compartir: 1, trabajar: 1, pantalla: 1, ansiedad: 1}, {semana: 2, dia: "X", meditar: 1, dormir: 0, compartir: 0, trabajar: 1, pantalla: 1, ansiedad: 1}, {semana: 2, dia: "J", meditar: 0, dormir: 1, compartir: 0, trabajar: 1, pantalla: 1, ansiedad: 1}, {semana: 2, dia: "V", meditar: 0, dormir: 0, compartir: 1, trabajar: 1, pantalla: 1, ansiedad: 2}, {semana: 2, dia: "S", meditar: 0, dormir: 1, compartir: 1, trabajar: 0, pantalla: 0, ansiedad: 1}, // ——— Semana 3 ——— {semana: 3, dia: "L", meditar: 0, dormir: 0, compartir: 0, trabajar: 1, pantalla: 1, ansiedad: 1}, {semana: 3, dia: "M", meditar: 0, dormir: 0, compartir: 0, trabajar: 1, pantalla: 1, ansiedad: 3}, {semana: 3, dia: "X", meditar: 1, dormir: 0, compartir: 0, trabajar: 1, pantalla: 1, ansiedad: 3}, {semana: 3, dia: "J", meditar: 0, dormir: 0, compartir: 0, trabajar: 1, pantalla: 1, ansiedad: 4}, {semana: 3, dia: "V", meditar: 0, dormir: 1, compartir: 1, trabajar: 1, pantalla: 1, ansiedad: 3}, {semana: 3, dia: "S", meditar: 0, dormir: 1, compartir: 1, trabajar: 1, pantalla: 1, ansiedad: 1}, // ——— Semana 4 ——— {semana: 4, dia: "L", meditar: 0, dormir: 0, compartir: 0, trabajar: 1, pantalla: 0, ansiedad: 1}, {semana: 4, dia: "M", meditar: 0, dormir: 1, compartir: 1, trabajar: 1, pantalla: 1, ansiedad: 2}, {semana: 4, dia: "X", meditar: 0, dormir: 0, compartir: 1, trabajar: 1, pantalla: 1, ansiedad: 1}, {semana: 4, dia: "J", meditar: 1, dormir: 0, compartir: 0, trabajar: 1, pantalla: 1, ansiedad: 3}, {semana: 4, dia: "V", meditar: 0, dormir: 0, compartir: 1, trabajar: 1, pantalla: 0, ansiedad: 2}, {semana: 4, dia: "S", meditar: 0, dormir: 1, compartir: 1, trabajar: 0, pantalla: 0, ansiedad: 2}, // ——— Semana 5 ——— {semana: 5, dia: "L", meditar: 0, dormir: 0, compartir: 1, trabajar: 1, pantalla: 1, ansiedad: 3}, {semana: 5, dia: "M", meditar: 0, dormir: 0, compartir: 1, trabajar: 1, pantalla: 1, ansiedad: 3}, {semana: 5, dia: "X", meditar: 1, dormir: 1, compartir: 1, trabajar: 1, pantalla: 1, ansiedad: 1}, {semana: 5, dia: "J", meditar: 0, dormir: 1, compartir: 0, trabajar: 1, pantalla: 1, ansiedad: 2}, {semana: 5, dia: "V", meditar: 0, dormir: 0, compartir: 0, trabajar: 1, pantalla: 1, ansiedad: 4}, {semana: 5, dia: "S", meditar: 0, dormir: 1, compartir: 0, trabajar: 1, pantalla: 0, ansiedad: 3}, ]48:T605,cfg = ({ papel: "#FBF8F1", // el tono del papel original tinta: "#2B2A28", cian: "#1287A8", // el marcador azul del círculo de ansiedad fuente: "ui-sans-serif, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif", // Cada rama: color + dirección fija (dx, dy en coordenadas SVG, y hacia abajo). // La dirección replica el glifo del data entry: verde arriba-izq, morado arriba-der, // azul abajo-izq, negro abajo, rojo abajo-der. habitos: [ {id: "meditar", nombre: "Meditar", color: "#1E7B4F", dx: -0.72, dy: -0.70, regla: "medité mínimo 10 min. al día"}, {id: "dormir", nombre: "Dormir", color: "#6B3FA0", dx: 0.66, dy: -0.76, regla: "dormí mínimo 7 h la noche pasada"}, {id: "compartir", nombre: "Compartir", color: "#1F2D6E", dx: -0.90, dy: 0.45, regla: "compartí mínimo 40 min. con familia o amigos"}, {id: "trabajar", nombre: "Trabajar", color: "#1A1A1A", dx: 0.00, dy: 1.00, regla: "trabajé más de 12 h al día"}, {id: "pantalla", nombre: "Pantalla", color: "#E2452F", dx: 0.88, dy: 0.50, regla: "screen time ≤ 30 min. (redes)"} ], // El círculo de ansiedad: 1 a 4 cuadrantes rellenos. niveles: ["bajo", "moderada", "alta", "extrema"], dias: ["L", "M", "X", "J", "V", "S"], // La hoja rotula "L M M J V S"; internamente X = miércoles para tener claves únicas. etiquetaDia: ({L: "L", M: "M", X: "M", J: "J", V: "V", S: "S"}), nombreDia: ({L: "Lunes", M: "Martes", X: "Miércoles", J: "Jueves", V: "Viernes", S: "Sábado"}) })49:T40d,// El círculo de ansiedad: se rellenan `nivel` cuadrantes en el orden // arriba-izq → arriba-der → abajo-izq → abajo-der, igual que en la leyenda del papel. function dibujarAnsiedad(g, nivel, r, color = cfg.cian) { const arco = d3.arc().innerRadius(0).outerRadius(r); const cuadrantes = [ [3 * Math.PI / 2, 2 * Math.PI], // arriba-izquierda [0, Math.PI / 2], // arriba-derecha [Math.PI, 3 * Math.PI / 2], // abajo-izquierda [Math.PI / 2, Math.PI] // abajo-derecha ]; for (let i = 0; i < nivel; i++) { g.append("path") .attr("d", arco({startAngle: cuadrantes[i][0], endAngle: cuadrantes[i][1]})) .attr("fill", color) .attr("opacity", 0.92); } g.append("circle").attr("r", r).attr("fill", "none").attr("stroke", color).attr("stroke-width", 2); g.append("line").attr("x1", -r).attr("x2", r).attr("stroke", color).attr("stroke-width", 2); g.append("line").attr("y1", -r).attr("y2", r).attr("stroke", color).attr("stroke-width", 2); return g; }4a:Tf97,composicion = { const m = {top: 86, right: 22, bottom: 34, left: 92}; const W = Math.min(width, 980); const celdaW = (W - m.left - m.right) / cfg.dias.length; const celdaH = 128; const H = m.top + celdaH * 5 + m.bottom; const R = Math.min(celdaW * 0.28, 30); // largo de las ramas const rA = Math.min(celdaW * 0.13, 15); // radio del círculo de ansiedad const cont = d3.create("div").style("position", "relative"); const svg = cont.append("svg") .attr("viewBox", `0 0 ${W} ${H}`) .attr("width", W).attr("height", H) .style("max-width", "100%").style("height", "auto") .style("background", cfg.papel) .style("font-family", cfg.fuente); // — títulos — svg.append("text") .attr("x", m.left).attr("y", 34) .attr("fill", cfg.tinta).attr("font-size", 20).attr("font-weight", 600) .text("Registro"); svg.append("text") .attr("x", m.left).attr("y", 54) .attr("fill", cfg.tinta).attr("font-size", 12).attr("opacity", 0.6) .text("30 días · un glifo por día · pasa el cursor por cada casilla"); // — encabezado de días — svg.append("g").selectAll("text").data(cfg.dias).join("text") .attr("x", (d, i) => m.left + celdaW * i + celdaW / 2) .attr("y", m.top - 14) .attr("text-anchor", "middle") .attr("fill", "#C2185B").attr("font-size", 13).attr("letter-spacing", "0.1em") .text(d => cfg.etiquetaDia[d]); // — etiquetas de semana — svg.append("g").selectAll("text").data(d3.range(1, 6)).join("text") .attr("x", m.left - 14) .attr("y", d => m.top + celdaH * (d - 1) + celdaH / 2) .attr("text-anchor", "end").attr("dominant-baseline", "middle") .attr("fill", cfg.tinta).attr("font-size", 11).attr("opacity", 0.65) .text(d => `Semana ${d}`); // — retícula — const reticula = svg.append("g").attr("stroke", "#B9B2A4").attr("stroke-width", 0.8); for (let i = 0; i <= cfg.dias.length; i++) reticula.append("line") .attr("x1", m.left + celdaW * i).attr("x2", m.left + celdaW * i) .attr("y1", m.top).attr("y2", m.top + celdaH * 5); for (let j = 0; j <= 5; j++) reticula.append("line") .attr("x1", m.left).attr("x2", m.left + celdaW * cfg.dias.length) .attr("y1", m.top + celdaH * j).attr("y2", m.top + celdaH * j); // — una casilla por día — const celdas = svg.append("g").selectAll("g").data(datos).join("g") .attr("transform", d => `translate(${m.left + celdaW * cfg.dias.indexOf(d.dia)},${m.top + celdaH * (d.semana - 1)})`); celdas.append("rect") // zona sensible al cursor .attr("width", celdaW).attr("height", celdaH) .attr("fill", "transparent"); celdas.each(function (d) { const g = d3.select(this); dibujarGlifo(g.append("g").attr("transform", `translate(${celdaW * 0.36},${celdaH * 0.46})`), d, R, foco); dibujarAnsiedad(g.append("g").attr("transform", `translate(${celdaW * 0.80},${celdaH * 0.62})`), d.ansiedad, rA); }); // — tooltip — const tip = cont.append("div") .style("position", "absolute").style("pointer-events", "none") .style("background", "#fff").style("border", "1px solid #e0dbd0") .style("border-radius", "6px").style("padding", "8px 10px") .style("font", `12px/1.45 ${cfg.fuente}`).style("color", cfg.tinta) .style("box-shadow", "0 4px 14px rgba(0,0,0,.12)") .style("opacity", 0).style("transition", "opacity .12s"); celdas .on("pointerenter pointermove", function (event, d) { const [x, y] = d3.pointer(event, cont.node()); d3.select(this).select("rect").attr("fill", "rgba(18,135,168,.07)"); tip.style("opacity", 1) .style("left", `${Math.min(x + 16, W - 190)}px`) .style("top", `${y - 12}px`) .html(resumenHTML(d)); }) .on("pointerleave", function () { d3.select(this).select("rect").attr("fill", "transparent"); tip.style("opacity", 0); }); return cont.node(); }4b:T64d,leyenda = { const W = Math.min(width, 980), H = 282; const svg = d3.create("svg") .attr("viewBox", `0 0 ${W} ${H}`).attr("width", W).attr("height", H) .style("max-width", "100%").style("height", "auto") .style("background", cfg.papel).style("font-family", cfg.fuente); svg.append("text").attr("x", 24).attr("y", 28) .attr("fill", cfg.tinta).attr("font-size", 15).attr("font-weight", 600) .text("Data entry — se colorean los puntos si:"); // glifo completo de referencia const gl = svg.append("g").attr("transform", `translate(104,140)`); dibujarGlifo(gl, Object.fromEntries(cfg.habitos.map(h => [h.id, 1])), 46, "todos"); // reglas const filas = svg.append("g").selectAll("g").data(cfg.habitos).join("g") .attr("transform", (d, i) => `translate(232,${62 + i * 32})`); filas.append("circle").attr("r", 7).attr("fill", d => d.color); filas.append("text").attr("x", 18).attr("y", 4) .attr("fill", cfg.tinta).attr("font-size", 13) .text(d => `${d.nombre} — ${d.regla}`); // escala de ansiedad svg.append("text").attr("x", 232).attr("y", 238) .attr("fill", cfg.tinta).attr("font-size", 12).attr("font-weight", 600) .text("nivel de ansiedad:"); const esc = svg.append("g").selectAll("g").data([1, 2, 3, 4]).join("g") .attr("transform", (d, i) => `translate(${392 + i * 92},232)`); esc.each(function (d) { dibujarAnsiedad(d3.select(this), d, 14); }); esc.append("text").attr("y", 32).attr("text-anchor", "middle") .attr("fill", cfg.tinta).attr("font-size", 11) .text(d => cfg.niveles[d - 1]); return svg.node(); }4c:T8ca,vistaFrecuencia = { const m = {top: 34, right: 80, bottom: 34, left: 108}; const W = Math.min(width, 720), H = m.top + cfg.habitos.length * 40 + m.bottom; const filas = cfg.habitos.map(h => ({...h, n: d3.sum(datos, d => d[h.id])})); const x = d3.scaleLinear().domain([0, datos.length]).range([m.left, W - m.right]); const y = d3.scaleBand().domain(filas.map(d => d.id)).range([m.top, H - m.bottom]).padding(0.34); const svg = d3.create("svg") .attr("viewBox", `0 0 ${W} ${H}`).attr("width", W).attr("height", H) .style("max-width", "100%").style("height", "auto") .style("background", cfg.papel).style("font-family", cfg.fuente); svg.append("text").attr("x", m.left).attr("y", 20) .attr("fill", cfg.tinta).attr("font-size", 13).attr("font-weight", 600) .text(`Días con la rama dibujada (de ${datos.length})`); // riel de fondo = los 30 días posibles svg.append("g").selectAll("rect").data(filas).join("rect") .attr("x", x(0)).attr("y", d => y(d.id)) .attr("width", x(datos.length) - x(0)).attr("height", y.bandwidth()) .attr("fill", "#E8E2D6"); svg.append("g").selectAll("rect").data(filas).join("rect") .attr("x", x(0)).attr("y", d => y(d.id)) .attr("width", d => x(d.n) - x(0)).attr("height", y.bandwidth()) .attr("fill", d => d.color) .attr("opacity", d => foco === "todos" || foco === d.id ? 1 : 0.2); svg.append("g").selectAll("text").data(filas).join("text") .attr("x", m.left - 10).attr("y", d => y(d.id) + y.bandwidth() / 2) .attr("text-anchor", "end").attr("dominant-baseline", "middle") .attr("fill", cfg.tinta).attr("font-size", 12) .text(d => d.nombre); svg.append("g").selectAll("text").data(filas).join("text") .attr("x", d => x(d.n) + 8).attr("y", d => y(d.id) + y.bandwidth() / 2) .attr("dominant-baseline", "middle") .attr("fill", cfg.tinta).attr("font-size", 12).attr("font-weight", 600) .text(d => `${d.n} · ${Math.round(d.n / datos.length * 100)}%`); svg.append("g").attr("transform", `translate(0,${H - m.bottom})`) .call(d3.axisBottom(x).ticks(6).tickSizeOuter(0)) .call(g => g.selectAll("text").attr("fill", cfg.tinta).attr("font-size", 10)); return svg.node(); }4d:Ta74,vistaSerie = { const m = {top: 66, right: 20, bottom: 46, left: 82}; const W = Math.min(width, 980), H = 280; const serie = datos.map((d, i) => ({...d, i})); const x = d3.scalePoint().domain(d3.range(datos.length)).range([m.left, W - m.right]).padding(0.5); const y = d3.scalePoint().domain([4, 3, 2, 1]).range([m.top, H - m.bottom]).padding(0.6); const escalaColor = d3.scaleOrdinal().domain([1, 2, 3, 4]) .range(["#BFE0EA", "#7DC3D6", "#3B9CBA", "#0E7391"]); const svg = d3.create("svg") .attr("viewBox", `0 0 ${W} ${H}`).attr("width", W).attr("height", H) .style("max-width", "100%").style("height", "auto") .style("background", cfg.papel).style("font-family", cfg.fuente); svg.append("text").attr("x", m.left).attr("y", 22) .attr("fill", cfg.tinta).attr("font-size", 13).attr("font-weight", 600) .text("Nivel de ansiedad a lo largo del mes"); // separadores de semana svg.append("g").selectAll("line").data(d3.range(1, 5)).join("line") .attr("x1", s => (x(s * 6 - 1) + x(s * 6)) / 2).attr("x2", s => (x(s * 6 - 1) + x(s * 6)) / 2) .attr("y1", m.top - 16).attr("y2", H - m.bottom) .attr("stroke", "#CFC8B9").attr("stroke-dasharray", "3,3"); svg.append("g").selectAll("text").data(d3.range(0, 5)).join("text") .attr("x", s => (x(s * 6) + x(s * 6 + 5)) / 2).attr("y", m.top - 24) .attr("text-anchor", "middle").attr("fill", cfg.tinta).attr("font-size", 10).attr("opacity", 0.55) .text(s => `Semana ${s + 1}`); svg.append("g").attr("transform", `translate(${m.left},0)`) .call(d3.axisLeft(y).tickFormat(v => cfg.niveles[v - 1]).tickSizeOuter(0)) .call(g => g.selectAll("text").attr("fill", cfg.tinta).attr("font-size", 11)) .call(g => g.select(".domain").remove()); svg.append("path") .datum(serie) .attr("fill", "none").attr("stroke", cfg.cian).attr("stroke-width", 1.6).attr("opacity", 0.45) .attr("d", d3.line().x(d => x(d.i)).y(d => y(d.ansiedad)).curve(d3.curveMonotoneX)); svg.append("g").selectAll("circle").data(serie).join("circle") .attr("cx", d => x(d.i)).attr("cy", d => y(d.ansiedad)) .attr("r", 6).attr("fill", d => escalaColor(d.ansiedad)) .attr("stroke", cfg.cian).attr("stroke-width", 1.2) .append("title") .text(d => `Semana ${d.semana} · ${cfg.nombreDia[d.dia]}\nansiedad: ${cfg.niveles[d.ansiedad - 1]}`); svg.append("g").selectAll("text").data(serie).join("text") .attr("x", d => x(d.i)).attr("y", H - m.bottom + 18) .attr("text-anchor", "middle").attr("fill", cfg.tinta).attr("font-size", 9).attr("opacity", 0.6) .text(d => cfg.etiquetaDia[d.dia]); return svg.node(); }4e:Ta33,vistaContraste = { const m = {top: 52, right: 120, bottom: 42, left: 108}; const W = Math.min(width, 720), H = m.top + cfg.habitos.length * 42 + m.bottom; const filas = cfg.habitos.map(h => { const con = datos.filter(d => d[h.id]), sin = datos.filter(d => !d[h.id]); return {...h, con: d3.mean(con, d => d.ansiedad), sin: d3.mean(sin, d => d.ansiedad), nCon: con.length, nSin: sin.length}; }); const x = d3.scaleLinear().domain([1, 3.2]).range([m.left, W - m.right]); const y = d3.scaleBand().domain(filas.map(d => d.id)).range([m.top, H - m.bottom]).padding(0.45); const svg = d3.create("svg") .attr("viewBox", `0 0 ${W} ${H}`).attr("width", W).attr("height", H) .style("max-width", "100%").style("height", "auto") .style("background", cfg.papel).style("font-family", cfg.fuente); svg.append("text").attr("x", m.left).attr("y", 20) .attr("fill", cfg.tinta).attr("font-size", 13).attr("font-weight", 600) .text("Ansiedad promedio: días sin la rama → días con la rama"); svg.append("text").attr("x", m.left).attr("y", 36) .attr("fill", cfg.tinta).attr("font-size", 11).attr("opacity", 0.6) .text("círculo hueco = sin el hábito · círculo lleno = con el hábito"); const g = svg.append("g").selectAll("g").data(filas).join("g") .attr("transform", d => `translate(0,${y(d.id) + y.bandwidth() / 2})`) .attr("opacity", d => foco === "todos" || foco === d.id ? 1 : 0.25); g.append("line") .attr("x1", d => x(d.sin)).attr("x2", d => x(d.con)) .attr("stroke", d => d.color).attr("stroke-width", 3).attr("opacity", 0.35); g.append("circle") .attr("cx", d => x(d.sin)).attr("r", 7) .attr("fill", cfg.papel).attr("stroke", d => d.color).attr("stroke-width", 2); g.append("circle") .attr("cx", d => x(d.con)).attr("r", 7).attr("fill", d => d.color); g.append("text") .attr("x", m.left - 10).attr("text-anchor", "end").attr("dominant-baseline", "middle") .attr("fill", cfg.tinta).attr("font-size", 12) .text(d => d.nombre); g.append("text") .attr("x", W - m.right + 14).attr("dominant-baseline", "middle") .attr("fill", cfg.tinta).attr("font-size", 11) .text(d => `${d.con > d.sin ? "▲" : "▼"} ${(d.con - d.sin).toFixed(2)} (n=${d.nCon})`); svg.append("g").attr("transform", `translate(0,${H - m.bottom})`) .call(d3.axisBottom(x).ticks(5).tickFormat(v => Number.isInteger(v) ? cfg.niveles[v - 1] ?? v : "").tickSizeOuter(0)) .call(sel => sel.selectAll("text").attr("fill", cfg.tinta).attr("font-size", 10)); return svg.node(); }4f:T6a2,## Qué muestra el mes **Un solo hábito domina el registro: Trabajar.** 27 de 30 días superaron las 12 horas (90%). Es el único que aparece casi siempre y por eso el glifo casi nunca se ve "vacío": la rama negra es el fondo del mes, no la excepción. Los otros cuatro hábitos se reparten la mitad restante: pantalla ≤ 30 min. 20 días (67%), compartir 15 (50%), dormir 7 h 13 (43%) y meditar apenas 8 (27%). **La ansiedad no fue plana.** 11 días en `bajo`, 7 en `moderada`, 9 en `alta` y 3 en `extrema`. Por semana, el promedio sube y baja: 2.00 · 1.67 · 2.50 · 1.83 · **2.67**. La semana 5 es la más tensa del mes y la semana 2 la más tranquila y es también la semana con el único día que se dibujó las cinco ramas. **Dormir es la rama que más se mueve junto con la ansiedad.** En los 13 días con 7 h de sueño el promedio de ansiedad fue **1.77**; en los 17 días sin ellas, **2.41**. Es la diferencia más grande de las cinco (−0.64). Meditar apunta en la misma dirección pero más flojo (1.88 vs 2.23), y compartir casi no marca diferencia (2.07 vs 2.20). **La rama roja se comporta al revés de lo esperado.** Los días con *screen time* ≤ 30 min. tuvieron **más** ansiedad (2.30) que los días sin ese límite (1.80). Lo más probable es que no sea el móvil lo que calma: los días de poco celular parecen ser justamente los días de trabajo intenso y cabeza metida en otra cosa. Es el hallazgo que valdría la pena instrumentar mejor en un segundo mes. **El miércoles es el día tranquilo.** Promedio 1.4, contra 2.6 del viernes y 2.4 del lunes. El patrón semanal (arranque tenso → mitad de semana calma → viernes alto) se repite en 4 de las 5 semanas. 50:[] 43:{"id":"8cab637f6bedb61b","slug":"dear-data-30-dias-de-habitos-y-ansiedad","title":"Lucas Mejía Tabares - 202215432","thumbnail":"9663d4997c9ae5959aa64b15f830893eebce519035dc378150b69350fa73e83a","access_level":"public","create_time":"$D2026-09-13T21:52:17.464Z","update_time":"$D2026-09-13T22:34:04.763Z","view_time":null,"first_public_time":"$D2026-09-13T22:17:16.216Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"451dab33d788a642","login":"lucas-mejia","name":"Lucas Mejia","avatar_url":"https://avatars-next.observableusercontent.com/fb7b294617a5acaa6d28e44f4287f20edd920579c4eb16afaeb6b797ac12d896","tier":"starter_2024","bio":""},"version":132,"publish_version":132,"role":null,"authored":false,"authors":[{"type":"individual","id":"8c87847422c3e538","login":"lucas-mejia","name":"Lucas Mejia","avatar_url":"https://avatars-next.observableusercontent.com/fb7b294617a5acaa6d28e44f4287f20edd920579c4eb16afaeb6b797ac12d896","tier":null,"bio":""}],"members":[{"type":"team","id":"451dab33d788a642","login":"lucas-mejia","name":"Lucas Mejia","avatar_url":"https://avatars-next.observableusercontent.com/fb7b294617a5acaa6d28e44f4287f20edd920579c4eb16afaeb6b797ac12d896","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":"Lucas Mejía Tabares - 202215432","cells":[{"id":28,"value":"# Lucas Mejía Tabares - 202215432","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1,"value":"$45","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"$46","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"$47","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"$48","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"## Construcción Glifo","pinned":false,"hidden":true,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"## Creación Glifo","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"// Una rama = una curva desde el nodo central hasta el punto de color.\n// La curva (control desplazado perpendicularmente) imita el trazo a mano del original.\nfunction ramaPath(dx, dy, r, curva = 0.30) {\n const x1 = dx * r, y1 = dy * r;\n const cx = x1 / 2 + (-dy) * r * curva;\n const cy = y1 / 2 + ( dx) * r * curva;\n return `M0,0 Q${cx},${cy} ${x1},${y1}`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"// Dibuja el glifo de un día dentro del grupo que se le pase.\n// `foco` permite atenuar las ramas que no son la resaltada.\nfunction dibujarGlifo(g, d, r, foco = \"todos\") {\n for (const h of cfg.habitos) {\n if (!d[h.id]) continue; // sin rama = no se cumplió ese día\n const on = foco === \"todos\" || foco === h.id;\n g.append(\"path\")\n .attr(\"d\", ramaPath(h.dx, h.dy, r))\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", h.color)\n .attr(\"stroke-width\", on ? 2.6 : 1.4)\n .attr(\"stroke-linecap\", \"round\")\n .attr(\"opacity\", on ? 1 : 0.15);\n g.append(\"circle\")\n .attr(\"cx\", h.dx * r).attr(\"cy\", h.dy * r)\n .attr(\"r\", on ? r * 0.17 + 2 : r * 0.10 + 1)\n .attr(\"fill\", h.color)\n .attr(\"opacity\", on ? 1 : 0.15);\n }\n g.append(\"circle\").attr(\"r\", 2.6).attr(\"fill\", cfg.tinta).attr(\"opacity\", 0.85);\n return g;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"$49","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"// Texto del tooltip de cada día.\nfunction resumenHTML(d) {\n const cumplidos = cfg.habitos.filter(h => d[h.id]);\n const lista = cumplidos.length\n ? cumplidos.map(h => `● ${h.nombre}`).join(\"
\")\n : `ningún hábito registrado`;\n return `Semana ${d.semana} · ${cfg.nombreDia[d.dia]}
\n ◕ Ansiedad ${cfg.niveles[d.ansiedad - 1]}\n (${d.ansiedad}/4)\n

${lista}`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"## Control del Resaltado","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"viewof foco = Inputs.radio(\n new Map([\n [\"Todos los hábitos\", \"todos\"],\n ...cfg.habitos.map(h => [h.nombre, h.id])\n ]),\n {label: \"Resaltar\", value: \"todos\"}\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"## Composición de las 5 Semanas","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"$4a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"## Leyenda","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"$4b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"## Vistas de apoyo\n\nLa retícula de arriba conserva el boceto, pero responde mal a preguntas agregadas\n(\"¿cuánto sostuve cada hábito?\", \"¿la ansiedad subió o bajó?\"). Para eso, tres vistas\nque reusan **exactamente los mismos colores** —el color sigue significando lo mismo\nen todo el notebook— y cambian el canal de posición.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"$4c","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":27,"value":"$4f","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W50","stdlib":"2"}} 44:"$43:body"