2f:Tf26,viewof colectivoSeleccionado = { const cont = html`

`; const colectivos = [ { id: "bolivia", nombre: "Programa Urbano", imagen: imgprogramaurbano, descripcion: "Línea de tiempo nacional que integra los hitos y procesos de todos los Colectivos Urbanos impulsados por UNITAS." }, { id: "elalto", nombre: "El Alto", imagen: imgElAlto, descripcion: "Colectivo ciudadano que impulsa el Derecho a la Ciudad mediante iniciativas comunitarias lideradas por jóvenes y mujeres." }, { id: "lapaz", nombre: "La Paz", imagen: imgLaPaz, descripcion: "Colectivo ciudadano enfocado en educación inclusiva, sostenibilidad ambiental y Derecho a la Ciudad." }, { id: "cochabamba", nombre: "Cochabamba", imagen: imgCochabamba, descripcion: "Colectivo ciudadano que impulsa la recuperación y protección de áreas verdes urbanas mediante la incidencia pública, la organización vecinal y la promoción de bosques urbanos." }, { id: "sucre", nombre: "Sucre", imagen: imgSucre, descripcion: "Impulsa iniciativas de organización ciudadana, empoderamiento femenino y transformación urbana en Sucre." }, { id: "oruro", nombre: "Oruro", imagen: imgOruro, descripcion: "Impulsa la participación de juventudes y poblaciones vulnerables en la construcción de una ciudad con derechos mediante la Agenda Urbana de Oruro." }, { id: "potosi", nombre: "Potosí", imagen: imgPotosi, descripcion: "Impulsa la protección de bosques urbanos y áreas verdes mediante educación ambiental, organización ciudadana e incidencia pública." }, { id: "tarija", nombre: "Tarija", imagen: imgTarija, descripcion: "Impulsa rutas de cuidados y el Derecho a la Ciudad mediante investigación participativa y acción colectiva en Tarija." } ]; colectivos.forEach(c => { const card = html`

${c.nombre}

${c.descripcion}

`; Object.assign(card.style, { padding: "40px 30px", borderRadius: "24px", color: "white", cursor: "pointer", textAlign: "center", fontWeight: "600", transition: "all 0.2s ease", boxShadow: "0 10px 25px rgba(0,0,0,0.15)", border: "1px solid rgba(255,255,255,0.08)" }); card.onmouseenter = () => { const img = card.querySelector("img"); img.style.transform = "scale(1.10)"; card.style.transform = "translateY(-6px)"; card.style.boxShadow = "0 20px 40px rgba(0,0,0,0.22)"; }; card.onmouseleave = () => { const img = card.querySelector("img"); img.style.transform = "scale(1)"; card.style.transform = "translateY(0)"; card.style.boxShadow = "0 10px 25px rgba(0,0,0,0.15)"; }; card.onclick = () => { cont.value = c.id; cont.dispatchEvent( new CustomEvent("input", { bubbles: true }) ); }; cont.appendChild(card); }); return cont; }30:T4a0d,chartElAlto= () => { if (!document.getElementById("inter-font")) { const link = document.createElement("link"); link.id = "inter-font"; link.rel = "stylesheet"; link.href = "https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap"; document.head.appendChild(link); } const cityFlag = flag; const data = elaltodata; const width = 1600; const height = 550; const palette = { primary: "#B55A2A", // terracota secondary: "#D98C2B", // ocre accent: "#8B3A2E", // vino dark: "#5A2A1B", // café oscuro line: "rgba(90,42,27,0.35)", grid: "rgba(90,42,27,0.08)", text: "#2F241F", muted: "#7A6A60", soft: "#B8AAA0" }; const svg = html``; svg.style.userSelect = "none"; svg.style.webkitUserSelect = "none"; svg.style.background = "linear-gradient(to bottom, rgba(0,0,0,0.02), rgba(0,0,0,0.08))"; svg.style.filter = "drop-shadow(0px 4px 12px rgba(0,0,0,0.06))"; const defs = document.createElementNS("http://www.w3.org/2000/svg", "defs"); const vignetteGradient = document.createElementNS("http://www.w3.org/2000/svg", "radialGradient"); vignetteGradient.setAttribute("cx", "45%"); vignetteGradient.setAttribute("cy", "50%"); vignetteGradient.setAttribute("r", "70%"); vignetteGradient.setAttribute("id", "vignetteGradient"); vignetteGradient.innerHTML = ` `; defs.appendChild(vignetteGradient); const filter = document.createElementNS("http://www.w3.org/2000/svg", "filter"); filter.setAttribute("id", "blur"); const feGaussianBlur = document.createElementNS("http://www.w3.org/2000/svg", "feGaussianBlur"); feGaussianBlur.setAttribute("stdDeviation", "0"); filter.appendChild(feGaussianBlur); defs.appendChild(filter); svg.appendChild(defs); const url = eaciudad; const bg = document.createElementNS("http://www.w3.org/2000/svg", "image"); bg.setAttribute("href", url); const bgWidth = width * 1.45; const bgHeight = bgWidth * (1600/ 2400); const baseX = (width - bgWidth) / 2 + 336; const baseY = (height - bgHeight) / 2 + 330; bg.setAttribute("x", baseX); bg.setAttribute("y", baseY); const zoom = 0.71; bg.setAttribute("width", bgWidth * zoom); bg.setAttribute("height", bgHeight * zoom); bg.setAttribute("x", (width - bgWidth * zoom) / 2); bg.setAttribute("y", (height - bgHeight * zoom) / 2); bg.setAttribute("opacity", 0.55); bg.style.filter = ` grayscale(0.10) sepia(0.1) saturate(0.85) contrast(0.90) brightness(0.90) `; bg.setAttribute("preserveAspectRatio", "xMidYMid meet"); svg.insertBefore(bg, svg.firstChild); const overlay = document.createElementNS("http://www.w3.org/2000/svg", "rect"); overlay.setAttribute("x", 0); overlay.setAttribute("y", 0); overlay.setAttribute("width", width); overlay.setAttribute("height", height); overlay.setAttribute("fill", "#5A2A1B"); overlay.setAttribute("opacity", 0.18); svg.insertBefore(overlay, bg.nextSibling); const vignette = document.createElementNS("http://www.w3.org/2000/svg", "rect"); vignette.setAttribute("x", 0); vignette.setAttribute("y", 0); vignette.setAttribute("width", width); vignette.setAttribute("height", height); // degradado tipo cine (oscuro en bordes) vignette.setAttribute("fill", "url(#vignetteGradient)"); vignette.setAttribute("opacity", "0.28"); svg.appendChild(vignette); const group = document.createElementNS("http://www.w3.org/2000/svg", "g"); svg.appendChild(group); group.setAttribute("transform-origin", "center center"); svg.style.willChange = "transform"; svg.style.userSelect = "none"; svg.style.pointerEvents = "auto"; const container = document.createElement("div"); container.style.width = "100%"; container.style.maxWidth = "none"; container.style.margin = "0 auto"; container.style.overflowX = "auto"; container.style.overflowY = "hidden"; container.style.position = "relative"; container.style.userSelect = "none"; container.style.webkitUserSelect = "none"; container.style.cursor = "grab"; container.style.userSelect = "none"; container.style.webkitUserSelect = "none"; container.style.MozUserSelect = "none"; container.style.msUserSelect = "none"; container.appendChild(svg); const containerWidth = width; const containerHeight = height; let isHoveringCircle = false; let targetX = 0; let currentX = 0; let hoverOffsetX = 0; let hoverOffsetY = 0; let targetY = 0; let currentY = 0; let isDragging = false; let startX, startY; let resetTimer; container.style.cursor = "grab"; container.addEventListener("mousedown", (e) => { isDragging = true; startX = e.clientX - targetX; startY = e.clientY - targetY; container.style.cursor = "grabbing"; }); container.addEventListener("mouseup", () => { isDragging = false; container.style.cursor = "grab"; }); container.addEventListener("mouseleave", () => { group.querySelectorAll("circle").forEach(c => { c.style.opacity = "1"; }); group.querySelectorAll("circle").forEach(c => { c.style.opacity = "1"; }); tracker.setAttribute("opacity", "0"); group.querySelectorAll("circle").forEach(c => { c.style.opacity = "1"; }); container.addEventListener("mouseenter", () => { clearTimeout(resetTimer); }); isDragging = false; hoverOffsetX = 0; hoverOffsetY = 0; clearTimeout(resetTimer); resetTimer = setTimeout(() => { targetX = 0; targetY = 0; }, 1200); }); container.addEventListener("mouseenter", () => { group.style.transition = "opacity 0.25s ease"; clearTimeout(resetTimer); }); container.addEventListener("mousemove", (e) => { if (!isDragging || isHoveringCircle) return; const newX = e.clientX - startX; const minX = -(width - container.clientWidth) - 50; const maxX = 50; targetX = Math.max(minX, Math.min(maxX, newX)); targetY = 0; }); container.addEventListener("mousemove", (e) => { if (isDragging || isHoveringCircle) return; const rect = container.getBoundingClientRect(); const mouseX = e.clientX - rect.left; tracker.setAttribute("x1", mouseX); tracker.setAttribute("x2", mouseX); tracker.setAttribute("opacity", "0.5"); const mouseY = e.clientY - rect.top; const percentX = (mouseX / rect.width) - 0.5; const percentY = (mouseY / rect.height) - 0.5; hoverOffsetX = percentX * -35; hoverOffsetY = percentY * -18; // bg.setAttribute("x", -100 + percentX * 18); // bg.setAttribute("y", -30 + percentY * 10); }); let intro = 0; function animate() { const rect = { width: containerWidth, height: containerHeight }; targetX = Math.min(0, targetX); targetY = 0; const textOpacity = 1; group.querySelectorAll("text").forEach(t => { t.style.opacity = textOpacity; }); const smooth = 0.08; currentX += (targetX - currentX) * smooth; currentY += (targetY - currentY) * smooth; intro += 0.02; const introEase = Math.min(intro, 1); group.style.opacity = introEase; const finalScale = 1; const cinematicX = hoverOffsetX * 5; const cinematicY = hoverOffsetY; // cuánto puede desplazarse el gráfico const maxPan = width * 0.55; // progreso entre 0 y 1 const scrollProgress = Math.min( 1, Math.abs(currentX) / maxPan ); // recorrido del fondo al hacer scroll const bgTravel = 350; // pequeño parallax según el mouse const parallaxX = hoverOffsetX * 0.8; const parallaxY = hoverOffsetY * 0.8; // posición base de la imagen //const baseX = (width - bgWidth) / 2; //const baseY = (height - bgHeight) / 2; // mover imagen combinando scroll + parallax bg.setAttribute( "x", baseX - (scrollProgress * bgTravel) + parallaxX ); bg.setAttribute( "y", baseY + parallaxY ); group.setAttribute( "transform", ` translate( ${width/2 + currentX + cinematicX}, ${height/2 + currentY + cinematicY} ) scale(${finalScale}) translate(${-width/2}, ${-height/2}) ` ); // group.style.transformOrigin = `${width/2}px ${height/2}px`; requestAnimationFrame(animate); } targetX = 0; targetY = 0; // 👇 IMPORTANTE animate(); // TOOLTIP const tooltip = document.createElement("div"); tooltip.style.position = "fixed"; tooltip.style.background = "rgba(255,255,255,0.95)"; tooltip.style.backdropFilter = "blur(8px)"; tooltip.style.color = "#1f2937"; tooltip.style.padding = "12px 16px"; tooltip.style.borderRadius = "12px"; tooltip.style.fontSize = "13px"; tooltip.style.boxShadow = "0 10px 25px rgba(0,0,0,0.1)"; tooltip.style.border = "1px solid rgba(0,0,0,0.05)"; tooltip.style.maxWidth = "260px"; tooltip.style.whiteSpace = "normal"; tooltip.style.lineHeight = "1.4";; tooltip.style.padding = "8px 12px"; tooltip.style.borderRadius = "8px"; tooltip.style.fontSize = "12px"; tooltip.style.boxShadow = "0 10px 30px rgba(0,0,0,0.08)"; tooltip.style.pointerEvents = "none"; tooltip.style.opacity = "0"; tooltip.style.transition = "opacity 0.2s ease"; container.appendChild(tooltip); const leftMargin = 100; const rightMargin = 100; const usableWidth = width - leftMargin - rightMargin; const xStep = usableWidth / (data.length - 1); const years = [...new Set(data.map(d => d.date))]; const periods = 3; // 3 cuatrimestres por año const sectionWidth = (width - 100) / years.length; const yearWidth = usableWidth / years.length; years.forEach((year, i) => { const xStart = leftMargin + i * yearWidth; const xCenter = xStart + yearWidth / 2; // 🟧 CAJA DEL AÑO const yearBox = document.createElementNS("http://www.w3.org/2000/svg", "rect"); yearBox.setAttribute("x", xStart); yearBox.setAttribute("y", 0); yearBox.setAttribute("width", yearWidth); yearBox.setAttribute("height", height); yearBox.setAttribute("fill", "none"); yearBox.setAttribute("stroke", palette.grid); yearBox.setAttribute("stroke-width", "1"); group.appendChild(yearBox); // 🟧 CUATRIMESTRES (FONDO) for (let q = 0; q < periods; q++) { const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect"); rect.setAttribute("x", xStart + q * (yearWidth / periods)); rect.setAttribute("y", 0); rect.setAttribute("width", yearWidth / periods); rect.setAttribute("height", height); rect.setAttribute("fill", q % 2 === 0 ? "rgba(255,255,255,0.03)" : "rgba(0,0,0,0.03)" ); group.appendChild(rect); } // 🟧 LÍNEAS DE DIVISIÓN for (let q = 1; q < periods; q++) { const qx = xStart + q * (yearWidth / periods); const qLine = document.createElementNS("http://www.w3.org/2000/svg", "line"); qLine.setAttribute("x1", qx); qLine.setAttribute("x2", qx); qLine.setAttribute("y1", 0); qLine.setAttribute("y2", height); qLine.setAttribute("stroke", "rgba(90,42,27,0.15)"); qLine.setAttribute("stroke-width", "1"); qLine.setAttribute("stroke-dasharray", "3 3"); qLine.setAttribute("opacity", "0.7"); group.appendChild(qLine); } // 🟧 ETIQUETAS DE LOS CUATRIMESTRES const labels = [ "Ene–Abr", "May–Ago", "Sep–Dic" ]; for (let q = 0; q < periods; q++) { const label = document.createElementNS( "http://www.w3.org/2000/svg", "text" ); label.setAttribute( "x", xStart + (q + 0.5) * (yearWidth / periods) ); label.setAttribute("y", 52); label.setAttribute("text-anchor", "middle"); label.setAttribute("font-size", "12"); label.setAttribute("font-weight", "600"); label.setAttribute("font-family", "Inter, sans-serif"); label.setAttribute("fill", palette.dark); label.setAttribute("opacity", "0.55"); label.textContent = labels[q]; group.appendChild(label); } // 🟧 TEXTO DEL AÑO const yearLabel = document.createElementNS("http://www.w3.org/2000/svg", "text"); yearLabel.setAttribute("x", xCenter); yearLabel.setAttribute("y", 22); yearLabel.setAttribute("text-anchor", "middle"); yearLabel.setAttribute("font-size", "26"); yearLabel.setAttribute("font-weight", "600"); yearLabel.setAttribute("fill", palette.dark); yearLabel.setAttribute("opacity", "0.15"); yearLabel.textContent = year; yearLabel.style.pointerEvents = "none"; group.appendChild(yearLabel); }); // línea central const line = document.createElementNS("http://www.w3.org/2000/svg", "line"); line.setAttribute("x1", leftMargin); line.setAttribute("x2", width - rightMargin); line.setAttribute("y1", height / 2); line.setAttribute("y2", height / 2); line.setAttribute("stroke", palette.line); line.setAttribute("stroke-width", "1.5"); line.setAttribute("stroke-opacity", "0.35"); line.setAttribute("stroke-dasharray", "4 4"); group.appendChild(line); const tracker = document.createElementNS( "http://www.w3.org/2000/svg", "line" ); tracker.style.pointerEvents = "none"; tracker.setAttribute("y1", 0); tracker.setAttribute("y2", height); tracker.setAttribute("stroke", "#B55A2A"); tracker.setAttribute("stroke-width", "1"); tracker.setAttribute("stroke-dasharray", "4 4"); tracker.setAttribute("opacity", "0"); group.appendChild(tracker); const positionCounter = {}; const placedLabels = []; const placedCircles = []; const allPositions = []; data.forEach((d, i) => { // puedes ajustar esto después con precisión real const periodIndex = d.period ?? 1; const yearIndex = years.indexOf(d.date); const key = `${d.date}-${d.period}`; if (!positionCounter[key]) { positionCounter[key] = []; } positionCounter[key].push(d); const duplicateIndex = positionCounter[key].length - 1; const separation = 40; const duplicateOffset = (duplicateIndex - 1) * separation; const x = leftMargin + yearIndex * yearWidth + periodIndex * (yearWidth / periods) + (yearWidth / periods) / 2 + duplicateOffset; const offset = (i % 2 === 0) ? 0 : 20; let y = d.type === "proceso" ? height / 2 - 100 : height / 2 + 100; allPositions.push({ x, y, type: d.type }); const labelWidth = 120; const levelHeight = 35; let level = 0; while (true) { const candidateY = d.type === "proceso" ? y - level * levelHeight : y + level * levelHeight; const collision = placedLabels.some(p => { return ( p.side === d.type && Math.abs(p.x - x) < labelWidth && Math.abs(p.y - candidateY) < levelHeight ); }); if (!collision) { y = candidateY; placedLabels.push({ x, y, side: d.type }); break; } level++; } // línea vertical (conector) const connector = document.createElementNS("http://www.w3.org/2000/svg", "line"); connector.setAttribute("x1", x); connector.setAttribute("x2", x); connector.setAttribute("y1", height/2); connector.setAttribute("y2", y); connector.setAttribute("stroke", palette.dark); connector.setAttribute("stroke-opacity", "0.18"); connector.setAttribute("stroke-width", "1.2"); group.appendChild(connector); // círculo blanco const circle = document.createElementNS("http://www.w3.org/2000/svg","circle"); circle.setAttribute("cx", x); circle.setAttribute("cy", y); circle.setAttribute("r", 11); circle.setAttribute("fill", "white"); circle.setAttribute("stroke", "#ffffff"); circle.setAttribute("stroke-width", "2.5"); circle.style.filter = ` drop-shadow(0px 0px 6px rgba(194,65,12,0.35)) drop-shadow(0px 4px 6px rgba(0,0,0,0.18)) `; group.appendChild(circle); // CLIP const clip = document.createElementNS( "http://www.w3.org/2000/svg", "clipPath" ); clip.setAttribute("id", `clip-${i}`); const clipCircle = document.createElementNS( "http://www.w3.org/2000/svg", "circle" ); clipCircle.setAttribute("cx", x); clipCircle.setAttribute("cy", y); clipCircle.setAttribute("r", 10); clip.appendChild(clipCircle); defs.appendChild(clip); // BANDERA const img = document.createElementNS( "http://www.w3.org/2000/svg", "image" ); img.setAttribute("href", cityFlag); img.setAttribute("width",20); img.setAttribute("height",20); img.setAttribute("preserveAspectRatio", "xMidYMid slice"); img.setAttribute("x",x-10); img.setAttribute("y",y-10); img.setAttribute("clip-path",`url(#clip-${i})`); img.style.pointerEvents="none"; group.appendChild(img); // hover circle.addEventListener("mouseenter",(event)=>{ isHoveringCircle = true; circle.setAttribute("r",13); img.setAttribute("x",x-12); img.setAttribute("y",y-12); img.setAttribute("width",24); img.setAttribute("height",24); clipCircle.setAttribute("r",12); tooltip.style.opacity="1"; tooltip.innerHTML = `

${d.title}

${d.desc}

${d.extra || ""}

`; const tooltipWidth = 260; let left = event.pageX + 12; if (left + tooltipWidth > window.innerWidth) { left = event.pageX - tooltipWidth - 12; } tooltip.style.left = left + "px"; tooltip.style.top = Math.max(20, event.pageY - 40) + "px"; }); // salida circle.addEventListener("mouseleave",()=>{ isHoveringCircle=false; circle.setAttribute("r",11); img.setAttribute("x",x-10); img.setAttribute("y",y-10); img.setAttribute("width",20); img.setAttribute("height",20); clipCircle.setAttribute("r",10); tooltip.style.opacity="0"; }); // título const text = document.createElementNS("http://www.w3.org/2000/svg", "text"); text.setAttribute("x", x); let textAbove = y < height / 2; let textY = textAbove ? y - 30 : y + 30; const titleWidth = 140; const titleHeight = 25; const titleCollision = allPositions.some(c => { const horizontalCollision = Math.abs(c.x - x) < titleWidth / 2; const verticalCollision = Math.abs(c.y - textY) < titleHeight; return horizontalCollision && verticalCollision; }); if (titleCollision) { textAbove = !textAbove; textY = textAbove ? y - 30 : y + 30; } text.setAttribute("y", textY); text.setAttribute( "dominant-baseline", textAbove ? "auto" : "hanging" ); if (x < width * 0.2) { text.setAttribute("text-anchor", "middle"); } else if (x > width * 0.8) { text.setAttribute("text-anchor", "middle"); } else { text.setAttribute("text-anchor", "middle"); } text.setAttribute("font-size", "12"); text.setAttribute("font-weight", "600"); text.setAttribute("font-family", "Inter, sans-serif"); text.setAttribute("fill", palette.text); text.setAttribute("letter-spacing", "0.2px"); text.textContent = d.title.length > 25 ? d.title.slice(0, 25) + "..." : d.title; text.style.pointerEvents = "none"; group.appendChild(text); }); container.style.paddingBottom = "60px"; return container; }31:Tfb6,elaltodata = [ {date: "2022", period: 1, city: "elalto", title: "Formación en derechos urbanos", desc: "Inicio del proceso formativo sobre Derecho a la Ciudad.", extra: "Se desarrollaron talleres participativos con actores urbanos, abordando temas como acceso a servicios, planificación urbana y derechos colectivos en la ciudad de El Alto.", type: "proceso" }, {date: "2023", period: 0, city: "elalto", title: "Conformación del colectivo urbano", desc: "Se consolida el Colectivo Urbano El Alto como espacio de articulación ciudadana.", extra: "A partir de procesos formativos previos, actores urbanos —principalmente jóvenes, mujeres y comerciantes— se organizan para impulsar acciones colectivas en sus territorios, fortaleciendo la participación y el ejercicio del derecho a la ciudad.", type: "proceso" }, {date: "2023", period: 1, city: "elalto", title: "Acciones en territorio", desc: "Intervenciones comunitarias en el Mercado 8 de Mayo en El Alto.", extra: "El colectivo impulsa acciones directas junto a comerciantes y vecinas del mercado, abordando problemáticas como la violencia, el uso del espacio público y la organización comunitaria. Estas experiencias fortalecen la participación activa y el trabajo colectivo en el territorio.", type: "proceso" }, {date: "2023", title: "Wawa Ñawi", period: 2, city: "elalto", desc: "Iniciativa de empoderamiento juvenil y prevención de la violencia.", extra: "Impulsada por jóvenes del colectivo, Wawa Ñawi promueve espacios de apoyo, sensibilización y acompañamiento frente a situaciones de violencia. A través de actividades comunitarias, fortalece el liderazgo juvenil y la participación activa en el territorio.", type: "iniciativa" }, {date: "2024", period: 0, city: "elalto", title: "Alianzas estratégicas", desc: "Articulación con organizaciones e instituciones locales.", extra: "El colectivo fortalece su trabajo mediante alianzas con organizaciones sociales, instituciones y actores territoriales. Estas articulaciones permiten ampliar el alcance de las acciones, compartir recursos y consolidar procesos colectivos en torno al derecho a la ciudad.", type: "proceso" }, {date: "2024", title: "Eco Vida", period: 2, city: "elalto", desc: "Iniciativa de producción ecológica y fortalecimiento comunitario.", extra: "Eco Vida promueve prácticas sostenibles a través de la producción ecológica y el aprovechamiento responsable de recursos. La iniciativa fortalece capacidades locales, impulsa alternativas económicas y fomenta el cuidado del entorno en la comunidad.", type: "iniciativa" }, {date: "2025", period: 1, city: "elalto", title: "Fortalecimiento organizativo", desc: "Consolidación del colectivo y fortalecimiento de su estructura interna.", extra: "El colectivo refuerza sus capacidades organizativas, mejora sus mecanismos de coordinación y fortalece el trabajo en red. Este proceso permite dar mayor sostenibilidad a las acciones e iniciativas impulsadas en el territorio.", type: "proceso" }, {date: "2025", period: 2, city: "elalto", title: "Ecofeminismo", desc: "Red de apoyo a mujeres y fortalecimiento de emprendimientos locales.", extra: "La iniciativa promueve el ecofeminismo como enfoque que vincula el cuidado del entorno con el empoderamiento de las mujeres. A través de redes de apoyo y actividades productivas, fortalece la autonomía económica, la organización colectiva y la participación en el territorio.", type: "iniciativa" }, {date: "2026", period: 1, city: "elalto", title: "Proceso en curso", desc: "El colectivo continúa desarrollando acciones en el territorio.", extra: "El proceso se mantiene activo, fortaleciendo iniciativas existentes y generando nuevas acciones en respuesta a las necesidades del contexto. Se proyecta la ampliación del trabajo en red y la consolidación de nuevas alianzas y liderazgos locales.", type: "proceso" }, ]32:T4a0d,chartLaPaz= () => { if (!document.getElementById("inter-font")) { const link = document.createElement("link"); link.id = "inter-font"; link.rel = "stylesheet"; link.href = "https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap"; document.head.appendChild(link); } const cityFlag = flaglp; const data = lapazdata; const width = 1600; const height = 550; const palette = { primary: "#B55A2A", // terracota secondary: "#D98C2B", // ocre accent: "#8B3A2E", // vino dark: "#5A2A1B", // café oscuro line: "rgba(90,42,27,0.35)", grid: "rgba(90,42,27,0.08)", text: "#2F241F", muted: "#7A6A60", soft: "#B8AAA0" }; const svg = html``; svg.style.userSelect = "none"; svg.style.webkitUserSelect = "none"; svg.style.background = "linear-gradient(to bottom, rgba(0,0,0,0.02), rgba(0,0,0,0.08))"; svg.style.filter = "drop-shadow(0px 4px 12px rgba(0,0,0,0.06))"; const defs = document.createElementNS("http://www.w3.org/2000/svg", "defs"); const vignetteGradient = document.createElementNS("http://www.w3.org/2000/svg", "radialGradient"); vignetteGradient.setAttribute("cx", "45%"); vignetteGradient.setAttribute("cy", "50%"); vignetteGradient.setAttribute("r", "70%"); vignetteGradient.setAttribute("id", "vignetteGradient"); vignetteGradient.innerHTML = ` `; defs.appendChild(vignetteGradient); const filter = document.createElementNS("http://www.w3.org/2000/svg", "filter"); filter.setAttribute("id", "blur"); const feGaussianBlur = document.createElementNS("http://www.w3.org/2000/svg", "feGaussianBlur"); feGaussianBlur.setAttribute("stdDeviation", "0"); filter.appendChild(feGaussianBlur); defs.appendChild(filter); svg.appendChild(defs); const url = lpciudad; const bg = document.createElementNS("http://www.w3.org/2000/svg", "image"); bg.setAttribute("href", url); const bgWidth = width * 1.45; const bgHeight = bgWidth * (1600/ 2400); const baseX = (width - bgWidth) / 2 + 336; const baseY = (height - bgHeight) / 2 + 330; bg.setAttribute("x", baseX); bg.setAttribute("y", baseY); const zoom = 0.71; bg.setAttribute("width", bgWidth * zoom); bg.setAttribute("height", bgHeight * zoom); bg.setAttribute("x", (width - bgWidth * zoom) / 2); bg.setAttribute("y", (height - bgHeight * zoom) / 2); bg.setAttribute("opacity", 0.55); bg.style.filter = ` grayscale(0.10) sepia(0.1) saturate(0.85) contrast(0.90) brightness(0.90) `; bg.setAttribute("preserveAspectRatio", "xMidYMid meet"); svg.insertBefore(bg, svg.firstChild); const overlay = document.createElementNS("http://www.w3.org/2000/svg", "rect"); overlay.setAttribute("x", 0); overlay.setAttribute("y", 0); overlay.setAttribute("width", width); overlay.setAttribute("height", height); overlay.setAttribute("fill", "#5A2A1B"); overlay.setAttribute("opacity", 0.18); svg.insertBefore(overlay, bg.nextSibling); const vignette = document.createElementNS("http://www.w3.org/2000/svg", "rect"); vignette.setAttribute("x", 0); vignette.setAttribute("y", 0); vignette.setAttribute("width", width); vignette.setAttribute("height", height); // degradado tipo cine (oscuro en bordes) vignette.setAttribute("fill", "url(#vignetteGradient)"); vignette.setAttribute("opacity", "0.28"); svg.appendChild(vignette); const group = document.createElementNS("http://www.w3.org/2000/svg", "g"); svg.appendChild(group); group.setAttribute("transform-origin", "center center"); svg.style.willChange = "transform"; svg.style.userSelect = "none"; svg.style.pointerEvents = "auto"; const container = document.createElement("div"); container.style.width = "100%"; container.style.maxWidth = "none"; container.style.margin = "0 auto"; container.style.overflowX = "auto"; container.style.overflowY = "hidden"; container.style.position = "relative"; container.style.userSelect = "none"; container.style.webkitUserSelect = "none"; container.style.cursor = "grab"; container.style.userSelect = "none"; container.style.webkitUserSelect = "none"; container.style.MozUserSelect = "none"; container.style.msUserSelect = "none"; container.appendChild(svg); const containerWidth = width; const containerHeight = height; let isHoveringCircle = false; let targetX = 0; let currentX = 0; let hoverOffsetX = 0; let hoverOffsetY = 0; let targetY = 0; let currentY = 0; let isDragging = false; let startX, startY; let resetTimer; container.style.cursor = "grab"; container.addEventListener("mousedown", (e) => { isDragging = true; startX = e.clientX - targetX; startY = e.clientY - targetY; container.style.cursor = "grabbing"; }); container.addEventListener("mouseup", () => { isDragging = false; container.style.cursor = "grab"; }); container.addEventListener("mouseleave", () => { group.querySelectorAll("circle").forEach(c => { c.style.opacity = "1"; }); group.querySelectorAll("circle").forEach(c => { c.style.opacity = "1"; }); tracker.setAttribute("opacity", "0"); group.querySelectorAll("circle").forEach(c => { c.style.opacity = "1"; }); container.addEventListener("mouseenter", () => { clearTimeout(resetTimer); }); isDragging = false; hoverOffsetX = 0; hoverOffsetY = 0; clearTimeout(resetTimer); resetTimer = setTimeout(() => { targetX = 0; targetY = 0; }, 1200); }); container.addEventListener("mouseenter", () => { group.style.transition = "opacity 0.25s ease"; clearTimeout(resetTimer); }); container.addEventListener("mousemove", (e) => { if (!isDragging || isHoveringCircle) return; const newX = e.clientX - startX; const minX = -(width - container.clientWidth) - 50; const maxX = 50; targetX = Math.max(minX, Math.min(maxX, newX)); targetY = 0; }); container.addEventListener("mousemove", (e) => { if (isDragging || isHoveringCircle) return; const rect = container.getBoundingClientRect(); const mouseX = e.clientX - rect.left; tracker.setAttribute("x1", mouseX); tracker.setAttribute("x2", mouseX); tracker.setAttribute("opacity", "0.5"); const mouseY = e.clientY - rect.top; const percentX = (mouseX / rect.width) - 0.5; const percentY = (mouseY / rect.height) - 0.5; hoverOffsetX = percentX * -35; hoverOffsetY = percentY * -18; // bg.setAttribute("x", -100 + percentX * 18); // bg.setAttribute("y", -30 + percentY * 10); }); let intro = 0; function animate() { const rect = { width: containerWidth, height: containerHeight }; targetX = Math.min(0, targetX); targetY = 0; const textOpacity = 1; group.querySelectorAll("text").forEach(t => { t.style.opacity = textOpacity; }); const smooth = 0.08; currentX += (targetX - currentX) * smooth; currentY += (targetY - currentY) * smooth; intro += 0.02; const introEase = Math.min(intro, 1); group.style.opacity = introEase; const finalScale = 1; const cinematicX = hoverOffsetX * 5; const cinematicY = hoverOffsetY; // cuánto puede desplazarse el gráfico const maxPan = width * 0.55; // progreso entre 0 y 1 const scrollProgress = Math.min( 1, Math.abs(currentX) / maxPan ); // recorrido del fondo al hacer scroll const bgTravel = 350; // pequeño parallax según el mouse const parallaxX = hoverOffsetX * 0.8; const parallaxY = hoverOffsetY * 0.8; // posición base de la imagen //const baseX = (width - bgWidth) / 2; //const baseY = (height - bgHeight) / 2; // mover imagen combinando scroll + parallax bg.setAttribute( "x", baseX - (scrollProgress * bgTravel) + parallaxX ); bg.setAttribute( "y", baseY + parallaxY ); group.setAttribute( "transform", ` translate( ${width/2 + currentX + cinematicX}, ${height/2 + currentY + cinematicY} ) scale(${finalScale}) translate(${-width/2}, ${-height/2}) ` ); // group.style.transformOrigin = `${width/2}px ${height/2}px`; requestAnimationFrame(animate); } targetX = 0; targetY = 0; // 👇 IMPORTANTE animate(); // TOOLTIP const tooltip = document.createElement("div"); tooltip.style.position = "fixed"; tooltip.style.background = "rgba(255,255,255,0.95)"; tooltip.style.backdropFilter = "blur(8px)"; tooltip.style.color = "#1f2937"; tooltip.style.padding = "12px 16px"; tooltip.style.borderRadius = "12px"; tooltip.style.fontSize = "13px"; tooltip.style.boxShadow = "0 10px 25px rgba(0,0,0,0.1)"; tooltip.style.border = "1px solid rgba(0,0,0,0.05)"; tooltip.style.maxWidth = "260px"; tooltip.style.whiteSpace = "normal"; tooltip.style.lineHeight = "1.4";; tooltip.style.padding = "8px 12px"; tooltip.style.borderRadius = "8px"; tooltip.style.fontSize = "12px"; tooltip.style.boxShadow = "0 10px 30px rgba(0,0,0,0.08)"; tooltip.style.pointerEvents = "none"; tooltip.style.opacity = "0"; tooltip.style.transition = "opacity 0.2s ease"; container.appendChild(tooltip); const leftMargin = 100; const rightMargin = 100; const usableWidth = width - leftMargin - rightMargin; const xStep = usableWidth / (data.length - 1); const years = [...new Set(data.map(d => d.date))]; const periods = 3; // 3 cuatrimestres por año const sectionWidth = (width - 100) / years.length; const yearWidth = usableWidth / years.length; years.forEach((year, i) => { const xStart = leftMargin + i * yearWidth; const xCenter = xStart + yearWidth / 2; // 🟧 CAJA DEL AÑO const yearBox = document.createElementNS("http://www.w3.org/2000/svg", "rect"); yearBox.setAttribute("x", xStart); yearBox.setAttribute("y", 0); yearBox.setAttribute("width", yearWidth); yearBox.setAttribute("height", height); yearBox.setAttribute("fill", "none"); yearBox.setAttribute("stroke", palette.grid); yearBox.setAttribute("stroke-width", "1"); group.appendChild(yearBox); // 🟧 CUATRIMESTRES (FONDO) for (let q = 0; q < periods; q++) { const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect"); rect.setAttribute("x", xStart + q * (yearWidth / periods)); rect.setAttribute("y", 0); rect.setAttribute("width", yearWidth / periods); rect.setAttribute("height", height); rect.setAttribute("fill", q % 2 === 0 ? "rgba(255,255,255,0.03)" : "rgba(0,0,0,0.03)" ); group.appendChild(rect); } // 🟧 LÍNEAS DE DIVISIÓN for (let q = 1; q < periods; q++) { const qx = xStart + q * (yearWidth / periods); const qLine = document.createElementNS("http://www.w3.org/2000/svg", "line"); qLine.setAttribute("x1", qx); qLine.setAttribute("x2", qx); qLine.setAttribute("y1", 0); qLine.setAttribute("y2", height); qLine.setAttribute("stroke", "rgba(90,42,27,0.15)"); qLine.setAttribute("stroke-width", "1"); qLine.setAttribute("stroke-dasharray", "3 3"); qLine.setAttribute("opacity", "0.7"); group.appendChild(qLine); } // 🟧 ETIQUETAS DE LOS CUATRIMESTRES const labels = [ "Ene–Abr", "May–Ago", "Sep–Dic" ]; for (let q = 0; q < periods; q++) { const label = document.createElementNS( "http://www.w3.org/2000/svg", "text" ); label.setAttribute( "x", xStart + (q + 0.5) * (yearWidth / periods) ); label.setAttribute("y", 52); label.setAttribute("text-anchor", "middle"); label.setAttribute("font-size", "12"); label.setAttribute("font-weight", "600"); label.setAttribute("font-family", "Inter, sans-serif"); label.setAttribute("fill", palette.dark); label.setAttribute("opacity", "0.55"); label.textContent = labels[q]; group.appendChild(label); } // 🟧 TEXTO DEL AÑO const yearLabel = document.createElementNS("http://www.w3.org/2000/svg", "text"); yearLabel.setAttribute("x", xCenter); yearLabel.setAttribute("y", 22); yearLabel.setAttribute("text-anchor", "middle"); yearLabel.setAttribute("font-size", "26"); yearLabel.setAttribute("font-weight", "600"); yearLabel.setAttribute("fill", palette.dark); yearLabel.setAttribute("opacity", "0.15"); yearLabel.textContent = year; yearLabel.style.pointerEvents = "none"; group.appendChild(yearLabel); }); // línea central const line = document.createElementNS("http://www.w3.org/2000/svg", "line"); line.setAttribute("x1", leftMargin); line.setAttribute("x2", width - rightMargin); line.setAttribute("y1", height / 2); line.setAttribute("y2", height / 2); line.setAttribute("stroke", palette.line); line.setAttribute("stroke-width", "1.5"); line.setAttribute("stroke-opacity", "0.35"); line.setAttribute("stroke-dasharray", "4 4"); group.appendChild(line); const tracker = document.createElementNS( "http://www.w3.org/2000/svg", "line" ); tracker.style.pointerEvents = "none"; tracker.setAttribute("y1", 0); tracker.setAttribute("y2", height); tracker.setAttribute("stroke", "#B55A2A"); tracker.setAttribute("stroke-width", "1"); tracker.setAttribute("stroke-dasharray", "4 4"); tracker.setAttribute("opacity", "0"); group.appendChild(tracker); const positionCounter = {}; const placedLabels = []; const placedCircles = []; const allPositions = []; data.forEach((d, i) => { // puedes ajustar esto después con precisión real const periodIndex = d.period ?? 1; const yearIndex = years.indexOf(d.date); const key = `${d.date}-${d.period}`; if (!positionCounter[key]) { positionCounter[key] = []; } positionCounter[key].push(d); const duplicateIndex = positionCounter[key].length - 1; const separation = 40; const duplicateOffset = (duplicateIndex - 1) * separation; const x = leftMargin + yearIndex * yearWidth + periodIndex * (yearWidth / periods) + (yearWidth / periods) / 2 + duplicateOffset; const offset = (i % 2 === 0) ? 0 : 20; let y = d.type === "proceso" ? height / 2 - 100 : height / 2 + 100; allPositions.push({ x, y, type: d.type }); const labelWidth = 120; const levelHeight = 35; let level = 0; while (true) { const candidateY = d.type === "proceso" ? y - level * levelHeight : y + level * levelHeight; const collision = placedLabels.some(p => { return ( p.side === d.type && Math.abs(p.x - x) < labelWidth && Math.abs(p.y - candidateY) < levelHeight ); }); if (!collision) { y = candidateY; placedLabels.push({ x, y, side: d.type }); break; } level++; } // línea vertical (conector) const connector = document.createElementNS("http://www.w3.org/2000/svg", "line"); connector.setAttribute("x1", x); connector.setAttribute("x2", x); connector.setAttribute("y1", height/2); connector.setAttribute("y2", y); connector.setAttribute("stroke", palette.dark); connector.setAttribute("stroke-opacity", "0.18"); connector.setAttribute("stroke-width", "1.2"); group.appendChild(connector); // círculo blanco const circle = document.createElementNS("http://www.w3.org/2000/svg","circle"); circle.setAttribute("cx", x); circle.setAttribute("cy", y); circle.setAttribute("r", 11); circle.setAttribute("fill", "white"); circle.setAttribute("stroke", "#ffffff"); circle.setAttribute("stroke-width", "2.5"); circle.style.filter = ` drop-shadow(0px 0px 6px rgba(194,65,12,0.35)) drop-shadow(0px 4px 6px rgba(0,0,0,0.18)) `; group.appendChild(circle); // CLIP const clip = document.createElementNS( "http://www.w3.org/2000/svg", "clipPath" ); clip.setAttribute("id", `clip-${i}`); const clipCircle = document.createElementNS( "http://www.w3.org/2000/svg", "circle" ); clipCircle.setAttribute("cx", x); clipCircle.setAttribute("cy", y); clipCircle.setAttribute("r", 10); clip.appendChild(clipCircle); defs.appendChild(clip); // BANDERA const img = document.createElementNS( "http://www.w3.org/2000/svg", "image" ); img.setAttribute("href", cityFlag); img.setAttribute("width",20); img.setAttribute("height",20); img.setAttribute("preserveAspectRatio", "xMidYMid slice"); img.setAttribute("x",x-10); img.setAttribute("y",y-10); img.setAttribute("clip-path",`url(#clip-${i})`); img.style.pointerEvents="none"; group.appendChild(img); // hover circle.addEventListener("mouseenter",(event)=>{ isHoveringCircle = true; circle.setAttribute("r",13); img.setAttribute("x",x-12); img.setAttribute("y",y-12); img.setAttribute("width",24); img.setAttribute("height",24); clipCircle.setAttribute("r",12); tooltip.style.opacity="1"; tooltip.innerHTML = `

${d.title}

${d.desc}

${d.extra || ""}

`; const tooltipWidth = 260; let left = event.pageX + 12; if (left + tooltipWidth > window.innerWidth) { left = event.pageX - tooltipWidth - 12; } tooltip.style.left = left + "px"; tooltip.style.top = Math.max(20, event.pageY - 40) + "px"; }); // salida circle.addEventListener("mouseleave",()=>{ isHoveringCircle=false; circle.setAttribute("r",11); img.setAttribute("x",x-10); img.setAttribute("y",y-10); img.setAttribute("width",20); img.setAttribute("height",20); clipCircle.setAttribute("r",10); tooltip.style.opacity="0"; }); // título const text = document.createElementNS("http://www.w3.org/2000/svg", "text"); text.setAttribute("x", x); let textAbove = y < height / 2; let textY = textAbove ? y - 30 : y + 30; const titleWidth = 140; const titleHeight = 25; const titleCollision = allPositions.some(c => { const horizontalCollision = Math.abs(c.x - x) < titleWidth / 2; const verticalCollision = Math.abs(c.y - textY) < titleHeight; return horizontalCollision && verticalCollision; }); if (titleCollision) { textAbove = !textAbove; textY = textAbove ? y - 30 : y + 30; } text.setAttribute("y", textY); text.setAttribute( "dominant-baseline", textAbove ? "auto" : "hanging" ); if (x < width * 0.2) { text.setAttribute("text-anchor", "middle"); } else if (x > width * 0.8) { text.setAttribute("text-anchor", "middle"); } else { text.setAttribute("text-anchor", "middle"); } text.setAttribute("font-size", "12"); text.setAttribute("font-weight", "600"); text.setAttribute("font-family", "Inter, sans-serif"); text.setAttribute("fill", palette.text); text.setAttribute("letter-spacing", "0.2px"); text.textContent = d.title.length > 25 ? d.title.slice(0, 25) + "..." : d.title; text.style.pointerEvents = "none"; group.appendChild(text); }); container.style.paddingBottom = "60px"; return container; }33:T1ace,lapazdata = [ { date: "2023", period: 0, city: "lapaz", title: "Talleres de nutrición", desc: "Inicio del proceso formativo sobre alimentación saludable y seguridad alimentaria.", extra: "Se desarrollaron talleres participativos dirigidos a familias, niñas, niños y jóvenes para fortalecer conocimientos sobre alimentación saludable, consumo responsable y aprovechamiento de productos nativos. Estos espacios sentaron las bases para la implementación de la iniciativa Nutrición Consciente.", type: "proceso" }, { date: "2023", period: 1, city: "lapaz", title: "Nutrición Consciente", desc: "Implementación de la primera iniciativa del Colectivo Urbano La Paz.", extra: "Como resultado del proceso formativo, se puso en marcha la iniciativa Nutrición Consciente para promover hábitos de alimentación saludable y sostenible desde un enfoque de derechos. La propuesta impulsó la participación comunitaria, la revalorización de alimentos nativos y prácticas que fortalecen la seguridad alimentaria en el barrio Las Lomas.", type: "iniciativa" }, { date: "2023", period: 1, city: "lapaz", title: "Talleres de alimentación", desc: "Proceso de capacitación práctica en nutrición y preparación de alimentos saludables.", extra: "Durante los talleres se promovió el uso de productos nativos bolivianos y se fortalecieron conocimientos sobre seguridad alimentaria, valor nutricional de los alimentos y prácticas sostenibles aplicables en los hogares.", type: "proceso" }, { date: "2023", period: 2, city: "lapaz", title: "Kits de hierbas nativas", desc: "Entrega de materiales educativos para reforzar los aprendizajes adquiridos.", extra: "Niños, niñas y jóvenes recibieron kits con especies vegetales nativas e información práctica para replicar experiencias de cultivo y cuidado en sus hogares, fortaleciendo la relación entre alimentación, biodiversidad y territorio.", type: "iniciativa" }, { date: "2024", period: 0, city: "lapaz", title: "Formación en biodiversidad", desc: "Capacitación interna para fortalecer capacidades del colectivo.", extra: "Se desarrollaron espacios de aprendizaje sobre biodiversidad, sostenibilidad urbana, ciudades con derechos y la importancia de construir vínculos entre áreas urbanas y rurales desde una perspectiva de ciudadanía activa.", type: "proceso" }, { date: "2024", period: 1, city: "lapaz", title: "Capacitación juvenil", desc: "Proceso formativo dirigido a jóvenes líderes y estudiantes.", extra: "Más de 300 jóvenes participaron en actividades educativas relacionadas con liderazgo ambiental, participación ciudadana, biodiversidad y Derecho a la Ciudad, fortaleciendo su capacidad de incidencia en sus comunidades.", type: "proceso" }, { date: "2024", period: 2, city: "lapaz", title: "Encuentros ambientales", desc: "Intercambio de experiencias entre jóvenes urbanos y rurales.", extra: "Los encuentros permitieron reflexionar sobre desafíos ambientales comunes, compartir conocimientos locales y generar propuestas colectivas para la protección del entorno y la promoción de ciudades más sostenibles.", type: "proceso" }, { date: "2025", period: 0, city: "lapaz", title: "Consultas de biodiversidad", desc: "Participación juvenil en procesos nacionales de consulta pública.", extra: "Jóvenes vinculados al colectivo participaron activamente en espacios regionales de consulta para la actualización del Plan Estratégico de Biodiversidad de Bolivia, aportando perspectivas desde la ciudadanía y la juventud.", type: "proceso" }, { date: "2025", period: 1, city: "lapaz", title: "Rearticulación del colectivo", desc: "Proceso de reorganización y fortalecimiento institucional.", extra: "El colectivo redefinió sus líneas de acción, actualizó prioridades temáticas y fortaleció la coordinación entre sus integrantes para responder a nuevos desafíos urbanos y educativos.", type: "proceso" }, { date: "2025", period: 1, city: "lapaz", title: "Alianza con el colegio ecológico UTASAWA", desc: "Consolidación de una alianza estratégica con una unidad educativa.", extra: "La coordinación con el Colegio UTASAWA permitió ampliar el alcance de las actividades del colectivo, incorporando contenidos relacionados con los ODS, inclusión educativa y Derecho a la Ciudad.", type: "proceso" }, { date: "2025", period: 2, city: "lapaz", title: "Educación inclusiva", desc: "Inicio de una nueva iniciativa centrada en inclusión y ciudadanía.", extra: "La propuesta buscó fortalecer valores de convivencia, respeto a la diversidad y participación ciudadana en estudiantes de entre 12 y 16 años, articulando los ODS con el enfoque de Ciudades con Derechos.", type: "iniciativa" }, { date: "2025", period: 2, city: "lapaz", title: "Articulación Eco-Urbana", desc: "Coordinación interinstitucional para el desarrollo de la actividad Conexión Eco-Urbana.", extra: "El Colectivo Urbano La Paz articuló esfuerzos con el Colegio UTASAWA, WCS Bolivia, REPAM, SEMTA y UNITAS para diseñar una experiencia educativa enfocada en biodiversidad, sostenibilidad y Derecho a la Ciudad. Durante esta etapa se definieron contenidos, metodologías participativas y responsabilidades entre las organizaciones involucradas.", type: "proceso" }, { date: "2025", period: 2, city: "lapaz", title: "Conexión Eco-Urbana", desc: "Jornada educativa sobre biodiversidad, sostenibilidad y Derecho a la Ciudad.", extra: "La iniciativa reunió a estudiantes del Colegio UTASAWA en una experiencia participativa desarrollada junto a UNITAS, WCS Bolivia, REPAM y SEMTA. A través de talleres, dinámicas y actividades colaborativas se promovió el reconocimiento de la biodiversidad urbana, la educación ambiental y el compromiso ciudadano con el cuidado del entorno.", type: "iniciativa" }, { date: "2025", period: 2, city: "lapaz", title: "Feria de conocimientos", desc: "Espacio público de intercambio y socialización de aprendizajes.", extra: "Los estudiantes compartieron proyectos, experiencias y conocimientos adquiridos durante el proceso formativo, promoviendo la participación comunitaria y el reconocimiento de los aprendizajes construidos colectivamente.", type: "iniciativa" }, { date: "2026", period: 1, city: "lapaz", title: "Expansión educativa", desc: "Proyección de crecimiento y consolidación del trabajo del colectivo.", extra: "Se plantea ampliar las actividades hacia nuevas unidades educativas, fortalecer alianzas institucionales e impulsar procesos de incidencia fomentando la cultura el cuidado e inclusión para incorporar contenidos vinculados al Derecho a la Ciudad en espacios educativos municipales.", type: "proceso" } ]34:T4a0f,chartSucre= () => { if (!document.getElementById("inter-font")) { const link = document.createElement("link"); link.id = "inter-font"; link.rel = "stylesheet"; link.href = "https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap"; document.head.appendChild(link); } const cityFlag = flagsuc; const data = sucredata; const width = 1600; const height = 550; const palette = { primary: "#B55A2A", // terracota secondary: "#D98C2B", // ocre accent: "#8B3A2E", // vino dark: "#5A2A1B", // café oscuro line: "rgba(90,42,27,0.35)", grid: "rgba(90,42,27,0.08)", text: "#2F241F", muted: "#7A6A60", soft: "#B8AAA0" }; const svg = html``; svg.style.userSelect = "none"; svg.style.webkitUserSelect = "none"; svg.style.background = "linear-gradient(to bottom, rgba(0,0,0,0.02), rgba(0,0,0,0.08))"; svg.style.filter = "drop-shadow(0px 4px 12px rgba(0,0,0,0.06))"; const defs = document.createElementNS("http://www.w3.org/2000/svg", "defs"); const vignetteGradient = document.createElementNS("http://www.w3.org/2000/svg", "radialGradient"); vignetteGradient.setAttribute("cx", "45%"); vignetteGradient.setAttribute("cy", "50%"); vignetteGradient.setAttribute("r", "70%"); vignetteGradient.setAttribute("id", "vignetteGradient"); vignetteGradient.innerHTML = ` `; defs.appendChild(vignetteGradient); const filter = document.createElementNS("http://www.w3.org/2000/svg", "filter"); filter.setAttribute("id", "blur"); const feGaussianBlur = document.createElementNS("http://www.w3.org/2000/svg", "feGaussianBlur"); feGaussianBlur.setAttribute("stdDeviation", "0"); filter.appendChild(feGaussianBlur); defs.appendChild(filter); svg.appendChild(defs); const url = scrciudad; const bg = document.createElementNS("http://www.w3.org/2000/svg", "image"); bg.setAttribute("href", url); const bgWidth = width * 1.45; const bgHeight = bgWidth * (1600/ 2400); const baseX = (width - bgWidth) / 2 + 336; const baseY = (height - bgHeight) / 2 + 330; bg.setAttribute("x", baseX); bg.setAttribute("y", baseY); const zoom = 0.71; bg.setAttribute("width", bgWidth * zoom); bg.setAttribute("height", bgHeight * zoom); bg.setAttribute("x", (width - bgWidth * zoom) / 2); bg.setAttribute("y", (height - bgHeight * zoom) / 2); bg.setAttribute("opacity", 0.55); bg.style.filter = ` grayscale(0.10) sepia(0.1) saturate(0.85) contrast(0.90) brightness(0.90) `; bg.setAttribute("preserveAspectRatio", "xMidYMid meet"); svg.insertBefore(bg, svg.firstChild); const overlay = document.createElementNS("http://www.w3.org/2000/svg", "rect"); overlay.setAttribute("x", 0); overlay.setAttribute("y", 0); overlay.setAttribute("width", width); overlay.setAttribute("height", height); overlay.setAttribute("fill", "#5A2A1B"); overlay.setAttribute("opacity", 0.18); svg.insertBefore(overlay, bg.nextSibling); const vignette = document.createElementNS("http://www.w3.org/2000/svg", "rect"); vignette.setAttribute("x", 0); vignette.setAttribute("y", 0); vignette.setAttribute("width", width); vignette.setAttribute("height", height); // degradado tipo cine (oscuro en bordes) vignette.setAttribute("fill", "url(#vignetteGradient)"); vignette.setAttribute("opacity", "0.28"); svg.appendChild(vignette); const group = document.createElementNS("http://www.w3.org/2000/svg", "g"); svg.appendChild(group); group.setAttribute("transform-origin", "center center"); svg.style.willChange = "transform"; svg.style.userSelect = "none"; svg.style.pointerEvents = "auto"; const container = document.createElement("div"); container.style.width = "100%"; container.style.maxWidth = "none"; container.style.margin = "0 auto"; container.style.overflowX = "auto"; container.style.overflowY = "hidden"; container.style.position = "relative"; container.style.userSelect = "none"; container.style.webkitUserSelect = "none"; container.style.cursor = "grab"; container.style.userSelect = "none"; container.style.webkitUserSelect = "none"; container.style.MozUserSelect = "none"; container.style.msUserSelect = "none"; container.appendChild(svg); const containerWidth = width; const containerHeight = height; let isHoveringCircle = false; let targetX = 0; let currentX = 0; let hoverOffsetX = 0; let hoverOffsetY = 0; let targetY = 0; let currentY = 0; let isDragging = false; let startX, startY; let resetTimer; container.style.cursor = "grab"; container.addEventListener("mousedown", (e) => { isDragging = true; startX = e.clientX - targetX; startY = e.clientY - targetY; container.style.cursor = "grabbing"; }); container.addEventListener("mouseup", () => { isDragging = false; container.style.cursor = "grab"; }); container.addEventListener("mouseleave", () => { group.querySelectorAll("circle").forEach(c => { c.style.opacity = "1"; }); group.querySelectorAll("circle").forEach(c => { c.style.opacity = "1"; }); tracker.setAttribute("opacity", "0"); group.querySelectorAll("circle").forEach(c => { c.style.opacity = "1"; }); container.addEventListener("mouseenter", () => { clearTimeout(resetTimer); }); isDragging = false; hoverOffsetX = 0; hoverOffsetY = 0; clearTimeout(resetTimer); resetTimer = setTimeout(() => { targetX = 0; targetY = 0; }, 1200); }); container.addEventListener("mouseenter", () => { group.style.transition = "opacity 0.25s ease"; clearTimeout(resetTimer); }); container.addEventListener("mousemove", (e) => { if (!isDragging || isHoveringCircle) return; const newX = e.clientX - startX; const minX = -(width - container.clientWidth) - 50; const maxX = 50; targetX = Math.max(minX, Math.min(maxX, newX)); targetY = 0; }); container.addEventListener("mousemove", (e) => { if (isDragging || isHoveringCircle) return; const rect = container.getBoundingClientRect(); const mouseX = e.clientX - rect.left; tracker.setAttribute("x1", mouseX); tracker.setAttribute("x2", mouseX); tracker.setAttribute("opacity", "0.5"); const mouseY = e.clientY - rect.top; const percentX = (mouseX / rect.width) - 0.5; const percentY = (mouseY / rect.height) - 0.5; hoverOffsetX = percentX * -35; hoverOffsetY = percentY * -18; // bg.setAttribute("x", -100 + percentX * 18); // bg.setAttribute("y", -30 + percentY * 10); }); let intro = 0; function animate() { const rect = { width: containerWidth, height: containerHeight }; targetX = Math.min(0, targetX); targetY = 0; const textOpacity = 1; group.querySelectorAll("text").forEach(t => { t.style.opacity = textOpacity; }); const smooth = 0.08; currentX += (targetX - currentX) * smooth; currentY += (targetY - currentY) * smooth; intro += 0.02; const introEase = Math.min(intro, 1); group.style.opacity = introEase; const finalScale = 1; const cinematicX = hoverOffsetX * 5; const cinematicY = hoverOffsetY; // cuánto puede desplazarse el gráfico const maxPan = width * 0.55; // progreso entre 0 y 1 const scrollProgress = Math.min( 1, Math.abs(currentX) / maxPan ); // recorrido del fondo al hacer scroll const bgTravel = 350; // pequeño parallax según el mouse const parallaxX = hoverOffsetX * 0.8; const parallaxY = hoverOffsetY * 0.8; // posición base de la imagen //const baseX = (width - bgWidth) / 2; //const baseY = (height - bgHeight) / 2; // mover imagen combinando scroll + parallax bg.setAttribute( "x", baseX - (scrollProgress * bgTravel) + parallaxX ); bg.setAttribute( "y", baseY + parallaxY ); group.setAttribute( "transform", ` translate( ${width/2 + currentX + cinematicX}, ${height/2 + currentY + cinematicY} ) scale(${finalScale}) translate(${-width/2}, ${-height/2}) ` ); // group.style.transformOrigin = `${width/2}px ${height/2}px`; requestAnimationFrame(animate); } targetX = 0; targetY = 0; // 👇 IMPORTANTE animate(); // TOOLTIP const tooltip = document.createElement("div"); tooltip.style.position = "fixed"; tooltip.style.background = "rgba(255,255,255,0.95)"; tooltip.style.backdropFilter = "blur(8px)"; tooltip.style.color = "#1f2937"; tooltip.style.padding = "12px 16px"; tooltip.style.borderRadius = "12px"; tooltip.style.fontSize = "13px"; tooltip.style.boxShadow = "0 10px 25px rgba(0,0,0,0.1)"; tooltip.style.border = "1px solid rgba(0,0,0,0.05)"; tooltip.style.maxWidth = "260px"; tooltip.style.whiteSpace = "normal"; tooltip.style.lineHeight = "1.4";; tooltip.style.padding = "8px 12px"; tooltip.style.borderRadius = "8px"; tooltip.style.fontSize = "12px"; tooltip.style.boxShadow = "0 10px 30px rgba(0,0,0,0.08)"; tooltip.style.pointerEvents = "none"; tooltip.style.opacity = "0"; tooltip.style.transition = "opacity 0.2s ease"; container.appendChild(tooltip); const leftMargin = 100; const rightMargin = 100; const usableWidth = width - leftMargin - rightMargin; const xStep = usableWidth / (data.length - 1); const years = [...new Set(data.map(d => d.date))]; const periods = 3; // 3 cuatrimestres por año const sectionWidth = (width - 100) / years.length; const yearWidth = usableWidth / years.length; years.forEach((year, i) => { const xStart = leftMargin + i * yearWidth; const xCenter = xStart + yearWidth / 2; // 🟧 CAJA DEL AÑO const yearBox = document.createElementNS("http://www.w3.org/2000/svg", "rect"); yearBox.setAttribute("x", xStart); yearBox.setAttribute("y", 0); yearBox.setAttribute("width", yearWidth); yearBox.setAttribute("height", height); yearBox.setAttribute("fill", "none"); yearBox.setAttribute("stroke", palette.grid); yearBox.setAttribute("stroke-width", "1"); group.appendChild(yearBox); // 🟧 CUATRIMESTRES (FONDO) for (let q = 0; q < periods; q++) { const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect"); rect.setAttribute("x", xStart + q * (yearWidth / periods)); rect.setAttribute("y", 0); rect.setAttribute("width", yearWidth / periods); rect.setAttribute("height", height); rect.setAttribute("fill", q % 2 === 0 ? "rgba(255,255,255,0.03)" : "rgba(0,0,0,0.03)" ); group.appendChild(rect); } // 🟧 LÍNEAS DE DIVISIÓN for (let q = 1; q < periods; q++) { const qx = xStart + q * (yearWidth / periods); const qLine = document.createElementNS("http://www.w3.org/2000/svg", "line"); qLine.setAttribute("x1", qx); qLine.setAttribute("x2", qx); qLine.setAttribute("y1", 0); qLine.setAttribute("y2", height); qLine.setAttribute("stroke", "rgba(90,42,27,0.15)"); qLine.setAttribute("stroke-width", "1"); qLine.setAttribute("stroke-dasharray", "3 3"); qLine.setAttribute("opacity", "0.7"); group.appendChild(qLine); } // 🟧 ETIQUETAS DE LOS CUATRIMESTRES const labels = [ "Ene–Abr", "May–Ago", "Sep–Dic" ]; for (let q = 0; q < periods; q++) { const label = document.createElementNS( "http://www.w3.org/2000/svg", "text" ); label.setAttribute( "x", xStart + (q + 0.5) * (yearWidth / periods) ); label.setAttribute("y", 52); label.setAttribute("text-anchor", "middle"); label.setAttribute("font-size", "12"); label.setAttribute("font-weight", "600"); label.setAttribute("font-family", "Inter, sans-serif"); label.setAttribute("fill", palette.dark); label.setAttribute("opacity", "0.55"); label.textContent = labels[q]; group.appendChild(label); } // 🟧 TEXTO DEL AÑO const yearLabel = document.createElementNS("http://www.w3.org/2000/svg", "text"); yearLabel.setAttribute("x", xCenter); yearLabel.setAttribute("y", 22); yearLabel.setAttribute("text-anchor", "middle"); yearLabel.setAttribute("font-size", "26"); yearLabel.setAttribute("font-weight", "600"); yearLabel.setAttribute("fill", palette.dark); yearLabel.setAttribute("opacity", "0.15"); yearLabel.textContent = year; yearLabel.style.pointerEvents = "none"; group.appendChild(yearLabel); }); // línea central const line = document.createElementNS("http://www.w3.org/2000/svg", "line"); line.setAttribute("x1", leftMargin); line.setAttribute("x2", width - rightMargin); line.setAttribute("y1", height / 2); line.setAttribute("y2", height / 2); line.setAttribute("stroke", palette.line); line.setAttribute("stroke-width", "1.5"); line.setAttribute("stroke-opacity", "0.35"); line.setAttribute("stroke-dasharray", "4 4"); group.appendChild(line); const tracker = document.createElementNS( "http://www.w3.org/2000/svg", "line" ); tracker.style.pointerEvents = "none"; tracker.setAttribute("y1", 0); tracker.setAttribute("y2", height); tracker.setAttribute("stroke", "#B55A2A"); tracker.setAttribute("stroke-width", "1"); tracker.setAttribute("stroke-dasharray", "4 4"); tracker.setAttribute("opacity", "0"); group.appendChild(tracker); const positionCounter = {}; const placedLabels = []; const placedCircles = []; const allPositions = []; data.forEach((d, i) => { // puedes ajustar esto después con precisión real const periodIndex = d.period ?? 1; const yearIndex = years.indexOf(d.date); const key = `${d.date}-${d.period}`; if (!positionCounter[key]) { positionCounter[key] = []; } positionCounter[key].push(d); const duplicateIndex = positionCounter[key].length - 1; const separation = 40; const duplicateOffset = (duplicateIndex - 1) * separation; const x = leftMargin + yearIndex * yearWidth + periodIndex * (yearWidth / periods) + (yearWidth / periods) / 2 + duplicateOffset; const offset = (i % 2 === 0) ? 0 : 20; let y = d.type === "proceso" ? height / 2 - 100 : height / 2 + 100; allPositions.push({ x, y, type: d.type }); const labelWidth = 120; const levelHeight = 35; let level = 0; while (true) { const candidateY = d.type === "proceso" ? y - level * levelHeight : y + level * levelHeight; const collision = placedLabels.some(p => { return ( p.side === d.type && Math.abs(p.x - x) < labelWidth && Math.abs(p.y - candidateY) < levelHeight ); }); if (!collision) { y = candidateY; placedLabels.push({ x, y, side: d.type }); break; } level++; } // línea vertical (conector) const connector = document.createElementNS("http://www.w3.org/2000/svg", "line"); connector.setAttribute("x1", x); connector.setAttribute("x2", x); connector.setAttribute("y1", height/2); connector.setAttribute("y2", y); connector.setAttribute("stroke", palette.dark); connector.setAttribute("stroke-opacity", "0.18"); connector.setAttribute("stroke-width", "1.2"); group.appendChild(connector); // círculo blanco const circle = document.createElementNS("http://www.w3.org/2000/svg","circle"); circle.setAttribute("cx", x); circle.setAttribute("cy", y); circle.setAttribute("r", 11); circle.setAttribute("fill", "white"); circle.setAttribute("stroke", "#ffffff"); circle.setAttribute("stroke-width", "2.5"); circle.style.filter = ` drop-shadow(0px 0px 6px rgba(194,65,12,0.35)) drop-shadow(0px 4px 6px rgba(0,0,0,0.18)) `; group.appendChild(circle); // CLIP const clip = document.createElementNS( "http://www.w3.org/2000/svg", "clipPath" ); clip.setAttribute("id", `clip-${i}`); const clipCircle = document.createElementNS( "http://www.w3.org/2000/svg", "circle" ); clipCircle.setAttribute("cx", x); clipCircle.setAttribute("cy", y); clipCircle.setAttribute("r", 10); clip.appendChild(clipCircle); defs.appendChild(clip); // BANDERA const img = document.createElementNS( "http://www.w3.org/2000/svg", "image" ); img.setAttribute("href", cityFlag); img.setAttribute("width",20); img.setAttribute("height",20); img.setAttribute("preserveAspectRatio", "xMidYMid slice"); img.setAttribute("x",x-10); img.setAttribute("y",y-10); img.setAttribute("clip-path",`url(#clip-${i})`); img.style.pointerEvents="none"; group.appendChild(img); // hover circle.addEventListener("mouseenter",(event)=>{ isHoveringCircle = true; circle.setAttribute("r",13); img.setAttribute("x",x-12); img.setAttribute("y",y-12); img.setAttribute("width",24); img.setAttribute("height",24); clipCircle.setAttribute("r",12); tooltip.style.opacity="1"; tooltip.innerHTML = `

${d.title}

${d.desc}

${d.extra || ""}

`; const tooltipWidth = 260; let left = event.pageX + 12; if (left + tooltipWidth > window.innerWidth) { left = event.pageX - tooltipWidth - 12; } tooltip.style.left = left + "px"; tooltip.style.top = Math.max(20, event.pageY - 40) + "px"; }); // salida circle.addEventListener("mouseleave",()=>{ isHoveringCircle=false; circle.setAttribute("r",11); img.setAttribute("x",x-10); img.setAttribute("y",y-10); img.setAttribute("width",20); img.setAttribute("height",20); clipCircle.setAttribute("r",10); tooltip.style.opacity="0"; }); // título const text = document.createElementNS("http://www.w3.org/2000/svg", "text"); text.setAttribute("x", x); let textAbove = y < height / 2; let textY = textAbove ? y - 30 : y + 30; const titleWidth = 140; const titleHeight = 25; const titleCollision = allPositions.some(c => { const horizontalCollision = Math.abs(c.x - x) < titleWidth / 2; const verticalCollision = Math.abs(c.y - textY) < titleHeight; return horizontalCollision && verticalCollision; }); if (titleCollision) { textAbove = !textAbove; textY = textAbove ? y - 30 : y + 30; } text.setAttribute("y", textY); text.setAttribute( "dominant-baseline", textAbove ? "auto" : "hanging" ); if (x < width * 0.2) { text.setAttribute("text-anchor", "middle"); } else if (x > width * 0.8) { text.setAttribute("text-anchor", "middle"); } else { text.setAttribute("text-anchor", "middle"); } text.setAttribute("font-size", "12"); text.setAttribute("font-weight", "600"); text.setAttribute("font-family", "Inter, sans-serif"); text.setAttribute("fill", palette.text); text.setAttribute("letter-spacing", "0.2px"); text.textContent = d.title.length > 25 ? d.title.slice(0, 25) + "..." : d.title; text.style.pointerEvents = "none"; group.appendChild(text); }); container.style.paddingBottom = "60px"; return container; }35:T144e,sucredata = [ { date: "2023", period: 0, city: "sucre", title: "Primer Taller DDCC", desc: "Inicio del proceso de formación sobre Derecho a la Ciudad y Ciudades con Derechos.", extra: "El 9 de mayo de 2023 se desarrolló el primer taller que reunió a organizaciones sociales, colectivos culturales, profesionales y activistas urbanos interesados en fortalecer la ciudadanía organizada en Sucre.", type: "proceso" }, { date: "2023", period: 1, city: "sucre", title: "Nacimiento del Colectivo", desc: "Conformación oficial del Colectivo Urbano Sucre.", extra: "El 11 de junio de 2023 diversas organizaciones decidieron articular esfuerzos para impulsar acciones relacionadas con participación ciudadana, incidencia urbana y construcción de ciudades con derechos.", type: "proceso" }, { date: "2023", period: 1, city: "sucre", title: "Primer trabajo con caseras", desc: "Primer acercamiento con las comerciantes del Mercado San Antonio.", extra: "Se impulsó una primera experiencia de trabajo junto a las caseras para conocer sus necesidades, fortalecer la confianza y construir colectivamente una propuesta de intervención. Este proceso constituyó la primera versión del proyecto que posteriormente dio origen a la iniciativa 'Voy al mercado, no me tardo'.", type: "proceso" }, { date: "2023", period: 2, city: "sucre", title: "Voy al Mercado", desc: "Inicio de la iniciativa con las caseras del Mercado San Antonio.", extra: "La propuesta promovió espacios de autocuidado, fortalecimiento organizativo, formación en derechos y acompañamiento a mujeres comerciantes del Distrito 5 de Sucre.", type: "iniciativa" }, { date: "2023", period: 2, city: "sucre", title: "Convenio CACH-UNITAS", desc: "Alianza estratégica para fortalecer la incidencia urbana.", extra: "La firma del convenio entre el Colegio de Arquitectos de Chuquisaca y UNITAS permitió incorporar capacidades técnicas y profesionales a los procesos impulsados por el colectivo.", type: "proceso" }, { date: "2024", period: 0, city: "sucre", title: "Sinchi Imillas", desc: "Talleres de sicuris y fortalecimiento comunitario.", extra: "Se desarrollaron procesos de formación con mujeres del mercado mediante música, autocuidado, contención emocional y reflexión sobre maternidades y liderazgo.", type: "iniciativa" }, { date: "2024", period: 1, city: "sucre", title: "Agenda Urbana Sucre", desc: "Inicio del proceso de articulación para una agenda ciudadana.", extra: "El colectivo comenzó a coordinar con organizaciones sociales, medios de comunicación y actores institucionales para promover espacios de debate urbano.", type: "proceso" }, { date: "2024", period: 2, city: "sucre", title: "Foro Urbano", desc: "Primer gran encuentro de diálogo urbano en Sucre.", extra: "Organizaciones sociales, colectivos, profesionales y ciudadanía participaron en un espacio de reflexión sobre desarrollo urbano, inclusión social, medio ambiente y participación ciudadana.", type: "proceso" }, { date: "2024", period: 2, city: "sucre", title: "Trabajo en Azari", desc: "Primeras acciones territoriales en barrios periurbanos.", extra: "Se realizaron recorridos y reuniones en el Distrito 5 para identificar necesidades urbanas y oportunidades de intervención desde enfoques participativos.", type: "proceso" }, { date: "2025", period: 0, city: "sucre", title: "Formación Urbanística", desc: "Capacitación en urbanismo y construcción social del hábitat.", extra: "Integrantes del colectivo participaron en procesos formativos impulsados por UNITAS para fortalecer capacidades en planificación participativa y derecho a la ciudad.", type: "proceso" }, { date: "2025", period: 1, city: "sucre", title: "Mi Barrio es Mi Mundo", desc: "Inicio del proyecto piloto en Buena Vista.", extra: "Se desarrolló investigación participativa en la zona de Azari para analizar espacios públicos, áreas verdes, movilidad y calidad de vida barrial.", type: "iniciativa" }, { date: "2025", period: 2, city: "sucre", title: "Diagnósticos Urbanos", desc: "Investigación sobre violencia, residuos y trabajo urbano.", extra: "El colectivo elaboró diagnósticos relacionados con violencia de género, gestión de residuos orgánicos y condiciones de trabajadores urbanos para alimentar la Agenda Urbana de Sucre.", type: "proceso" }, { date: "2025", period: 2, city: "sucre", title: "Warmis Llankadoras", desc: "Consolidación de la plataforma de caseras organizadas.", extra: "Las participantes comenzaron a liderar actividades propias, fortaleciendo su identidad colectiva y articulándose con redes de reciclaje y economía transformadora.", type: "iniciativa" }, { date: "2026", period: 1, city: "sucre", title: "Proyecto Piloto Entregado", desc: "Presentación de propuestas integrales para Buena Vista.", extra: "Se concluyó el documento técnico del proyecto Mi Barrio es Mi Mundo, incorporando diagnósticos, mapas y propuestas de mejoramiento urbano para futuras réplicas en otros barrios.", type: "proceso" } ]36:T4a13,chartPotosí = () => { if (!document.getElementById("inter-font")) { const link = document.createElement("link"); link.id = "inter-font"; link.rel = "stylesheet"; link.href = "https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap"; document.head.appendChild(link); } const cityFlag = flagpts; const data = potosidata; const width = 1600; const height = 550; const palette = { primary: "#B55A2A", // terracota secondary: "#D98C2B", // ocre accent: "#8B3A2E", // vino dark: "#5A2A1B", // café oscuro line: "rgba(90,42,27,0.35)", grid: "rgba(90,42,27,0.08)", text: "#2F241F", muted: "#7A6A60", soft: "#B8AAA0" }; const svg = html``; svg.style.userSelect = "none"; svg.style.webkitUserSelect = "none"; svg.style.background = "linear-gradient(to bottom, rgba(0,0,0,0.02), rgba(0,0,0,0.08))"; svg.style.filter = "drop-shadow(0px 4px 12px rgba(0,0,0,0.06))"; const defs = document.createElementNS("http://www.w3.org/2000/svg", "defs"); const vignetteGradient = document.createElementNS("http://www.w3.org/2000/svg", "radialGradient"); vignetteGradient.setAttribute("cx", "45%"); vignetteGradient.setAttribute("cy", "50%"); vignetteGradient.setAttribute("r", "70%"); vignetteGradient.setAttribute("id", "vignetteGradient"); vignetteGradient.innerHTML = ` `; defs.appendChild(vignetteGradient); const filter = document.createElementNS("http://www.w3.org/2000/svg", "filter"); filter.setAttribute("id", "blur"); const feGaussianBlur = document.createElementNS("http://www.w3.org/2000/svg", "feGaussianBlur"); feGaussianBlur.setAttribute("stdDeviation", "0"); filter.appendChild(feGaussianBlur); defs.appendChild(filter); svg.appendChild(defs); const url = ptsciudad; const bg = document.createElementNS("http://www.w3.org/2000/svg", "image"); bg.setAttribute("href", url); const bgWidth = width * 1.45; const bgHeight = bgWidth * (1600/ 2400); const baseX = (width - bgWidth) / 2 + 336; const baseY = (height - bgHeight) / 2 + 330; bg.setAttribute("x", baseX); bg.setAttribute("y", baseY); const zoom = 0.71; bg.setAttribute("width", bgWidth * zoom); bg.setAttribute("height", bgHeight * zoom); bg.setAttribute("x", (width - bgWidth * zoom) / 2); bg.setAttribute("y", (height - bgHeight * zoom) / 2); bg.setAttribute("opacity", 0.55); bg.style.filter = ` grayscale(0.10) sepia(0.1) saturate(0.85) contrast(0.90) brightness(0.90) `; bg.setAttribute("preserveAspectRatio", "xMidYMid meet"); svg.insertBefore(bg, svg.firstChild); const overlay = document.createElementNS("http://www.w3.org/2000/svg", "rect"); overlay.setAttribute("x", 0); overlay.setAttribute("y", 0); overlay.setAttribute("width", width); overlay.setAttribute("height", height); overlay.setAttribute("fill", "#5A2A1B"); overlay.setAttribute("opacity", 0.18); svg.insertBefore(overlay, bg.nextSibling); const vignette = document.createElementNS("http://www.w3.org/2000/svg", "rect"); vignette.setAttribute("x", 0); vignette.setAttribute("y", 0); vignette.setAttribute("width", width); vignette.setAttribute("height", height); // degradado tipo cine (oscuro en bordes) vignette.setAttribute("fill", "url(#vignetteGradient)"); vignette.setAttribute("opacity", "0.28"); svg.appendChild(vignette); const group = document.createElementNS("http://www.w3.org/2000/svg", "g"); svg.appendChild(group); group.setAttribute("transform-origin", "center center"); svg.style.willChange = "transform"; svg.style.userSelect = "none"; svg.style.pointerEvents = "auto"; const container = document.createElement("div"); container.style.width = "100%"; container.style.maxWidth = "none"; container.style.margin = "0 auto"; container.style.overflowX = "auto"; container.style.overflowY = "hidden"; container.style.position = "relative"; container.style.userSelect = "none"; container.style.webkitUserSelect = "none"; container.style.cursor = "grab"; container.style.userSelect = "none"; container.style.webkitUserSelect = "none"; container.style.MozUserSelect = "none"; container.style.msUserSelect = "none"; container.appendChild(svg); const containerWidth = width; const containerHeight = height; let isHoveringCircle = false; let targetX = 0; let currentX = 0; let hoverOffsetX = 0; let hoverOffsetY = 0; let targetY = 0; let currentY = 0; let isDragging = false; let startX, startY; let resetTimer; container.style.cursor = "grab"; container.addEventListener("mousedown", (e) => { isDragging = true; startX = e.clientX - targetX; startY = e.clientY - targetY; container.style.cursor = "grabbing"; }); container.addEventListener("mouseup", () => { isDragging = false; container.style.cursor = "grab"; }); container.addEventListener("mouseleave", () => { group.querySelectorAll("circle").forEach(c => { c.style.opacity = "1"; }); group.querySelectorAll("circle").forEach(c => { c.style.opacity = "1"; }); tracker.setAttribute("opacity", "0"); group.querySelectorAll("circle").forEach(c => { c.style.opacity = "1"; }); container.addEventListener("mouseenter", () => { clearTimeout(resetTimer); }); isDragging = false; hoverOffsetX = 0; hoverOffsetY = 0; clearTimeout(resetTimer); resetTimer = setTimeout(() => { targetX = 0; targetY = 0; }, 1200); }); container.addEventListener("mouseenter", () => { group.style.transition = "opacity 0.25s ease"; clearTimeout(resetTimer); }); container.addEventListener("mousemove", (e) => { if (!isDragging || isHoveringCircle) return; const newX = e.clientX - startX; const minX = -(width - container.clientWidth) - 50; const maxX = 50; targetX = Math.max(minX, Math.min(maxX, newX)); targetY = 0; }); container.addEventListener("mousemove", (e) => { if (isDragging || isHoveringCircle) return; const rect = container.getBoundingClientRect(); const mouseX = e.clientX - rect.left; tracker.setAttribute("x1", mouseX); tracker.setAttribute("x2", mouseX); tracker.setAttribute("opacity", "0.5"); const mouseY = e.clientY - rect.top; const percentX = (mouseX / rect.width) - 0.5; const percentY = (mouseY / rect.height) - 0.5; hoverOffsetX = percentX * -35; hoverOffsetY = percentY * -18; // bg.setAttribute("x", -100 + percentX * 18); // bg.setAttribute("y", -30 + percentY * 10); }); let intro = 0; function animate() { const rect = { width: containerWidth, height: containerHeight }; targetX = Math.min(0, targetX); targetY = 0; const textOpacity = 1; group.querySelectorAll("text").forEach(t => { t.style.opacity = textOpacity; }); const smooth = 0.08; currentX += (targetX - currentX) * smooth; currentY += (targetY - currentY) * smooth; intro += 0.02; const introEase = Math.min(intro, 1); group.style.opacity = introEase; const finalScale = 1; const cinematicX = hoverOffsetX * 5; const cinematicY = hoverOffsetY; // cuánto puede desplazarse el gráfico const maxPan = width * 0.55; // progreso entre 0 y 1 const scrollProgress = Math.min( 1, Math.abs(currentX) / maxPan ); // recorrido del fondo al hacer scroll const bgTravel = 350; // pequeño parallax según el mouse const parallaxX = hoverOffsetX * 0.8; const parallaxY = hoverOffsetY * 0.8; // posición base de la imagen //const baseX = (width - bgWidth) / 2; //const baseY = (height - bgHeight) / 2; // mover imagen combinando scroll + parallax bg.setAttribute( "x", baseX - (scrollProgress * bgTravel) + parallaxX ); bg.setAttribute( "y", baseY + parallaxY ); group.setAttribute( "transform", ` translate( ${width/2 + currentX + cinematicX}, ${height/2 + currentY + cinematicY} ) scale(${finalScale}) translate(${-width/2}, ${-height/2}) ` ); // group.style.transformOrigin = `${width/2}px ${height/2}px`; requestAnimationFrame(animate); } targetX = 0; targetY = 0; // 👇 IMPORTANTE animate(); // TOOLTIP const tooltip = document.createElement("div"); tooltip.style.position = "fixed"; tooltip.style.background = "rgba(255,255,255,0.95)"; tooltip.style.backdropFilter = "blur(8px)"; tooltip.style.color = "#1f2937"; tooltip.style.padding = "12px 16px"; tooltip.style.borderRadius = "12px"; tooltip.style.fontSize = "13px"; tooltip.style.boxShadow = "0 10px 25px rgba(0,0,0,0.1)"; tooltip.style.border = "1px solid rgba(0,0,0,0.05)"; tooltip.style.maxWidth = "260px"; tooltip.style.whiteSpace = "normal"; tooltip.style.lineHeight = "1.4";; tooltip.style.padding = "8px 12px"; tooltip.style.borderRadius = "8px"; tooltip.style.fontSize = "12px"; tooltip.style.boxShadow = "0 10px 30px rgba(0,0,0,0.08)"; tooltip.style.pointerEvents = "none"; tooltip.style.opacity = "0"; tooltip.style.transition = "opacity 0.2s ease"; container.appendChild(tooltip); const leftMargin = 100; const rightMargin = 100; const usableWidth = width - leftMargin - rightMargin; const xStep = usableWidth / (data.length - 1); const years = [...new Set(data.map(d => d.date))]; const periods = 3; // 3 cuatrimestres por año const sectionWidth = (width - 100) / years.length; const yearWidth = usableWidth / years.length; years.forEach((year, i) => { const xStart = leftMargin + i * yearWidth; const xCenter = xStart + yearWidth / 2; // 🟧 CAJA DEL AÑO const yearBox = document.createElementNS("http://www.w3.org/2000/svg", "rect"); yearBox.setAttribute("x", xStart); yearBox.setAttribute("y", 0); yearBox.setAttribute("width", yearWidth); yearBox.setAttribute("height", height); yearBox.setAttribute("fill", "none"); yearBox.setAttribute("stroke", palette.grid); yearBox.setAttribute("stroke-width", "1"); group.appendChild(yearBox); // 🟧 CUATRIMESTRES (FONDO) for (let q = 0; q < periods; q++) { const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect"); rect.setAttribute("x", xStart + q * (yearWidth / periods)); rect.setAttribute("y", 0); rect.setAttribute("width", yearWidth / periods); rect.setAttribute("height", height); rect.setAttribute("fill", q % 2 === 0 ? "rgba(255,255,255,0.03)" : "rgba(0,0,0,0.03)" ); group.appendChild(rect); } // 🟧 LÍNEAS DE DIVISIÓN for (let q = 1; q < periods; q++) { const qx = xStart + q * (yearWidth / periods); const qLine = document.createElementNS("http://www.w3.org/2000/svg", "line"); qLine.setAttribute("x1", qx); qLine.setAttribute("x2", qx); qLine.setAttribute("y1", 0); qLine.setAttribute("y2", height); qLine.setAttribute("stroke", "rgba(90,42,27,0.15)"); qLine.setAttribute("stroke-width", "1"); qLine.setAttribute("stroke-dasharray", "3 3"); qLine.setAttribute("opacity", "0.7"); group.appendChild(qLine); } // 🟧 ETIQUETAS DE LOS CUATRIMESTRES const labels = [ "Ene–Abr", "May–Ago", "Sep–Dic" ]; for (let q = 0; q < periods; q++) { const label = document.createElementNS( "http://www.w3.org/2000/svg", "text" ); label.setAttribute( "x", xStart + (q + 0.5) * (yearWidth / periods) ); label.setAttribute("y", 52); label.setAttribute("text-anchor", "middle"); label.setAttribute("font-size", "12"); label.setAttribute("font-weight", "600"); label.setAttribute("font-family", "Inter, sans-serif"); label.setAttribute("fill", palette.dark); label.setAttribute("opacity", "0.55"); label.textContent = labels[q]; group.appendChild(label); } // 🟧 TEXTO DEL AÑO const yearLabel = document.createElementNS("http://www.w3.org/2000/svg", "text"); yearLabel.setAttribute("x", xCenter); yearLabel.setAttribute("y", 22); yearLabel.setAttribute("text-anchor", "middle"); yearLabel.setAttribute("font-size", "26"); yearLabel.setAttribute("font-weight", "600"); yearLabel.setAttribute("fill", palette.dark); yearLabel.setAttribute("opacity", "0.15"); yearLabel.textContent = year; yearLabel.style.pointerEvents = "none"; group.appendChild(yearLabel); }); // línea central const line = document.createElementNS("http://www.w3.org/2000/svg", "line"); line.setAttribute("x1", leftMargin); line.setAttribute("x2", width - rightMargin); line.setAttribute("y1", height / 2); line.setAttribute("y2", height / 2); line.setAttribute("stroke", palette.line); line.setAttribute("stroke-width", "1.5"); line.setAttribute("stroke-opacity", "0.35"); line.setAttribute("stroke-dasharray", "4 4"); group.appendChild(line); const tracker = document.createElementNS( "http://www.w3.org/2000/svg", "line" ); tracker.style.pointerEvents = "none"; tracker.setAttribute("y1", 0); tracker.setAttribute("y2", height); tracker.setAttribute("stroke", "#B55A2A"); tracker.setAttribute("stroke-width", "1"); tracker.setAttribute("stroke-dasharray", "4 4"); tracker.setAttribute("opacity", "0"); group.appendChild(tracker); const positionCounter = {}; const placedLabels = []; const placedCircles = []; const allPositions = []; data.forEach((d, i) => { // puedes ajustar esto después con precisión real const periodIndex = d.period ?? 1; const yearIndex = years.indexOf(d.date); const key = `${d.date}-${d.period}`; if (!positionCounter[key]) { positionCounter[key] = []; } positionCounter[key].push(d); const duplicateIndex = positionCounter[key].length - 1; const separation = 40; const duplicateOffset = (duplicateIndex - 1) * separation; const x = leftMargin + yearIndex * yearWidth + periodIndex * (yearWidth / periods) + (yearWidth / periods) / 2 + duplicateOffset; const offset = (i % 2 === 0) ? 0 : 20; let y = d.type === "proceso" ? height / 2 - 100 : height / 2 + 100; allPositions.push({ x, y, type: d.type }); const labelWidth = 120; const levelHeight = 35; let level = 0; while (true) { const candidateY = d.type === "proceso" ? y - level * levelHeight : y + level * levelHeight; const collision = placedLabels.some(p => { return ( p.side === d.type && Math.abs(p.x - x) < labelWidth && Math.abs(p.y - candidateY) < levelHeight ); }); if (!collision) { y = candidateY; placedLabels.push({ x, y, side: d.type }); break; } level++; } // línea vertical (conector) const connector = document.createElementNS("http://www.w3.org/2000/svg", "line"); connector.setAttribute("x1", x); connector.setAttribute("x2", x); connector.setAttribute("y1", height/2); connector.setAttribute("y2", y); connector.setAttribute("stroke", palette.dark); connector.setAttribute("stroke-opacity", "0.18"); connector.setAttribute("stroke-width", "1.2"); group.appendChild(connector); // círculo blanco const circle = document.createElementNS("http://www.w3.org/2000/svg","circle"); circle.setAttribute("cx", x); circle.setAttribute("cy", y); circle.setAttribute("r", 11); circle.setAttribute("fill", "white"); circle.setAttribute("stroke", "#ffffff"); circle.setAttribute("stroke-width", "2.5"); circle.style.filter = ` drop-shadow(0px 0px 6px rgba(194,65,12,0.35)) drop-shadow(0px 4px 6px rgba(0,0,0,0.18)) `; group.appendChild(circle); // CLIP const clip = document.createElementNS( "http://www.w3.org/2000/svg", "clipPath" ); clip.setAttribute("id", `clip-${i}`); const clipCircle = document.createElementNS( "http://www.w3.org/2000/svg", "circle" ); clipCircle.setAttribute("cx", x); clipCircle.setAttribute("cy", y); clipCircle.setAttribute("r", 10); clip.appendChild(clipCircle); defs.appendChild(clip); // BANDERA const img = document.createElementNS( "http://www.w3.org/2000/svg", "image" ); img.setAttribute("href", cityFlag); img.setAttribute("width",20); img.setAttribute("height",20); img.setAttribute("preserveAspectRatio", "xMidYMid slice"); img.setAttribute("x",x-10); img.setAttribute("y",y-10); img.setAttribute("clip-path",`url(#clip-${i})`); img.style.pointerEvents="none"; group.appendChild(img); // hover circle.addEventListener("mouseenter",(event)=>{ isHoveringCircle = true; circle.setAttribute("r",13); img.setAttribute("x",x-12); img.setAttribute("y",y-12); img.setAttribute("width",24); img.setAttribute("height",24); clipCircle.setAttribute("r",12); tooltip.style.opacity="1"; tooltip.innerHTML = `

${d.title}

${d.desc}

${d.extra || ""}

`; const tooltipWidth = 260; let left = event.pageX + 12; if (left + tooltipWidth > window.innerWidth) { left = event.pageX - tooltipWidth - 12; } tooltip.style.left = left + "px"; tooltip.style.top = Math.max(20, event.pageY - 40) + "px"; }); // salida circle.addEventListener("mouseleave",()=>{ isHoveringCircle=false; circle.setAttribute("r",11); img.setAttribute("x",x-10); img.setAttribute("y",y-10); img.setAttribute("width",20); img.setAttribute("height",20); clipCircle.setAttribute("r",10); tooltip.style.opacity="0"; }); // título const text = document.createElementNS("http://www.w3.org/2000/svg", "text"); text.setAttribute("x", x); let textAbove = y < height / 2; let textY = textAbove ? y - 30 : y + 30; const titleWidth = 140; const titleHeight = 25; const titleCollision = allPositions.some(c => { const horizontalCollision = Math.abs(c.x - x) < titleWidth / 2; const verticalCollision = Math.abs(c.y - textY) < titleHeight; return horizontalCollision && verticalCollision; }); if (titleCollision) { textAbove = !textAbove; textY = textAbove ? y - 30 : y + 30; } text.setAttribute("y", textY); text.setAttribute( "dominant-baseline", textAbove ? "auto" : "hanging" ); if (x < width * 0.2) { text.setAttribute("text-anchor", "middle"); } else if (x > width * 0.8) { text.setAttribute("text-anchor", "middle"); } else { text.setAttribute("text-anchor", "middle"); } text.setAttribute("font-size", "12"); text.setAttribute("font-weight", "600"); text.setAttribute("font-family", "Inter, sans-serif"); text.setAttribute("fill", palette.text); text.setAttribute("letter-spacing", "0.2px"); text.textContent = d.title.length > 25 ? d.title.slice(0, 25) + "..." : d.title; text.style.pointerEvents = "none"; group.appendChild(text); }); container.style.paddingBottom = "60px"; return container; }37:T132f,potosidata = [ { date: "2023", period: 0, city: "potosi", title: "Primer Taller DDCC", desc: "Inicio del proceso de Derecho a la Ciudad en Potosí.", extra: "Los días 13 y 14 de abril de 2023 el Programa Urbano de UNITAS reunió a organizaciones de la ciudad para trabajar Derecho a la Ciudad, Ciudades con Derechos y Objetivos de Desarrollo Sostenible.", type: "proceso" }, { date: "2023", period: 0, city: "potosi", title: "Conformación del Colectivo", desc: "Nacimiento oficial del Colectivo Urbano Potosí.", extra: "El 14 de abril de 2023 se formalizó la creación del colectivo con participación de organizaciones sociales, ambientales, sindicatos y voluntariados de la ciudad.", type: "proceso" }, { date: "2023", period: 1, city: "potosi", title: "Replicas de Formación", desc: "Socialización del Derecho a la Ciudad.", extra: "Se realizaron talleres con MUSOL, SITRAHOP, Fundación Mujer, Pastoral Ecológica y otras organizaciones para difundir los principios de ciudades con derechos.", type: "proceso" }, { date: "2023", period: 2, city: "potosi", title: "Protección Ambiental", desc: "Inicio de la línea de trabajo ambiental.", extra: "El colectivo comenzó a trabajar sobre los impactos ambientales del Cerro Rico, Kari Kari y la pérdida de áreas verdes urbanas.", type: "iniciativa" }, { date: "2023", period: 2, city: "potosi", title: "Inicio en Cerro Rico", desc: "Trabajo con poblaciones afectadas por la actividad minera.", extra: "Se desarrollaron acciones de sensibilización con habitantes de zonas cercanas al Cerro Rico para analizar impactos ambientales y vulneraciones de derechos.", type: "proceso" }, { date: "2024", period: 0, city: "potosi", title: "Bosque Cantumarca", desc: "Experiencias piloto en bosques urbanos.", extra: "Las actividades realizadas en Cantumarca permitieron consolidar la estrategia de protección de áreas verdes y sensibilización ciudadana.", type: "iniciativa" }, { date: "2024", period: 0, city: "potosi", title: "Trabajo con Liceo Copacabana", desc: "Alianza educativa para la defensa ambiental.", extra: "Las experiencias con el Liceo Copacabana permitieron consolidar la estrategia de formación de brigadas ambientales estudiantiles.", type: "proceso" }, { date: "2024", period: 1, city: "potosi", title: "Conformación de brigadas Ambientales", desc: "Formación de estudiantes defensores de bosques urbanos.", extra: "Se desarrollaron talleres para conformar brigadas ambientales en los colegios Copacabana, Padilla, Don Bosco, Primero de Abril y 6 de Junio.", type: "iniciativa" }, { date: "2024", period: 1, city: "potosi", title: "Campañas de Limpieza", desc: "Acciones comunitarias en áreas verdes.", extra: "Se realizaron jornadas de limpieza y recuperación en Tayton, Pari Orcko y otras zonas de importancia ambiental para la ciudad.", type: "proceso" }, { date: "2024", period: 2, city: "potosi", title: "Adopción de Árboles", desc: "Compromiso ambiental estudiantil.", extra: "Los brigadistas asumieron el cuidado permanente de árboles cercanos a sus unidades educativas como parte de una estrategia de concientización.", type: "iniciativa" }, { date: "2024", period: 2, city: "potosi", title: "Ferias Ambientales", desc: "Difusión de la importancia de los bosques urbanos.", extra: "El colectivo participó en espacios públicos y educativos visibilizando amenazas como tala, avasallamientos y construcciones ilegales.", type: "proceso" }, { date: "2025", period: 0, city: "potosi", title: "Recuperación de Espacios Verdes", desc: "Corresponsabilidad de la población.", extra: "Se impulsaron campañas comunitarias para la recuperación y mantenimiento de espacios verdes con apoyo de vecinos y estudiantes.", type: "iniciativa" }, { date: "2025", period: 1, city: "potosi", title: "Gestiones con Autoridades", desc: "Incidencia para la protección ambiental.", extra: "Se realizaron reuniones y solicitudes de información a instituciones públicas para fortalecer la gestión de áreas verdes y bosques urbanos.", type: "proceso" }, { date: "2025", period: 2, city: "potosi", title: "Ley de Arbolado Urbano", desc: "Propuesta para fortalecer la protección ambiental.", extra: "El colectivo promovió reuniones y acciones de incidencia orientadas a la elaboración de una normativa municipal para el arbolado urbano y la reforestación.", type: "iniciativa" }, { date: "2025", period: 2, city: "potosi", title: "impulsar áreas Protegidas Urbanas", desc: "Impulso a la protección de bosques urbanos.", extra: "Se planteó la necesidad de declarar zonas protegidas a Tayton, Pari Orcko y Kari Kari para evitar la tala, el avasallamiento y el deterioro ambiental.", type: "proceso" } ]38:T4a1d,chartCochabamba = () => { if (!document.getElementById("inter-font")) { const link = document.createElement("link"); link.id = "inter-font"; link.rel = "stylesheet"; link.href = "https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap"; document.head.appendChild(link); } const cityFlag = flaglcbba; const data = cochabambadata; const width = 1600; const height = 550; const palette = { primary: "#B55A2A", // terracota secondary: "#D98C2B", // ocre accent: "#8B3A2E", // vino dark: "#5A2A1B", // café oscuro line: "rgba(90,42,27,0.35)", grid: "rgba(90,42,27,0.08)", text: "#2F241F", muted: "#7A6A60", soft: "#B8AAA0" }; const svg = html``; svg.style.userSelect = "none"; svg.style.webkitUserSelect = "none"; svg.style.background = "linear-gradient(to bottom, rgba(0,0,0,0.02), rgba(0,0,0,0.08))"; svg.style.filter = "drop-shadow(0px 4px 12px rgba(0,0,0,0.06))"; const defs = document.createElementNS("http://www.w3.org/2000/svg", "defs"); const vignetteGradient = document.createElementNS("http://www.w3.org/2000/svg", "radialGradient"); vignetteGradient.setAttribute("cx", "45%"); vignetteGradient.setAttribute("cy", "50%"); vignetteGradient.setAttribute("r", "70%"); vignetteGradient.setAttribute("id", "vignetteGradient"); vignetteGradient.innerHTML = ` `; defs.appendChild(vignetteGradient); const filter = document.createElementNS("http://www.w3.org/2000/svg", "filter"); filter.setAttribute("id", "blur"); const feGaussianBlur = document.createElementNS("http://www.w3.org/2000/svg", "feGaussianBlur"); feGaussianBlur.setAttribute("stdDeviation", "0"); filter.appendChild(feGaussianBlur); defs.appendChild(filter); svg.appendChild(defs); const url = cbbaciudad; const bg = document.createElementNS("http://www.w3.org/2000/svg", "image"); bg.setAttribute("href", url); const bgWidth = width * 1.45; const bgHeight = bgWidth * (1600/ 2400); const baseX = (width - bgWidth) / 2 + 336; const baseY = (height - bgHeight) / 2 + 330; bg.setAttribute("x", baseX); bg.setAttribute("y", baseY); const zoom = 0.71; bg.setAttribute("width", bgWidth * zoom); bg.setAttribute("height", bgHeight * zoom); bg.setAttribute("x", (width - bgWidth * zoom) / 2); bg.setAttribute("y", (height - bgHeight * zoom) / 2); bg.setAttribute("opacity", 0.55); bg.style.filter = ` grayscale(0.10) sepia(0.1) saturate(0.85) contrast(0.90) brightness(0.90) `; bg.setAttribute("preserveAspectRatio", "xMidYMid meet"); svg.insertBefore(bg, svg.firstChild); const overlay = document.createElementNS("http://www.w3.org/2000/svg", "rect"); overlay.setAttribute("x", 0); overlay.setAttribute("y", 0); overlay.setAttribute("width", width); overlay.setAttribute("height", height); overlay.setAttribute("fill", "#5A2A1B"); overlay.setAttribute("opacity", 0.18); svg.insertBefore(overlay, bg.nextSibling); const vignette = document.createElementNS("http://www.w3.org/2000/svg", "rect"); vignette.setAttribute("x", 0); vignette.setAttribute("y", 0); vignette.setAttribute("width", width); vignette.setAttribute("height", height); // degradado tipo cine (oscuro en bordes) vignette.setAttribute("fill", "url(#vignetteGradient)"); vignette.setAttribute("opacity", "0.28"); svg.appendChild(vignette); const group = document.createElementNS("http://www.w3.org/2000/svg", "g"); svg.appendChild(group); group.setAttribute("transform-origin", "center center"); svg.style.willChange = "transform"; svg.style.userSelect = "none"; svg.style.pointerEvents = "auto"; const container = document.createElement("div"); container.style.width = "100%"; container.style.maxWidth = "none"; container.style.margin = "0 auto"; container.style.overflowX = "auto"; container.style.overflowY = "hidden"; container.style.position = "relative"; container.style.userSelect = "none"; container.style.webkitUserSelect = "none"; container.style.cursor = "grab"; container.style.userSelect = "none"; container.style.webkitUserSelect = "none"; container.style.MozUserSelect = "none"; container.style.msUserSelect = "none"; container.appendChild(svg); const containerWidth = width; const containerHeight = height; let isHoveringCircle = false; let targetX = 0; let currentX = 0; let hoverOffsetX = 0; let hoverOffsetY = 0; let targetY = 0; let currentY = 0; let isDragging = false; let startX, startY; let resetTimer; container.style.cursor = "grab"; container.addEventListener("mousedown", (e) => { isDragging = true; startX = e.clientX - targetX; startY = e.clientY - targetY; container.style.cursor = "grabbing"; }); container.addEventListener("mouseup", () => { isDragging = false; container.style.cursor = "grab"; }); container.addEventListener("mouseleave", () => { group.querySelectorAll("circle").forEach(c => { c.style.opacity = "1"; }); group.querySelectorAll("circle").forEach(c => { c.style.opacity = "1"; }); tracker.setAttribute("opacity", "0"); group.querySelectorAll("circle").forEach(c => { c.style.opacity = "1"; }); container.addEventListener("mouseenter", () => { clearTimeout(resetTimer); }); isDragging = false; hoverOffsetX = 0; hoverOffsetY = 0; clearTimeout(resetTimer); resetTimer = setTimeout(() => { targetX = 0; targetY = 0; }, 1200); }); container.addEventListener("mouseenter", () => { group.style.transition = "opacity 0.25s ease"; clearTimeout(resetTimer); }); container.addEventListener("mousemove", (e) => { if (!isDragging || isHoveringCircle) return; const newX = e.clientX - startX; const minX = -(width - container.clientWidth) - 50; const maxX = 50; targetX = Math.max(minX, Math.min(maxX, newX)); targetY = 0; }); container.addEventListener("mousemove", (e) => { if (isDragging || isHoveringCircle) return; const rect = container.getBoundingClientRect(); const mouseX = e.clientX - rect.left; tracker.setAttribute("x1", mouseX); tracker.setAttribute("x2", mouseX); tracker.setAttribute("opacity", "0.5"); const mouseY = e.clientY - rect.top; const percentX = (mouseX / rect.width) - 0.5; const percentY = (mouseY / rect.height) - 0.5; hoverOffsetX = percentX * -35; hoverOffsetY = percentY * -18; // bg.setAttribute("x", -100 + percentX * 18); // bg.setAttribute("y", -30 + percentY * 10); }); let intro = 0; function animate() { const rect = { width: containerWidth, height: containerHeight }; targetX = Math.min(0, targetX); targetY = 0; const textOpacity = 1; group.querySelectorAll("text").forEach(t => { t.style.opacity = textOpacity; }); const smooth = 0.08; currentX += (targetX - currentX) * smooth; currentY += (targetY - currentY) * smooth; intro += 0.02; const introEase = Math.min(intro, 1); group.style.opacity = introEase; const finalScale = 1; const cinematicX = hoverOffsetX * 5; const cinematicY = hoverOffsetY; // cuánto puede desplazarse el gráfico const maxPan = width * 0.55; // progreso entre 0 y 1 const scrollProgress = Math.min( 1, Math.abs(currentX) / maxPan ); // recorrido del fondo al hacer scroll const bgTravel = 350; // pequeño parallax según el mouse const parallaxX = hoverOffsetX * 0.8; const parallaxY = hoverOffsetY * 0.8; // posición base de la imagen //const baseX = (width - bgWidth) / 2; //const baseY = (height - bgHeight) / 2; // mover imagen combinando scroll + parallax bg.setAttribute( "x", baseX - (scrollProgress * bgTravel) + parallaxX ); bg.setAttribute( "y", baseY + parallaxY ); group.setAttribute( "transform", ` translate( ${width/2 + currentX + cinematicX}, ${height/2 + currentY + cinematicY} ) scale(${finalScale}) translate(${-width/2}, ${-height/2}) ` ); // group.style.transformOrigin = `${width/2}px ${height/2}px`; requestAnimationFrame(animate); } targetX = 0; targetY = 0; // 👇 IMPORTANTE animate(); // TOOLTIP const tooltip = document.createElement("div"); tooltip.style.position = "fixed"; tooltip.style.background = "rgba(255,255,255,0.95)"; tooltip.style.backdropFilter = "blur(8px)"; tooltip.style.color = "#1f2937"; tooltip.style.padding = "12px 16px"; tooltip.style.borderRadius = "12px"; tooltip.style.fontSize = "13px"; tooltip.style.boxShadow = "0 10px 25px rgba(0,0,0,0.1)"; tooltip.style.border = "1px solid rgba(0,0,0,0.05)"; tooltip.style.maxWidth = "260px"; tooltip.style.whiteSpace = "normal"; tooltip.style.lineHeight = "1.4";; tooltip.style.padding = "8px 12px"; tooltip.style.borderRadius = "8px"; tooltip.style.fontSize = "12px"; tooltip.style.boxShadow = "0 10px 30px rgba(0,0,0,0.08)"; tooltip.style.pointerEvents = "none"; tooltip.style.opacity = "0"; tooltip.style.transition = "opacity 0.2s ease"; container.appendChild(tooltip); const leftMargin = 100; const rightMargin = 100; const usableWidth = width - leftMargin - rightMargin; const xStep = usableWidth / (data.length - 1); const years = [...new Set(data.map(d => d.date))]; const periods = 3; // 3 cuatrimestres por año const sectionWidth = (width - 100) / years.length; const yearWidth = usableWidth / years.length; years.forEach((year, i) => { const xStart = leftMargin + i * yearWidth; const xCenter = xStart + yearWidth / 2; // 🟧 CAJA DEL AÑO const yearBox = document.createElementNS("http://www.w3.org/2000/svg", "rect"); yearBox.setAttribute("x", xStart); yearBox.setAttribute("y", 0); yearBox.setAttribute("width", yearWidth); yearBox.setAttribute("height", height); yearBox.setAttribute("fill", "none"); yearBox.setAttribute("stroke", palette.grid); yearBox.setAttribute("stroke-width", "1"); group.appendChild(yearBox); // 🟧 CUATRIMESTRES (FONDO) for (let q = 0; q < periods; q++) { const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect"); rect.setAttribute("x", xStart + q * (yearWidth / periods)); rect.setAttribute("y", 0); rect.setAttribute("width", yearWidth / periods); rect.setAttribute("height", height); rect.setAttribute("fill", q % 2 === 0 ? "rgba(255,255,255,0.03)" : "rgba(0,0,0,0.03)" ); group.appendChild(rect); } // 🟧 LÍNEAS DE DIVISIÓN for (let q = 1; q < periods; q++) { const qx = xStart + q * (yearWidth / periods); const qLine = document.createElementNS("http://www.w3.org/2000/svg", "line"); qLine.setAttribute("x1", qx); qLine.setAttribute("x2", qx); qLine.setAttribute("y1", 0); qLine.setAttribute("y2", height); qLine.setAttribute("stroke", "rgba(90,42,27,0.15)"); qLine.setAttribute("stroke-width", "1"); qLine.setAttribute("stroke-dasharray", "3 3"); qLine.setAttribute("opacity", "0.7"); group.appendChild(qLine); } // 🟧 ETIQUETAS DE LOS CUATRIMESTRES const labels = [ "Ene–Abr", "May–Ago", "Sep–Dic" ]; for (let q = 0; q < periods; q++) { const label = document.createElementNS( "http://www.w3.org/2000/svg", "text" ); label.setAttribute( "x", xStart + (q + 0.5) * (yearWidth / periods) ); label.setAttribute("y", 52); label.setAttribute("text-anchor", "middle"); label.setAttribute("font-size", "12"); label.setAttribute("font-weight", "600"); label.setAttribute("font-family", "Inter, sans-serif"); label.setAttribute("fill", palette.dark); label.setAttribute("opacity", "0.55"); label.textContent = labels[q]; group.appendChild(label); } // 🟧 TEXTO DEL AÑO const yearLabel = document.createElementNS("http://www.w3.org/2000/svg", "text"); yearLabel.setAttribute("x", xCenter); yearLabel.setAttribute("y", 22); yearLabel.setAttribute("text-anchor", "middle"); yearLabel.setAttribute("font-size", "26"); yearLabel.setAttribute("font-weight", "600"); yearLabel.setAttribute("fill", palette.dark); yearLabel.setAttribute("opacity", "0.15"); yearLabel.textContent = year; yearLabel.style.pointerEvents = "none"; group.appendChild(yearLabel); }); // línea central const line = document.createElementNS("http://www.w3.org/2000/svg", "line"); line.setAttribute("x1", leftMargin); line.setAttribute("x2", width - rightMargin); line.setAttribute("y1", height / 2); line.setAttribute("y2", height / 2); line.setAttribute("stroke", palette.line); line.setAttribute("stroke-width", "1.5"); line.setAttribute("stroke-opacity", "0.35"); line.setAttribute("stroke-dasharray", "4 4"); group.appendChild(line); const tracker = document.createElementNS( "http://www.w3.org/2000/svg", "line" ); tracker.style.pointerEvents = "none"; tracker.setAttribute("y1", 0); tracker.setAttribute("y2", height); tracker.setAttribute("stroke", "#B55A2A"); tracker.setAttribute("stroke-width", "1"); tracker.setAttribute("stroke-dasharray", "4 4"); tracker.setAttribute("opacity", "0"); group.appendChild(tracker); const positionCounter = {}; const placedLabels = []; const placedCircles = []; const allPositions = []; data.forEach((d, i) => { // puedes ajustar esto después con precisión real const periodIndex = d.period ?? 1; const yearIndex = years.indexOf(d.date); const key = `${d.date}-${d.period}`; if (!positionCounter[key]) { positionCounter[key] = []; } positionCounter[key].push(d); const duplicateIndex = positionCounter[key].length - 1; const separation = 40; const duplicateOffset = (duplicateIndex - 1) * separation; const x = leftMargin + yearIndex * yearWidth + periodIndex * (yearWidth / periods) + (yearWidth / periods) / 2 + duplicateOffset; const offset = (i % 2 === 0) ? 0 : 20; let y = d.type === "proceso" ? height / 2 - 100 : height / 2 + 100; allPositions.push({ x, y, type: d.type }); const labelWidth = 120; const levelHeight = 35; let level = 0; while (true) { const candidateY = d.type === "proceso" ? y - level * levelHeight : y + level * levelHeight; const collision = placedLabels.some(p => { return ( p.side === d.type && Math.abs(p.x - x) < labelWidth && Math.abs(p.y - candidateY) < levelHeight ); }); if (!collision) { y = candidateY; placedLabels.push({ x, y, side: d.type }); break; } level++; } // línea vertical (conector) const connector = document.createElementNS("http://www.w3.org/2000/svg", "line"); connector.setAttribute("x1", x); connector.setAttribute("x2", x); connector.setAttribute("y1", height/2); connector.setAttribute("y2", y); connector.setAttribute("stroke", palette.dark); connector.setAttribute("stroke-opacity", "0.18"); connector.setAttribute("stroke-width", "1.2"); group.appendChild(connector); // círculo blanco const circle = document.createElementNS("http://www.w3.org/2000/svg","circle"); circle.setAttribute("cx", x); circle.setAttribute("cy", y); circle.setAttribute("r", 11); circle.setAttribute("fill", "white"); circle.setAttribute("stroke", "#ffffff"); circle.setAttribute("stroke-width", "2.5"); circle.style.filter = ` drop-shadow(0px 0px 6px rgba(194,65,12,0.35)) drop-shadow(0px 4px 6px rgba(0,0,0,0.18)) `; group.appendChild(circle); // CLIP const clip = document.createElementNS( "http://www.w3.org/2000/svg", "clipPath" ); clip.setAttribute("id", `clip-${i}`); const clipCircle = document.createElementNS( "http://www.w3.org/2000/svg", "circle" ); clipCircle.setAttribute("cx", x); clipCircle.setAttribute("cy", y); clipCircle.setAttribute("r", 10); clip.appendChild(clipCircle); defs.appendChild(clip); // BANDERA const img = document.createElementNS( "http://www.w3.org/2000/svg", "image" ); img.setAttribute("href", cityFlag); img.setAttribute("width",20); img.setAttribute("height",20); img.setAttribute("preserveAspectRatio", "xMidYMid slice"); img.setAttribute("x",x-10); img.setAttribute("y",y-10); img.setAttribute("clip-path",`url(#clip-${i})`); img.style.pointerEvents="none"; group.appendChild(img); // hover circle.addEventListener("mouseenter",(event)=>{ isHoveringCircle = true; circle.setAttribute("r",13); img.setAttribute("x",x-12); img.setAttribute("y",y-12); img.setAttribute("width",24); img.setAttribute("height",24); clipCircle.setAttribute("r",12); tooltip.style.opacity="1"; tooltip.innerHTML = `

${d.title}

${d.desc}

${d.extra || ""}

`; const tooltipWidth = 260; let left = event.pageX + 12; if (left + tooltipWidth > window.innerWidth) { left = event.pageX - tooltipWidth - 12; } tooltip.style.left = left + "px"; tooltip.style.top = Math.max(20, event.pageY - 40) + "px"; }); // salida circle.addEventListener("mouseleave",()=>{ isHoveringCircle=false; circle.setAttribute("r",11); img.setAttribute("x",x-10); img.setAttribute("y",y-10); img.setAttribute("width",20); img.setAttribute("height",20); clipCircle.setAttribute("r",10); tooltip.style.opacity="0"; }); // título const text = document.createElementNS("http://www.w3.org/2000/svg", "text"); text.setAttribute("x", x); let textAbove = y < height / 2; let textY = textAbove ? y - 30 : y + 30; const titleWidth = 140; const titleHeight = 25; const titleCollision = allPositions.some(c => { const horizontalCollision = Math.abs(c.x - x) < titleWidth / 2; const verticalCollision = Math.abs(c.y - textY) < titleHeight; return horizontalCollision && verticalCollision; }); if (titleCollision) { textAbove = !textAbove; textY = textAbove ? y - 30 : y + 30; } text.setAttribute("y", textY); text.setAttribute( "dominant-baseline", textAbove ? "auto" : "hanging" ); if (x < width * 0.2) { text.setAttribute("text-anchor", "middle"); } else if (x > width * 0.8) { text.setAttribute("text-anchor", "middle"); } else { text.setAttribute("text-anchor", "middle"); } text.setAttribute("font-size", "12"); text.setAttribute("font-weight", "600"); text.setAttribute("font-family", "Inter, sans-serif"); text.setAttribute("fill", palette.text); text.setAttribute("letter-spacing", "0.2px"); text.textContent = d.title.length > 25 ? d.title.slice(0, 25) + "..." : d.title; text.style.pointerEvents = "none"; group.appendChild(text); }); container.style.paddingBottom = "60px"; return container; }39:T14af,cochabambadata = [ { date: "2022", period: 0, city: "cochabamba", title: "Primer Taller DDCC", desc: "Inicio del proceso de Derecho a la Ciudad.", extra: "Durante 2022 se realizó el primer taller sobre Derecho a la Ciudad y Ciudades con Derechos, sentando las bases para la futura conformación del colectivo urbano.", type: "proceso" }, { date: "2023", period: 0, city: "cochabamba", title: "Taller Ciudad con Derechos", desc: "Definición de la temática del colectivo.", extra: "El 21 de marzo de 2023 organizaciones y activistas identificaron como problemática central la pérdida de áreas verdes y la necesidad de impulsar bosques urbanos en Cochabamba.", type: "proceso" }, { date: "2023", period: 0, city: "cochabamba", title: "Conformación del Colectivo", desc: "Nacimiento oficial del colectivo.", extra: "El 22 de marzo de 2023 se conformó formalmente el Colectivo Urbano Cochabamba con participación de Ciudadanía, Team Cero Emisiones, Centro Adela Zamudio, CMCE PACHA y activistas independientes.", type: "proceso" }, { date: "2023", period: 1, city: "cochabamba", title: "Alianzas con OTBs", desc: "Vinculación con organizaciones barriales.", extra: "Se estableció una alianza estratégica con la OTB Faros de Aranjuez para defender el área verde ExMatra y fortalecer la legitimidad social de la iniciativa.", type: "iniciativa" }, { date: "2023", period: 1, city: "cochabamba", title: "Articulación Ambiental", desc: "Incorporación de nuevos aliados.", extra: "Se sumaron Team Cero Emisiones, Deporte Libre Urbano, Ritmos Fusión y Comunidad Ciclista de Cochabamba para fortalecer la incidencia ciudadana.", type: "proceso" }, { date: "2023", period: 2, city: "cochabamba", title: "Campañas ExMatra", desc: "Visibilización del bosque urbano.", extra: "Se desarrollaron actividades deportivas y campañas públicas junto a vecinos, periodistas y autoridades para promover la recuperación del área verde ExMatra.", type: "iniciativa" }, { date: "2023", period: 2, city: "cochabamba", title: "Sensibilización Escolar", desc: "Trabajo con estudiantes.", extra: "Se realizaron talleres sobre bosques urbanos con estudiantes de secundaria de la Unidad Educativa Carmen Orruel para fortalecer la conciencia ambiental.", type: "proceso" }, { date: "2023", period: 2, city: "cochabamba", title: "Difusión en Medios", desc: "Posicionamiento público.", extra: "Medios como Opinión, Radio CEPRA, BTV, TeleC21 y Abya Yala difundieron las acciones del colectivo y la problemática de las áreas verdes urbanas.", type: "iniciativa" }, { date: "2023", period: 2, city: "cochabamba", title: "Ley de Bosques Urbanos", desc: "Primer borrador normativo.", extra: "Se elaboró una propuesta inicial de Ley de Bosques Urbanos con participación de CMCE PACHA, Ciudadanía, OTB Faros de Aranjuez y Team Cero Emisiones.", type: "proceso" }, { date: "2024", period: 0, city: "cochabamba", title: "Inspección Técnica GAMC", desc: "Evaluación municipal del ExMatra.", extra: "Funcionarios municipales realizaron visitas técnicas que permitieron avanzar en los requerimientos para futuras acciones de arborización.", type: "iniciativa" }, { date: "2024", period: 1, city: "cochabamba", title: "Forestación Torrentera", desc: "Primera etapa de arborización.", extra: "Con apoyo del Banco Bisa y el Colegio Federico Froebel se inició la forestación de áreas verdes vinculadas a la OTB Faros de Aranjuez.", type: "iniciativa" }, { date: "2024", period: 2, city: "cochabamba", title: "Alianza con la UMSA", desc: "Vinculación con la academia para fortalecer la gestión ambiental.", extra: "Se estableció una alianza con la Universidad Mayor de San Andrés para desarrollar acciones conjuntas de formación, investigación e incidencia en torno a los bosques urbanos y la protección de áreas verdes.", type: "proceso" }, { date: "2024", period: 2, city: "cochabamba", title: "Investigación Ambiental", desc: "Trabajo técnico sobre bosques urbanos.", extra: "Como resultado de la alianza con la UMSS, se impulsaron procesos de investigación y análisis técnico para respaldar propuestas de conservación y gestión sostenible de los bosques urbanos.", type: "iniciativa" }, { date: "2025", period: 0, city: "cochabamba", title: "Mesas Técnicas Forestales", desc: "Coordinación con autoridades.", extra: "Se desarrollaron mesas técnicas entre organizaciones de sociedad civil y la Unidad Forestal del municipio para fortalecer la gestión ambiental.", type: "proceso" }, { date: "2025", period: 1, city: "cochabamba", title: "Agenda Urbana Verde", desc: "Nueva propuesta normativa.", extra: "El colectivo comenzó la elaboración de una Agenda Urbana de Bosques Urbanos para consolidar políticas públicas de largo plazo.", type: "iniciativa" }, { date: "2025", period: 2, city: "cochabamba", title: "Proyección Metropolitana", desc: "Replicación del modelo.", extra: "Se planteó expandir la experiencia de ExMatra y la Torrentera hacia otras áreas verdes y organizaciones vecinales de Cochabamba.", type: "iniciativa" } ]3a:T4a10,chartOruro = () => { if (!document.getElementById("inter-font")) { const link = document.createElement("link"); link.id = "inter-font"; link.rel = "stylesheet"; link.href = "https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap"; document.head.appendChild(link); } const cityFlag = flagoru; const data = orurodata; const width = 1600; const height = 550; const palette = { primary: "#B55A2A", // terracota secondary: "#D98C2B", // ocre accent: "#8B3A2E", // vino dark: "#5A2A1B", // café oscuro line: "rgba(90,42,27,0.35)", grid: "rgba(90,42,27,0.08)", text: "#2F241F", muted: "#7A6A60", soft: "#B8AAA0" }; const svg = html``; svg.style.userSelect = "none"; svg.style.webkitUserSelect = "none"; svg.style.background = "linear-gradient(to bottom, rgba(0,0,0,0.02), rgba(0,0,0,0.08))"; svg.style.filter = "drop-shadow(0px 4px 12px rgba(0,0,0,0.06))"; const defs = document.createElementNS("http://www.w3.org/2000/svg", "defs"); const vignetteGradient = document.createElementNS("http://www.w3.org/2000/svg", "radialGradient"); vignetteGradient.setAttribute("cx", "45%"); vignetteGradient.setAttribute("cy", "50%"); vignetteGradient.setAttribute("r", "70%"); vignetteGradient.setAttribute("id", "vignetteGradient"); vignetteGradient.innerHTML = ` `; defs.appendChild(vignetteGradient); const filter = document.createElementNS("http://www.w3.org/2000/svg", "filter"); filter.setAttribute("id", "blur"); const feGaussianBlur = document.createElementNS("http://www.w3.org/2000/svg", "feGaussianBlur"); feGaussianBlur.setAttribute("stdDeviation", "0"); filter.appendChild(feGaussianBlur); defs.appendChild(filter); svg.appendChild(defs); const url = oruciudad; const bg = document.createElementNS("http://www.w3.org/2000/svg", "image"); bg.setAttribute("href", url); const bgWidth = width * 1.45; const bgHeight = bgWidth * (1600/ 2400); const baseX = (width - bgWidth) / 2 + 336; const baseY = (height - bgHeight) / 2 + 330; bg.setAttribute("x", baseX); bg.setAttribute("y", baseY); const zoom = 0.71; bg.setAttribute("width", bgWidth * zoom); bg.setAttribute("height", bgHeight * zoom); bg.setAttribute("x", (width - bgWidth * zoom) / 2); bg.setAttribute("y", (height - bgHeight * zoom) / 2); bg.setAttribute("opacity", 0.55); bg.style.filter = ` grayscale(0.10) sepia(0.1) saturate(0.85) contrast(0.90) brightness(0.90) `; bg.setAttribute("preserveAspectRatio", "xMidYMid meet"); svg.insertBefore(bg, svg.firstChild); const overlay = document.createElementNS("http://www.w3.org/2000/svg", "rect"); overlay.setAttribute("x", 0); overlay.setAttribute("y", 0); overlay.setAttribute("width", width); overlay.setAttribute("height", height); overlay.setAttribute("fill", "#5A2A1B"); overlay.setAttribute("opacity", 0.18); svg.insertBefore(overlay, bg.nextSibling); const vignette = document.createElementNS("http://www.w3.org/2000/svg", "rect"); vignette.setAttribute("x", 0); vignette.setAttribute("y", 0); vignette.setAttribute("width", width); vignette.setAttribute("height", height); // degradado tipo cine (oscuro en bordes) vignette.setAttribute("fill", "url(#vignetteGradient)"); vignette.setAttribute("opacity", "0.28"); svg.appendChild(vignette); const group = document.createElementNS("http://www.w3.org/2000/svg", "g"); svg.appendChild(group); group.setAttribute("transform-origin", "center center"); svg.style.willChange = "transform"; svg.style.userSelect = "none"; svg.style.pointerEvents = "auto"; const container = document.createElement("div"); container.style.width = "100%"; container.style.maxWidth = "none"; container.style.margin = "0 auto"; container.style.overflowX = "auto"; container.style.overflowY = "hidden"; container.style.position = "relative"; container.style.userSelect = "none"; container.style.webkitUserSelect = "none"; container.style.cursor = "grab"; container.style.userSelect = "none"; container.style.webkitUserSelect = "none"; container.style.MozUserSelect = "none"; container.style.msUserSelect = "none"; container.appendChild(svg); const containerWidth = width; const containerHeight = height; let isHoveringCircle = false; let targetX = 0; let currentX = 0; let hoverOffsetX = 0; let hoverOffsetY = 0; let targetY = 0; let currentY = 0; let isDragging = false; let startX, startY; let resetTimer; container.style.cursor = "grab"; container.addEventListener("mousedown", (e) => { isDragging = true; startX = e.clientX - targetX; startY = e.clientY - targetY; container.style.cursor = "grabbing"; }); container.addEventListener("mouseup", () => { isDragging = false; container.style.cursor = "grab"; }); container.addEventListener("mouseleave", () => { group.querySelectorAll("circle").forEach(c => { c.style.opacity = "1"; }); group.querySelectorAll("circle").forEach(c => { c.style.opacity = "1"; }); tracker.setAttribute("opacity", "0"); group.querySelectorAll("circle").forEach(c => { c.style.opacity = "1"; }); container.addEventListener("mouseenter", () => { clearTimeout(resetTimer); }); isDragging = false; hoverOffsetX = 0; hoverOffsetY = 0; clearTimeout(resetTimer); resetTimer = setTimeout(() => { targetX = 0; targetY = 0; }, 1200); }); container.addEventListener("mouseenter", () => { group.style.transition = "opacity 0.25s ease"; clearTimeout(resetTimer); }); container.addEventListener("mousemove", (e) => { if (!isDragging || isHoveringCircle) return; const newX = e.clientX - startX; const minX = -(width - container.clientWidth) - 50; const maxX = 50; targetX = Math.max(minX, Math.min(maxX, newX)); targetY = 0; }); container.addEventListener("mousemove", (e) => { if (isDragging || isHoveringCircle) return; const rect = container.getBoundingClientRect(); const mouseX = e.clientX - rect.left; tracker.setAttribute("x1", mouseX); tracker.setAttribute("x2", mouseX); tracker.setAttribute("opacity", "0.5"); const mouseY = e.clientY - rect.top; const percentX = (mouseX / rect.width) - 0.5; const percentY = (mouseY / rect.height) - 0.5; hoverOffsetX = percentX * -35; hoverOffsetY = percentY * -18; // bg.setAttribute("x", -100 + percentX * 18); // bg.setAttribute("y", -30 + percentY * 10); }); let intro = 0; function animate() { const rect = { width: containerWidth, height: containerHeight }; targetX = Math.min(0, targetX); targetY = 0; const textOpacity = 1; group.querySelectorAll("text").forEach(t => { t.style.opacity = textOpacity; }); const smooth = 0.08; currentX += (targetX - currentX) * smooth; currentY += (targetY - currentY) * smooth; intro += 0.02; const introEase = Math.min(intro, 1); group.style.opacity = introEase; const finalScale = 1; const cinematicX = hoverOffsetX * 5; const cinematicY = hoverOffsetY; // cuánto puede desplazarse el gráfico const maxPan = width * 0.55; // progreso entre 0 y 1 const scrollProgress = Math.min( 1, Math.abs(currentX) / maxPan ); // recorrido del fondo al hacer scroll const bgTravel = 350; // pequeño parallax según el mouse const parallaxX = hoverOffsetX * 0.8; const parallaxY = hoverOffsetY * 0.8; // posición base de la imagen //const baseX = (width - bgWidth) / 2; //const baseY = (height - bgHeight) / 2; // mover imagen combinando scroll + parallax bg.setAttribute( "x", baseX - (scrollProgress * bgTravel) + parallaxX ); bg.setAttribute( "y", baseY + parallaxY ); group.setAttribute( "transform", ` translate( ${width/2 + currentX + cinematicX}, ${height/2 + currentY + cinematicY} ) scale(${finalScale}) translate(${-width/2}, ${-height/2}) ` ); // group.style.transformOrigin = `${width/2}px ${height/2}px`; requestAnimationFrame(animate); } targetX = 0; targetY = 0; // 👇 IMPORTANTE animate(); // TOOLTIP const tooltip = document.createElement("div"); tooltip.style.position = "fixed"; tooltip.style.background = "rgba(255,255,255,0.95)"; tooltip.style.backdropFilter = "blur(8px)"; tooltip.style.color = "#1f2937"; tooltip.style.padding = "12px 16px"; tooltip.style.borderRadius = "12px"; tooltip.style.fontSize = "13px"; tooltip.style.boxShadow = "0 10px 25px rgba(0,0,0,0.1)"; tooltip.style.border = "1px solid rgba(0,0,0,0.05)"; tooltip.style.maxWidth = "260px"; tooltip.style.whiteSpace = "normal"; tooltip.style.lineHeight = "1.4";; tooltip.style.padding = "8px 12px"; tooltip.style.borderRadius = "8px"; tooltip.style.fontSize = "12px"; tooltip.style.boxShadow = "0 10px 30px rgba(0,0,0,0.08)"; tooltip.style.pointerEvents = "none"; tooltip.style.opacity = "0"; tooltip.style.transition = "opacity 0.2s ease"; container.appendChild(tooltip); const leftMargin = 100; const rightMargin = 100; const usableWidth = width - leftMargin - rightMargin; const xStep = usableWidth / (data.length - 1); const years = [...new Set(data.map(d => d.date))]; const periods = 3; // 3 cuatrimestres por año const sectionWidth = (width - 100) / years.length; const yearWidth = usableWidth / years.length; years.forEach((year, i) => { const xStart = leftMargin + i * yearWidth; const xCenter = xStart + yearWidth / 2; // 🟧 CAJA DEL AÑO const yearBox = document.createElementNS("http://www.w3.org/2000/svg", "rect"); yearBox.setAttribute("x", xStart); yearBox.setAttribute("y", 0); yearBox.setAttribute("width", yearWidth); yearBox.setAttribute("height", height); yearBox.setAttribute("fill", "none"); yearBox.setAttribute("stroke", palette.grid); yearBox.setAttribute("stroke-width", "1"); group.appendChild(yearBox); // 🟧 CUATRIMESTRES (FONDO) for (let q = 0; q < periods; q++) { const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect"); rect.setAttribute("x", xStart + q * (yearWidth / periods)); rect.setAttribute("y", 0); rect.setAttribute("width", yearWidth / periods); rect.setAttribute("height", height); rect.setAttribute("fill", q % 2 === 0 ? "rgba(255,255,255,0.03)" : "rgba(0,0,0,0.03)" ); group.appendChild(rect); } // 🟧 LÍNEAS DE DIVISIÓN for (let q = 1; q < periods; q++) { const qx = xStart + q * (yearWidth / periods); const qLine = document.createElementNS("http://www.w3.org/2000/svg", "line"); qLine.setAttribute("x1", qx); qLine.setAttribute("x2", qx); qLine.setAttribute("y1", 0); qLine.setAttribute("y2", height); qLine.setAttribute("stroke", "rgba(90,42,27,0.15)"); qLine.setAttribute("stroke-width", "1"); qLine.setAttribute("stroke-dasharray", "3 3"); qLine.setAttribute("opacity", "0.7"); group.appendChild(qLine); } // 🟧 ETIQUETAS DE LOS CUATRIMESTRES const labels = [ "Ene–Abr", "May–Ago", "Sep–Dic" ]; for (let q = 0; q < periods; q++) { const label = document.createElementNS( "http://www.w3.org/2000/svg", "text" ); label.setAttribute( "x", xStart + (q + 0.5) * (yearWidth / periods) ); label.setAttribute("y", 52); label.setAttribute("text-anchor", "middle"); label.setAttribute("font-size", "12"); label.setAttribute("font-weight", "600"); label.setAttribute("font-family", "Inter, sans-serif"); label.setAttribute("fill", palette.dark); label.setAttribute("opacity", "0.55"); label.textContent = labels[q]; group.appendChild(label); } // 🟧 TEXTO DEL AÑO const yearLabel = document.createElementNS("http://www.w3.org/2000/svg", "text"); yearLabel.setAttribute("x", xCenter); yearLabel.setAttribute("y", 22); yearLabel.setAttribute("text-anchor", "middle"); yearLabel.setAttribute("font-size", "26"); yearLabel.setAttribute("font-weight", "600"); yearLabel.setAttribute("fill", palette.dark); yearLabel.setAttribute("opacity", "0.15"); yearLabel.textContent = year; yearLabel.style.pointerEvents = "none"; group.appendChild(yearLabel); }); // línea central const line = document.createElementNS("http://www.w3.org/2000/svg", "line"); line.setAttribute("x1", leftMargin); line.setAttribute("x2", width - rightMargin); line.setAttribute("y1", height / 2); line.setAttribute("y2", height / 2); line.setAttribute("stroke", palette.line); line.setAttribute("stroke-width", "1.5"); line.setAttribute("stroke-opacity", "0.35"); line.setAttribute("stroke-dasharray", "4 4"); group.appendChild(line); const tracker = document.createElementNS( "http://www.w3.org/2000/svg", "line" ); tracker.style.pointerEvents = "none"; tracker.setAttribute("y1", 0); tracker.setAttribute("y2", height); tracker.setAttribute("stroke", "#B55A2A"); tracker.setAttribute("stroke-width", "1"); tracker.setAttribute("stroke-dasharray", "4 4"); tracker.setAttribute("opacity", "0"); group.appendChild(tracker); const positionCounter = {}; const placedLabels = []; const placedCircles = []; const allPositions = []; data.forEach((d, i) => { // puedes ajustar esto después con precisión real const periodIndex = d.period ?? 1; const yearIndex = years.indexOf(d.date); const key = `${d.date}-${d.period}`; if (!positionCounter[key]) { positionCounter[key] = []; } positionCounter[key].push(d); const duplicateIndex = positionCounter[key].length - 1; const separation = 40; const duplicateOffset = (duplicateIndex - 1) * separation; const x = leftMargin + yearIndex * yearWidth + periodIndex * (yearWidth / periods) + (yearWidth / periods) / 2 + duplicateOffset; const offset = (i % 2 === 0) ? 0 : 20; let y = d.type === "proceso" ? height / 2 - 100 : height / 2 + 100; allPositions.push({ x, y, type: d.type }); const labelWidth = 120; const levelHeight = 35; let level = 0; while (true) { const candidateY = d.type === "proceso" ? y - level * levelHeight : y + level * levelHeight; const collision = placedLabels.some(p => { return ( p.side === d.type && Math.abs(p.x - x) < labelWidth && Math.abs(p.y - candidateY) < levelHeight ); }); if (!collision) { y = candidateY; placedLabels.push({ x, y, side: d.type }); break; } level++; } // línea vertical (conector) const connector = document.createElementNS("http://www.w3.org/2000/svg", "line"); connector.setAttribute("x1", x); connector.setAttribute("x2", x); connector.setAttribute("y1", height/2); connector.setAttribute("y2", y); connector.setAttribute("stroke", palette.dark); connector.setAttribute("stroke-opacity", "0.18"); connector.setAttribute("stroke-width", "1.2"); group.appendChild(connector); // círculo blanco const circle = document.createElementNS("http://www.w3.org/2000/svg","circle"); circle.setAttribute("cx", x); circle.setAttribute("cy", y); circle.setAttribute("r", 11); circle.setAttribute("fill", "white"); circle.setAttribute("stroke", "#ffffff"); circle.setAttribute("stroke-width", "2.5"); circle.style.filter = ` drop-shadow(0px 0px 6px rgba(194,65,12,0.35)) drop-shadow(0px 4px 6px rgba(0,0,0,0.18)) `; group.appendChild(circle); // CLIP const clip = document.createElementNS( "http://www.w3.org/2000/svg", "clipPath" ); clip.setAttribute("id", `clip-${i}`); const clipCircle = document.createElementNS( "http://www.w3.org/2000/svg", "circle" ); clipCircle.setAttribute("cx", x); clipCircle.setAttribute("cy", y); clipCircle.setAttribute("r", 10); clip.appendChild(clipCircle); defs.appendChild(clip); // BANDERA const img = document.createElementNS( "http://www.w3.org/2000/svg", "image" ); img.setAttribute("href", cityFlag); img.setAttribute("width",20); img.setAttribute("height",20); img.setAttribute("preserveAspectRatio", "xMidYMid slice"); img.setAttribute("x",x-10); img.setAttribute("y",y-10); img.setAttribute("clip-path",`url(#clip-${i})`); img.style.pointerEvents="none"; group.appendChild(img); // hover circle.addEventListener("mouseenter",(event)=>{ isHoveringCircle = true; circle.setAttribute("r",13); img.setAttribute("x",x-12); img.setAttribute("y",y-12); img.setAttribute("width",24); img.setAttribute("height",24); clipCircle.setAttribute("r",12); tooltip.style.opacity="1"; tooltip.innerHTML = `

${d.title}

${d.desc}

${d.extra || ""}

`; const tooltipWidth = 260; let left = event.pageX + 12; if (left + tooltipWidth > window.innerWidth) { left = event.pageX - tooltipWidth - 12; } tooltip.style.left = left + "px"; tooltip.style.top = Math.max(20, event.pageY - 40) + "px"; }); // salida circle.addEventListener("mouseleave",()=>{ isHoveringCircle=false; circle.setAttribute("r",11); img.setAttribute("x",x-10); img.setAttribute("y",y-10); img.setAttribute("width",20); img.setAttribute("height",20); clipCircle.setAttribute("r",10); tooltip.style.opacity="0"; }); // título const text = document.createElementNS("http://www.w3.org/2000/svg", "text"); text.setAttribute("x", x); let textAbove = y < height / 2; let textY = textAbove ? y - 30 : y + 30; const titleWidth = 140; const titleHeight = 25; const titleCollision = allPositions.some(c => { const horizontalCollision = Math.abs(c.x - x) < titleWidth / 2; const verticalCollision = Math.abs(c.y - textY) < titleHeight; return horizontalCollision && verticalCollision; }); if (titleCollision) { textAbove = !textAbove; textY = textAbove ? y - 30 : y + 30; } text.setAttribute("y", textY); text.setAttribute( "dominant-baseline", textAbove ? "auto" : "hanging" ); if (x < width * 0.2) { text.setAttribute("text-anchor", "middle"); } else if (x > width * 0.8) { text.setAttribute("text-anchor", "middle"); } else { text.setAttribute("text-anchor", "middle"); } text.setAttribute("font-size", "12"); text.setAttribute("font-weight", "600"); text.setAttribute("font-family", "Inter, sans-serif"); text.setAttribute("fill", palette.text); text.setAttribute("letter-spacing", "0.2px"); text.textContent = d.title.length > 25 ? d.title.slice(0, 25) + "..." : d.title; text.style.pointerEvents = "none"; group.appendChild(text); }); container.style.paddingBottom = "60px"; return container; }3b:T1388,orurodata = [ { date: "2022", period: 2, city: "oruro", title: "Primer Taller DDCC", desc: "Inicio del proceso de Derecho a la Ciudad.", extra: "Los días 13 y 14 de abril de 2023, el Programa Urbano de UNITAS reunió a organizaciones de la ciudad para desarrollar el primer taller sobre Derecho a la Ciudad, Ciudades con Derechos y Objetivos de Desarrollo Sostenible, dando inicio al proceso de articulación.", type: "proceso" }, { date: "2023", period: 1, city: "oruro", title: "Conformación del Colectivo", desc: "Nacimiento del Colectivo Urbano Oruro.", extra: "El 19 de junio de 2023 se formalizó la conformación del Colectivo Urbano de Oruro, integrando organizaciones de la sociedad civil, instituciones profesionales y actores comunitarios comprometidos con la promoción del Derecho a la Ciudad y la construcción de una Agenda Urbana participativa.", type: "proceso" }, { date: "2023", period: 1, city: "oruro", title: "Gestiones con Colegios", desc: "Ingreso a unidades educativas.", extra: "Se realizaron gestiones con siete unidades educativas públicas y privadas para incorporar actividades sobre Derecho a la Ciudad y Ciudades con Derechos, promoviendo la participación de estudiantes en procesos de formación y en la construcción de la Agenda Urbana de Oruro.", type: "proceso" }, { date: "2023", period: 2, city: "oruro", title: "Concurso TikTok", desc: "Oruro Ciudad con Derechos.", extra: "Se lanzó el concurso de videos cortos: Oruro Ciudad con Derechos; en el que cerca de 800 estudiantes de siete unidades educativas utilizaron TikTok para expresar las problemáticas, necesidades y propuestas de sus barrios, promoviendo la participación juvenil en la construcción de la Agenda Urbana de Oruro.", type: "iniciativa" }, { date: "2023", period: 2, city: "oruro", title: "Premiación de Videos", desc: "Difusión de propuestas juveniles.", extra: "Se presentaron y reconocieron 40 videos elaborados por estudiantes de siete unidades educativas, quienes visibilizaron las necesidades, problemáticas y propuestas de la juventud para una ciudad con derechos, promoviendo su participación en la planificación municipal.", type: "proceso" }, { date: "2023", period: 2, city: "oruro", title: "Agenda Urbana", desc: "Inicio de articulación institucional.", extra: "una vez identificadas las necesidades de la población, se vio la necesidad de contar con una agenda urbana, se iniciaron gestiones con la Secretaría Municipal de Ordenamiento Territorial para incorporar a poblaciones vulnerables en la construcción de la Agenda Urbana de Oruro, promoviendo un proceso de planificación más participativo e inclusivo.", type: "iniciativa" }, { date: "2024", period: 0, city: "oruro", title: "Registro de Organizaciones", desc: "Mapeo de poblaciones vulnerables.", extra: "Se realizaron encuestas y gestiones con organizaciones que representan a poblaciones vulnerables de la ciudad, registrando sus necesidades y promoviendo su incorporación a las mesas técnicas para la construcción participativa de la Agenda Urbana de Oruro.", type: "proceso" }, { date: "2024", period: 1, city: "oruro", title: "Talleres Ciudad con Derechos", desc: "Recolección de propuestas.", extra: "Se realizaron talleres sobre Derecho a la Ciudad con distintos sectores de la población para identificar necesidades, recoger propuestas y generar insumos para la construcción participativa de la Agenda Urbana de Oruro, fortaleciendo el diálogo entre la ciudadanía y el gobierno municipal.", type: "proceso" }, { date: "2024", period: 1, city: "oruro", title: "Mesas Técnicas", desc: "Participación multisectorial.", extra: "Organizaciones sociales, profesionales e instituciones municipales trabajaron conjuntamente en la Agenda Urbana.", type: "proceso" }, { date: "2024", period: 2, city: "oruro", title: "Inclusión clave de Sectores", desc: "Participación de poblaciones vulnerables.", extra: "Se incorporó a organizaciones y representantes de poblaciones vulnerables en las mesas técnicas de la Agenda Urbana de Oruro, promoviendo un proceso de planificación más participativo e inclusivo junto a instituciones municipales, profesionales y actores de la sociedad civil.", type: "iniciativa" }, { date: "2025", period: 0, city: "oruro", title: "Retroalimentación Agenda", desc: "Validación del documento.", extra: "Se presentó el borrador de la Agenda Urbana de Oruro a las organizaciones y colectivos participantes, recogiendo observaciones y aportes para fortalecer el documento antes de su aprobación y promulgación.", type: "proceso" }, { date: "2025", period: 1, city: "oruro", title: "Promulgación Agenda Urbana", desc: "Principal logro de incidencia.", extra: "Se promulgó oficialmente la Agenda Urbana de Oruro como instrumento de planificación municipal.", type: "iniciativa" } ]3c:T4a11,chartTarija= () => { if (!document.getElementById("inter-font")) { const link = document.createElement("link"); link.id = "inter-font"; link.rel = "stylesheet"; link.href = "https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap"; document.head.appendChild(link); } const cityFlag = flagtrj; const data = tarijadata; const width = 1600; const height = 550; const palette = { primary: "#B55A2A", // terracota secondary: "#D98C2B", // ocre accent: "#8B3A2E", // vino dark: "#5A2A1B", // café oscuro line: "rgba(90,42,27,0.35)", grid: "rgba(90,42,27,0.08)", text: "#2F241F", muted: "#7A6A60", soft: "#B8AAA0" }; const svg = html``; svg.style.userSelect = "none"; svg.style.webkitUserSelect = "none"; svg.style.background = "linear-gradient(to bottom, rgba(0,0,0,0.02), rgba(0,0,0,0.08))"; svg.style.filter = "drop-shadow(0px 4px 12px rgba(0,0,0,0.06))"; const defs = document.createElementNS("http://www.w3.org/2000/svg", "defs"); const vignetteGradient = document.createElementNS("http://www.w3.org/2000/svg", "radialGradient"); vignetteGradient.setAttribute("cx", "45%"); vignetteGradient.setAttribute("cy", "50%"); vignetteGradient.setAttribute("r", "70%"); vignetteGradient.setAttribute("id", "vignetteGradient"); vignetteGradient.innerHTML = ` `; defs.appendChild(vignetteGradient); const filter = document.createElementNS("http://www.w3.org/2000/svg", "filter"); filter.setAttribute("id", "blur"); const feGaussianBlur = document.createElementNS("http://www.w3.org/2000/svg", "feGaussianBlur"); feGaussianBlur.setAttribute("stdDeviation", "0"); filter.appendChild(feGaussianBlur); defs.appendChild(filter); svg.appendChild(defs); const url = trjciudad; const bg = document.createElementNS("http://www.w3.org/2000/svg", "image"); bg.setAttribute("href", url); const bgWidth = width * 1.45; const bgHeight = bgWidth * (1600/ 2400); const baseX = (width - bgWidth) / 2 + 336; const baseY = (height - bgHeight) / 2 + 330; bg.setAttribute("x", baseX); bg.setAttribute("y", baseY); const zoom = 0.71; bg.setAttribute("width", bgWidth * zoom); bg.setAttribute("height", bgHeight * zoom); bg.setAttribute("x", (width - bgWidth * zoom) / 2); bg.setAttribute("y", (height - bgHeight * zoom) / 2); bg.setAttribute("opacity", 0.55); bg.style.filter = ` grayscale(0.10) sepia(0.1) saturate(0.85) contrast(0.90) brightness(0.90) `; bg.setAttribute("preserveAspectRatio", "xMidYMid meet"); svg.insertBefore(bg, svg.firstChild); const overlay = document.createElementNS("http://www.w3.org/2000/svg", "rect"); overlay.setAttribute("x", 0); overlay.setAttribute("y", 0); overlay.setAttribute("width", width); overlay.setAttribute("height", height); overlay.setAttribute("fill", "#5A2A1B"); overlay.setAttribute("opacity", 0.18); svg.insertBefore(overlay, bg.nextSibling); const vignette = document.createElementNS("http://www.w3.org/2000/svg", "rect"); vignette.setAttribute("x", 0); vignette.setAttribute("y", 0); vignette.setAttribute("width", width); vignette.setAttribute("height", height); // degradado tipo cine (oscuro en bordes) vignette.setAttribute("fill", "url(#vignetteGradient)"); vignette.setAttribute("opacity", "0.28"); svg.appendChild(vignette); const group = document.createElementNS("http://www.w3.org/2000/svg", "g"); svg.appendChild(group); group.setAttribute("transform-origin", "center center"); svg.style.willChange = "transform"; svg.style.userSelect = "none"; svg.style.pointerEvents = "auto"; const container = document.createElement("div"); container.style.width = "100%"; container.style.maxWidth = "none"; container.style.margin = "0 auto"; container.style.overflowX = "auto"; container.style.overflowY = "hidden"; container.style.position = "relative"; container.style.userSelect = "none"; container.style.webkitUserSelect = "none"; container.style.cursor = "grab"; container.style.userSelect = "none"; container.style.webkitUserSelect = "none"; container.style.MozUserSelect = "none"; container.style.msUserSelect = "none"; container.appendChild(svg); const containerWidth = width; const containerHeight = height; let isHoveringCircle = false; let targetX = 0; let currentX = 0; let hoverOffsetX = 0; let hoverOffsetY = 0; let targetY = 0; let currentY = 0; let isDragging = false; let startX, startY; let resetTimer; container.style.cursor = "grab"; container.addEventListener("mousedown", (e) => { isDragging = true; startX = e.clientX - targetX; startY = e.clientY - targetY; container.style.cursor = "grabbing"; }); container.addEventListener("mouseup", () => { isDragging = false; container.style.cursor = "grab"; }); container.addEventListener("mouseleave", () => { group.querySelectorAll("circle").forEach(c => { c.style.opacity = "1"; }); group.querySelectorAll("circle").forEach(c => { c.style.opacity = "1"; }); tracker.setAttribute("opacity", "0"); group.querySelectorAll("circle").forEach(c => { c.style.opacity = "1"; }); container.addEventListener("mouseenter", () => { clearTimeout(resetTimer); }); isDragging = false; hoverOffsetX = 0; hoverOffsetY = 0; clearTimeout(resetTimer); resetTimer = setTimeout(() => { targetX = 0; targetY = 0; }, 1200); }); container.addEventListener("mouseenter", () => { group.style.transition = "opacity 0.25s ease"; clearTimeout(resetTimer); }); container.addEventListener("mousemove", (e) => { if (!isDragging || isHoveringCircle) return; const newX = e.clientX - startX; const minX = -(width - container.clientWidth) - 50; const maxX = 50; targetX = Math.max(minX, Math.min(maxX, newX)); targetY = 0; }); container.addEventListener("mousemove", (e) => { if (isDragging || isHoveringCircle) return; const rect = container.getBoundingClientRect(); const mouseX = e.clientX - rect.left; tracker.setAttribute("x1", mouseX); tracker.setAttribute("x2", mouseX); tracker.setAttribute("opacity", "0.5"); const mouseY = e.clientY - rect.top; const percentX = (mouseX / rect.width) - 0.5; const percentY = (mouseY / rect.height) - 0.5; hoverOffsetX = percentX * -35; hoverOffsetY = percentY * -18; // bg.setAttribute("x", -100 + percentX * 18); // bg.setAttribute("y", -30 + percentY * 10); }); let intro = 0; function animate() { const rect = { width: containerWidth, height: containerHeight }; targetX = Math.min(0, targetX); targetY = 0; const textOpacity = 1; group.querySelectorAll("text").forEach(t => { t.style.opacity = textOpacity; }); const smooth = 0.08; currentX += (targetX - currentX) * smooth; currentY += (targetY - currentY) * smooth; intro += 0.02; const introEase = Math.min(intro, 1); group.style.opacity = introEase; const finalScale = 1; const cinematicX = hoverOffsetX * 5; const cinematicY = hoverOffsetY; // cuánto puede desplazarse el gráfico const maxPan = width * 0.55; // progreso entre 0 y 1 const scrollProgress = Math.min( 1, Math.abs(currentX) / maxPan ); // recorrido del fondo al hacer scroll const bgTravel = 350; // pequeño parallax según el mouse const parallaxX = hoverOffsetX * 0.8; const parallaxY = hoverOffsetY * 0.8; // posición base de la imagen //const baseX = (width - bgWidth) / 2; //const baseY = (height - bgHeight) / 2; // mover imagen combinando scroll + parallax bg.setAttribute( "x", baseX - (scrollProgress * bgTravel) + parallaxX ); bg.setAttribute( "y", baseY + parallaxY ); group.setAttribute( "transform", ` translate( ${width/2 + currentX + cinematicX}, ${height/2 + currentY + cinematicY} ) scale(${finalScale}) translate(${-width/2}, ${-height/2}) ` ); // group.style.transformOrigin = `${width/2}px ${height/2}px`; requestAnimationFrame(animate); } targetX = 0; targetY = 0; // 👇 IMPORTANTE animate(); // TOOLTIP const tooltip = document.createElement("div"); tooltip.style.position = "fixed"; tooltip.style.background = "rgba(255,255,255,0.95)"; tooltip.style.backdropFilter = "blur(8px)"; tooltip.style.color = "#1f2937"; tooltip.style.padding = "12px 16px"; tooltip.style.borderRadius = "12px"; tooltip.style.fontSize = "13px"; tooltip.style.boxShadow = "0 10px 25px rgba(0,0,0,0.1)"; tooltip.style.border = "1px solid rgba(0,0,0,0.05)"; tooltip.style.maxWidth = "260px"; tooltip.style.whiteSpace = "normal"; tooltip.style.lineHeight = "1.4";; tooltip.style.padding = "8px 12px"; tooltip.style.borderRadius = "8px"; tooltip.style.fontSize = "12px"; tooltip.style.boxShadow = "0 10px 30px rgba(0,0,0,0.08)"; tooltip.style.pointerEvents = "none"; tooltip.style.opacity = "0"; tooltip.style.transition = "opacity 0.2s ease"; container.appendChild(tooltip); const leftMargin = 100; const rightMargin = 100; const usableWidth = width - leftMargin - rightMargin; const xStep = usableWidth / (data.length - 1); const years = [...new Set(data.map(d => d.date))]; const periods = 3; // 3 cuatrimestres por año const sectionWidth = (width - 100) / years.length; const yearWidth = usableWidth / years.length; years.forEach((year, i) => { const xStart = leftMargin + i * yearWidth; const xCenter = xStart + yearWidth / 2; // 🟧 CAJA DEL AÑO const yearBox = document.createElementNS("http://www.w3.org/2000/svg", "rect"); yearBox.setAttribute("x", xStart); yearBox.setAttribute("y", 0); yearBox.setAttribute("width", yearWidth); yearBox.setAttribute("height", height); yearBox.setAttribute("fill", "none"); yearBox.setAttribute("stroke", palette.grid); yearBox.setAttribute("stroke-width", "1"); group.appendChild(yearBox); // 🟧 CUATRIMESTRES (FONDO) for (let q = 0; q < periods; q++) { const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect"); rect.setAttribute("x", xStart + q * (yearWidth / periods)); rect.setAttribute("y", 0); rect.setAttribute("width", yearWidth / periods); rect.setAttribute("height", height); rect.setAttribute("fill", q % 2 === 0 ? "rgba(255,255,255,0.03)" : "rgba(0,0,0,0.03)" ); group.appendChild(rect); } // 🟧 LÍNEAS DE DIVISIÓN for (let q = 1; q < periods; q++) { const qx = xStart + q * (yearWidth / periods); const qLine = document.createElementNS("http://www.w3.org/2000/svg", "line"); qLine.setAttribute("x1", qx); qLine.setAttribute("x2", qx); qLine.setAttribute("y1", 0); qLine.setAttribute("y2", height); qLine.setAttribute("stroke", "rgba(90,42,27,0.15)"); qLine.setAttribute("stroke-width", "1"); qLine.setAttribute("stroke-dasharray", "3 3"); qLine.setAttribute("opacity", "0.7"); group.appendChild(qLine); } // 🟧 ETIQUETAS DE LOS CUATRIMESTRES const labels = [ "Ene–Abr", "May–Ago", "Sep–Dic" ]; for (let q = 0; q < periods; q++) { const label = document.createElementNS( "http://www.w3.org/2000/svg", "text" ); label.setAttribute( "x", xStart + (q + 0.5) * (yearWidth / periods) ); label.setAttribute("y", 52); label.setAttribute("text-anchor", "middle"); label.setAttribute("font-size", "12"); label.setAttribute("font-weight", "600"); label.setAttribute("font-family", "Inter, sans-serif"); label.setAttribute("fill", palette.dark); label.setAttribute("opacity", "0.55"); label.textContent = labels[q]; group.appendChild(label); } // 🟧 TEXTO DEL AÑO const yearLabel = document.createElementNS("http://www.w3.org/2000/svg", "text"); yearLabel.setAttribute("x", xCenter); yearLabel.setAttribute("y", 22); yearLabel.setAttribute("text-anchor", "middle"); yearLabel.setAttribute("font-size", "26"); yearLabel.setAttribute("font-weight", "600"); yearLabel.setAttribute("fill", palette.dark); yearLabel.setAttribute("opacity", "0.15"); yearLabel.textContent = year; yearLabel.style.pointerEvents = "none"; group.appendChild(yearLabel); }); // línea central const line = document.createElementNS("http://www.w3.org/2000/svg", "line"); line.setAttribute("x1", leftMargin); line.setAttribute("x2", width - rightMargin); line.setAttribute("y1", height / 2); line.setAttribute("y2", height / 2); line.setAttribute("stroke", palette.line); line.setAttribute("stroke-width", "1.5"); line.setAttribute("stroke-opacity", "0.35"); line.setAttribute("stroke-dasharray", "4 4"); group.appendChild(line); const tracker = document.createElementNS( "http://www.w3.org/2000/svg", "line" ); tracker.style.pointerEvents = "none"; tracker.setAttribute("y1", 0); tracker.setAttribute("y2", height); tracker.setAttribute("stroke", "#B55A2A"); tracker.setAttribute("stroke-width", "1"); tracker.setAttribute("stroke-dasharray", "4 4"); tracker.setAttribute("opacity", "0"); group.appendChild(tracker); const positionCounter = {}; const placedLabels = []; const placedCircles = []; const allPositions = []; data.forEach((d, i) => { // puedes ajustar esto después con precisión real const periodIndex = d.period ?? 1; const yearIndex = years.indexOf(d.date); const key = `${d.date}-${d.period}`; if (!positionCounter[key]) { positionCounter[key] = []; } positionCounter[key].push(d); const duplicateIndex = positionCounter[key].length - 1; const separation = 40; const duplicateOffset = (duplicateIndex - 1) * separation; const x = leftMargin + yearIndex * yearWidth + periodIndex * (yearWidth / periods) + (yearWidth / periods) / 2 + duplicateOffset; const offset = (i % 2 === 0) ? 0 : 20; let y = d.type === "proceso" ? height / 2 - 100 : height / 2 + 100; allPositions.push({ x, y, type: d.type }); const labelWidth = 120; const levelHeight = 35; let level = 0; while (true) { const candidateY = d.type === "proceso" ? y - level * levelHeight : y + level * levelHeight; const collision = placedLabels.some(p => { return ( p.side === d.type && Math.abs(p.x - x) < labelWidth && Math.abs(p.y - candidateY) < levelHeight ); }); if (!collision) { y = candidateY; placedLabels.push({ x, y, side: d.type }); break; } level++; } // línea vertical (conector) const connector = document.createElementNS("http://www.w3.org/2000/svg", "line"); connector.setAttribute("x1", x); connector.setAttribute("x2", x); connector.setAttribute("y1", height/2); connector.setAttribute("y2", y); connector.setAttribute("stroke", palette.dark); connector.setAttribute("stroke-opacity", "0.18"); connector.setAttribute("stroke-width", "1.2"); group.appendChild(connector); // círculo blanco const circle = document.createElementNS("http://www.w3.org/2000/svg","circle"); circle.setAttribute("cx", x); circle.setAttribute("cy", y); circle.setAttribute("r", 11); circle.setAttribute("fill", "white"); circle.setAttribute("stroke", "#ffffff"); circle.setAttribute("stroke-width", "2.5"); circle.style.filter = ` drop-shadow(0px 0px 6px rgba(194,65,12,0.35)) drop-shadow(0px 4px 6px rgba(0,0,0,0.18)) `; group.appendChild(circle); // CLIP const clip = document.createElementNS( "http://www.w3.org/2000/svg", "clipPath" ); clip.setAttribute("id", `clip-${i}`); const clipCircle = document.createElementNS( "http://www.w3.org/2000/svg", "circle" ); clipCircle.setAttribute("cx", x); clipCircle.setAttribute("cy", y); clipCircle.setAttribute("r", 10); clip.appendChild(clipCircle); defs.appendChild(clip); // BANDERA const img = document.createElementNS( "http://www.w3.org/2000/svg", "image" ); img.setAttribute("href", cityFlag); img.setAttribute("width",20); img.setAttribute("height",20); img.setAttribute("preserveAspectRatio", "xMidYMid slice"); img.setAttribute("x",x-10); img.setAttribute("y",y-10); img.setAttribute("clip-path",`url(#clip-${i})`); img.style.pointerEvents="none"; group.appendChild(img); // hover circle.addEventListener("mouseenter",(event)=>{ isHoveringCircle = true; circle.setAttribute("r",13); img.setAttribute("x",x-12); img.setAttribute("y",y-12); img.setAttribute("width",24); img.setAttribute("height",24); clipCircle.setAttribute("r",12); tooltip.style.opacity="1"; tooltip.innerHTML = `

${d.title}

${d.desc}

${d.extra || ""}

`; const tooltipWidth = 260; let left = event.pageX + 12; if (left + tooltipWidth > window.innerWidth) { left = event.pageX - tooltipWidth - 12; } tooltip.style.left = left + "px"; tooltip.style.top = Math.max(20, event.pageY - 40) + "px"; }); // salida circle.addEventListener("mouseleave",()=>{ isHoveringCircle=false; circle.setAttribute("r",11); img.setAttribute("x",x-10); img.setAttribute("y",y-10); img.setAttribute("width",20); img.setAttribute("height",20); clipCircle.setAttribute("r",10); tooltip.style.opacity="0"; }); // título const text = document.createElementNS("http://www.w3.org/2000/svg", "text"); text.setAttribute("x", x); let textAbove = y < height / 2; let textY = textAbove ? y - 30 : y + 30; const titleWidth = 140; const titleHeight = 25; const titleCollision = allPositions.some(c => { const horizontalCollision = Math.abs(c.x - x) < titleWidth / 2; const verticalCollision = Math.abs(c.y - textY) < titleHeight; return horizontalCollision && verticalCollision; }); if (titleCollision) { textAbove = !textAbove; textY = textAbove ? y - 30 : y + 30; } text.setAttribute("y", textY); text.setAttribute( "dominant-baseline", textAbove ? "auto" : "hanging" ); if (x < width * 0.2) { text.setAttribute("text-anchor", "middle"); } else if (x > width * 0.8) { text.setAttribute("text-anchor", "middle"); } else { text.setAttribute("text-anchor", "middle"); } text.setAttribute("font-size", "12"); text.setAttribute("font-weight", "600"); text.setAttribute("font-family", "Inter, sans-serif"); text.setAttribute("fill", palette.text); text.setAttribute("letter-spacing", "0.2px"); text.textContent = d.title.length > 25 ? d.title.slice(0, 25) + "..." : d.title; text.style.pointerEvents = "none"; group.appendChild(text); }); container.style.paddingBottom = "60px"; return container; }3d:Tdcd,tarijadata = [ { date: "2023", period: 0, city: "tarija", title: "Conformación del Colectivo", desc: "Inicio del Colectivo Urbano Tarija.", extra: "En 2023 se conformó el colectivo con 9 organizaciones lideradas por Colectivo Plurales y Colectivo Infinitum.", type: "proceso" }, { date: "2023", period: 0, city: "tarija", title: "Mapeo de Organizaciones", desc: "Identificación de actores aliados.", extra: "Se realizó el mapeo de organizaciones miembros y posibles aliados externos para fortalecer el colectivo.", type: "proceso" }, { date: "2023", period: 1, city: "tarija", title: "Proyecto Mi Cuerpo, Mi Ciudad", desc: "Enfoque de la iniciativa.", extra: "Se definió trabajar las rutas de cuidados desde el enfoque de derechos, género y masculinidades.", type: "iniciativa" }, { date: "2023", period: 1, city: "tarija", title: "Capacitaciones Internas", desc: "Derecho a la Ciudad y cuidados.", extra: "Se desarrollaron procesos formativos sobre Derecho a la Ciudad, Ciudades con Derechos y enfoque de cuidados.", type: "proceso" }, { date: "2023", period: 2, city: "tarija", title: "Gestión de Recursos", desc: "Apoyo institucional.", extra: "Fundación FAUTAPO y CISTAC Masculinidades aportaron recursos para fortalecer la implementación del proyecto.", type: "proceso" }, { date: "2024", period: 0, city: "tarija", title: "Diseño Metodológico", desc: "Creación de instrumentos.", extra: "Se elaboraron bitácoras, entrevistas y formularios para la recolección de información sobre rutas de cuidados.", type: "proceso" }, { date: "2024", period: 0, city: "tarija", title: "Brigadas de Cuidados", desc: "Organización de equipos.", extra: "Se conformaron brigadas voluntarias para levantar información sobre autocuidado, ecocuidado y sociocuidado.", type: "iniciativa" }, { date: "2024", period: 1, city: "tarija", title: "Selección de Rutas", desc: "Definición de áreas de estudio.", extra: "Se seleccionaron la Avenida Circunvalación y la Calle Bolívar para el trabajo de campo.", type: "proceso" }, { date: "2024", period: 1, city: "tarija", title: "Trabajo de Campo", desc: "Recolección de información.", extra: "Las brigadas realizaron entrevistas, observaciones, registros fotográficos y mediciones en las rutas seleccionadas.", type: "proceso" }, { date: "2024", period: 2, city: "tarija", title: "Cartografía de Cuidados", desc: "Sistematización de resultados.", extra: "Se elaboraron mapas urbanos identificando puntos clave de autocuidado, ecocuidado y sociocuidado.", type: "proceso" }, { date: "2024", period: 2, city: "tarija", title: "Producción Audiovisual", desc: "Comunicación e incidencia.", extra: "En respuesta a los hallazgos se produjeron cinco materiales audiovisuales, estos fueron sobre cuidados, medio ambiente y derecho a la ciudad.", type: "iniciativa" }, { date: "2025", period: 0, city: "tarija", title: "Congreso de Urbanismo", desc: "Presentación académica.", extra: "Los resultados fueron presentados en el Segundo Congreso Boliviano de Urbanismo y ante la carrera de Arquitectura de la UAJMS.", type: "proceso" }, { date: "2025", period: 1, city: "tarija", title: "Socialización Institucional", desc: "Difusión de resultados.", extra: "Autoridades municipales e instituciones conocieron la cartografía y los hallazgos sobre rutas de cuidados.", type: "iniciativa" } ]3e:T4c02,chartBolivia = () => { const data = todoslosdatos; const cityFlags = { elalto: flag, lapaz: flaglp, cochabamba: flaglcbba, sucre: flagsuc, oruro: flagoru, potosi: flagpts, tarija: flagtrj }; if (!document.getElementById("inter-font")) { const link = document.createElement("link"); link.id = "inter-font"; link.rel = "stylesheet"; link.href = "https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap"; document.head.appendChild(link); } const width = 2600; const height = 550; const palette = { primary: "#c2410c", secondary: "#f59e0b", line: "rgba(124,45,18,0.35)", grid: "rgba(0,0,0,0.05)", dark: "#7c2d12", text: "#111827", muted: "#6b7280", soft: "#9ca3af" }; const svg = html``; svg.style.userSelect = "none"; svg.style.webkitUserSelect = "none"; svg.style.background = "linear-gradient(to bottom, rgba(0,0,0,0.02), rgba(0,0,0,0.08))"; svg.style.filter = "drop-shadow(0px 4px 12px rgba(0,0,0,0.06))"; const defs = document.createElementNS("http://www.w3.org/2000/svg", "defs"); // =============================== // CLIPPATHS PARA BANDERAS // =============================== const vignetteGradient = document.createElementNS("http://www.w3.org/2000/svg", "radialGradient"); vignetteGradient.setAttribute("cx", "50%"); vignetteGradient.setAttribute("cy", "50%"); vignetteGradient.setAttribute("r", "70%"); vignetteGradient.setAttribute("id", "vignetteGradient"); vignetteGradient.innerHTML = ` `; defs.appendChild(vignetteGradient); const filter = document.createElementNS("http://www.w3.org/2000/svg", "filter"); filter.setAttribute("id", "blur"); const feGaussianBlur = document.createElementNS("http://www.w3.org/2000/svg", "feGaussianBlur"); feGaussianBlur.setAttribute("stdDeviation", "0"); filter.appendChild(feGaussianBlur); defs.appendChild(filter); svg.appendChild(defs); const url = boliviafondo; const bg = document.createElementNS("http://www.w3.org/2000/svg", "image"); bg.setAttribute("href", url); const bgWidth = width; const bgHeight = bgWidth * (1536 / 2048); const baseX = (width - bgWidth) / 2 - 15; const baseY = (height - bgHeight) / 2 + 25; bg.setAttribute("x", baseX); bg.setAttribute("y", baseY); const zoom = 1.01; bg.setAttribute("width", bgWidth * zoom); bg.setAttribute("height", bgHeight * zoom); bg.setAttribute("x", (width - bgWidth * zoom) / 2); bg.setAttribute("y", (height - bgHeight * zoom) / 2); bg.setAttribute("opacity", 0.55); bg.style.filter = ` grayscale(0.10) saturate(1) contrast(1) brightness(1.1) `; bg.setAttribute("preserveAspectRatio", "xMidYMid meet"); svg.insertBefore(bg, svg.firstChild); const overlay = document.createElementNS("http://www.w3.org/2000/svg", "rect"); overlay.setAttribute("x", 0); overlay.setAttribute("y", 0); overlay.setAttribute("width", width); overlay.setAttribute("height", height); overlay.setAttribute("fill", "#2a1a12"); overlay.setAttribute("opacity", 0.05); svg.insertBefore(overlay, bg.nextSibling); const vignette = document.createElementNS("http://www.w3.org/2000/svg", "rect"); vignette.setAttribute("x", 0); vignette.setAttribute("y", 0); vignette.setAttribute("width", width); vignette.setAttribute("height", height); // degradado tipo cine (oscuro en bordes) vignette.setAttribute("fill", "url(#vignetteGradient)"); vignette.setAttribute("opacity", "0.28"); svg.appendChild(vignette); const group = document.createElementNS("http://www.w3.org/2000/svg", "g"); svg.appendChild(group); group.setAttribute("transform-origin", "center center"); svg.style.willChange = "transform"; svg.style.userSelect = "none"; svg.style.pointerEvents = "auto"; const container = document.createElement("div"); container.style.width = "100%"; container.style.maxWidth = "none"; container.style.margin = "0 auto"; container.style.overflowX = "auto"; container.style.overflowY = "hidden"; container.style.position = "relative"; container.style.userSelect = "none"; container.style.webkitUserSelect = "none"; container.style.cursor = "grab"; container.style.userSelect = "none"; container.style.webkitUserSelect = "none"; container.style.MozUserSelect = "none"; container.style.msUserSelect = "none"; container.appendChild(svg); const containerWidth = width; const containerHeight = height; let isHoveringCircle = false; let targetX = 0; let currentX = 0; let hoverOffsetX = 0; let hoverOffsetY = 0; let targetY = 0; let currentY = 0; let isDragging = false; let startX, startY; let resetTimer; const wrapper = document.createElement("div"); wrapper.style.display = "flex"; wrapper.style.flexDirection = "column"; wrapper.style.width = "100%"; const legend = document.createElement("div"); legend.style.display = "flex"; legend.style.justifyContent = "center"; legend.style.alignItems = "center"; legend.style.flexWrap = "wrap"; legend.style.gap = "18px"; legend.style.marginTop = "20px"; legend.style.fontFamily = "Inter, sans-serif"; legend.style.fontSize = "14px"; container.style.cursor = "grab"; container.addEventListener("mousedown", (e) => { isDragging = true; startX = e.clientX - targetX; startY = e.clientY - targetY; container.style.cursor = "grabbing"; }); container.addEventListener("mouseup", () => { isDragging = false; container.style.cursor = "grab"; }); container.addEventListener("mouseleave", () => { group.querySelectorAll("circle").forEach(c => { c.style.opacity = "1"; }); group.querySelectorAll("circle").forEach(c => { c.style.opacity = "1"; }); tracker.setAttribute("opacity", "0"); group.querySelectorAll("circle").forEach(c => { c.style.opacity = "1"; }); container.addEventListener("mouseenter", () => { clearTimeout(resetTimer); }); isDragging = false; hoverOffsetX = 0; hoverOffsetY = 0; clearTimeout(resetTimer); resetTimer = setTimeout(() => { targetX = 0; targetY = 0; }, 1200); }); container.addEventListener("mouseenter", () => { group.style.transition = "opacity 0.25s ease"; clearTimeout(resetTimer); }); container.addEventListener("mousemove", (e) => { if (!isDragging || isHoveringCircle) return; const newX = e.clientX - startX; const minX = -(width - container.clientWidth) - 50; const maxX = 50; targetX = Math.max(minX, Math.min(maxX, newX)); targetY = 0; }); container.addEventListener("mousemove", (e) => { if (isDragging || isHoveringCircle) return; const rect = container.getBoundingClientRect(); const mouseX = e.clientX - rect.left; tracker.setAttribute("x1", mouseX); tracker.setAttribute("x2", mouseX); tracker.setAttribute("opacity", "0.5"); const mouseY = e.clientY - rect.top; const percentX = (mouseX / rect.width) - 0.5; const percentY = (mouseY / rect.height) - 0.5; // movimiento cinematográfico del gráfico hoverOffsetX = percentX * -35; hoverOffsetY = percentY * -18; // bg.setAttribute("x", -150 + percentX * 18); // bg.setAttribute("y", -70 + percentY * 10); }); let intro = 0; function animate() { const rect = { width: containerWidth, height: containerHeight }; targetX = Math.min(0, targetX); targetY = 0; const textOpacity = 1; group.querySelectorAll("text").forEach(t => { t.style.opacity = textOpacity; }); const smooth = 0.08; currentX += (targetX - currentX) * smooth; currentY += (targetY - currentY) * smooth; intro += 0.02; const introEase = Math.min(intro, 1); group.style.opacity = introEase; const finalScale = 1; const cinematicX = hoverOffsetX * 5; const cinematicY = hoverOffsetY; // cuánto puede desplazarse el gráfico const maxPan = width * 0.55; // progreso entre 0 y 1 const scrollProgress = Math.min( 1, Math.abs(currentX) / maxPan ); const bgTravel = 350; // parallax por mouse const parallaxX = hoverOffsetX * 0.8; const parallaxY = hoverOffsetY * 0.8; bg.setAttribute( "x", baseX - (scrollProgress * bgTravel) + parallaxX ); bg.setAttribute( "y", baseY + parallaxY ); group.setAttribute( "transform", ` translate( ${width/2 + currentX + cinematicX}, ${height/2 + currentY + cinematicY} ) scale(${finalScale}) translate(${-width/2}, ${-height/2}) ` ); // group.style.transformOrigin = `${width/2}px ${height/2}px`; requestAnimationFrame(animate); } targetX = 0; targetY = 0; // 👇 IMPORTANTE animate(); // TOOLTIP const tooltip = document.createElement("div"); tooltip.style.position = "fixed"; tooltip.style.background = "rgba(255,255,255,0.95)"; tooltip.style.backdropFilter = "blur(8px)"; tooltip.style.color = "#1f2937"; tooltip.style.padding = "12px 16px"; tooltip.style.borderRadius = "12px"; tooltip.style.fontSize = "13px"; tooltip.style.boxShadow = "0 10px 25px rgba(0,0,0,0.1)"; tooltip.style.border = "1px solid rgba(0,0,0,0.05)"; tooltip.style.maxWidth = "260px"; tooltip.style.whiteSpace = "normal"; tooltip.style.lineHeight = "1.4";; tooltip.style.padding = "8px 12px"; tooltip.style.borderRadius = "8px"; tooltip.style.fontSize = "12px"; tooltip.style.boxShadow = "0 10px 30px rgba(0,0,0,0.08)"; tooltip.style.pointerEvents = "none"; tooltip.style.opacity = "0"; tooltip.style.transition = "opacity 0.2s ease"; container.appendChild(tooltip); const leftMargin = 100; const rightMargin = 100; const usableWidth = width - leftMargin - rightMargin; const xStep = usableWidth / (data.length - 1); const years = [...new Set(data.map(d => d.date))]; const periods = 3; // 3 cuatrimestres por año const sectionWidth = (width - 100) / years.length; const yearWidth = usableWidth / years.length; years.forEach((year, i) => { const xStart = leftMargin + i * yearWidth; const xCenter = xStart + yearWidth / 2; // 🟧 CAJA DEL AÑO const yearBox = document.createElementNS("http://www.w3.org/2000/svg", "rect"); yearBox.setAttribute("x", xStart); yearBox.setAttribute("y", 0); yearBox.setAttribute("width", yearWidth); yearBox.setAttribute("height", height); yearBox.setAttribute("fill", "none"); yearBox.setAttribute("stroke", palette.grid); yearBox.setAttribute("stroke-width", "1"); group.appendChild(yearBox); // 🟧 CUATRIMESTRES (FONDO) for (let q = 0; q < periods; q++) { const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect"); rect.setAttribute("x", xStart + q * (yearWidth / periods)); rect.setAttribute("y", 0); rect.setAttribute("width", yearWidth / periods); rect.setAttribute("height", height); rect.setAttribute("fill", q % 2 === 0 ? "rgba(255,255,255,0.03)" : "rgba(0,0,0,0.03)" ); group.appendChild(rect); } // 🟧 LÍNEAS DE DIVISIÓN for (let q = 1; q < periods; q++) { const qx = xStart + q * (yearWidth / periods); const qLine = document.createElementNS("http://www.w3.org/2000/svg", "line"); qLine.setAttribute("x1", qx); qLine.setAttribute("x2", qx); qLine.setAttribute("y1", 0); qLine.setAttribute("y2", height); qLine.setAttribute("stroke", "rgba(124,45,18,0.25)"); qLine.setAttribute("stroke-width", "1"); qLine.setAttribute("stroke-dasharray", "3 3"); qLine.setAttribute("opacity", "0.7"); group.appendChild(qLine); } // 🟧 ETIQUETAS DE LOS CUATRIMESTRES const labels = [ "Ene–Abr", "May–Ago", "Sep–Dic" ]; for (let q = 0; q < periods; q++) { const label = document.createElementNS( "http://www.w3.org/2000/svg", "text" ); label.setAttribute( "x", xStart + (q + 0.5) * (yearWidth / periods) ); label.setAttribute("y", 52); label.setAttribute("text-anchor", "middle"); label.setAttribute("font-size", "12"); label.setAttribute("font-weight", "600"); label.setAttribute("font-family", "Inter, sans-serif"); label.setAttribute("fill", palette.dark); label.setAttribute("opacity", "0.55"); label.textContent = labels[q]; group.appendChild(label); } // 🟧 TEXTO DEL AÑO const yearLabel = document.createElementNS("http://www.w3.org/2000/svg", "text"); yearLabel.setAttribute("x", xCenter); yearLabel.setAttribute("y", 22); yearLabel.setAttribute("text-anchor", "middle"); yearLabel.setAttribute("font-size", "26"); yearLabel.setAttribute("font-weight", "600"); yearLabel.setAttribute("fill", palette.dark); yearLabel.setAttribute("opacity", "0.15"); yearLabel.textContent = year; yearLabel.style.pointerEvents = "none"; group.appendChild(yearLabel); }); // línea central const line = document.createElementNS("http://www.w3.org/2000/svg", "line"); line.setAttribute("x1", leftMargin); line.setAttribute("x2", width - rightMargin); line.setAttribute("y1", height / 2); line.setAttribute("y2", height / 2); line.setAttribute("stroke", palette.line); line.setAttribute("stroke-width", "1.5"); line.setAttribute("stroke-opacity", "0.5"); line.setAttribute("stroke-dasharray", "4 4"); group.appendChild(line); const tracker = document.createElementNS( "http://www.w3.org/2000/svg", "line" ); tracker.style.pointerEvents = "none"; tracker.setAttribute("y1", 0); tracker.setAttribute("y2", height); tracker.setAttribute("stroke", "#ea580c"); tracker.setAttribute("stroke-width", "1"); tracker.setAttribute("stroke-dasharray", "4 4"); tracker.setAttribute("opacity", "0"); group.appendChild(tracker); const positionCounter = {}; data.forEach((d, i) => { // puedes ajustar esto después con precisión real const periodIndex = d.period ?? 1; const yearIndex = years.indexOf(d.date); const key = `${d.date}-${d.period}`; if (!positionCounter[key]) { positionCounter[key] = []; } positionCounter[key].push(d); const duplicateIndex = positionCounter[key].length - 1; const separation = 40; const duplicateOffset = (duplicateIndex - 1) * separation; const x = leftMargin + yearIndex * yearWidth + periodIndex * (yearWidth / periods) + (yearWidth / periods) / 2 + duplicateOffset; const offset = (i % 2 === 0) ? 0 : 20; const y = d.type === "proceso" ? height / 2 - (100 + offset) : height / 2 + (100 + offset); // línea vertical (conector) const connector = document.createElementNS("http://www.w3.org/2000/svg", "line"); connector.setAttribute("x1", x); connector.setAttribute("x2", x); connector.setAttribute("y1", height/2); connector.setAttribute("y2", y); connector.setAttribute("stroke", palette.dark); connector.setAttribute("stroke-opacity", "0.25"); connector.setAttribute("stroke-width", "1.2"); group.appendChild(connector); // definir color original const originalColor = d.type === "proceso" ? palette.primary : palette.secondary; // =============================== // BANDERA CIRCULAR // =============================== // borde blanco const circle = document.createElementNS( "http://www.w3.org/2000/svg", "circle" ); circle.setAttribute("cx", x); circle.setAttribute("cy", y); circle.setAttribute("r", 11); circle.setAttribute("fill", "white"); circle.setAttribute("stroke", "#ffffff"); circle.setAttribute("stroke-width", "2"); group.appendChild(circle); const clip = document.createElementNS( "http://www.w3.org/2000/svg", "clipPath" ); clip.setAttribute("id", `clip-${i}`); const clipCircle = document.createElementNS( "http://www.w3.org/2000/svg", "circle" ); clipCircle.setAttribute("cx", x); clipCircle.setAttribute("cy", y); clipCircle.setAttribute("r", 10); clip.appendChild(clipCircle); defs.appendChild(clip); // imagen const img = document.createElementNS( "http://www.w3.org/2000/svg", "image" ); console.log("Ciudad:", d.city); console.log("Bandera:", cityFlags[d.city]); img.setAttributeNS( "http://www.w3.org/1999/xlink", "href", cityFlags[d.city] ); img.setAttribute( "href", cityFlags[d.city] ); img.setAttribute( "clip-path", `url(#clip-${i})` ); img.setAttribute("width", 40); img.setAttribute("height", 40); img.setAttribute("x", x - 20); img.setAttribute("y", y - 20); img.style.pointerEvents = "none"; group.appendChild(img); circle.style.transition = "r 0.3s ease, fill 0.3s ease, transform 0.3s ease"; // hover circle.addEventListener("mouseenter", (event) => { isHoveringCircle = true; circle.setAttribute("r",13); img.setAttribute("x", x-20); img.setAttribute("y", y-20); img.setAttribute("width",42); img.setAttribute("height",42); clipCircle.setAttribute("r",12); tooltip.style.opacity = "1"; tooltip.innerHTML = `

${d.title}

${d.desc}

${d.extra || ""}

\n Colectivos Urbanos\n

\n\n

\n Explora las iniciativas urbanas desarrolladas en distintas ciudades de Bolivia dentro del proyecto Entramados Urbanos en Ciudades con Derechos.\n

\n`\n ","pinned":false,"hidden":false,"mode":"ojs"},{"id":124,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":126,"value":"\ngraficoSeleccionado = {\n if (!colectivoSeleccionado) {\n return html`\n

\n Selecciona un colectivo 👆\n

\n `;\n }\n\n if (colectivoSeleccionado === \"bolivia\") {\n return html`${chartBolivia()}`;\n}\n \n if (colectivoSeleccionado === \"elalto\") {\n return html`${chartElAlto()}`;\n}\n\n if (colectivoSeleccionado === \"lapaz\") {\n return html`${chartLaPaz()}`;\n}\n\n if (colectivoSeleccionado === \"sucre\") {\n return html`${chartSucre()}`;\n}\n if (colectivoSeleccionado === \"potosi\") {\n return html`${chartPotosí()}`;\n}\n if (colectivoSeleccionado === \"cochabamba\") {\n return html`${chartCochabamba()}`;\n}\n if (colectivoSeleccionado === \"oruro\") {\n return html`${chartOruro()}`;\n}\n if (colectivoSeleccionado === \"tarija\") {\n return html`${chartTarija()}`;\n}\n \n return html`\n

\n Aún no hay gráfico para ${colectivoSeleccionado}\n

\n `;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":0,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":696,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":427,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":700,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":584,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":704,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":630,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":710,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":640,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":714,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":660,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs"},{"id":718,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs"},{"id":669,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs"},{"id":723,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs"},{"id":727,"value":"todoslosdatos = [\n ...elaltodata,\n ...lapazdata,\n ...cochabambadata,\n ...sucredata,\n ...orurodata,\n ...potosidata,\n ...tarijadata\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":732,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W3f","stdlib":"1","titling":"auto"}