| Server IP : 69.72.244.102 / Your IP : 216.73.216.164 Web Server : LiteSpeed System : Linux s3434.fra1.stableserver.net 4.18.0-513.24.1.lve.2.el8.x86_64 #1 SMP Fri May 24 12:42:50 UTC 2024 x86_64 User : konzalta ( 1271) PHP Version : 7.4.33 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : ON | Sudo : OFF | Pkexec : OFF Directory : /home/konzalta/www/data-visualization/ |
Upload File : |
<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Budget Mtaani County Choropleth Prototype</title>
<style>
body{font-family:Inter,Arial,sans-serif;margin:0;background:#fff;color:#151515}.wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;align-items:center;min-height:100vh;padding:64px 8vw}h1{font-size:clamp(44px,6vw,86px);line-height:.95;margin:0 0 22px;font-weight:900;letter-spacing:-.05em}p{font-size:18px;line-height:1.6;color:#333}.eyebrow{font-weight:900;color:#9b1c31;letter-spacing:.08em;text-transform:uppercase;margin-bottom:18px}.question{background:#f4fbf7;border-left:5px solid #118c4f;padding:16px 18px;font-weight:800;margin:26px 0}.mapbox{position:relative;background:#f7f4eb;border-radius:28px;padding:22px;box-shadow:0 16px 45px rgba(0,0,0,.10);overflow:hidden}svg{width:100%;height:auto;display:block}path{cursor:pointer;transition:.18s}path:hover{filter:brightness(.92);stroke:#111;stroke-width:2}.tip{position:absolute;display:none;pointer-events:none;background:#111;color:#fff;padding:10px 12px;border-radius:12px;font-weight:800;font-size:14px;box-shadow:0 10px 22px rgba(0,0,0,.25)}.legend{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;font-size:13px;font-weight:700}.sw{width:18px;height:18px;border-radius:4px;display:inline-block;margin-right:4px;vertical-align:middle}@media(max-width:900px){.wrap{grid-template-columns:1fr;padding:40px 20px}}
</style></head><body><main class="wrap"><section><div class="eyebrow">Budget Mtaani</div><h1>County Yako Imepata Ngapi?</h1><p>Click a county to see its FY 2025/26 equitable share allocation. The darker the county, the larger the allocation in billions of shillings.</p><div class="question">Hii pesa inapaswa kusaidia huduma za county kama afya, maji, masoko, barabara ndogo na huduma za kila siku.</div><p><strong>Note:</strong> this is a prototype map. The allocation values are real from the Mwananchi Guide, but the county shapes here are simplified/generated for visual testing.</p></section><section class="mapbox"><div class="tip" id="tip"></div><svg viewBox="0 0 920 720" role="img" aria-label="Kenya counties choropleth map"><path d="M550.03,622.13 L583.66,633.59 L574.96,663.27 L550.03,622.13 Z" fill="#74c476" stroke="#ffffff" stroke-width="1" data-county="Mombasa" data-amount="8.2" data-rank="23"/>
<path d="M540.14,616.19 L550.03,622.13 L574.96,663.27 L572.85,670.47 L546.59,692.00 L506.14,663.83 L540.14,616.19 Z" fill="#74c476" stroke="#ffffff" stroke-width="1" data-county="Kwale" data-amount="9.0" data-rank="15"/>
<path d="M540.14,616.19 L545.62,543.51 L592.75,549.77 L613.27,567.20 L606.51,600.77 L585.57,627.08 L583.66,633.59 L550.03,622.13 L540.14,616.19 Z" fill="#238b45" stroke="#ffffff" stroke-width="1" data-county="Kilifi" data-amount="12.7" data-rank="6"/>
<path d="M534.24,533.02 L537.97,474.08 L663.28,419.17 L663.36,443.00 L677.85,463.19 L592.75,549.77 L545.62,543.51 L534.24,533.02 Z" fill="#c7e9c0" stroke="#ffffff" stroke-width="1" data-county="Tana River" data-amount="7.1" data-rank="30"/>
<path d="M592.75,549.77 L677.85,463.19 L701.97,496.80 L656.31,522.84 L640.20,550.04 L615.76,554.82 L613.27,567.20 L592.75,549.77 Z" fill="#f7fcb9" stroke="#ffffff" stroke-width="1" data-county="Lamu" data-amount="3.4" data-rank="47"/>
<path d="M509.34,537.37 L534.24,533.02 L545.62,543.51 L540.14,616.19 L506.14,663.83 L452.99,626.81 L448.55,588.99 L425.81,576.21 L509.34,537.37 Z" fill="#f7fcb9" stroke="#ffffff" stroke-width="1" data-county="Taita Taveta" data-amount="5.3" data-rank="43"/>
<path d="M530.47,334.14 L663.09,358.25 L663.28,419.17 L537.97,474.08 L509.94,423.54 L512.01,396.41 L522.35,355.02 L530.47,334.14 Z" fill="#74c476" stroke="#ffffff" stroke-width="1" data-county="Garissa" data-amount="8.7" data-rank="20"/>
<path d="M560.94,162.84 L569.88,163.89 L586.49,140.47 L663.76,203.94 L663.09,358.25 L530.47,334.14 L518.27,312.45 L560.94,162.84 Z" fill="#74c476" stroke="#ffffff" stroke-width="1" data-county="Wajir" data-amount="10.3" data-rank="11"/>
<path d="M586.49,140.47 L589.15,136.72 L648.72,109.44 L675.02,131.48 L719.58,131.49 L663.76,203.94 L586.49,140.47 Z" fill="#238b45" stroke="#ffffff" stroke-width="1" data-county="Mandera" data-amount="12.2" data-rank="7"/>
<path d="M420.36,114.99 L476.08,152.38 L496.69,153.04 L511.96,151.24 L526.39,158.76 L560.94,162.84 L518.27,312.45 L477.73,304.11 L381.64,233.68 L420.36,114.99 Z" fill="#c7e9c0" stroke="#ffffff" stroke-width="1" data-county="Marsabit" data-amount="7.1" data-rank="31"/>
<path d="M405.65,352.35 L477.73,304.11 L518.27,312.45 L530.47,334.14 L522.35,355.02 L417.14,380.22 L405.65,352.35 Z" fill="#f7fcb9" stroke="#ffffff" stroke-width="1" data-county="Isiolo" data-amount="5.1" data-rank="44"/>
<path d="M417.42,390.75 L417.14,380.22 L522.35,355.02 L512.01,396.41 L423.47,394.91 L417.42,390.75 Z" fill="#74c476" stroke="#ffffff" stroke-width="1" data-county="Meru" data-amount="10.4" data-rank="10"/>
<path d="M430.05,407.10 L423.47,394.91 L512.01,396.41 L509.94,423.54 L467.29,437.95 L430.05,407.10 Z" fill="#f7fcb9" stroke="#ffffff" stroke-width="1" data-county="Tharaka Nithi" data-amount="4.6" data-rank="46"/>
<path d="M439.40,456.64 L424.44,431.17 L430.05,407.10 L467.29,437.95 L439.40,456.64 Z" fill="#f7fcb9" stroke="#ffffff" stroke-width="1" data-county="Embu" data-amount="5.6" data-rank="39"/>
<path d="M509.34,537.37 L444.26,479.78 L439.60,456.68 L467.29,437.95 L509.94,423.54 L537.97,474.08 L534.24,533.02 L509.34,537.37 Z" fill="#238b45" stroke="#ffffff" stroke-width="1" data-county="Kitui" data-amount="11.4" data-rank="9"/>
<path d="M418.33,459.62 L439.60,456.68 L444.26,479.78 L416.70,514.51 L399.84,490.26 L410.73,468.93 L418.33,459.62 Z" fill="#74c476" stroke="#ffffff" stroke-width="1" data-county="Machakos" data-amount="10.0" data-rank="12"/>
<path d="M416.70,514.51 L444.26,479.78 L509.34,537.37 L425.81,576.21 L420.06,572.98 L416.70,514.51 Z" fill="#74c476" stroke="#ffffff" stroke-width="1" data-county="Makueni" data-amount="8.9" data-rank="16"/>
<path d="M357.10,365.30 L389.91,401.48 L369.97,434.62 L366.97,435.47 L350.81,372.91 L357.10,365.30 Z" fill="#c7e9c0" stroke="#ffffff" stroke-width="1" data-county="Nyandarua" data-amount="6.2" data-rank="36"/>
<path d="M389.91,401.48 L416.99,391.16 L409.20,422.02 L386.45,437.19 L369.97,434.62 L389.91,401.48 Z" fill="#c7e9c0" stroke="#ffffff" stroke-width="1" data-county="Nyeri" data-amount="6.8" data-rank="35"/>
<path d="M416.99,391.16 L423.47,394.91 L430.05,407.10 L424.44,431.17 L409.20,422.02 L416.99,391.16 Z" fill="#f7fcb9" stroke="#ffffff" stroke-width="1" data-county="Kirinyaga" data-amount="5.7" data-rank="38"/>
<path d="M386.45,437.19 L409.20,422.02 L424.44,431.17 L439.40,456.64 L418.33,459.62 L386.45,437.19 Z" fill="#c7e9c0" stroke="#ffffff" stroke-width="1" data-county="Murang’a" data-amount="7.8" data-rank="26"/>
<path d="M362.16,439.67 L369.97,434.62 L386.45,437.19 L418.33,459.62 L410.73,468.93 L360.05,464.32 L362.16,439.67 Z" fill="#238b45" stroke="#ffffff" stroke-width="1" data-county="Kiambu" data-amount="12.9" data-rank="5"/>
<path d="M381.64,233.68 L347.85,258.53 L265.16,237.31 L246.23,187.91 L238.61,155.18 L207.69,109.91 L292.00,28.00 L325.87,38.94 L325.87,75.54 L348.15,97.00 L393.54,97.00 L420.36,114.99 L381.64,233.68 Z" fill="#238b45" stroke="#ffffff" stroke-width="1" data-county="Turkana" data-amount="13.8" data-rank="3"/>
<path d="M347.85,258.53 L346.76,274.63 L291.31,321.19 L254.96,302.73 L274.92,262.76 L265.16,237.31 L347.85,258.53 Z" fill="#c7e9c0" stroke="#ffffff" stroke-width="1" data-county="West Pokot" data-amount="6.9" data-rank="34"/>
<path d="M353.30,309.96 L346.76,274.63 L347.85,258.53 L381.64,233.68 L477.73,304.11 L405.65,352.35 L367.71,341.72 L353.30,309.96 Z" fill="#f7fcb9" stroke="#ffffff" stroke-width="1" data-county="Samburu" data-amount="5.9" data-rank="37"/>
<path d="M291.31,321.19 L284.90,335.40 L267.58,344.50 L243.60,320.49 L254.96,302.73 L291.31,321.19 Z" fill="#c7e9c0" stroke="#ffffff" stroke-width="1" data-county="Trans Nzoia" data-amount="7.9" data-rank="24"/>
<path d="M267.58,344.50 L284.90,335.40 L305.77,350.45 L304.90,368.88 L273.06,360.56 L267.58,344.50 Z" fill="#74c476" stroke="#ffffff" stroke-width="1" data-county="Uasin Gishu" data-amount="8.9" data-rank="17"/>
<path d="M291.31,321.19 L346.76,274.63 L353.30,309.96 L305.77,350.45 L284.90,335.40 L291.31,321.19 Z" fill="#f7fcb9" stroke="#ffffff" stroke-width="1" data-county="Elgeyo/Marakwet" data-amount="5.0" data-rank="45"/>
<path d="M269.16,377.47 L273.06,360.56 L304.90,368.88 L315.40,387.92 L277.84,394.82 L270.91,384.59 L269.16,377.47 Z" fill="#c7e9c0" stroke="#ffffff" stroke-width="1" data-county="Nandi" data-amount="7.7" data-rank="27"/>
<path d="M305.77,350.45 L353.30,309.96 L367.71,341.72 L357.10,365.30 L350.81,372.91 L315.40,387.92 L304.90,368.88 L305.77,350.45 Z" fill="#c7e9c0" stroke="#ffffff" stroke-width="1" data-county="Baringo" data-amount="7.0" data-rank="33"/>
<path d="M367.71,341.72 L405.65,352.35 L417.14,380.22 L417.42,390.75 L389.91,401.48 L357.10,365.30 L367.71,341.72 Z" fill="#f7fcb9" stroke="#ffffff" stroke-width="1" data-county="Laikipia" data-amount="5.6" data-rank="40"/>
<path d="M315.40,387.92 L350.81,372.91 L366.97,435.47 L362.16,439.67 L322.92,428.60 L317.99,421.01 L315.40,387.92 Z" fill="#14532d" stroke="#ffffff" stroke-width="1" data-county="Nakuru" data-amount="14.3" data-rank="2"/>
<path d="M322.92,428.60 L362.16,439.67 L360.05,464.32 L355.11,487.06 L327.03,520.72 L283.66,496.35 L322.92,428.60 Z" fill="#74c476" stroke="#ffffff" stroke-width="1" data-county="Narok" data-amount="9.6" data-rank="14"/>
<path d="M355.11,487.06 L399.84,490.26 L416.70,514.51 L420.06,572.98 L327.03,520.72 L355.11,487.06 Z" fill="#74c476" stroke="#ffffff" stroke-width="1" data-county="Kajiado" data-amount="8.7" data-rank="21"/>
<path d="M277.84,394.82 L315.35,388.00 L317.99,421.01 L284.35,425.72 L272.60,405.16 L277.84,394.82 Z" fill="#c7e9c0" stroke="#ffffff" stroke-width="1" data-county="Kericho" data-amount="7.1" data-rank="32"/>
<path d="M274.44,444.44 L284.35,425.72 L317.99,421.01 L322.92,428.60 L283.66,496.35 L271.36,462.20 L274.44,444.44 Z" fill="#c7e9c0" stroke="#ffffff" stroke-width="1" data-county="Bomet" data-amount="7.3" data-rank="29"/>
<path d="M237.41,367.73 L267.33,347.75 L273.06,360.56 L269.16,377.47 L240.11,373.38 L237.41,367.73 Z" fill="#238b45" stroke="#ffffff" stroke-width="1" data-county="Kakamega" data-amount="13.6" data-rank="4"/>
<path d="M240.11,373.38 L269.16,377.47 L270.91,384.59 L240.48,391.60 L240.11,373.38 Z" fill="#f7fcb9" stroke="#ffffff" stroke-width="1" data-county="Vihiga" data-amount="5.5" data-rank="42"/>
<path d="M226.76,343.16 L243.60,320.49 L267.58,344.50 L267.33,347.75 L237.41,367.73 L232.04,364.87 L226.76,343.16 Z" fill="#238b45" stroke="#ffffff" stroke-width="1" data-county="Bungoma" data-amount="11.7" data-rank="8"/>
<path d="M232.04,364.87 L201.48,378.38 L226.76,343.16 L232.04,364.87 Z" fill="#c7e9c0" stroke="#ffffff" stroke-width="1" data-county="Busia" data-amount="7.9" data-rank="25"/>
<path d="M240.48,391.60 L237.38,400.59 L200.72,411.11 L201.48,378.38 L232.04,364.87 L237.41,367.73 L240.11,373.38 L240.48,391.60 Z" fill="#c7e9c0" stroke="#ffffff" stroke-width="1" data-county="Siaya" data-amount="7.6" data-rank="28"/>
<path d="M240.48,391.60 L270.91,384.59 L277.84,394.82 L272.60,405.16 L253.56,412.19 L237.38,400.59 L240.48,391.60 Z" fill="#74c476" stroke="#ffffff" stroke-width="1" data-county="Kisumu" data-amount="8.8" data-rank="18"/>
<path d="M237.38,400.59 L253.56,412.19 L241.07,438.80 L201.00,439.99 L200.72,411.11 L237.38,400.59 Z" fill="#74c476" stroke="#ffffff" stroke-width="1" data-county="Homa Bay" data-amount="8.5" data-rank="22"/>
<path d="M241.07,438.80 L271.36,462.20 L282.11,495.48 L201.08,448.98 L201.00,439.99 L241.07,438.80 Z" fill="#74c476" stroke="#ffffff" stroke-width="1" data-county="Migori" data-amount="8.8" data-rank="19"/>
<path d="M253.39,414.36 L274.44,444.44 L271.36,462.20 L241.07,438.80 L253.39,414.36 Z" fill="#74c476" stroke="#ffffff" stroke-width="1" data-county="Kisii" data-amount="9.7" data-rank="13"/>
<path d="M253.56,412.19 L272.60,405.16 L284.35,425.72 L274.44,444.44 L253.39,414.36 L253.56,412.19 Z" fill="#f7fcb9" stroke="#ffffff" stroke-width="1" data-county="Nyamira" data-amount="5.6" data-rank="41"/>
<path d="M360.05,464.32 L410.73,468.93 L399.84,490.26 L355.11,487.06 L360.05,464.32 Z" fill="#14532d" stroke="#ffffff" stroke-width="1" data-county="Nairobi" data-amount="21.1" data-rank="1"/></svg><div class="legend"><span><i class="sw" style="background:#f7fcb9"></i>Below 6B</span><span><i class="sw" style="background:#c7e9c0"></i>6–7.9B</span><span><i class="sw" style="background:#74c476"></i>8–10.9B</span><span><i class="sw" style="background:#238b45"></i>11–13.9B</span><span><i class="sw" style="background:#14532d"></i>14B+</span></div></section></main><script>
const tip=document.getElementById('tip');
document.querySelectorAll('path[data-county]').forEach(p=>{p.addEventListener('mousemove',e=>{tip.style.display='block';tip.style.left=(e.offsetX+20)+'px';tip.style.top=(e.offsetY+20)+'px';tip.innerHTML=`${p.dataset.county}<br>Ksh ${Number(p.dataset.amount).toFixed(1)}B<br>Rank #${p.dataset.rank}`;});p.addEventListener('mouseleave',()=>tip.style.display='none');});
</script></body></html>