Mindmap radial \u2014 Alumnado<\/title>\n <style>\n :root {\n --bg: #0f1724;\n --card: #0b1220;\n --accent: #3b82f6;\n --muted: #cbd5e1;\n }\n html, body {\n height: 100%;\n margin: 0;\n padding: 0;\n background: white;\n }\n #app {\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n svg {\n width: 100%;\n height: 100%;\n }\n .node {\n cursor: pointer;\n }\n .node circle {\n fill: #313BF5;\n }\n .node rect {\n fill: #5489EC;\n }\n .label {\n font-family: sans-serif;\n font-weight: 600;\n fill: white;\n text-anchor: middle;\n pointer-events: none;\n dominant-baseline: middle;\n alignment-baseline: middle;\n }\n .link {\n stroke: #2563eb;\n stroke-width: 1.5;\n fill: none;\n }\n <\/style>\n<\/head>\n<body>\n <div id=\"app\">\n <svg viewBox=\"0 0 1400 600\" preserveAspectRatio=\"xMidYMid meet\"><\/svg>\n <\/div>\n\n <script>\n const svg = document.querySelector(\"svg\");\n const W = 1400, H = 600;\n const scaleY = 1000 \/ 600;\n const shiftY = (0.28 * scaleY + 0.7 * scaleY) \/ 2 - 0.5;\n\n const layout = {\n \"Alumnado\": [0.5 - 0.075, 0.5 * scaleY - shiftY],\n \"Consejo Escolar\": [0.5 + 0.18 * Math.cos(Math.PI \/ 2) - 0.075, (0.5 + 0.18 * Math.sin(Math.PI \/ 2)) * scaleY - shiftY + 0.06],\n \"AMPA\": [0.5 + 0.18 * Math.cos(5 * Math.PI \/ 6) - 0.075, (0.5 + 0.18 * Math.sin(5 * Math.PI \/ 6)) * scaleY - shiftY],\n \"Secretaria\": [0.5 + 0.18 * Math.cos(7 * Math.PI \/ 6) - 0.075, (0.5 + 0.18 * Math.sin(7 * Math.PI \/ 6)) * scaleY - shiftY],\n \"Directora\": [0.5 + 0.18 * Math.cos(3 * Math.PI \/ 2) - 0.075, (0.5 + 0.18 * Math.sin(3 * Math.PI \/ 2)) * scaleY - shiftY - 0.06],\n \"Jefe de Estudios\": [0.5 + 0.18 * Math.cos(11 * Math.PI \/ 6) - 0.075, (0.5 + 0.18 * Math.sin(11 * Math.PI \/ 6)) * scaleY - shiftY],\n \"Claustro\": [0.5 + 0.18 * Math.cos(Math.PI \/ 6) - 0.075, (0.5 + 0.18 * Math.sin(Math.PI \/ 6)) * scaleY - shiftY],\n \"Dpto. Orientaci\u00f3n\": [0.82 - 0.075, 0.28 * scaleY - shiftY],\n \"Dpto. Extraescolares\": [0.82 - 0.075, 0.36 * scaleY - shiftY],\n \"Junta de Delegados\": [0.82 - 0.075, 0.44 * scaleY - shiftY],\n \"Tutores\": [0.82 - 0.075, 0.52 * scaleY - shiftY],\n \"Coordinaci\u00f3n\": [0.82 - 0.075, 0.62 * scaleY - shiftY],\n \"CCP\": [0.82 - 0.075, 0.7 * scaleY - shiftY],\n \"TIC\": [0.95 - 0.075, 0.55 * scaleY - shiftY],\n \"Bienestar\": [0.95 - 0.075, 0.62 * scaleY - shiftY],\n \"Biling\u00fce\": [0.95 - 0.075, 0.69 * scaleY - shiftY],\n \"Enfermer\u00eda\": [0.2 - 0.075, 0.37 * scaleY - shiftY],\n \"PAS\": [0.2 - 0.075, 0.45 * scaleY - shiftY]\n };\n\n const links = [\n [\"Alumnado\", \"Directora\"],\n [\"Alumnado\", \"Secretaria\"],\n [\"Alumnado\", \"AMPA\"],\n [\"Alumnado\", \"Consejo Escolar\"],\n [\"Alumnado\", \"Jefe de Estudios\"],\n [\"Alumnado\", \"Claustro\"],\n [\"Secretaria\", \"Enfermer\u00eda\"],\n [\"Secretaria\", \"PAS\"],\n [\"Jefe de Estudios\", \"Dpto. Orientaci\u00f3n\"],\n [\"Jefe de Estudios\", \"Dpto. Extraescolares\"],\n [\"Jefe de Estudios\", \"Junta de Delegados\"],\n [\"Jefe de Estudios\", \"Tutores\"],\n [\"Claustro\", \"Coordinaci\u00f3n\"],\n [\"Claustro\", \"CCP\"],\n [\"Coordinaci\u00f3n\", \"TIC\"],\n [\"Coordinaci\u00f3n\", \"Bienestar\"],\n [\"Coordinaci\u00f3n\", \"Biling\u00fce\"],\n [\"Secretaria\", \"Directora\"],\n [\"Secretaria\", \"AMPA\"],\n [\"AMPA\", \"Consejo Escolar\"],\n [\"Claustro\", \"Consejo Escolar\"],\n [\"Claustro\", \"Jefe de Estudios\"],\n [\"Directora\", \"Jefe de Estudios\"],\n ];\n\n \/\/ Draw links\n links.forEach(([a, b]) => {\n const [x1, y1] = layout[a];\n const [x2, y2] = layout[b];\n const line = document.createElementNS(\"http:\/\/www.w3.org\/2000\/svg\", \"line\");\n line.classList.add(\"link\");\n line.setAttribute(\"x1\", x1 * W);\n line.setAttribute(\"y1\", y1 * H);\n line.setAttribute(\"x2\", x2 * W);\n line.setAttribute(\"y2\", y2 * H);\n svg.appendChild(line);\n });\n\n const nodes = {};\n\n const createNode = (id) => {\n const [x, y] = layout[id];\n const g = document.createElementNS(\"http:\/\/www.w3.org\/2000\/svg\", \"g\");\n g.classList.add(\"node\");\n const px = x * W, py = y * H;\n g.dataset.x = px;\n g.dataset.y = py;\n g.setAttribute(\"transform\", `translate(${px},${py})`);\n\n let shape;\n if ([\"Alumnado\", \"Directora\", \"Secretaria\", \"AMPA\", \"Consejo Escolar\", \"Jefe de Estudios\", \"Claustro\"].includes(id)) {\n shape = document.createElementNS(\"http:\/\/www.w3.org\/2000\/svg\", \"circle\");\n const r = id === \"Alumnado\" ? 90 : 70;\n shape.setAttribute(\"r\", r);\n g.appendChild(shape);\n } else {\n shape = document.createElementNS(\"http:\/\/www.w3.org\/2000\/svg\", \"rect\");\n const width = [\"TIC\", \"Bienestar\", \"Biling\u00fce\"].includes(id) ? 120 : 180;\n const height = [\"TIC\", \"Bienestar\", \"Biling\u00fce\"].includes(id) ? 40 : 50;\n shape.setAttribute(\"x\", -width \/ 2);\n shape.setAttribute(\"y\", -height \/ 2);\n shape.setAttribute(\"width\", width);\n shape.setAttribute(\"height\", height);\n shape.setAttribute(\"rx\", 10);\n g.appendChild(shape);\n }\n\n const label = document.createElementNS(\"http:\/\/www.w3.org\/2000\/svg\", \"text\");\n label.classList.add(\"label\");\n\n if (id === \"Alumnado\") {\n label.setAttribute(\"font-size\", \"30px\");\n } else if ([\"Consejo Escolar\", \"AMPA\", \"Secretaria\", \"Directora\", \"Jefe de Estudios\", \"Claustro\"].includes(id)) {\n label.setAttribute(\"font-size\", \"21px\");\n }\n\n if (id === \"Consejo Escolar\" || id === \"Jefe de Estudios\") {\n const lines = id === \"Consejo Escolar\" ? [\"Consejo\", \"Escolar\"] : [\"Jefe de\", \"Estudios\"];\n lines.forEach((t, i) => {\n const span = document.createElementNS(\"http:\/\/www.w3.org\/2000\/svg\", \"tspan\");\n span.textContent = t;\n span.setAttribute(\"x\", 0);\n span.setAttribute(\"dy\", i === 0 ? \"-0.3em\" : \"1.2em\");\n label.appendChild(span);\n });\n } else {\n label.textContent = id;\n }\n\n g.appendChild(label);\n svg.appendChild(g);\n nodes[id] = g;\n };\n\n Object.keys(layout).forEach(createNode);\n\n \/\/ === Spring animation (NOT for Alumnado) ===\n const springs = new Map();\n const stiffness = 0.05;\n const damping = 0.9;\n\n function animate() {\n for (const [g, s] of springs.entries()) {\n const dx = s.targetX - s.x;\n const dy = s.targetY - s.y;\n const ax = dx * stiffness;\n const ay = dy * stiffness;\n s.vx = s.vx * damping + ax;\n s.vy = s.vy * damping + ay;\n s.x += s.vx;\n s.y += s.vy;\n g.setAttribute(\"transform\", `translate(${s.x},${s.y})`);\n }\n requestAnimationFrame(animate);\n }\n animate();\n\n Object.values(nodes).forEach(g => {\n \/\/ Disable spring for Alumnado\n if (g === nodes[\"Alumnado\"]) return;\n\n const baseX = parseFloat(g.dataset.x);\n const baseY = parseFloat(g.dataset.y);\n springs.set(g, { x: baseX, y: baseY, vx: 0, vy: 0, targetX: baseX, targetY: baseY });\n\n g.addEventListener(\"mousemove\", e => {\n const pt = svg.createSVGPoint();\n pt.x = e.clientX;\n pt.y = e.clientY;\n const svgPt = pt.matrixTransform(svg.getScreenCTM().inverse());\n const dx = svgPt.x - baseX;\n const dy = svgPt.y - baseY;\n const dist = Math.sqrt(dx * dx + dy * dy);\n const maxDist = 100;\n const force = Math.max(0, (maxDist - dist) \/ maxDist);\n const angle = Math.atan2(dy, dx);\n const offset = 15 * force;\n const targetX = baseX - Math.cos(angle) * offset;\n const targetY = baseY - Math.sin(angle) * offset;\n const s = springs.get(g);\n s.targetX = targetX;\n s.targetY = targetY;\n });\n\n g.addEventListener(\"mouseleave\", () => {\n const s = springs.get(g);\n s.targetX = baseX;\n s.targetY = baseY;\n });\n });\n\n \/\/ === Smooth Scale Animation ONLY for Alumnado ===\n const alumnado = nodes[\"Alumnado\"];\n let scale = 1;\n let scaleTarget = 1;\n let scaleVel = 0;\n\n function animateScale() {\n const stiffness = 0.04;\n const damping = 0.85;\n\n const ds = scaleTarget - scale;\n const accel = ds * stiffness;\n\n scaleVel = scaleVel * damping + accel;\n scale += scaleVel;\n\n alumnado.setAttribute(\n \"transform\",\n `translate(${alumnado.dataset.x},${alumnado.dataset.y}) scale(${scale})`\n );\n\n requestAnimationFrame(animateScale);\n }\n animateScale();\n\n alumnado.addEventListener(\"mouseenter\", () => {\n scaleTarget = 1.06; \/\/ gentle growth\n });\n\n alumnado.addEventListener(\"mouseleave\", () => {\n scaleTarget = 1; \/\/ return to normal\n });\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<p>Nuestra historia comienza en 2019, cuando abrimos nuestras puertas como un centro biling\u00fce con la visi\u00f3n de ofrecer una educaci\u00f3n moderna y adaptada a los desaf\u00edos del siglo XXI. Desde nuestros inicios, hemos trabajado con el objetivo de construir un espacio de aprendizaje innovador, flexible y ambicioso, que genere oportunidades reales para que cada estudiante alcance sus metas acad\u00e9micas y personales. Nuestras instalaciones reflejan esta filosof\u00eda: amplias, modernas, equipadas con tecnolog\u00eda de vanguardia y dise\u00f1adas para el bienestar y la colaboraci\u00f3n, creando un entorno ideal para el trabajo en equipo y el desarrollo integral del alumnado.<\/p>\n\n\n\n<p>El coraz\u00f3n de nuestro proyecto es nuestro equipo, un grupo din\u00e1mico, comprometido y en constante formaci\u00f3n, que impulsa y acompa\u00f1a el crecimiento de nuestros estudiantes. Ellos, a su vez, son la raz\u00f3n de ser de nuestro centro: cada acci\u00f3n, cada metodolog\u00eda y cada recurso est\u00e1n pensados para potenciar su aprendizaje, motivaci\u00f3n y \u00e9xito. Con un enfoque centrado en la innovaci\u00f3n educativa y la excelencia, buscamos no solo ense\u00f1ar, sino inspirar a cada alumno a explorar su potencial y enfrentar los retos del futuro con confianza y creatividad.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Nuestro centro en fotos<\/h2>\n\n\n\n","protected":false},"excerpt":{"rendered":"<p>Nuestra Comunidad Mindmap radial \u2014 Alumnado Nuestra historia comienza en 2019, cuando abrimos nuestras puertas como un centro biling\u00fce con la visi\u00f3n de ofrecer una educaci\u00f3n moderna y adaptada a …<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":1,"comment_status":"closed","ping_status":"closed","template":"template-fullwidth.php","meta":{"footnotes":""},"folder":[40],"class_list":["post-2107","page","type-page","status-publish","hentry"],"rttpg_featured_image_url":null,"rttpg_author":{"display_name":"tic.ies.janegoodall.madrid","author_link":"https:\/\/site.educa.madrid.org\/ies.janegoodall.madrid\/index.php\/author\/cuenta_tic-ies-janegoodall-madrid\/"},"rttpg_comment":0,"rttpg_category":" <a href=\"https:\/\/site.educa.madrid.org\/ies.janegoodall.madrid\/?taxonomy=folder&term=el-centro-1759866657-2\" rel=\"tag\">El centro<\/a>","rttpg_excerpt":"Nuestra Comunidad Mindmap radial \u2014 Alumnado Nuestra historia comienza en 2019, cuando abrimos nuestras puertas como un centro biling\u00fce con la visi\u00f3n de ofrecer una educaci\u00f3n moderna y adaptada a ...","post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/site.educa.madrid.org\/ies.janegoodall.madrid\/index.php\/wp-json\/wp\/v2\/pages\/2107","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/site.educa.madrid.org\/ies.janegoodall.madrid\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/site.educa.madrid.org\/ies.janegoodall.madrid\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/site.educa.madrid.org\/ies.janegoodall.madrid\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/site.educa.madrid.org\/ies.janegoodall.madrid\/index.php\/wp-json\/wp\/v2\/comments?post=2107"}],"version-history":[{"count":50,"href":"https:\/\/site.educa.madrid.org\/ies.janegoodall.madrid\/index.php\/wp-json\/wp\/v2\/pages\/2107\/revisions"}],"predecessor-version":[{"id":4096,"href":"https:\/\/site.educa.madrid.org\/ies.janegoodall.madrid\/index.php\/wp-json\/wp\/v2\/pages\/2107\/revisions\/4096"}],"wp:attachment":[{"href":"https:\/\/site.educa.madrid.org\/ies.janegoodall.madrid\/index.php\/wp-json\/wp\/v2\/media?parent=2107"}],"wp:term":[{"taxonomy":"folder","embeddable":true,"href":"https:\/\/site.educa.madrid.org\/ies.janegoodall.madrid\/index.php\/wp-json\/wp\/v2\/folder?post=2107"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}