Aman360 \u2022 Interactive Arab Risk Atlas<\/title>\n\n\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Tajawal:wght@400;600;800&family=Inter:wght@400;600;800&display=swap\" rel=\"stylesheet\">\n<link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/leaflet@1.9.4\/dist\/leaflet.css\"\/>\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/leaflet@1.9.4\/dist\/leaflet.js\"><\/script>\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js@4.4.1\"><\/script>\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/papaparse@5.4.1\/papaparse.min.js\"><\/script>\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/html2canvas@1.4.1\/dist\/html2canvas.min.js\"><\/script>\n\n<style>\n:root{--bg:#0b1224;--panel:#0f1b36;--ink:#e6f0ff;--mut:#9fb3d9;--brand:#22a3ff;--line:#21335d;--chip:#0a1531;--ok:#22c55e;--mid:#f59e0b;--bad:#ef4444}\n*{box-sizing:border-box}\nhtml,body{height:100%} body{margin:0;background:var(--bg);color:var(--ink);font-family:Tajawal,Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif}\n.container{max-width:1400px;margin:24px auto;padding:0 12px}\n.header{display:flex;gap:12px;align-items:center;justify-content:space-between;margin-bottom:12px}\n.h-title{font-weight:800;font-size:26px}\n.controls{display:flex;gap:8px;flex-wrap:wrap}\n.btn{background:var(--brand);color:#00162b;border:none;padding:10px 14px;border-radius:12px;font-weight:700;cursor:pointer}\n.btn.alt{background:#1b2f59;color:var(--ink)}\n.select,.input{background:#0a1330;border:1px solid var(--line);color:var(--ink);border-radius:10px;padding:8px 10px}\n.grid{display:grid;gap:12px}\n@media(min-width:1100px){.grid-2{grid-template-columns:1.2fr .8fr}}\n.card{background:linear-gradient(180deg,#0f1b36,#0c1630);border:1px solid var(--line);border-radius:16px;padding:12px}\n.label{color:var(--mut);font-size:12px;margin-bottom:6px}\n.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}\n.sep{height:1px;background:var(--line);border:0;margin:10px 0}\n.badge{display:inline-block;background:#12366a;color:#cfe4ff;border:1px solid #1f4c93;padding:3px 8px;border-radius:999px}\n.small{font-size:12px;color:var(--mut)}\n.status{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;border:1px solid var(--line);background:#0a1330}\n.dot{width:10px;height:10px;border-radius:50%}\n#map{height:520px;border-radius:14px;border:1px solid var(--line);overflow:hidden}\n.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}\n.kpi{background:#0a1531;border:1px solid var(--line);border-radius:12px;padding:10px}\n.kpi h3{margin:0;font-size:22px}\n.note{background:#0a1531;border:1px dashed var(--line);padding:10px;border-radius:12px}\n.table{width:100%;border-collapse:separate;border-spacing:0 8px}\n.table th,.table td{padding:8px 10px}\n.table tbody tr{background:#0a1531;border:1px solid var(--line)}\n.pill{padding:2px 8px;border-radius:999px;border:1px solid var(--line);background:#0a1330}\n.linkbar{display:flex;gap:8px;flex-wrap:wrap}\n.leaflet-tile{filter:hue-rotate(180deg) saturate(120%) brightness(90%)} \/* dark *\/\n<\/style>\n<\/head>\n<body>\n<div class=\"container\" id=\"capture\">\n <div class=\"header\">\n <div class=\"h-title\" id=\"title\">\u0623\u0637\u0644\u0633 \u0627\u0644\u0645\u062e\u0627\u0637\u0631 \u0627\u0644\u0639\u0631\u0628\u064a \u0627\u0644\u062a\u0641\u0627\u0639\u0644\u064a<\/div>\n <div class=\"controls\">\n <select id=\"lang\" class=\"select\">\n <option value=\"ar\" selected>\u0627\u0644\u0639\u0631\u0628\u064a\u0629<\/option><option value=\"en\">English<\/option>\n <\/select>\n <input type=\"file\" id=\"csv\" accept=\".csv\" class=\"select\">\n <button class=\"btn alt\" id=\"btnSample\">Load sample<\/button>\n <button class=\"btn alt\" id=\"btnPNG\">PNG<\/button>\n <button class=\"btn\" id=\"btnRun\">\u062a\u062d\u062f\u064a\u062b<\/button>\n <\/div>\n <\/div>\n\n <div class=\"grid grid-2\">\n \n <div class=\"card\">\n <div class=\"row\">\n <div>\n <div class=\"label\" data-i=\"layer\">\u0627\u0644\u0637\u0628\u0642\u0629<\/div>\n <select id=\"layer\" class=\"select\">\n <option value=\"ARI\" selected>ARI (Index)<\/option>\n <option value=\"Hazard\">Hazard<\/option>\n <option value=\"Exposure\">Exposure<\/option>\n <option value=\"Vulnerability\">Vulnerability<\/option>\n <option value=\"Resilience\">Resilience<\/option>\n <\/select>\n <\/div>\n <div>\n <div class=\"label\" data-i=\"compare\">\u0645\u0642\u0627\u0631\u0646\u0629<\/div>\n <select id=\"cmpA\" class=\"select\"><\/select>\n <select id=\"cmpB\" class=\"select\"><\/select>\n <button class=\"btn alt\" id=\"btnCompare\">Compare<\/button>\n <\/div>\n <div>\n <div class=\"label\" data-i=\"scenario\">\u0627\u0644\u0645\u062d\u0627\u0643\u0627\u0629<\/div>\n <div class=\"row\">\n <span class=\"pill\">Hazard \u0394%<\/span><input id=\"sHaz\" type=\"number\" class=\"select\" style=\"width:90px\" value=\"0\">\n <span class=\"pill\">Resilience \u0394%<\/span><input id=\"sRes\" type=\"number\" class=\"select\" style=\"width:90px\" value=\"0\">\n <button class=\"btn alt\" id=\"btnSim\">Apply<\/button>\n <button class=\"btn alt\" id=\"btnReset\">Reset<\/button>\n <\/div>\n <\/div>\n <\/div>\n <hr class=\"sep\">\n <div id=\"map\"><\/div>\n <hr class=\"sep\">\n <div class=\"linkbar\">\n <a class=\"pill\" href=\"\/tools\/cross-hazard\" target=\"_blank\">Cross-Hazard Explorer<\/a>\n <a class=\"pill\" href=\"\/tools\/global-risk-index\" target=\"_blank\">Global Risk Index<\/a>\n <a class=\"pill\" href=\"\/tools\/readiness-radar\" target=\"_blank\">Readiness Radar<\/a>\n <a class=\"pill\" href=\"\/tools\/policy-simulator\" target=\"_blank\">Policy Simulator<\/a>\n <\/div>\n <\/div>\n\n \n <div class=\"card\">\n <div class=\"kpis\">\n <div class=\"kpi\"><div class=\"label\" data-i=\"avg\">\u0645\u062a\u0648\u0633\u0637 ARI<\/div><h3 id=\"kAvg\">\u2014<\/h3><\/div>\n <div class=\"kpi\"><div class=\"label\" data-i=\"hi\">\u0623\u0639\u0644\u0649 \u062f\u0648\u0644\u0629<\/div><h3 id=\"kHi\">\u2014<\/h3><\/div>\n <div class=\"kpi\"><div class=\"label\" data-i=\"lo\">\u0623\u062f\u0646\u0649 \u062f\u0648\u0644\u0629<\/div><h3 id=\"kLo\">\u2014<\/h3><\/div>\n <\/div>\n <hr class=\"sep\">\n <div class=\"label\" data-i=\"bar\">\u062a\u0631\u062a\u064a\u0628 \u0627\u0644\u062f\u0648\u0644<\/div>\n <canvas id=\"bars\" height=\"170\"><\/canvas>\n <hr class=\"sep\">\n <div class=\"label\" data-i=\"radar\">\u0631\u0627\u062f\u0627\u0631 \u0627\u0644\u0645\u0642\u0627\u0631\u0646\u0629<\/div>\n <canvas id=\"radar\" height=\"180\"><\/canvas>\n <hr class=\"sep\">\n <div class=\"label\" data-i=\"story\">Risk Story<\/div>\n <div class=\"note small\" id=\"story\">\u2014<\/div>\n <\/div>\n <\/div>\n<\/div>\n\n<script>\n\/* ========== i18n ========== *\/\nconst I18N={\n ar:{\n title:\"\u0623\u0637\u0644\u0633 \u0627\u0644\u0645\u062e\u0627\u0637\u0631 \u0627\u0644\u0639\u0631\u0628\u064a \u0627\u0644\u062a\u0641\u0627\u0639\u0644\u064a\",\n layer:\"\u0627\u0644\u0637\u0628\u0642\u0629\", compare:\"\u0645\u0642\u0627\u0631\u0646\u0629\", scenario:\"\u0627\u0644\u0645\u062d\u0627\u0643\u0627\u0629\",\n avg:\"\u0645\u062a\u0648\u0633\u0637 ARI\", hi:\"\u0623\u0639\u0644\u0649 \u062f\u0648\u0644\u0629\", lo:\"\u0623\u062f\u0646\u0649 \u062f\u0648\u0644\u0629\",\n bar:\"\u062a\u0631\u062a\u064a\u0628 \u0627\u0644\u062f\u0648\u0644 \u062d\u0633\u0628 \u0627\u0644\u0637\u0628\u0642\u0629 \u0627\u0644\u0645\u062e\u062a\u0627\u0631\u0629\", radar:\"\u0631\u0627\u062f\u0627\u0631 \u0627\u0644\u0645\u0642\u0627\u0631\u0646\u0629\", story:\"\u0633\u0631\u062f \u0627\u0644\u0645\u062e\u0627\u0637\u0631\",\n storyTxt:(c,r)=>`\u0641\u064a ${c} \u064a\u0638\u0647\u0631 \u0645\u0633\u062a\u0648\u0649 \u0645\u0624\u0634\u0631 \u0627\u0644\u0645\u062e\u0627\u0637\u0631 \u0627\u0644\u0645\u0631\u0643\u0651\u0628 \u2248 ${r}. \u0634\u0647\u062f\u062a \u0627\u0644\u0633\u0646\u0648\u0627\u062a \u0627\u0644\u0623\u062e\u064a\u0631\u0629 \u062a\u063a\u064a\u0631\u0627\u062a \u0645\u0631\u062a\u0628\u0637\u0629 \u0628\u0639\u0648\u0627\u0645\u0644 \u0645\u0646\u0627\u062e\u064a\u0629 \u0648\u0627\u0642\u062a\u0635\u0627\u062f\u064a\u0629. \n\u0632\u064a\u0627\u062f\u0629 \u0627\u0644\u0645\u0631\u0648\u0646\u0629 \u0628\u0646\u0633\u0628\u0629 10% \u0642\u062f \u062a\u062e\u0641\u0651\u0636 ARI \u0628\u062d\u0648\u0627\u0644\u064a ${Math.round(r*0.1)} \u0646\u0642\u0637\u0629.`\n },\n en:{\n title:\"Interactive Arab Risk Atlas\",\n layer:\"Layer\", compare:\"Compare\", scenario:\"Scenario\",\n avg:\"Average ARI\", hi:\"Highest\", lo:\"Lowest\",\n bar:\"Country ranking (selected layer)\", radar:\"Compare radar\", story:\"Risk Story\",\n storyTxt:(c,r)=>`In ${c}, the composite risk index is \u2248 ${r}. Recent years indicate shifts driven by climate and economic factors.\nA +10% improvement in resilience could reduce ARI by ~${Math.round(r*0.1)} points.`\n }\n};\nconst els={\n lang:document.getElementById('lang'), title:document.getElementById('title'),\n layer:document.getElementById('layer'), cmpA:document.getElementById('cmpA'), cmpB:document.getElementById('cmpB'),\n sHaz:document.getElementById('sHaz'), sRes:document.getElementById('sRes'), btnSim:document.getElementById('btnSim'), btnReset:document.getElementById('btnReset'),\n kAvg:document.getElementById('kAvg'), kHi:document.getElementById('kHi'), kLo:document.getElementById('kLo'),\n bars:document.getElementById('bars'), radar:document.getElementById('radar'), story:document.getElementById('story'),\n btnCompare:document.getElementById('btnCompare'), btnRun:document.getElementById('btnRun'),\n csv:document.getElementById('csv'), btnSample:document.getElementById('btnSample'), btnPNG:document.getElementById('btnPNG')\n};\nfunction applyLang(){\n const t=I18N[els.lang.value];\n document.documentElement.lang=els.lang.value;\n document.documentElement.dir=(els.lang.value==='ar')?'rtl':'ltr';\n els.title.textContent=t.title;\n document.querySelectorAll('[data-i]').forEach(e=>{ e.textContent=t[e.getAttribute('data-i')]; });\n drawAll();\n}\n\n\/* ========== Sample data (centroids; replace later with polygons\/API) ========== *\/\nconst SAMPLE = [\n \/\/ country, lat, lon, Hazard, Exposure, Vulnerability, Resilience\n [\"Morocco\",31.79,-7.09,0.52,0.48,0.41,0.57],\n [\"Algeria\",28.03,1.65,0.45,0.44,0.32,0.63],\n [\"Tunisia\",33.89,9.56,0.49,0.46,0.36,0.56],\n [\"Libya\",26.34,17.23,0.55,0.40,0.43,0.45],\n [\"Egypt\",26.82,30.80,0.50,0.60,0.38,0.55],\n [\"Sudan\",15.50,32.56,0.68,0.62,0.55,0.40],\n [\"Jordan\",31.95,35.93,0.65,0.55,0.38,0.62],\n [\"Lebanon\",33.85,35.86,0.42,0.50,0.45,0.50],\n [\"Iraq\",33.22,43.68,0.58,0.58,0.44,0.48],\n [\"Saudi Arabia\",23.89,45.08,0.40,0.42,0.28,0.78],\n [\"UAE\",23.42,53.85,0.38,0.40,0.22,0.82],\n [\"Qatar\",25.28,51.52,0.35,0.39,0.20,0.85],\n [\"Bahrain\",26.06,50.56,0.36,0.38,0.21,0.77],\n [\"Oman\",21.47,55.98,0.41,0.44,0.24,0.72],\n [\"Yemen\",15.55,48.52,0.70,0.68,0.55,0.30],\n [\"Syria\",34.80,38.99,0.60,0.57,0.52,0.35],\n [\"Palestine\",31.95,35.20,0.56,0.53,0.47,0.45],\n [\"Kuwait\",29.31,47.48,0.33,0.35,0.21,0.80],\n [\"Somalia\",5.15,46.20,0.72,0.64,0.58,0.28],\n [\"Mauritania\",20.25,-10.94,0.58,0.52,0.49,0.42],\n];\n\nlet DATA = SAMPLE.map(r=>({\n country:r[0], lat:r[1], lon:r[2],\n Hazard:r[3], Exposure:r[4], Vulnerability:r[5], Resilience:r[6]\n}));\n\n\/* ========== Leaflet map ========== *\/\nconst map = L.map('map',{zoomControl:true, attributionControl:false}).setView([24, 35], 4);\nL.tileLayer('https:\/\/tile.openstreetmap.org\/{z}\/{x}\/{y}.png', {maxZoom: 6}).addTo(map);\nlet markersLayer = L.layerGroup().addTo(map);\n\n\/* ========== Compute ARI & helpers ========== *\/\nfunction computeARI(rec){\n \/\/ ARI scaled 0..100: (H+E+V) - (Resilience)\n const raw = (rec.Hazard + rec.Exposure + rec.Vulnerability) - rec.Resilience;\n const norm = Math.min(1, Math.max(0, (raw+1)\/2)); \/\/ rough normalization\n return Math.round(norm*100);\n}\nfunction colorFor(val, mode){\n \/\/ val in 0..100 (for ARI) else 0..1 for components\n if(mode==='ARI'){\n if(val<40) return '#22c55e';\n if(val<65) return '#f59e0b';\n return '#ef4444';\n }else{\n const v = val; \/\/ 0..1\n if(v<0.35) return '#22c55e';\n if(v<0.6) return '#60a5fa';\n return '#ef4444';\n }\n}\n\n\/* ========== Draw map markers ========== *\/\nfunction drawMap(){\n markersLayer.clearLayers();\n const mode = els.layer.value;\n DATA.forEach(d=>{\n const ari = computeARI(d);\n const value = (mode==='ARI')? ari : d[mode];\n const col = (mode==='ARI')? colorFor(value,'ARI') : colorFor(value,mode);\n const radius = (mode==='ARI')? (6 + ari\/10) : (6 + value*10);\n const m = L.circleMarker([d.lat,d.lon], {\n radius, color:'#1d2e57', weight:1, fillColor:col, fillOpacity:0.85\n }).addTo(markersLayer);\n const cLayer = (els.lang.value==='ar'\n ? {Hazard:'\u0627\u0644\u062e\u0637\u0631', Exposure:'\u0627\u0644\u062a\u0639\u0631\u0651\u0636', Vulnerability:'\u0627\u0644\u0647\u0634\u0627\u0634\u0629', Resilience:'\u0627\u0644\u0645\u0631\u0648\u0646\u0629', ARI:'\u0627\u0644\u0645\u0624\u0634\u0631'}\n : {Hazard:'Hazard', Exposure:'Exposure', Vulnerability:'Vulnerability', Resilience:'Resilience', ARI:'Index'});\n m.bindPopup(`\n <div style=\"font-family:Inter,Tajawal,sans-serif\">\n <b>${d.country}<\/b><br>\n ${cLayer[mode]||mode}: <b>${(mode==='ARI')? value : Math.round(value*100)}<\/b>${(mode==='ARI')?'':'\/100'}<br>\n ARI: <b>${ari}<\/b>\/100\n <\/div>\n `);\n });\n}\n\n\/* ========== KPIs, bars, radar, story ========== *\/\nlet BARS, RADAR;\nfunction drawKPIs(){\n const mode = els.layer.value;\n const arr = DATA.map(d => (mode==='ARI')? computeARI(d) : Math.round(d[mode]*100));\n const avg = Math.round(arr.reduce((a,b)=>a+b,0)\/arr.length);\n const iHi = arr.indexOf(Math.max(...arr)), iLo = arr.indexOf(Math.min(...arr));\n els.kAvg.textContent = avg;\n els.kHi.textContent = `${DATA[iHi].country} (${arr[iHi]})`;\n els.kLo.textContent = `${DATA[iLo].country} (${arr[iLo]})`;\n}\nfunction drawBars(){\n const mode=els.layer.value;\n const labels=[...DATA].sort((a,b)=> ((mode==='ARI')? computeARI(b)-computeARI(a) : b[mode]-a[mode]))\n .map(d=>d.country);\n const vals=[...DATA].sort((a,b)=> ((mode==='ARI')? computeARI(b)-computeARI(a) : b[mode]-a[mode]))\n .map(d=> (mode==='ARI')? computeARI(d) : Math.round(d[mode]*100));\n if(BARS) BARS.destroy();\n BARS = new Chart(els.bars.getContext('2d'),{\n type:'bar',\n data:{labels, datasets:[{data:vals, backgroundColor:vals.map(v=> (mode==='ARI'? colorFor(v,'ARI') : (v<35?'#22c55e':(v<60?'#60a5fa':'#ef4444')) ))}]},\n options:{plugins:{legend:{display:false}}, scales:{y:{grid:{color:'#1d2e57'}, ticks:{color:'#9fb3d9'}}, x:{grid:{display:false}, ticks:{color:'#9fb3d9'}}}}\n });\n}\nfunction drawRadar(aName, bName){\n const a = DATA.find(x=>x.country===aName) || DATA[0];\n const b = DATA.find(x=>x.country===bName) || DATA[1] || DATA[0];\n const t = (els.lang.value==='ar')\n ? {Hazard:'\u0627\u0644\u062e\u0637\u0631',Exposure:'\u0627\u0644\u062a\u0639\u0631\u0651\u0636',Vulnerability:'\u0627\u0644\u0647\u0634\u0627\u0634\u0629',Resilience:'\u0627\u0644\u0645\u0631\u0648\u0646\u0629'}\n : {Hazard:'Hazard',Exposure:'Exposure',Vulnerability:'Vulnerability',Resilience:'Resilience'};\n const labels = [t.Hazard,t.Exposure,t.Vulnerability,t.Resilience];\n const A=[a.Hazard,a.Exposure,a.Vulnerability,a.Resilience].map(x=>Math.round(x*100));\n const B=[b.Hazard,b.Exposure,b.Vulnerability,b.Resilience].map(x=>Math.round(x*100));\n if(RADAR) RADAR.destroy();\n RADAR = new Chart(els.radar.getContext('2d'),{\n type:'radar',\n data:{labels, datasets:[\n {label:a.country,data:A, borderColor:'#22a3ff', backgroundColor:'rgba(34,163,255,0.25)'},\n {label:b.country,data:B, borderColor:'#f59e0b', backgroundColor:'rgba(245,158,11,0.25)'}\n ]},\n options:{plugins:{legend:{labels:{color:'#cfe4ff'}}}, scales:{r:{suggestedMin:0,suggestedMax:100, angleLines:{color:'#21335d'}, grid:{color:'#1b2f59'}, pointLabels:{color:'#9fb3d9'}, ticks:{display:true, color:'#9fb3d9', stepSize:20, showLabelBackdrop:false}}}}\n });\n \/\/ story\n const r = computeARI(a);\n const txt = (els.lang.value==='ar')? I18N.ar.storyTxt(a.country,r) : I18N.en.storyTxt(a.country,r);\n els.story.textContent = txt;\n}\n\n\/* ========== compare, scenario, run ========== *\/\nfunction populateSelectors(){\n [els.cmpA, els.cmpB].forEach(sel=>{\n sel.innerHTML=''; DATA.forEach(d=>{ const o=document.createElement('option'); o.value=d.country; o.textContent=d.country; sel.appendChild(o); });\n });\n els.cmpA.value = DATA[0].country; els.cmpB.value = DATA[1]?.country || DATA[0].country;\n}\nfunction applyScenario(){\n const dh = (+els.sHaz.value||0)\/100, dr = (+els.sRes.value||0)\/100;\n DATA = DATA.map(d=>({\n ...d,\n Hazard: Math.max(0, Math.min(1, d.Hazard*(1+dh))),\n Resilience: Math.max(0, Math.min(1, d.Resilience*(1+dr)))\n }));\n}\nfunction resetScenario(){\n DATA = SAMPLE.map(r=>({country:r[0],lat:r[1],lon:r[2],Hazard:r[3],Exposure:r[4],Vulnerability:r[5],Resilience:r[6]}));\n}\n\n\/* ========== CSV upload (optional) ========== *\/\nels.csv.onchange=(e)=>{\n const f=e.target.files?.[0]; if(!f) return;\n Papa.parse(f, {header:true,dynamicTyping:true,skipEmptyLines:true,complete: res=>{\n \/\/ expected headers: country, lat, lon, Hazard, Exposure, Vulnerability, Resilience (0..1)\n DATA = res.data.filter(r=>r.country && r.lat && r.lon).map(r=>({\n country:r.country, lat:+r.lat, lon:+r.lon,\n Hazard:+r.Hazard, Exposure:+r.Exposure, Vulnerability:+r.Vulnerability, Resilience:+r.Resilience\n }));\n drawAll();\n }});\n};\n\n\/* ========== PNG export ========== *\/\nels.btnPNG.onclick=()=>{ html2canvas(document.getElementById('capture'),{backgroundColor:'#0b1224',scale:2}).then(c=>{const a=document.createElement('a'); a.href=c.toDataURL('image\/png'); a.download='aman360-arab-risk-atlas.png'; a.click();}); };\n\n\/* ========== main draw ========== *\/\nfunction drawAll(){\n populateSelectors();\n drawMap();\n drawKPIs();\n drawBars();\n drawRadar(els.cmpA.value, els.cmpB.value);\n}\n\n\/* events *\/\nels.lang.onchange=applyLang;\nels.layer.onchange=()=>{ drawMap(); drawBars(); };\nels.btnCompare.onclick=()=> drawRadar(els.cmpA.value, els.cmpB.value);\nels.btnSim.onclick=()=>{ applyScenario(); drawAll(); };\nels.btnReset.onclick=()=>{ resetScenario(); drawAll(); };\nels.btnRun.onclick=drawAll;\nels.btnSample.onclick=()=>{ resetScenario(); drawAll(); };\n\n\/* init *\/\napplyLang(); resetScenario(); drawAll();\n<\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>Aman360 \u2022 Interactive Arab Risk Atlas \u0623\u0637\u0644\u0633 \u0627\u0644\u0645\u062e\u0627\u0637\u0631 \u0627\u0644\u0639\u0631\u0628\u064a \u0627\u0644\u062a\u0641\u0627\u0639\u0644\u064a \u0627\u0644\u0639\u0631\u0628\u064a\u0629English Load sample PNG \u062a\u062d\u062f\u064a\u062b \u0627\u0644\u0637\u0628\u0642\u0629 ARI (Index)HazardExposureVulnerabilityResilience \u0645\u0642\u0627\u0631\u0646\u0629 Compare \u0627\u0644\u0645\u062d\u0627\u0643\u0627\u0629 Hazard \u0394% Resilience \u0394% Apply Reset Cross-Hazard Explorer Global Risk Index Readiness Radar Policy Simulator \u0645\u062a\u0648\u0633\u0637 ARI \u2014 \u0623\u0639\u0644\u0649 \u062f\u0648\u0644\u0629 \u2014 \u0623\u062f\u0646\u0649 \u062f\u0648\u0644\u0629 \u2014 \u062a\u0631\u062a\u064a\u0628 \u0627\u0644\u062f\u0648\u0644 \u0631\u0627\u062f\u0627\u0631 \u0627\u0644\u0645\u0642\u0627\u0631\u0646\u0629 Risk Story \u2014<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-with-title","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-175","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/aman360.org\/ar\/wp-json\/wp\/v2\/pages\/175","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/aman360.org\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/aman360.org\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/aman360.org\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/aman360.org\/ar\/wp-json\/wp\/v2\/comments?post=175"}],"version-history":[{"count":2,"href":"https:\/\/aman360.org\/ar\/wp-json\/wp\/v2\/pages\/175\/revisions"}],"predecessor-version":[{"id":177,"href":"https:\/\/aman360.org\/ar\/wp-json\/wp\/v2\/pages\/175\/revisions\/177"}],"wp:attachment":[{"href":"https:\/\/aman360.org\/ar\/wp-json\/wp\/v2\/media?parent=175"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":175,"date":"2025-10-19T09:02:41","date_gmt":"2025-10-19T09:02:41","guid":{"rendered":"https:\/\/aman360.org\/?page_id=175"},"modified":"2025-10-19T10:31:34","modified_gmt":"2025-10-19T10:31:34","slug":"atlas","status":"publish","type":"page","link":"https:\/\/aman360.org\/ar\/atlas\/","title":{"rendered":"Interactive Arab Risk Atlas"},"content":{"rendered":"\n\n\n\n\n\nAman360 \u2022 Interactive Arab Risk Atlas<\/title>\n\n\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Tajawal:wght@400;600;800&family=Inter:wght@400;600;800&display=swap\" rel=\"stylesheet\">\n<link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/leaflet@1.9.4\/dist\/leaflet.css\"\/>\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/leaflet@1.9.4\/dist\/leaflet.js\"><\/script>\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js@4.4.1\"><\/script>\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/papaparse@5.4.1\/papaparse.min.js\"><\/script>\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/html2canvas@1.4.1\/dist\/html2canvas.min.js\"><\/script>\n\n<style>\n:root{--bg:#0b1224;--panel:#0f1b36;--ink:#e6f0ff;--mut:#9fb3d9;--brand:#22a3ff;--line:#21335d;--chip:#0a1531;--ok:#22c55e;--mid:#f59e0b;--bad:#ef4444}\n*{box-sizing:border-box}\nhtml,body{height:100%} body{margin:0;background:var(--bg);color:var(--ink);font-family:Tajawal,Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif}\n.container{max-width:1400px;margin:24px auto;padding:0 12px}\n.header{display:flex;gap:12px;align-items:center;justify-content:space-between;margin-bottom:12px}\n.h-title{font-weight:800;font-size:26px}\n.controls{display:flex;gap:8px;flex-wrap:wrap}\n.btn{background:var(--brand);color:#00162b;border:none;padding:10px 14px;border-radius:12px;font-weight:700;cursor:pointer}\n.btn.alt{background:#1b2f59;color:var(--ink)}\n.select,.input{background:#0a1330;border:1px solid var(--line);color:var(--ink);border-radius:10px;padding:8px 10px}\n.grid{display:grid;gap:12px}\n@media(min-width:1100px){.grid-2{grid-template-columns:1.2fr .8fr}}\n.card{background:linear-gradient(180deg,#0f1b36,#0c1630);border:1px solid var(--line);border-radius:16px;padding:12px}\n.label{color:var(--mut);font-size:12px;margin-bottom:6px}\n.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}\n.sep{height:1px;background:var(--line);border:0;margin:10px 0}\n.badge{display:inline-block;background:#12366a;color:#cfe4ff;border:1px solid #1f4c93;padding:3px 8px;border-radius:999px}\n.small{font-size:12px;color:var(--mut)}\n.status{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;border:1px solid var(--line);background:#0a1330}\n.dot{width:10px;height:10px;border-radius:50%}\n#map{height:520px;border-radius:14px;border:1px solid var(--line);overflow:hidden}\n.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}\n.kpi{background:#0a1531;border:1px solid var(--line);border-radius:12px;padding:10px}\n.kpi h3{margin:0;font-size:22px}\n.note{background:#0a1531;border:1px dashed var(--line);padding:10px;border-radius:12px}\n.table{width:100%;border-collapse:separate;border-spacing:0 8px}\n.table th,.table td{padding:8px 10px}\n.table tbody tr{background:#0a1531;border:1px solid var(--line)}\n.pill{padding:2px 8px;border-radius:999px;border:1px solid var(--line);background:#0a1330}\n.linkbar{display:flex;gap:8px;flex-wrap:wrap}\n.leaflet-tile{filter:hue-rotate(180deg) saturate(120%) brightness(90%)} \/* dark *\/\n<\/style>\n<\/head>\n<body>\n<div class=\"container\" id=\"capture\">\n <div class=\"header\">\n <div class=\"h-title\" id=\"title\">\u0623\u0637\u0644\u0633 \u0627\u0644\u0645\u062e\u0627\u0637\u0631 \u0627\u0644\u0639\u0631\u0628\u064a \u0627\u0644\u062a\u0641\u0627\u0639\u0644\u064a<\/div>\n <div class=\"controls\">\n <select id=\"lang\" class=\"select\">\n <option value=\"ar\" selected>\u0627\u0644\u0639\u0631\u0628\u064a\u0629<\/option><option value=\"en\">English<\/option>\n <\/select>\n <input type=\"file\" id=\"csv\" accept=\".csv\" class=\"select\">\n <button class=\"btn alt\" id=\"btnSample\">Load sample<\/button>\n <button class=\"btn alt\" id=\"btnPNG\">PNG<\/button>\n <button class=\"btn\" id=\"btnRun\">\u062a\u062d\u062f\u064a\u062b<\/button>\n <\/div>\n <\/div>\n\n <div class=\"grid grid-2\">\n \n <div class=\"card\">\n <div class=\"row\">\n <div>\n <div class=\"label\" data-i=\"layer\">\u0627\u0644\u0637\u0628\u0642\u0629<\/div>\n <select id=\"layer\" class=\"select\">\n <option value=\"ARI\" selected>ARI (Index)<\/option>\n <option value=\"Hazard\">Hazard<\/option>\n <option value=\"Exposure\">Exposure<\/option>\n <option value=\"Vulnerability\">Vulnerability<\/option>\n <option value=\"Resilience\">Resilience<\/option>\n <\/select>\n <\/div>\n <div>\n <div class=\"label\" data-i=\"compare\">\u0645\u0642\u0627\u0631\u0646\u0629<\/div>\n <select id=\"cmpA\" class=\"select\"><\/select>\n <select id=\"cmpB\" class=\"select\"><\/select>\n <button class=\"btn alt\" id=\"btnCompare\">Compare<\/button>\n <\/div>\n <div>\n <div class=\"label\" data-i=\"scenario\">\u0627\u0644\u0645\u062d\u0627\u0643\u0627\u0629<\/div>\n <div class=\"row\">\n <span class=\"pill\">Hazard \u0394%<\/span><input id=\"sHaz\" type=\"number\" class=\"select\" style=\"width:90px\" value=\"0\">\n <span class=\"pill\">Resilience \u0394%<\/span><input id=\"sRes\" type=\"number\" class=\"select\" style=\"width:90px\" value=\"0\">\n <button class=\"btn alt\" id=\"btnSim\">Apply<\/button>\n <button class=\"btn alt\" id=\"btnReset\">Reset<\/button>\n <\/div>\n <\/div>\n <\/div>\n <hr class=\"sep\">\n <div id=\"map\"><\/div>\n <hr class=\"sep\">\n <div class=\"linkbar\">\n <a class=\"pill\" href=\"\/tools\/cross-hazard\" target=\"_blank\">Cross-Hazard Explorer<\/a>\n <a class=\"pill\" href=\"\/tools\/global-risk-index\" target=\"_blank\">Global Risk Index<\/a>\n <a class=\"pill\" href=\"\/tools\/readiness-radar\" target=\"_blank\">Readiness Radar<\/a>\n <a class=\"pill\" href=\"\/tools\/policy-simulator\" target=\"_blank\">Policy Simulator<\/a>\n <\/div>\n <\/div>\n\n \n <div class=\"card\">\n <div class=\"kpis\">\n <div class=\"kpi\"><div class=\"label\" data-i=\"avg\">\u0645\u062a\u0648\u0633\u0637 ARI<\/div><h3 id=\"kAvg\">\u2014<\/h3><\/div>\n <div class=\"kpi\"><div class=\"label\" data-i=\"hi\">\u0623\u0639\u0644\u0649 \u062f\u0648\u0644\u0629<\/div><h3 id=\"kHi\">\u2014<\/h3><\/div>\n <div class=\"kpi\"><div class=\"label\" data-i=\"lo\">\u0623\u062f\u0646\u0649 \u062f\u0648\u0644\u0629<\/div><h3 id=\"kLo\">\u2014<\/h3><\/div>\n <\/div>\n <hr class=\"sep\">\n <div class=\"label\" data-i=\"bar\">\u062a\u0631\u062a\u064a\u0628 \u0627\u0644\u062f\u0648\u0644<\/div>\n <canvas id=\"bars\" height=\"170\"><\/canvas>\n <hr class=\"sep\">\n <div class=\"label\" data-i=\"radar\">\u0631\u0627\u062f\u0627\u0631 \u0627\u0644\u0645\u0642\u0627\u0631\u0646\u0629<\/div>\n <canvas id=\"radar\" height=\"180\"><\/canvas>\n <hr class=\"sep\">\n <div class=\"label\" data-i=\"story\">Risk Story<\/div>\n <div class=\"note small\" id=\"story\">\u2014<\/div>\n <\/div>\n <\/div>\n<\/div>\n\n<script>\n\/* ========== i18n ========== *\/\nconst I18N={\n ar:{\n title:\"\u0623\u0637\u0644\u0633 \u0627\u0644\u0645\u062e\u0627\u0637\u0631 \u0627\u0644\u0639\u0631\u0628\u064a \u0627\u0644\u062a\u0641\u0627\u0639\u0644\u064a\",\n layer:\"\u0627\u0644\u0637\u0628\u0642\u0629\", compare:\"\u0645\u0642\u0627\u0631\u0646\u0629\", scenario:\"\u0627\u0644\u0645\u062d\u0627\u0643\u0627\u0629\",\n avg:\"\u0645\u062a\u0648\u0633\u0637 ARI\", hi:\"\u0623\u0639\u0644\u0649 \u062f\u0648\u0644\u0629\", lo:\"\u0623\u062f\u0646\u0649 \u062f\u0648\u0644\u0629\",\n bar:\"\u062a\u0631\u062a\u064a\u0628 \u0627\u0644\u062f\u0648\u0644 \u062d\u0633\u0628 \u0627\u0644\u0637\u0628\u0642\u0629 \u0627\u0644\u0645\u062e\u062a\u0627\u0631\u0629\", radar:\"\u0631\u0627\u062f\u0627\u0631 \u0627\u0644\u0645\u0642\u0627\u0631\u0646\u0629\", story:\"\u0633\u0631\u062f \u0627\u0644\u0645\u062e\u0627\u0637\u0631\",\n storyTxt:(c,r)=>`\u0641\u064a ${c} \u064a\u0638\u0647\u0631 \u0645\u0633\u062a\u0648\u0649 \u0645\u0624\u0634\u0631 \u0627\u0644\u0645\u062e\u0627\u0637\u0631 \u0627\u0644\u0645\u0631\u0643\u0651\u0628 \u2248 ${r}. \u0634\u0647\u062f\u062a \u0627\u0644\u0633\u0646\u0648\u0627\u062a \u0627\u0644\u0623\u062e\u064a\u0631\u0629 \u062a\u063a\u064a\u0631\u0627\u062a \u0645\u0631\u062a\u0628\u0637\u0629 \u0628\u0639\u0648\u0627\u0645\u0644 \u0645\u0646\u0627\u062e\u064a\u0629 \u0648\u0627\u0642\u062a\u0635\u0627\u062f\u064a\u0629. \n\u0632\u064a\u0627\u062f\u0629 \u0627\u0644\u0645\u0631\u0648\u0646\u0629 \u0628\u0646\u0633\u0628\u0629 10% \u0642\u062f \u062a\u062e\u0641\u0651\u0636 ARI \u0628\u062d\u0648\u0627\u0644\u064a ${Math.round(r*0.1)} \u0646\u0642\u0637\u0629.`\n },\n en:{\n title:\"Interactive Arab Risk Atlas\",\n layer:\"Layer\", compare:\"Compare\", scenario:\"Scenario\",\n avg:\"Average ARI\", hi:\"Highest\", lo:\"Lowest\",\n bar:\"Country ranking (selected layer)\", radar:\"Compare radar\", story:\"Risk Story\",\n storyTxt:(c,r)=>`In ${c}, the composite risk index is \u2248 ${r}. Recent years indicate shifts driven by climate and economic factors.\nA +10% improvement in resilience could reduce ARI by ~${Math.round(r*0.1)} points.`\n }\n};\nconst els={\n lang:document.getElementById('lang'), title:document.getElementById('title'),\n layer:document.getElementById('layer'), cmpA:document.getElementById('cmpA'), cmpB:document.getElementById('cmpB'),\n sHaz:document.getElementById('sHaz'), sRes:document.getElementById('sRes'), btnSim:document.getElementById('btnSim'), btnReset:document.getElementById('btnReset'),\n kAvg:document.getElementById('kAvg'), kHi:document.getElementById('kHi'), kLo:document.getElementById('kLo'),\n bars:document.getElementById('bars'), radar:document.getElementById('radar'), story:document.getElementById('story'),\n btnCompare:document.getElementById('btnCompare'), btnRun:document.getElementById('btnRun'),\n csv:document.getElementById('csv'), btnSample:document.getElementById('btnSample'), btnPNG:document.getElementById('btnPNG')\n};\nfunction applyLang(){\n const t=I18N[els.lang.value];\n document.documentElement.lang=els.lang.value;\n document.documentElement.dir=(els.lang.value==='ar')?'rtl':'ltr';\n els.title.textContent=t.title;\n document.querySelectorAll('[data-i]').forEach(e=>{ e.textContent=t[e.getAttribute('data-i')]; });\n drawAll();\n}\n\n\/* ========== Sample data (centroids; replace later with polygons\/API) ========== *\/\nconst SAMPLE = [\n \/\/ country, lat, lon, Hazard, Exposure, Vulnerability, Resilience\n [\"Morocco\",31.79,-7.09,0.52,0.48,0.41,0.57],\n [\"Algeria\",28.03,1.65,0.45,0.44,0.32,0.63],\n [\"Tunisia\",33.89,9.56,0.49,0.46,0.36,0.56],\n [\"Libya\",26.34,17.23,0.55,0.40,0.43,0.45],\n [\"Egypt\",26.82,30.80,0.50,0.60,0.38,0.55],\n [\"Sudan\",15.50,32.56,0.68,0.62,0.55,0.40],\n [\"Jordan\",31.95,35.93,0.65,0.55,0.38,0.62],\n [\"Lebanon\",33.85,35.86,0.42,0.50,0.45,0.50],\n [\"Iraq\",33.22,43.68,0.58,0.58,0.44,0.48],\n [\"Saudi Arabia\",23.89,45.08,0.40,0.42,0.28,0.78],\n [\"UAE\",23.42,53.85,0.38,0.40,0.22,0.82],\n [\"Qatar\",25.28,51.52,0.35,0.39,0.20,0.85],\n [\"Bahrain\",26.06,50.56,0.36,0.38,0.21,0.77],\n [\"Oman\",21.47,55.98,0.41,0.44,0.24,0.72],\n [\"Yemen\",15.55,48.52,0.70,0.68,0.55,0.30],\n [\"Syria\",34.80,38.99,0.60,0.57,0.52,0.35],\n [\"Palestine\",31.95,35.20,0.56,0.53,0.47,0.45],\n [\"Kuwait\",29.31,47.48,0.33,0.35,0.21,0.80],\n [\"Somalia\",5.15,46.20,0.72,0.64,0.58,0.28],\n [\"Mauritania\",20.25,-10.94,0.58,0.52,0.49,0.42],\n];\n\nlet DATA = SAMPLE.map(r=>({\n country:r[0], lat:r[1], lon:r[2],\n Hazard:r[3], Exposure:r[4], Vulnerability:r[5], Resilience:r[6]\n}));\n\n\/* ========== Leaflet map ========== *\/\nconst map = L.map('map',{zoomControl:true, attributionControl:false}).setView([24, 35], 4);\nL.tileLayer('https:\/\/tile.openstreetmap.org\/{z}\/{x}\/{y}.png', {maxZoom: 6}).addTo(map);\nlet markersLayer = L.layerGroup().addTo(map);\n\n\/* ========== Compute ARI & helpers ========== *\/\nfunction computeARI(rec){\n \/\/ ARI scaled 0..100: (H+E+V) - (Resilience)\n const raw = (rec.Hazard + rec.Exposure + rec.Vulnerability) - rec.Resilience;\n const norm = Math.min(1, Math.max(0, (raw+1)\/2)); \/\/ rough normalization\n return Math.round(norm*100);\n}\nfunction colorFor(val, mode){\n \/\/ val in 0..100 (for ARI) else 0..1 for components\n if(mode==='ARI'){\n if(val<40) return '#22c55e';\n if(val<65) return '#f59e0b';\n return '#ef4444';\n }else{\n const v = val; \/\/ 0..1\n if(v<0.35) return '#22c55e';\n if(v<0.6) return '#60a5fa';\n return '#ef4444';\n }\n}\n\n\/* ========== Draw map markers ========== *\/\nfunction drawMap(){\n markersLayer.clearLayers();\n const mode = els.layer.value;\n DATA.forEach(d=>{\n const ari = computeARI(d);\n const value = (mode==='ARI')? ari : d[mode];\n const col = (mode==='ARI')? colorFor(value,'ARI') : colorFor(value,mode);\n const radius = (mode==='ARI')? (6 + ari\/10) : (6 + value*10);\n const m = L.circleMarker([d.lat,d.lon], {\n radius, color:'#1d2e57', weight:1, fillColor:col, fillOpacity:0.85\n }).addTo(markersLayer);\n const cLayer = (els.lang.value==='ar'\n ? {Hazard:'\u0627\u0644\u062e\u0637\u0631', Exposure:'\u0627\u0644\u062a\u0639\u0631\u0651\u0636', Vulnerability:'\u0627\u0644\u0647\u0634\u0627\u0634\u0629', Resilience:'\u0627\u0644\u0645\u0631\u0648\u0646\u0629', ARI:'\u0627\u0644\u0645\u0624\u0634\u0631'}\n : {Hazard:'Hazard', Exposure:'Exposure', Vulnerability:'Vulnerability', Resilience:'Resilience', ARI:'Index'});\n m.bindPopup(`\n <div style=\"font-family:Inter,Tajawal,sans-serif\">\n <b>${d.country}<\/b><br>\n ${cLayer[mode]||mode}: <b>${(mode==='ARI')? value : Math.round(value*100)}<\/b>${(mode==='ARI')?'':'\/100'}<br>\n ARI: <b>${ari}<\/b>\/100\n <\/div>\n `);\n });\n}\n\n\/* ========== KPIs, bars, radar, story ========== *\/\nlet BARS, RADAR;\nfunction drawKPIs(){\n const mode = els.layer.value;\n const arr = DATA.map(d => (mode==='ARI')? computeARI(d) : Math.round(d[mode]*100));\n const avg = Math.round(arr.reduce((a,b)=>a+b,0)\/arr.length);\n const iHi = arr.indexOf(Math.max(...arr)), iLo = arr.indexOf(Math.min(...arr));\n els.kAvg.textContent = avg;\n els.kHi.textContent = `${DATA[iHi].country} (${arr[iHi]})`;\n els.kLo.textContent = `${DATA[iLo].country} (${arr[iLo]})`;\n}\nfunction drawBars(){\n const mode=els.layer.value;\n const labels=[...DATA].sort((a,b)=> ((mode==='ARI')? computeARI(b)-computeARI(a) : b[mode]-a[mode]))\n .map(d=>d.country);\n const vals=[...DATA].sort((a,b)=> ((mode==='ARI')? computeARI(b)-computeARI(a) : b[mode]-a[mode]))\n .map(d=> (mode==='ARI')? computeARI(d) : Math.round(d[mode]*100));\n if(BARS) BARS.destroy();\n BARS = new Chart(els.bars.getContext('2d'),{\n type:'bar',\n data:{labels, datasets:[{data:vals, backgroundColor:vals.map(v=> (mode==='ARI'? colorFor(v,'ARI') : (v<35?'#22c55e':(v<60?'#60a5fa':'#ef4444')) ))}]},\n options:{plugins:{legend:{display:false}}, scales:{y:{grid:{color:'#1d2e57'}, ticks:{color:'#9fb3d9'}}, x:{grid:{display:false}, ticks:{color:'#9fb3d9'}}}}\n });\n}\nfunction drawRadar(aName, bName){\n const a = DATA.find(x=>x.country===aName) || DATA[0];\n const b = DATA.find(x=>x.country===bName) || DATA[1] || DATA[0];\n const t = (els.lang.value==='ar')\n ? {Hazard:'\u0627\u0644\u062e\u0637\u0631',Exposure:'\u0627\u0644\u062a\u0639\u0631\u0651\u0636',Vulnerability:'\u0627\u0644\u0647\u0634\u0627\u0634\u0629',Resilience:'\u0627\u0644\u0645\u0631\u0648\u0646\u0629'}\n : {Hazard:'Hazard',Exposure:'Exposure',Vulnerability:'Vulnerability',Resilience:'Resilience'};\n const labels = [t.Hazard,t.Exposure,t.Vulnerability,t.Resilience];\n const A=[a.Hazard,a.Exposure,a.Vulnerability,a.Resilience].map(x=>Math.round(x*100));\n const B=[b.Hazard,b.Exposure,b.Vulnerability,b.Resilience].map(x=>Math.round(x*100));\n if(RADAR) RADAR.destroy();\n RADAR = new Chart(els.radar.getContext('2d'),{\n type:'radar',\n data:{labels, datasets:[\n {label:a.country,data:A, borderColor:'#22a3ff', backgroundColor:'rgba(34,163,255,0.25)'},\n {label:b.country,data:B, borderColor:'#f59e0b', backgroundColor:'rgba(245,158,11,0.25)'}\n ]},\n options:{plugins:{legend:{labels:{color:'#cfe4ff'}}}, scales:{r:{suggestedMin:0,suggestedMax:100, angleLines:{color:'#21335d'}, grid:{color:'#1b2f59'}, pointLabels:{color:'#9fb3d9'}, ticks:{display:true, color:'#9fb3d9', stepSize:20, showLabelBackdrop:false}}}}\n });\n \/\/ story\n const r = computeARI(a);\n const txt = (els.lang.value==='ar')? I18N.ar.storyTxt(a.country,r) : I18N.en.storyTxt(a.country,r);\n els.story.textContent = txt;\n}\n\n\/* ========== compare, scenario, run ========== *\/\nfunction populateSelectors(){\n [els.cmpA, els.cmpB].forEach(sel=>{\n sel.innerHTML=''; DATA.forEach(d=>{ const o=document.createElement('option'); o.value=d.country; o.textContent=d.country; sel.appendChild(o); });\n });\n els.cmpA.value = DATA[0].country; els.cmpB.value = DATA[1]?.country || DATA[0].country;\n}\nfunction applyScenario(){\n const dh = (+els.sHaz.value||0)\/100, dr = (+els.sRes.value||0)\/100;\n DATA = DATA.map(d=>({\n ...d,\n Hazard: Math.max(0, Math.min(1, d.Hazard*(1+dh))),\n Resilience: Math.max(0, Math.min(1, d.Resilience*(1+dr)))\n }));\n}\nfunction resetScenario(){\n DATA = SAMPLE.map(r=>({country:r[0],lat:r[1],lon:r[2],Hazard:r[3],Exposure:r[4],Vulnerability:r[5],Resilience:r[6]}));\n}\n\n\/* ========== CSV upload (optional) ========== *\/\nels.csv.onchange=(e)=>{\n const f=e.target.files?.[0]; if(!f) return;\n Papa.parse(f, {header:true,dynamicTyping:true,skipEmptyLines:true,complete: res=>{\n \/\/ expected headers: country, lat, lon, Hazard, Exposure, Vulnerability, Resilience (0..1)\n DATA = res.data.filter(r=>r.country && r.lat && r.lon).map(r=>({\n country:r.country, lat:+r.lat, lon:+r.lon,\n Hazard:+r.Hazard, Exposure:+r.Exposure, Vulnerability:+r.Vulnerability, Resilience:+r.Resilience\n }));\n drawAll();\n }});\n};\n\n\/* ========== PNG export ========== *\/\nels.btnPNG.onclick=()=>{ html2canvas(document.getElementById('capture'),{backgroundColor:'#0b1224',scale:2}).then(c=>{const a=document.createElement('a'); a.href=c.toDataURL('image\/png'); a.download='aman360-arab-risk-atlas.png'; a.click();}); };\n\n\/* ========== main draw ========== *\/\nfunction drawAll(){\n populateSelectors();\n drawMap();\n drawKPIs();\n drawBars();\n drawRadar(els.cmpA.value, els.cmpB.value);\n}\n\n\/* events *\/\nels.lang.onchange=applyLang;\nels.layer.onchange=()=>{ drawMap(); drawBars(); };\nels.btnCompare.onclick=()=> drawRadar(els.cmpA.value, els.cmpB.value);\nels.btnSim.onclick=()=>{ applyScenario(); drawAll(); };\nels.btnReset.onclick=()=>{ resetScenario(); drawAll(); };\nels.btnRun.onclick=drawAll;\nels.btnSample.onclick=()=>{ resetScenario(); drawAll(); };\n\n\/* init *\/\napplyLang(); resetScenario(); drawAll();\n<\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>Aman360 \u2022 Interactive Arab Risk Atlas \u0623\u0637\u0644\u0633 \u0627\u0644\u0645\u062e\u0627\u0637\u0631 \u0627\u0644\u0639\u0631\u0628\u064a \u0627\u0644\u062a\u0641\u0627\u0639\u0644\u064a \u0627\u0644\u0639\u0631\u0628\u064a\u0629English Load sample PNG \u062a\u062d\u062f\u064a\u062b \u0627\u0644\u0637\u0628\u0642\u0629 ARI (Index)HazardExposureVulnerabilityResilience \u0645\u0642\u0627\u0631\u0646\u0629 Compare \u0627\u0644\u0645\u062d\u0627\u0643\u0627\u0629 Hazard \u0394% Resilience \u0394% Apply Reset Cross-Hazard Explorer Global Risk Index Readiness Radar Policy Simulator \u0645\u062a\u0648\u0633\u0637 ARI \u2014 \u0623\u0639\u0644\u0649 \u062f\u0648\u0644\u0629 \u2014 \u0623\u062f\u0646\u0649 \u062f\u0648\u0644\u0629 \u2014 \u062a\u0631\u062a\u064a\u0628 \u0627\u0644\u062f\u0648\u0644 \u0631\u0627\u062f\u0627\u0631 \u0627\u0644\u0645\u0642\u0627\u0631\u0646\u0629 Risk Story \u2014<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-with-title","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-175","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/aman360.org\/ar\/wp-json\/wp\/v2\/pages\/175","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/aman360.org\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/aman360.org\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/aman360.org\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/aman360.org\/ar\/wp-json\/wp\/v2\/comments?post=175"}],"version-history":[{"count":2,"href":"https:\/\/aman360.org\/ar\/wp-json\/wp\/v2\/pages\/175\/revisions"}],"predecessor-version":[{"id":177,"href":"https:\/\/aman360.org\/ar\/wp-json\/wp\/v2\/pages\/175\/revisions\/177"}],"wp:attachment":[{"href":"https:\/\/aman360.org\/ar\/wp-json\/wp\/v2\/media?parent=175"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}