31: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; }32:T4b3f,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; 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++; } const originalY = d.type === "proceso" ? height / 2 - 100 : height / 2 + 100; allPositions.push({ x, y }); // 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); const wasMoved = level > 0; let textAbove; if (d.type === "proceso") { // Proceso: // sin mover -> abajo // movido -> arriba textAbove = wasMoved; } else { // Iniciativa: // sin mover -> arriba // movido -> abajo textAbove = !wasMoved; } let textY = textAbove ? y - 30 : y + 30; const titleWidth = 140; const titleHeight = 25; const titleCollision = allPositions.some(c => { // Ignorar la propia bolita if (c.x === x && c.y === y) return false; return ( Math.abs(c.x - x) < titleWidth / 2 && Math.abs(c.y - textY) < titleHeight ); }); 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: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" }, ]34:T4b45,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; 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++; } const originalY = d.type === "proceso" ? height / 2 - 100 : height / 2 + 100; allPositions.push({ x, y }); // 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); const wasMoved = level > 0; let textAbove; if (d.type === "proceso") { // Proceso: // sin mover -> abajo // movido -> arriba textAbove = wasMoved; } else { // Iniciativa: // sin mover -> arriba // movido -> abajo textAbove = !wasMoved; } let textY = textAbove ? y - 30 : y + 30; const titleWidth = 140; const titleHeight = 25; const titleCollision = allPositions.some(c => { // Ignorar la propia bolita if (c.x === x && c.y === y) return false; return ( Math.abs(c.x - x) < titleWidth / 2 && Math.abs(c.y - textY) < titleHeight ); }); 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: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" } ]36:T4b41,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; 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++; } const originalY = d.type === "proceso" ? height / 2 - 100 : height / 2 + 100; allPositions.push({ x, y }); // 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); const wasMoved = level > 0; let textAbove; if (d.type === "proceso") { // Proceso: // sin mover -> abajo // movido -> arriba textAbove = wasMoved; } else { // Iniciativa: // sin mover -> arriba // movido -> abajo textAbove = !wasMoved; } let textY = textAbove ? y - 30 : y + 30; const titleWidth = 140; const titleHeight = 25; const titleCollision = allPositions.some(c => { // Ignorar la propia bolita if (c.x === x && c.y === y) return false; return ( Math.abs(c.x - x) < titleWidth / 2 && Math.abs(c.y - textY) < titleHeight ); }); 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:T1764,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, en diciembre, permitió incorporar capacidades técnicas y profesionales a los procesos impulsados por el colectivo; bajo la modalidad de voluntariado y activismo de jóvenes profesionales en ejercicio legal.", 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 Barrio 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, (Parte 1), incorporando diagnósticos, mapas y propuestas de mejoramiento urbano para futuras réplicas en otros barrios.", type: "proceso" }, { date: "2026", period: 1, city: "sucre", title: "URBIS: identidad del equipo investigador", desc: "Urbanismo Renovador de Barrios con integración Social. Es el significado de la sigla adoptada mediante concurso interno y consenso de grupo.", extra: "La ampliación del equipo base, de arquitectos, y la participación de varias carreras de especialidad de la UMSFXCH, lleva a generar un EQUIPO TÉCNICO MULTIDICIPLINARIO que se suma a la investigación para complementar distintas áreas como Economía, Sociología, Pedagogía, Arquitectura, COmunicaciones, y otras, con quienes se tendrá el trabajo concluido en su Parte 2.", type: "proceso" } ]38:T4b45,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; 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++; } const originalY = d.type === "proceso" ? height / 2 - 100 : height / 2 + 100; allPositions.push({ x, y }); // 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); const wasMoved = level > 0; let textAbove; if (d.type === "proceso") { // Proceso: // sin mover -> abajo // movido -> arriba textAbove = wasMoved; } else { // Iniciativa: // sin mover -> arriba // movido -> abajo textAbove = !wasMoved; } let textY = textAbove ? y - 30 : y + 30; const titleWidth = 140; const titleHeight = 25; const titleCollision = allPositions.some(c => { // Ignorar la propia bolita if (c.x === x && c.y === y) return false; return ( Math.abs(c.x - x) < titleWidth / 2 && Math.abs(c.y - textY) < titleHeight ); }); 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: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" } ]3a:T4b4f,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; 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++; } const originalY = d.type === "proceso" ? height / 2 - 100 : height / 2 + 100; allPositions.push({ x, y }); // 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); const wasMoved = level > 0; let textAbove; if (d.type === "proceso") { // Proceso: // sin mover -> abajo // movido -> arriba textAbove = wasMoved; } else { // Iniciativa: // sin mover -> arriba // movido -> abajo textAbove = !wasMoved; } let textY = textAbove ? y - 30 : y + 30; const titleWidth = 140; const titleHeight = 25; const titleCollision = allPositions.some(c => { // Ignorar la propia bolita if (c.x === x && c.y === y) return false; return ( Math.abs(c.x - x) < titleWidth / 2 && Math.abs(c.y - textY) < titleHeight ); }); 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:T1944,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: 1, 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. Se ha logrado como resultado principal aportar en situar en la agenda pública la temática de los bosques urbanos en el municipio de Cochabamba.", type: "iniciativa" }, { date: "2023", period: 2, city: "cochabamba", title: "Forestación de Área Verde", desc: "Iniciativa para recuperar un área verde en peligro de ser loteada.", extra: "Se realizo una forestacion en un area verde la OTB Faros de Aranjuez, para sensibilizar sobre la importancia de los bosques urbanos, con apoyo de los vecinos.banos, con apoyo de los vecinos.", type: "iniciativa" }, { date: "2023", period: 2, city: "cochabamba", title: "Ley Municipal 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, Team Cero Emisiones y Colectivo Urbano.", 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: 0, city: "cochabamba", title: "Cuidado y mantenimiento del área verde y bosque urbano.", desc: "Apropiación y cuidado comunitario de áreas verdes.", extra: "Con apoyo del Colegio Federico Froebel y la OTB Faros de Aranjuez, estudiantes y vecinos participan en actividades de cuidado del bosque urbano y fortalecen su responsabilidad sobre estos espacios públicos.", type: "iniciativa" }, { date: "2024", period: 2, city: "cochabamba", title: "Alianza con Centro de Biodiversidad Umss, Cesu-Umss", desc: "Vinculación con la academia para visibilizar la temática de los Bosques Urbanos.", extra: "Poner sobre la mesa del espacio público la temática de los corredores biológicos urbanos, relacionados con los bosques urbanos, a través de un espacio de difusión de conocimientos, experiencias y diálogo sobre la importancia de los mismos en el contexto del área metropolitana de Kanata.", type: "proceso" }, { date: "2025", period: 0, city: "cochabamba", title: "Proceso de elaboracion Ley municipal de Bosques urbanos", desc: "Elaboracion participativa de la iniciativa ciudadana legislativa Ley Muncipal de Bosques Urbanos para Cochabamba.", extra: "Se desarrollaron mesas de dialogo entre organizaciones de sociedad civil, la academia y la Unidad Forestal del municipio para analizar la propuesta ciudadana de Ley Municipal de Bosques Urbanos Cochabamba.: Centro de Biodiversidad y Genética, ESFOR, CESU, Asociación de Arboricultores, Unidad de Forestación del GAMC, coelctivos deportistas ambientales.", type: "proceso" }, { date: "2025", period: 1, city: "cochabamba", title: "Agenda Urbana Cochabamba Ciudad Verde", desc: "Elaboracion de un instrumento de incidencia politica y tecnica para la gestion municipal.", extra: "El colectivo elaboro y valido la Agenda Urbana Cochabamba Ciudad Verde para consolidar políticas públicas municipales de largo plazo y orientar la gestion municipal en torino a la proteccion, recuperacion y expansion de las infraestructura verde urbana.", type: "iniciativa" }, { date: "2025", period: 2, city: "cochabamba", title: "Socializacion Propuesta de Ley Municipal de Bosques Urbanos", desc: "Presentación sobre la Ley de Bosque Urbanos en el Seminario Arbolado y Silvicultura Urbana y medio ambiente, organizado por la ESFOR/UMSS.", extra: "Socializar el proceso y la importancia de la ley y visibilizar la incidencia en la defensa de los bosques urbanos y áreas verdes, desde los demás expositores del seminario.", type: "proceso" } ]3c:T4b42,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; 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++; } const originalY = d.type === "proceso" ? height / 2 - 100 : height / 2 + 100; allPositions.push({ x, y }); // 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); const wasMoved = level > 0; let textAbove; if (d.type === "proceso") { // Proceso: // sin mover -> abajo // movido -> arriba textAbove = wasMoved; } else { // Iniciativa: // sin mover -> arriba // movido -> abajo textAbove = !wasMoved; } let textY = textAbove ? y - 30 : y + 30; const titleWidth = 140; const titleHeight = 25; const titleCollision = allPositions.some(c => { // Ignorar la propia bolita if (c.x === x && c.y === y) return false; return ( Math.abs(c.x - x) < titleWidth / 2 && Math.abs(c.y - textY) < titleHeight ); }); 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:T1a3e,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; en coordinación con la Universidad Técnica de Oruro a través de la carrera de Comunicación, la Dirección de Vinculación y el Sindicato de Trabajadores de la Prensa Oruro", type: "proceso" }, { date: "2023", period: 2, city: "oruro", title: "Agenda Urbana", desc: "Inicio de articulación institucional.", extra: "Una vez identificadas las necesidades y demandas de la población, se vio la necesidad de contar con nuevas estrategias para aplicar el Derecho a la Ciudad es entonces que, en coordinacnión y reuniones con la secretaria Municipal de Ordenamiento Territorial del Municipio de Oruro se hace la propuesta de crear una agenda urbana, es así que se iniciaron gestiones con la Dirección Municipal de Ordenamiento Territorial para incorporar en el proceso a poblaciones vulnerables en la construcción de la Agenda Urbana de Oruro, promoviendo un proceso de planificación participativo e inclusivo, aplicando los Objetivos de Desarrollo Sostenible y los Componentes del Derecho a la Ciudad.", 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. Este trabajo se realizó en coordinacnión con la facultad de arquitectura y urbanismo, además cabe recalcar que se crearon espacios para la socialización de la elaboración de la Agenda Urbana como talleres, encuentros, foros, desayunos trabajo y reuniones.", 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. En esta etapa se participó en EXPOTECO (Feria del Occidente, organizada por la Universidad Técnica de Oruro) a través de un estand en el que se socializó el trabajo que se estaba realizando y se recogieron varias ideas y propuestas.", type: "proceso" }, { date: "2024", period: 1, city: "oruro", title: "Mesas Técnicas", desc: "Participación multisectorial.", extra: "Organizaciones sociales, colegios de profesionales, colectivos de jóvenes, organizaciones de mujeres, léderes de juntas vecinales, líderes de opinión, la dirección de ordenamiento territorial del gobierno autónomo municipal de Oruro GAMO y otras instituciones municipales trabajaron conjuntamente en la construcción de 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, legitimando de esa manera el documento de la Agenda Urbana.", 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, además de dialogar con autoridades municipales para que apoyen a través de un proyecto de Ley Municipal para que no sólo sea legítima la agenda Urbana sino Legal. En esta etapa también se solicitaron todos los informes, técnicos, económicos, legales para la presentación al concejo municipal. ", type: "proceso" }, { date: "2025", period: 1, city: "oruro", title: "Promulgación Agenda Urbana", desc: "Principal logro de incidencia.", extra: "Se participó en el tratamiento de la Ley Municipal para luego también, incidir para la promulgación. Se promulgó oficialmente la Agenda Urbana de Oruro como instrumento de planificación municipal 2025 - 2040", type: "iniciativa" } ]3e:T4b43,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; 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++; } const originalY = d.type === "proceso" ? height / 2 - 100 : height / 2 + 100; allPositions.push({ x, y }); // 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); const wasMoved = level > 0; let textAbove; if (d.type === "proceso") { // Proceso: // sin mover -> abajo // movido -> arriba textAbove = wasMoved; } else { // Iniciativa: // sin mover -> arriba // movido -> abajo textAbove = !wasMoved; } let textY = textAbove ? y - 30 : y + 30; const titleWidth = 140; const titleHeight = 25; const titleCollision = allPositions.some(c => { // Ignorar la propia bolita if (c.x === x && c.y === y) return false; return ( Math.abs(c.x - x) < titleWidth / 2 && Math.abs(c.y - textY) < titleHeight ); }); 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; }3f: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" } ]40: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":"$31","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":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":696,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":427,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":700,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":584,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":704,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":630,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":710,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":640,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs"},{"id":714,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs"},{"id":660,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs"},{"id":718,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs"},{"id":669,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs"},{"id":723,"value":"$3f","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":"$40","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W41","stdlib":"1","titling":"auto"}