| 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/public_html/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 Allocation Circular Voronoi</title>
<style>
:root{--bm-ink:#151515;--bm-muted:#5f5f5f;--bm-bg:#ffffff;--bm-maroon:#9b1c31;--bm-green:#118c4f;}
*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--bm-ink);background:#fff}
.bm-voronoi-story{min-height:92vh;display:grid;grid-template-columns:.85fr 1.15fr;align-items:center;gap:56px;padding:72px 7vw}
.bm-eyebrow{font-size:.82rem;font-weight:900;letter-spacing:.09em;text-transform:uppercase;color:var(--bm-maroon);margin-bottom:18px}
h1{font-size:clamp(2.9rem,5.6vw,6.2rem);line-height:.94;letter-spacing:-.06em;margin:0 0 24px;max-width:680px}
.bm-copy p{font-size:1.12rem;line-height:1.7;color:#333;max-width:580px;margin:0 0 18px}
.bm-human-question{font-size:1.02rem;font-weight:850;padding:16px 18px;border-left:5px solid var(--bm-green);background:#f4fbf7;margin:26px 0;max-width:580px}
.bm-controls{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:20px}
.bm-controls select,.bm-controls button{border:2px solid #ddd;border-radius:999px;padding:13px 18px;background:#fff;font-weight:800;color:#151515}
.bm-controls button{cursor:pointer;border:none;color:#fff;background:linear-gradient(135deg,#f26b2f,#8e3fd1)}
.bm-visual-card{position:relative;background:#fff;border-radius:30px;padding:16px;min-height:620px}
.bm-visual-title{text-align:center;font-weight:950;font-size:clamp(1.6rem,3vw,3.2rem);letter-spacing:-.04em;margin:0 0 2px}
.bm-visual-subtitle{text-align:center;color:#777;font-weight:750;margin:0 0 10px}
#bmCircularVoronoi{width:100%;height:auto;display:block;overflow:visible}
.bm-cell{stroke:#fff;stroke-width:2.2;cursor:pointer;transition:opacity .16s ease,filter .16s ease}
.bm-cell:hover,.bm-cell.is-active{filter:brightness(.92) saturate(1.12);stroke:#151515;stroke-width:3}
.bm-label{pointer-events:none;font-weight:900;fill:#fff;text-anchor:middle;paint-order:stroke;stroke:rgba(0,0,0,.35);stroke-width:3px;stroke-linejoin:round}
.bm-small-label{pointer-events:none;font-weight:800;fill:#111;text-anchor:middle;font-size:11px}
.bm-tooltip{position:absolute;display:none;pointer-events:none;background:#111;color:#fff;padding:12px 14px;border-radius:14px;font-weight:800;font-size:14px;box-shadow:0 12px 26px rgba(0,0,0,.24);z-index:4;max-width:260px}
.bm-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:8px;font-size:13px;font-weight:800;color:#444}
.bm-legend span{display:inline-flex;align-items:center;gap:6px}.bm-legend i{width:18px;height:18px;border-radius:6px;display:inline-block}
.bm-note{font-size:12px;color:#777;text-align:center;margin:14px auto 0;max-width:720px;line-height:1.5}
@media(max-width:960px){.bm-voronoi-story{grid-template-columns:1fr;padding:52px 22px;gap:28px}.bm-visual-card{min-height:auto;padding:8px}}
</style>
</head>
<body>
<section class="bm-voronoi-story">
<div class="bm-copy">
<div class="bm-eyebrow">Budget Mtaani · County Money</div>
<h1>County Yako Imepata Ngapi?</h1>
<p>This circular Voronoi-style visual shows the FY 2025/26 equitable share for Kenya’s 47 counties. Bigger shapes mean bigger allocations.</p>
<p>It is not a normal map. It is a money map. The shape is designed to make comparison easier, especially for wananchi reading on phone screens.</p>
<div class="bm-human-question">Swali la mtaani: county yako imepata kiasi gani, na hiyo pesa itaguza huduma gani karibu na wewe?</div>
<div class="bm-controls">
<select id="bmCountySelect" aria-label="Choose county"><option value="">Chagua county...</option></select>
<button id="bmReset">Show all counties</button>
</div>
</div>
<div class="bm-visual-card">
<h2 class="bm-visual-title">County Equitable Share</h2>
<p class="bm-visual-subtitle">Total: Ksh 405.1 billion</p>
<div class="bm-tooltip" id="bmTooltip"></div>
<svg id="bmCircularVoronoi" viewBox="0 0 920 820" role="img" aria-label="Circular Voronoi-style diagram of Kenya county allocations"></svg>
<div class="bm-legend">
<span><i style="background:#f7c66a"></i>Below 6B</span>
<span><i style="background:#e89a54"></i>6–7.9B</span>
<span><i style="background:#d75a68"></i>8–10.9B</span>
<span><i style="background:#8e6aa8"></i>11–13.9B</span>
<span><i style="background:#4f8fc0"></i>14B+</span>
</div>
<p class="bm-note">Built with D3. This uses weighted circle packing styled as a circular Voronoi/treemap for WordPress reliability. It communicates allocation size clearly without needing county boundary geometry.</p>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
<script>
const countyData = [
{
"county": "Baringo",
"amount": 7.0,
"rank": 33,
"story_label": "Baringo imepata Ksh 7.0B",
"simple_explanation": "Hii ni pesa ya kusaidia huduma za county kama afya, maji, masoko, barabara ndogo na huduma za karibu na mwananchi."
},
{
"county": "Bomet",
"amount": 7.3,
"rank": 29,
"story_label": "Bomet imepata Ksh 7.3B",
"simple_explanation": "Hii ni pesa ya kusaidia huduma za county kama afya, maji, masoko, barabara ndogo na huduma za karibu na mwananchi."
},
{
"county": "Bungoma",
"amount": 11.7,
"rank": 8,
"story_label": "Bungoma imepata Ksh 11.7B",
"simple_explanation": "Hii ni pesa ya kusaidia huduma za county kama afya, maji, masoko, barabara ndogo na huduma za karibu na mwananchi."
},
{
"county": "Busia",
"amount": 7.9,
"rank": 25,
"story_label": "Busia imepata Ksh 7.9B",
"simple_explanation": "Hii ni pesa ya kusaidia huduma za county kama afya, maji, masoko, barabara ndogo na huduma za karibu na mwananchi."
},
{
"county": "Elgeyo/Marakwet",
"amount": 5.0,
"rank": 45,
"story_label": "Elgeyo/Marakwet imepata Ksh 5.0B",
"simple_explanation": "Hii ni pesa ya kusaidia huduma za county kama afya, maji, masoko, barabara ndogo na huduma za karibu na mwananchi."
},
{
"county": "Embu",
"amount": 5.6,
"rank": 39,
"story_label": "Embu imepata Ksh 5.6B",
"simple_explanation": "Hii ni pesa ya kusaidia huduma za county kama afya, maji, masoko, barabara ndogo na huduma za karibu na mwananchi."
},
{
"county": "Garissa",
"amount": 8.7,
"rank": 20,
"story_label": "Garissa imepata Ksh 8.7B",
"simple_explanation": "Hii ni pesa ya kusaidia huduma za county kama afya, maji, masoko, barabara ndogo na huduma za karibu na mwananchi."
},
{
"county": "Homa Bay",
"amount": 8.5,
"rank": 22,
"story_label": "Homa Bay imepata Ksh 8.5B",
"simple_explanation": "Hii ni pesa ya kusaidia huduma za county kama afya, maji, masoko, barabara ndogo na huduma za karibu na mwananchi."
},
{
"county": "Isiolo",
"amount": 5.1,
"rank": 44,
"story_label": "Isiolo imepata Ksh 5.1B",
"simple_explanation": "Hii ni pesa ya kusaidia huduma za county kama afya, maji, masoko, barabara ndogo na huduma za karibu na mwananchi."
},
{
"county": "Kajiado",
"amount": 8.7,
"rank": 21,
"story_label": "Kajiado imepata Ksh 8.7B",
"simple_explanation": "Hii ni pesa ya kusaidia huduma za county kama afya, maji, masoko, barabara ndogo na huduma za karibu na mwananchi."
},
{
"county": "Kakamega",
"amount": 13.6,
"rank": 4,
"story_label": "Kakamega imepata Ksh 13.6B",
"simple_explanation": "Hii ni pesa ya kusaidia huduma za county kama afya, maji, masoko, barabara ndogo na huduma za karibu na mwananchi."
},
{
"county": "Kericho",
"amount": 7.1,
"rank": 32,
"story_label": "Kericho imepata Ksh 7.1B",
"simple_explanation": "Hii ni pesa ya kusaidia huduma za county kama afya, maji, masoko, barabara ndogo na huduma za karibu na mwananchi."
},
{
"county": "Kiambu",
"amount": 12.9,
"rank": 5,
"story_label": "Kiambu imepata Ksh 12.9B",
"simple_explanation": "Hii ni pesa ya kusaidia huduma za county kama afya, maji, masoko, barabara ndogo na huduma za karibu na mwananchi."
},
{
"county": "Kilifi",
"amount": 12.7,
"rank": 6,
"story_label": "Kilifi imepata Ksh 12.7B",
"simple_explanation": "Hii ni pesa ya kusaidia huduma za county kama afya, maji, masoko, barabara ndogo na huduma za karibu na mwananchi."
},
{
"county": "Kirinyaga",
"amount": 5.7,
"rank": 38,
"story_label": "Kirinyaga imepata Ksh 5.7B",
"simple_explanation": "Hii ni pesa ya kusaidia huduma za county kama afya, maji, masoko, barabara ndogo na huduma za karibu na mwananchi."
},
{
"county": "Kisii",
"amount": 9.7,
"rank": 13,
"story_label": "Kisii imepata Ksh 9.7B",
"simple_explanation": "Hii ni pesa ya kusaidia huduma za county kama afya, maji, masoko, barabara ndogo na huduma za karibu na mwananchi."
},
{
"county": "Kisumu",
"amount": 8.8,
"rank": 18,
"story_label": "Kisumu imepata Ksh 8.8B",
"simple_explanation": "Hii ni pesa ya kusaidia huduma za county kama afya, maji, masoko, barabara ndogo na huduma za karibu na mwananchi."
},
{
"county": "Kitui",
"amount": 11.4,
"rank": 9,
"story_label": "Kitui imepata Ksh 11.4B",
"simple_explanation": "Hii ni pesa ya kusaidia huduma za county kama afya, maji, masoko, barabara ndogo na huduma za karibu na mwananchi."
},
{
"county": "Kwale",
"amount": 9.0,
"rank": 15,
"story_label": "Kwale imepata Ksh 9.0B",
"simple_explanation": "Hii ni pesa ya kusaidia huduma za county kama afya, maji, masoko, barabara ndogo na huduma za karibu na mwananchi."
},
{
"county": "Laikipia",
"amount": 5.6,
"rank": 40,
"story_label": "Laikipia imepata Ksh 5.6B",
"simple_explanation": "Hii ni pesa ya kusaidia huduma za county kama afya, maji, masoko, barabara ndogo na huduma za karibu na mwananchi."
},
{
"county": "Lamu",
"amount": 3.4,
"rank": 47,
"story_label": "Lamu imepata Ksh 3.4B",
"simple_explanation": "Hii ni pesa ya kusaidia huduma za county kama afya, maji, masoko, barabara ndogo na huduma za karibu na mwananchi."
},
{
"county": "Machakos",
"amount": 10.0,
"rank": 12,
"story_label": "Machakos imepata Ksh 10.0B",
"simple_explanation": "Hii ni pesa ya kusaidia huduma za county kama afya, maji, masoko, barabara ndogo na huduma za karibu na mwananchi."
},
{
"county": "Makueni",
"amount": 8.9,
"rank": 16,
"story_label": "Makueni imepata Ksh 8.9B",
"simple_explanation": "Hii ni pesa ya kusaidia huduma za county kama afya, maji, masoko, barabara ndogo na huduma za karibu na mwananchi."
},
{
"county": "Mandera",
"amount": 12.2,
"rank": 7,
"story_label": "Mandera imepata Ksh 12.2B",
"simple_explanation": "Hii ni pesa ya kusaidia huduma za county kama afya, maji, masoko, barabara ndogo na huduma za karibu na mwananchi."
},
{
"county": "Marsabit",
"amount": 7.1,
"rank": 31,
"story_label": "Marsabit imepata Ksh 7.1B",
"simple_explanation": "Hii ni pesa ya kusaidia huduma za county kama afya, maji, masoko, barabara ndogo na huduma za karibu na mwananchi."
},
{
"county": "Meru",
"amount": 10.4,
"rank": 10,
"story_label": "Meru imepata Ksh 10.4B",
"simple_explanation": "Hii ni pesa ya kusaidia huduma za county kama afya, maji, masoko, barabara ndogo na huduma za karibu na mwananchi."
},
{
"county": "Migori",
"amount": 8.8,
"rank": 19,
"story_label": "Migori imepata Ksh 8.8B",
"simple_explanation": "Hii ni pesa ya kusaidia huduma za county kama afya, maji, masoko, barabara ndogo na huduma za karibu na mwananchi."
},
{
"county": "Mombasa",
"amount": 8.2,
"rank": 23,
"story_label": "Mombasa imepata Ksh 8.2B",
"simple_explanation": "Hii ni pesa ya kusaidia huduma za county kama afya, maji, masoko, barabara ndogo na huduma za karibu na mwananchi."
},
{
"county": "Murang’a",
"amount": 7.8,
"rank": 26,
"story_label": "Murang’a imepata Ksh 7.8B",
"simple_explanation": "Hii ni pesa ya kusaidia huduma za county kama afya, maji, masoko, barabara ndogo na huduma za karibu na mwananchi."
},
{
"county": "Nairobi",
"amount": 21.1,
"rank": 1,
"story_label": "Nairobi imepata Ksh 21.1B",
"simple_explanation": "Hii ni pesa ya kusaidia huduma za county kama afya, maji, masoko, barabara ndogo na huduma za karibu na mwananchi."
},
{
"county": "Nakuru",
"amount": 14.3,
"rank": 2,
"story_label": "Nakuru imepata Ksh 14.3B",
"simple_explanation": "Hii ni pesa ya kusaidia huduma za county kama afya, maji, masoko, barabara ndogo na huduma za karibu na mwananchi."
},
{
"county": "Nandi",
"amount": 7.7,
"rank": 27,
"story_label": "Nandi imepata Ksh 7.7B",
"simple_explanation": "Hii ni pesa ya kusaidia huduma za county kama afya, maji, masoko, barabara ndogo na huduma za karibu na mwananchi."
},
{
"county": "Narok",
"amount": 9.6,
"rank": 14,
"story_label": "Narok imepata Ksh 9.6B",
"simple_explanation": "Hii ni pesa ya kusaidia huduma za county kama afya, maji, masoko, barabara ndogo na huduma za karibu na mwananchi."
},
{
"county": "Nyamira",
"amount": 5.6,
"rank": 41,
"story_label": "Nyamira imepata Ksh 5.6B",
"simple_explanation": "Hii ni pesa ya kusaidia huduma za county kama afya, maji, masoko, barabara ndogo na huduma za karibu na mwananchi."
},
{
"county": "Nyandarua",
"amount": 6.2,
"rank": 36,
"story_label": "Nyandarua imepata Ksh 6.2B",
"simple_explanation": "Hii ni pesa ya kusaidia huduma za county kama afya, maji, masoko, barabara ndogo na huduma za karibu na mwananchi."
},
{
"county": "Nyeri",
"amount": 6.8,
"rank": 35,
"story_label": "Nyeri imepata Ksh 6.8B",
"simple_explanation": "Hii ni pesa ya kusaidia huduma za county kama afya, maji, masoko, barabara ndogo na huduma za karibu na mwananchi."
},
{
"county": "Samburu",
"amount": 5.9,
"rank": 37,
"story_label": "Samburu imepata Ksh 5.9B",
"simple_explanation": "Hii ni pesa ya kusaidia huduma za county kama afya, maji, masoko, barabara ndogo na huduma za karibu na mwananchi."
},
{
"county": "Siaya",
"amount": 7.6,
"rank": 28,
"story_label": "Siaya imepata Ksh 7.6B",
"simple_explanation": "Hii ni pesa ya kusaidia huduma za county kama afya, maji, masoko, barabara ndogo na huduma za karibu na mwananchi."
},
{
"county": "Taita Taveta",
"amount": 5.3,
"rank": 43,
"story_label": "Taita Taveta imepata Ksh 5.3B",
"simple_explanation": "Hii ni pesa ya kusaidia huduma za county kama afya, maji, masoko, barabara ndogo na huduma za karibu na mwananchi."
},
{
"county": "Tana River",
"amount": 7.1,
"rank": 30,
"story_label": "Tana River imepata Ksh 7.1B",
"simple_explanation": "Hii ni pesa ya kusaidia huduma za county kama afya, maji, masoko, barabara ndogo na huduma za karibu na mwananchi."
},
{
"county": "Tharaka Nithi",
"amount": 4.6,
"rank": 46,
"story_label": "Tharaka Nithi imepata Ksh 4.6B",
"simple_explanation": "Hii ni pesa ya kusaidia huduma za county kama afya, maji, masoko, barabara ndogo na huduma za karibu na mwananchi."
},
{
"county": "Trans Nzoia",
"amount": 7.9,
"rank": 24,
"story_label": "Trans Nzoia imepata Ksh 7.9B",
"simple_explanation": "Hii ni pesa ya kusaidia huduma za county kama afya, maji, masoko, barabara ndogo na huduma za karibu na mwananchi."
},
{
"county": "Turkana",
"amount": 13.8,
"rank": 3,
"story_label": "Turkana imepata Ksh 13.8B",
"simple_explanation": "Hii ni pesa ya kusaidia huduma za county kama afya, maji, masoko, barabara ndogo na huduma za karibu na mwananchi."
},
{
"county": "Uasin Gishu",
"amount": 8.9,
"rank": 17,
"story_label": "Uasin Gishu imepata Ksh 8.9B",
"simple_explanation": "Hii ni pesa ya kusaidia huduma za county kama afya, maji, masoko, barabara ndogo na huduma za karibu na mwananchi."
},
{
"county": "Vihiga",
"amount": 5.5,
"rank": 42,
"story_label": "Vihiga imepata Ksh 5.5B",
"simple_explanation": "Hii ni pesa ya kusaidia huduma za county kama afya, maji, masoko, barabara ndogo na huduma za karibu na mwananchi."
},
{
"county": "Wajir",
"amount": 10.3,
"rank": 11,
"story_label": "Wajir imepata Ksh 10.3B",
"simple_explanation": "Hii ni pesa ya kusaidia huduma za county kama afya, maji, masoko, barabara ndogo na huduma za karibu na mwananchi."
},
{
"county": "West Pokot",
"amount": 6.9,
"rank": 34,
"story_label": "West Pokot imepata Ksh 6.9B",
"simple_explanation": "Hii ni pesa ya kusaidia huduma za county kama afya, maji, masoko, barabara ndogo na huduma za karibu na mwananchi."
}
];
const svg = d3.select("#bmCircularVoronoi");
const g = svg.append("g").attr("transform", "translate(460,410)");
const tooltip = d3.select("#bmTooltip");
function color(v) {
if (v >= 14) return "#4f8fc0";
if (v >= 11) return "#8e6aa8";
if (v >= 8) return "#d75a68";
if (v >= 6) return "#e89a54";
return "#f7c66a";
}
function readableName(name) {
return name.replace("Elgeyo/Marakwet", "Elgeyo\nMarakwet").replace("Tharaka Nithi", "Tharaka\nNithi").replace("Taita Taveta", "Taita\nTaveta").replace("Tana River", "Tana\nRiver").replace("West Pokot", "West\nPokot");
}
const root = d3.hierarchy({children: countyData}).sum(d => d.amount).sort((a,b) => b.value - a.value);
d3.pack().size([760,760]).padding(4)(root);
const leaves = root.leaves();
const cells = g.selectAll("g.bm-node").data(leaves).join("g").attr("class","bm-node").attr("transform", d => `translate(${d.x-380},${d.y-380})`);
cells.append("circle")
.attr("class","bm-cell")
.attr("r", d => d.r)
.attr("fill", d => color(d.data.amount))
.attr("data-county", d => d.data.county)
.on("mousemove", function(event,d) {
const card = document.querySelector(".bm-visual-card").getBoundingClientRect();
tooltip.style("display","block")
.style("left",(event.clientX-card.left+18)+"px")
.style("top",(event.clientY-card.top+18)+"px")
.html(`<strong>${d.data.county}</strong><br>Ksh ${d.data.amount.toFixed(1)}B<br>Rank #${d.data.rank}`);
})
.on("mouseleave", () => tooltip.style("display","none"))
.on("click", (event,d) => chooseCounty(d.data.county));
cells.each(function(d) {
const node = d3.select(this);
if (d.r >= 42) {
const parts = readableName(d.data.county).split("\n");
parts.forEach((part,i) => {
node.append("text").attr("class","bm-label").attr("dy",(i-(parts.length-1)/2)*16-4).style("font-size", Math.min(18, Math.max(10, d.r/4.2))+"px").text(part);
});
node.append("text").attr("class","bm-label").attr("dy", parts.length*11+8).style("font-size", Math.min(15, Math.max(10, d.r/5.5))+"px").text("Ksh "+d.data.amount.toFixed(1)+"B");
} else if (d.r >= 24) {
node.append("text").attr("class","bm-small-label").attr("dy",4).text(d.data.county.split(" ")[0].slice(0,9));
}
});
const select = d3.select("#bmCountySelect");
select.selectAll("option.county")
.data([...countyData].sort((a,b) => a.county.localeCompare(b.county)))
.join("option").attr("class","county").attr("value", d => d.county).text(d => `${d.county} — Ksh ${d.amount.toFixed(1)}B`);
function chooseCounty(name) {
select.property("value", name);
svg.selectAll(".bm-cell").classed("is-active", d => d && d.data.county === name).style("opacity", d => !name || d.data.county === name ? 1 : .28);
}
select.on("change", event => chooseCounty(event.target.value));
d3.select("#bmReset").on("click", () => chooseCounty(""));
</script>
</body>
</html>