Début des travaux du Garden Side sur la place Montsifrot à La Mézière

/* Petit ajustement visuel sans images, compatible Tailwind via CDN */ :focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; } .legend-dot { width:12px; height:12px; display:inline-block; border-radius:2px; margin-right:6px; vertical-align:middle; }

Visualisation interactive des étapes et de l’aménagement du Garden Side sur la place Montsifrot. Sélectionnez une phase pour voir les superficies, le coût et les plantations prévues; observez la carte illustrative et la répartition des travaux.

(function () { // Données internes (facilement éditables) const phases = [ { id: ‘plan’, name: ‘Conception et planification’, year: ‘2023-2024’, area: 0.25, cost: 0.8, plantations: { arbres: 8, arbustes: 12, massifs: 5 }, notes: ‘Esquisses et permis préliminaires.’ }, { id: ‘etudes’, name: ‘Études et permis’, year: ‘2024-2025’, area: 0.40, cost: 0.9, plantations: { arbres: 12, arbustes: 25, massifs: 10 }, notes: ‘Validation des études de faisabilité.’ }, { id: ‘travaux’, name: ‘Début des travaux’, year: ‘2025-2026’, area: 0.70, cost: 1.6, plantations: { arbres: 50, arbustes: 70, massifs: 30 }, notes: ‘Installation des structures et plantations majeures.’ }, { id: ‘fin’, name: ‘Finitions et végétalisation’, year: ‘2026-2027’, area: 0.95, cost: 0.7, plantations: { arbres: 25, arbustes: 60, massifs: 20 }, notes: ‘Plantations finales et aménagements paysagers.’ } ]; const COLORS = { arbres: ‘#065f46’, // Vert foncé arbustes: ‘#16a34a’, // Vert moyen massifs: ‘#8b5e3c’ // Marron clair }; const GRID_SIZE = 6; // 6×6 grille sur la carte const CELL = 360 / GRID_SIZE; // taille cellule SVG // Sélectionner les éléments const carteSvg = document.getElementById(‘carte’); const phasesContainer = document.getElementById(‘phases’); const statusPhase = document.getElementById(‘status-phase’); const valArea = document.getElementById(‘val-area’); const valCost = document.getElementById(‘val-cost’); const valPlantations = document.getElementById(‘val-plantations’); const donutSvg = document.getElementById(‘donut’); const donutLegend = document.getElementById(‘donut-legend’); const apiButton = document.getElementById(‘btn-api’); const apiStatus = document.getElementById(‘description’); // réutilisée comme description dynamique let currentPhaseIndex = 2; // début des travaux comme phase par défaut // Helpers function format(value, unit) { if (typeof value !== ‘number’) return value; if (unit === ‘ha’) return value.toFixed(2); if (unit === ‘M€’) return value.toFixed(1); return value.toString(); } function renderPhases() { phasesContainer.innerHTML =  »; phases.forEach((p, idx) => { const btn = document.createElement(‘button’); btn.setAttribute(‘type’, ‘button’); btn.textContent = p.name; btn.className = ‘px-3 py-1 rounded-full text-sm focus:outline-none border’; btn.style.borderColor = idx === currentPhaseIndex ? ‘#2563eb’ : ‘#d1d5db’; btn.style.backgroundColor = idx === currentPhaseIndex ? ‘#e0f2fe’ : ‘#f8fafc’; btn.setAttribute(‘aria-pressed’, String(idx === currentPhaseIndex)); btn.addEventListener(‘click’, () => { currentPhaseIndex = idx; updateDisplay(); }); phasesContainer.appendChild(btn); }); } // Carte 6×6: coloration par phase (pattern simple et déterministe) function fillCellColor(i, phaseIndex) { // on alterne subtilement les couleurs pour refléter progression const seed = (i + phaseIndex * 7) % 4; switch (seed) { case 0: return ‘#4ade80’; // jardin case 1: return ‘#93c5fd’; // chemin case 2: return ‘#f8d34d’; // aire de jeux default: return ‘#cbd5e1’; // neutre/sol } } function renderCarte(phaseIndex) { carteSvg.innerHTML =  »; for (let r = 0; r < GRID_SIZE; r++) { for (let c = 0; c < GRID_SIZE; c++) { const idx = r * GRID_SIZE + c; const x = c * CELL; const y = r * CELL; const fill = fillCellColor(idx, phaseIndex); const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect'); rect.setAttribute('x', x); rect.setAttribute('y', y); rect.setAttribute('width', CELL); rect.setAttribute('height', CELL); rect.setAttribute('fill', fill); rect.setAttribute('stroke', '#ffffff'); rect.setAttribute('stroke-width', '2'); // Accessibilité: description par parcelle const parcelle = idx + 1; const title = document.createElementNS('http://www.w3.org/2000/svg', 'title'); title.textContent = 'Parcelle ' + parcelle + ' — type: ' + (phaseIndex % 3 === 0 ? 'Jardin' : (phaseIndex % 3 === 1 ? 'Chemin' : 'Aire de jeux')); rect.appendChild(title); carteSvg.appendChild(rect); } } } // Donut: segments pour arbres, arbustes, massifs function polarToCartesian(cx, cy, r, angleRad) { return { x: cx + r * Math.cos(angleRad), y: cy + r * Math.sin(angleRad) }; } function describeArcPath(cx, cy, innerR, outerR, startAngle, endAngle) { const startOuter = polarToCartesian(cx, cy, outerR, endAngle); const endOuter = polarToCartesian(cx, cy, outerR, startAngle); const startInner = polarToCartesian(cx, cy, innerR, endAngle); const endInner = polarToCartesian(cx, cy, innerR, startAngle); const largeArcFlag = endAngle – startAngle { const portion = total > 0 ? (s.value / total) * Math.PI * 2 : 0; const end = start + portion; if (portion > 0) { const path = document.createElementNS(‘http://www.w3.org/2000/svg’, ‘path’); path.setAttribute(‘d’, describeArcPath(cx, cy, innerR, outerR, start, end)); path.setAttribute(‘fill’, s.color); path.setAttribute(‘stroke’, ‘#ffffff’); path.setAttribute(‘stroke-width’, ‘1’); donutSvg.appendChild(path); } start = end; }); // Si total est 0, afficher une rond simple if (total === 0) { const circle = document.createElementNS(‘http://www.w3.org/2000/svg’, ‘circle’); circle.setAttribute(‘cx’, cx); circle.setAttribute(‘cy’, cy); circle.setAttribute(‘r’, innerR); circle.setAttribute(‘fill’, ‘#e5e7eb’); donutSvg.appendChild(circle); } } // Mise à jour générale function updateDisplay() { renderCarte(currentPhaseIndex); renderDonut(currentPhaseIndex); // Mettre à jour les chiffres clés const p = phases[currentPhaseIndex]; valArea.textContent = format(p.area, ‘ha’); valCost.textContent = format(p.cost, ‘M€’); valPlantations.textContent = `${p.plantations.arbres} / ${p.plantations.arbustes} / ${p.plantations.massifs}`; statusPhase.textContent = ‘Phase actuelle: ‘ + p.name; } // Fonction d’initialisation function init() { renderPhases(); // Bouton API (utilisation facultative d’une API publique gratuite) apiButton.addEventListener(‘click’, async () => { apiButton.disabled = true; apiButton.textContent = ‘Chargement…’; // Utilisation d’une API publique gratuite: https://api.publicapis.org/entries const API_URL = ‘https://api.publicapis.org/entries’; try { const resp = await fetch(API_URL); const data = await resp.json(); const first = data?.entries?.[0]; const label = first?.API ?? ‘API’; // Mettre à jour un texte descriptive dans la section description apiStatus.textContent = `Données publiques: ${label} (${first?.Category ?? ‘Catégorie’})`; apiButton.textContent = ‘Actualiser données publiques’; apiButton.disabled = false; } catch (err) { apiStatus.textContent = ‘Échec du chargement des données publiques’; apiButton.textContent = ‘Actualiser données publiques’; apiButton.disabled = false; } }); // Générer les boutons des phases et les interactions renderPhases(); // Appliquer la phase par défaut updateDisplay(); // Gestion du focus et accessibilité: permettre d’utiliser les flèches pour changer de phase // Ici, on écoute les touches sur le conteneur des phases phasesContainer.addEventListener(‘keydown’, (e) => { if (e.key === ‘ArrowRight’) { currentPhaseIndex = (currentPhaseIndex + 1) % phases.length; updateDisplay(); renderPhases(); } else if (e.key === ‘ArrowLeft’) { currentPhaseIndex = (currentPhaseIndex – 1 + phases.length) % phases.length; updateDisplay(); renderPhases(); } }); } // Lancer l’init une fois le DOM prêt if (document.readyState === ‘loading’) { document.addEventListener(‘DOMContentLoaded’, init); } else { init(); } })();