Resources



Goal: Inform -> Viz/Presentation: KPI Cards (HTML/Tailwind) -> Interaction: Static -> Justification: Provides an immediate, at-a-glance summary of important figures. -> Library/Method: HTML/CSS.
– Report Info: Recent Policy Implementation -> Goal: Inform -> Viz/Presentation: Text Block -> Interaction: Static -> Justification: Provides concise, contextual information on a current topic. -> Library/Method: HTML/CSS.
– Report Info: Historical Voter Turnout and GDP -> Goal: Change -> Viz/Presentation: Line Charts -> Interaction: Hover tooltips for data points -> Justification: Effectively visualizes electoral participation and economic growth trends over time, allowing for comparative analysis. -> Library/Method: Chart.js (Canvas).
– Report Info: County Budget Allocations -> Goal: Compare/Inform -> Viz/Presentation: Doughnut Chart -> Interaction: Dropdown to filter by county -> Justification: Enables users to interactively compare the fiscal priorities of different devolved governments. -> Library/Method: Chart.js (Canvas) with Vanilla JS for updates.
– Report Info: Major Policy Frameworks -> Goal: Organize/Inform -> Viz/Presentation: Interactive Tabs -> Interaction: Click to reveal policy summaries -> Justification: Condenses dense textual information into a clean, user-driven interface, preventing information overload. -> Library/Method: Vanilla JS + HTML/CSS.
–>

CGPAK – Governance & Policy Dashboard

body {
font-family: ‘Inter’, sans-serif;
background-color: #f0f2f5;
}
h1, h2, h3, h4, h5, h6 {
font-family: ‘Merriweather’, serif;
}
:root {
–color-black: #000000;
–color-red: #990000;
–color-green: #006b3f;
–color-white: #ffffff;
}
.chart-container {
position: relative;
width: 100%;
max-width: 600px;
margin-left: auto;
margin-right: auto;
height: 300px;
max-height: 400px;
}
@media (min-width: 768px) {
.chart-container {
height: 350px;
}
}
.tab-button.active {
border-color: var(–color-red);
color: var(–color-red);
background-color: #fdf2f2;
}

Interactive Governance & Policy Dashboard

An interactive exploration of Kenya’s governance structures, historical political landscape, and key policy frameworks. This dashboard provides data-driven insights to inform and engage.

National Governance At-a-Glance

Counties

47

Devolved Government Units

Last Election Turnout

65.4%

Registered Voters in 2022

Parliament Members

416

National Assembly & Senate

Active Policies Tracked

3

Major National Frameworks

Recent Developments

Staying up-to-date with recent events is crucial for understanding the current policy landscape. The following information provides context on a significant recent legislative development.

The Digital Economy Bill (2024)

The recently enacted Digital Economy Bill aims to regulate digital services, promote e-commerce, and protect consumer data. This legislation is a cornerstone of the Bottom-Up Economic Transformation Agenda (BETA), focusing on creating a secure and enabling environment for technological innovation and small business growth. The bill’s provisions include a framework for data privacy, consumer protection against online fraud, and incentives for digital startups, marking a significant step in Kenya’s digital transformation journey.

Visualizing Public Engagement

Civic engagement goes beyond voting. These images illustrate different aspects of community involvement, from public forums and policy discussions to grassroots community development projects and youth participation.

Image of a community development project in Kenya

Community members participating in a local development project.

Image of citizens registering to vote in Kenya

Citizens line up to register for a national election.

Image of a public discussion or forum in Kenya

A public forum where citizens engage with local leaders on policy issues.

County Focus

Devolution is a cornerstone of Kenya’s 2010 constitution. This section allows for an interactive look at how different counties allocate their budgets across key sectors. Select a county from the dropdown menu to visualize its spending priorities and understand local governance in action.

Nairobi
Mombasa
Kisumu
Nakuru

Policy Explorer

Understanding national development requires a grasp of key policy frameworks. This interactive explorer provides concise summaries of major government agendas. Click on each tab to learn about the objectives and pillars of these transformative initiatives.



Kenya Vision 2030

Kenya Vision 2030 is the long-term development blueprint for the country. It aims to transform Kenya into a newly industrializing, middle-income country providing a high quality of life to all its citizens by 2030 in a clean and secure environment. The vision is based on three pillars: the economic, the social, and the political. The economic pillar aims to achieve an average economic growth rate of 10 per cent per annum. The social pillar seeks to build a just and cohesive society with social equity in a clean and secure environment. The political pillar aims to realize a democratic political system that is issue-based, people-centered, result-oriented and accountable to the public.

© 2024 CGPAK. All Rights Reserved.

Data on this dashboard is for illustrative purposes.

document.addEventListener(‘DOMContentLoaded’, function() {
// Data for charts
const voterTurnoutData = {
labels: [‘1992’, ‘1997’, ‘2002’, ‘2007’, ‘2013’, ‘2017’, ‘2022’],
datasets: [{
label: ‘Voter Turnout (%)’,
data: [69.4, 68.2, 55.2, 69.1, 85.9, 79.5, 65.4],
borderColor: ‘var(–color-red)’,
backgroundColor: ‘rgba(153, 0, 0, 0.1)’,
fill: true,
tension: 0.3,
borderWidth: 2
}]
};

const gdpGrowthData = {
labels: [‘1992’, ‘1997’, ‘2002’, ‘2007’, ‘2013’, ‘2017’, ‘2022’],
datasets: [{
label: ‘GDP Growth (%)’,
data: [2.0, 0.9, 1.4, 7.1, 5.9, 4.8, 4.8],
borderColor: ‘var(–color-green)’,
backgroundColor: ‘rgba(0, 107, 63, 0.1)’,
fill: true,
tension: 0.3,
borderWidth: 2
}]
};

const countyBudgetData = {
Nairobi: {
labels: [‘Health’, ‘Infrastructure’, ‘Education’, ‘Administration’, ‘Social Services’],
data: [30, 25, 20, 15, 10]
},
Mombasa: {
labels: [‘Tourism & Trade’, ‘Health’, ‘Infrastructure’, ‘Environment’, ‘Administration’],
data: [35, 25, 15, 15, 10]
},
Kisumu: {
labels: [‘Agriculture’, ‘Health’, ‘Infrastructure’, ‘Trade’, ‘Education’],
data: [28, 22, 20, 15, 15]
},
Nakuru: {
labels: [‘Agriculture’, ‘Health’, ‘Infrastructure’, ‘Tourism’, ‘Administration’],
data: [40, 20, 18, 12, 10]
}
};

// Chart.js Configuration
const chartOptions = {
maintainAspectRatio: false,
responsive: true,
plugins: {
legend: {
position: ‘bottom’,
},
tooltip: {
backgroundColor: ‘#333’,
titleColor: ‘#fff’,
bodyColor: ‘#fff’,
callbacks: {
label: function(context) {
let label = context.dataset.label || ”;
if (label) {
label += ‘: ‘;
}
if (context.parsed.y !== null) {
label += context.parsed.y + ‘%’;
}
return label;
}
}
}
}
};

const doughnutChartOptions = {
maintainAspectRatio: false,
responsive: true,
plugins: {
legend: {
position: ‘right’,
},
tooltip: {
callbacks: {
label: function(context) {
let label = context.label || ”;
if (label) {
label += ‘: ‘;
}
if (context.parsed !== null) {
label += context.parsed + ‘%’;
}
return label;
}
}
}
}
};

// Voter Turnout Chart
const voterTurnoutCtx = document.getElementById(‘voterTurnoutChart’).getContext(‘2d’);
new Chart(voterTurnoutCtx, {
type: ‘line’,
data: voterTurnoutData,
options: chartOptions
});

// GDP Growth Chart
const gdpGrowthCtx = document.getElementById(‘gdpGrowthChart’).getContext(‘2d’);
new Chart(gdpGrowthCtx, {
type: ‘line’,
data: gdpGrowthData,
options: chartOptions
});

// County Budget Chart
const countyBudgetCtx = document.getElementById(‘countyBudgetChart’).getContext(‘2d’);
let countyBudgetChart = new Chart(countyBudgetCtx, {
type: ‘doughnut’,
data: {
labels: countyBudgetData.Nairobi.labels,
datasets: [{
data: countyBudgetData.Nairobi.data,
backgroundColor: [‘#006b3f’, ‘#990000’, ‘#2c3e50’, ‘#f39c12’, ‘#3498db’]
}]
},
options: doughnutChartOptions
});

// County Selector Logic
const countySelector = document.getElementById(‘countySelector’);
countySelector.addEventListener(‘change’, function(e) {
const selectedCounty = e.target.value;
const newData = countyBudgetData[selectedCounty];
countyBudgetChart.data.labels = newData.labels;
countyBudgetChart.data.datasets[0].data = newData.data;
countyBudgetChart.update();
});

// Policy Explorer Tab Logic
const tabButtons = document.querySelectorAll(‘.tab-button’);
const tabContents = document.querySelectorAll(‘.tab-content’);

tabButtons.forEach(button => {
button.addEventListener(‘click’, () => {
const tabId = button.dataset.tab;

tabButtons.forEach(btn => {
btn.classList.remove(‘active’);
});
button.classList.add(‘active’);

tabContents.forEach(content => {
if (content.id === tabId) {
content.classList.remove(‘hidden’);
} else {
content.classList.add(‘hidden’);
}
});
});
});
});