${totalArticles.toLocaleString()}
Total Articles
${avgArticles.toLocaleString()}
Average Articles
${maxArticles.toLocaleString()}
Peak Output
`;
document.getElementById("totalArticlesSpan").innerText = totalArticles.toLocaleString();
}// Function to update table rows
function updateTable() {
const tbody = document.getElementById("tableBody");
tbody.innerHTML = "";
const totalArticles = currentData.reduce((sum, uni) => sum + uni.articles, 0);
currentData.forEach((uni) => {
const percentage = totalArticles > 0 ? ((uni.articles / totalArticles) * 100).toFixed(1) : 0;
let countryClass = "";
let countryFlag = "";
if (uni.country === "Saudi Arabia") {
countryClass = "country-sa";
countryFlag = "🇸🇦";
} else if (uni.country === "Egypt") {
countryClass = "country-eg";
countryFlag = "🇪🇬";
} else if (uni.country === "Iraq") {
countryClass = "country-iq";
countryFlag = "🇮🇶";
}
const row = `
| ${uni.rank} | ${uni.name} | ${countryFlag} ${uni.country} | ${uni.articles.toLocaleString()} | ${percentage}% |
`;
tbody.innerHTML += row;
});
}// Aggregate publication data by country
function getCountryData() {
const countryMap = new Map();
currentData.forEach(uni => {
const count = countryMap.get(uni.country) || 0;
countryMap.set(uni.country, count + uni.articles);
});
const countryNames = {
"Saudi Arabia": "🇸🇦 Saudi Arabia",
"Egypt": "🇪🇬 Egypt",
"Iraq": "🇮🇶 Iraq"
};
const labels = [];
const values = [];
for (let [country, articles] of countryMap) {
labels.push(countryNames[country] || country);
values.push(articles);
}
return { labels, values };
}// Update Chart.js instances
function updateCharts() {
const countryData = getCountryData();
if (countryChart) countryChart.destroy();
if (universitiesChart) universitiesChart.destroy();const ctxCountry = document.getElementById('countryChart').getContext('2d');
countryChart = new Chart(ctxCountry, {
type: 'bar',
data: {
labels: countryData.labels,
datasets: [{
label: 'Published Articles',
data: countryData.values,
backgroundColor: ['#1e3c72', '#2a5298', '#3a6ea5'],
borderRadius: 10,
borderSkipped: false
}]
},
options: {
responsive: true,
maintainAspectRatio: true,
plugins: {
legend: { position: 'top', labels: { font: { size: 12 } } },
tooltip: { callbacks: { label: (ctx) => `${ctx.raw.toLocaleString()} articles` } }
}
}
});const ctxUni = document.getElementById('universitiesChart').getContext('2d');
const top5 = [...currentData].sort((a,b) => b.articles - a.articles).slice(0,6);
universitiesChart = new Chart(ctxUni, {
type: 'bar',
data: {
labels: top5.map(u => u.name.split(' ').slice(0,2).join(' ')),
datasets: [{
label: 'Articles Count',
data: top5.map(u => u.articles),
backgroundColor: '#ff9800',
borderRadius: 10
}]
},
options: {
responsive: true,
maintainAspectRatio: true,
plugins: { legend: { position: 'top' }, tooltip: { callbacks: { label: (ctx) => `${ctx.raw.toLocaleString()} articles` } } }
}
});
}// Apply active filters
function applyFilters() {
const country = document.getElementById('countryFilter').value;
const minArticles = parseInt(document.getElementById('minArticles').value) || 0;
currentData = originalData.filter(uni => {
if (country !== 'all' && uni.country !== country) return false;
if (uni.articles < minArticles) return false;
return true;
});
updateStats();
updateTable();
updateCharts();
}// Reset filters
function resetFilters() {
document.getElementById('countryFilter').value = 'all';
document.getElementById('minArticles').value = '0';
applyFilters();
}// Attach Event Listeners
document.getElementById('countryFilter').addEventListener('change', applyFilters);
document.getElementById('minArticles').addEventListener('input', applyFilters);
document.getElementById('resetBtn').addEventListener('click', resetFilters);
// Initial Execution
applyFilters();
