2b:null 2c:["$","title",null,{"children":"Data Story | Jillian Dudziak's Workspace | Observable"}] 31:T16ae,// Import the G2Plot library g2plot = require('@antv/g2plot@2').then(async g2plot => { // Define your data (one category = one bar) const data = [ { category: 'Documents', status: 'Legible', percentage: 84.37, count: 149205 }, { category: 'Documents', status: 'Blurred', percentage: 8.06, count: 14252 }, { category: 'Documents', status: 'Not uploaded', percentage: 4.24, count: 7493 }, { category: 'Documents', status: 'Wrong election', percentage: 1.72, count: 3039 }, { category: 'Documents', status: 'Cancellation', percentage: 1.51, count: 2679 }, { category: 'Documents', status: 'Other', percentage: 0.10, count: 178 }, ]; // Define a color map for each category const colorMap = { 'Legible': '#007585', 'Blurred': '#FF8282', 'Not uploaded': '#FFC941', 'Wrong election': '#9CE1E5', // Updated from 'Wrong paper' to 'Wrong election' 'Cancellation': '#9487E5', 'Other': '#C6C8CE' // C6C8CE }; // Wrapper to hold the chart, text, and logo const wrapper = html`

Distribution of election result documents across Nigeria

This chart provides an overview of document legibility and upload status from 176,846 polling units.

Document status Click to filter view

Note: ‘Wrong election’ refers to election result documents for non-presidential elections and collation papers. In the ‘cancellation’ category, both cancellations documented on EC40G forms as well as those written on blank papers are included. ‘Other’ includes any materials that do not fit into the predefined categories – such as irrelevant pictures or presidential election results written on a blank paper.

Data Source: INEC Result Viewing (IReV) portal

`; // Select the container for the chart const container = wrapper.querySelector('#bar-chart-container'); // Create the single-bar stacked chart const barPlot = new g2plot.Bar(container, { data, isStack: true, xField: 'percentage', yField: 'category', seriesField: 'status', legend: { position: 'top-left', // Align legend under subtitle, left side layout: 'horizontal', flipPage: false, itemSpacing: 8, offsetY: 0, offsetX: 0, itemName: { style: { fontSize: 12, // Legend Items Font Size: 12px fontFamily: 'Helvetica', fill: 'black', }, }, }, // Use the color map for each category color: ({ status }) => colorMap[status], // Show 0–100 on the x-axis xAxis: { min: 0, max: 100, label: { formatter: (val) => `${val}%`, style: { fontFamily: 'Helvetica', fontSize: 12, // X-axis Labels Font Size: 12px color: 'black' }, }, title: { text: '', // Remove the title by setting it to an empty string style: { fontFamily: 'Helvetica', fontSize: 12, // X-axis Title Font Size: 12px fill: 'grey', // Changed from 'black' to 'grey' }, offset: 40, }, }, // Tooltip: show only the hovered segment tooltip: { shared: false, // Makes tooltip show only the current hovered segment showMarkers: false, customContent: (title, items) => { if (!items || items.length === 0) return ''; const datum = items[0].data; // Format the count with commas const formattedCount = new Intl.NumberFormat().format(datum.count); return `

${datum.status}: ${datum.percentage}%
Document count: ${formattedCount}

`; }, domStyles: { 'g2-tooltip': { backgroundColor: 'white', border: '1px solid #ccc', fontFamily: 'Helvetica', color: 'black' } } }, // renderer: 'svg', }); barPlot.render(); return wrapper; }); 32:T14aa,barChartNotUploaded = { const wrapper = html`

Kano state led nation with the most polling sites not reporting results

More than 1,300 polling units in Kano alone did not upload vote totals.

Note: Polling units across Nigeria were required to upload an official government form with vote totals.

Data Source: INEC Result Viewing (IReV) portal

`; const container = wrapper.querySelector('#container'); // Custom formatter for numbers using comma as thousands separator const commaFormatter = (value) => { return new Intl.NumberFormat('en-US').format(value); }; // Data provided by you let data = [ { "Country": "Kano", "Value": 1326 }, { "Country": "Anambra", "Value": 959 }, { "Country": "Rivers", "Value": 918 }, { "Country": "Oyo", "Value": 637 }, { "Country": "Imo", "Value": 626 }, { "Country": "Sokoto", "Value": 622 }, { "Country": "Kaduna", "Value": 577 }, { "Country": "Abia", "Value": 486 }, { "Country": "Taraba", "Value": 480 }, { "Country": "Zamfara", "Value": 473 }, { "Country": "Kwara", "Value": 432 }, { "Country": "Benue", "Value": 370 } ]; const addRankings = (data) => { const sortedData = [...data].sort((a, b) => b.Value - a.Value); sortedData.forEach((item, index) => { item.Rank = index + 1; item.CountryWithRank = `${item.Rank}. ${item.Country}`; }); return sortedData; }; const renderBarChart = (data) => { const rankedData = addRankings(data); container.innerHTML = ''; // Clear the container const xAxisOptions = { title: { text: 'Documents', style: { fontFamily: 'Helvetica', fontSize: 12, fill: 'grey', } }, label: { formatter: (value) => commaFormatter(value), style: { fontFamily: 'Helvetica', fontSize: 12, fill: 'grey', } }, min: 0, // Set minimum value of x-axis to 0 max: 1400, // Set maximum value of x-axis to 1200 tickInterval: 200, // Set interval between ticks to 200 nice: false, // Disable automatic adjustment of axis }; const barChart = new G2Plot.Bar(container, { data: rankedData, xField: 'Value', yField: 'CountryWithRank', seriesField: 'Country', legend: false, xAxis: xAxisOptions, color: '#007585', yAxis: { label: { style: { fontWeight: 'normal', color: 'black', fontSize: 14, fontFamily: 'Helvetica', }, formatter: (text) => text } }, tooltip: { showMarkers: false, customContent: (title, items) => { if (!items || items.length === 0) return ''; const datum = items[0].data; const originalValue = datum.Value; const formattedValue = commaFormatter(originalValue); const suffix = 'documents'; return `

${datum.Country}: ${formattedValue} ${suffix}

`; }, domStyles: { 'g2-tooltip': { backgroundColor: 'white', border: '1px solid #ccc', fontFamily: 'Helvetica', color: 'black' }, } }, padding: [5, 20, 50, 85], // [top, right, bottom, left] }); barChart.render(); }; // Initial render renderBarChart(data); return wrapper; }; 33:T1d1a,stackedBarChartSimple = { const wrapper = html`

Gombe state led the nation with illegible voting result counts

Gombe had the highest percentage of blurry and unreadable voting counts out of all the polling units in the state.

Document type Click to filter view

Note: Each polling unit was required to upload summary election counts. But a number around the country for the presidential election were blurry and unreadable. This shows the percentage of blurry and unreadable election result papers out of all the polling units in the state. The 'Rest of documents' category includes all non-blurred documents (e.g., legible, cancelled) as well as polling units that did not upload any results.

Data Source: INEC Result Viewing (IReV) portal

`; const container = wrapper.querySelector('#container'); // Define the data let data = [ { Condition: 'Gombe', Response: 'Blurred documents', Number: 77.64 }, { Condition: 'Zamfara', Response: 'Blurred documents', Number: 27.26 }, { Condition: 'Kano', Response: 'Blurred documents', Number: 18.73 }, { Condition: 'Abia', Response: 'Blurred documents', Number: 13.64 }, { Condition: 'Delta', Response: 'Blurred documents', Number: 12.98 }, { Condition: 'Jigawa', Response: 'Blurred documents', Number: 11.94 }, { Condition: 'Kaduna', Response: 'Blurred documents', Number: 11.53 }, { Condition: 'Kogi', Response: 'Blurred documents', Number: 9.55 }, { Condition: 'Oyo', Response: 'Blurred documents', Number: 9.14 }, { Condition: 'Ogun', Response: 'Blurred documents', Number: 8.87 }, { Condition: 'Gombe', Response: 'Rest of documents', Number: 22.36 }, { Condition: 'Zamfara', Response: 'Rest of documents', Number: 72.74 }, { Condition: 'Kano', Response: 'Rest of documents', Number: 81.27 }, { Condition: 'Abia', Response: 'Rest of documents', Number: 86.36 }, { Condition: 'Delta', Response: 'Rest of documents', Number: 87.02 }, { Condition: 'Jigawa', Response: 'Rest of documents', Number: 88.06 }, { Condition: 'Kaduna', Response: 'Rest of documents', Number: 88.47 }, { Condition: 'Kogi', Response: 'Rest of documents', Number: 90.45 }, { Condition: 'Oyo', Response: 'Rest of documents', Number: 90.86 }, { Condition: 'Ogun', Response: 'Rest of documents', Number: 91.13 } ]; // Add ranking numbers to the state names // First, get the unique state names const uniqueStates = [...new Set(data.map(item => item.Condition))]; // Create an array with states and their Blurred documents percentage const statesWithPercentage = uniqueStates.map(state => { // Find the Blurred documents percentage for each state const blurredDoc = data.find(item => item.Condition === state && item.Response === 'Blurred documents'); return { state: state, percentage: blurredDoc ? blurredDoc.Number : 0 }; }); // Sort the states based on Blurred documents percentage in descending order statesWithPercentage.sort((a, b) => b.percentage - a.percentage); // Add rank numbers to the state names and create a mapping const stateNameWithRank = {}; statesWithPercentage.forEach((item, index) => { stateNameWithRank[item.state] = `${index + 1}. ${item.state}`; }); // Update the data with new Condition names and add original State names data = data.map(item => ({ ...item, State: item.Condition, // Store the original state name Condition: stateNameWithRank[item.Condition] // Update Condition with rank number })); // Custom formatter for numbers with two decimal places const percentageFormatter = (value) => `${value}%`; // Initialize the stacked bar chart with desired styles const stackedBarChart = new G2Plot.Bar(container, { data: data, isStack: true, xField: 'Number', yField: 'Condition', seriesField: 'Response', color: ['#007585', '#d9d9d9'], // Adjust colors as needed xAxis: { title: { text: ' ', style: { fontFamily: 'Helvetica', fontSize: 12, fill: 'grey', }, }, label: { formatter: (v) => percentageFormatter(v), style: { fontFamily: 'Helvetica', fontSize: 12, fill: 'grey', }, }, grid: null, }, yAxis: { label: { style: { fontFamily: 'Helvetica', fontSize: 14, fill: 'grey', fontWeight: 'normal', }, }, }, tooltip: { showMarkers: false, customContent: (title, items) => { if (!items || items.length === 0) return ''; const tooltipItems = items .map( (item) => `

● ${item.name}: ${percentageFormatter( item.data.Number )}

` ) .join(''); return `

${items[0].data.State}
${tooltipItems}

`; }, domStyles: { 'g2-tooltip': { backgroundColor: 'white', border: '1px solid #ccc', boxShadow: 'none', }, }, }, legend: { position: 'top-left', itemName: { style: { fontSize: 12, fontFamily: 'Helvetica', fill: 'black', }, }, }, padding: [35, 20, 40, 80], // Adjust padding as needed // [top, right, bottom, left] }); // Render the chart stackedBarChart.render(); return wrapper; } 34:T2ed3,// Import the G2Plot library barChart2 = require('@antv/g2plot@2').then(async G2Plot => { // 1. Raw data by state and reason const rawData = [ // IMO { state: 'IMO', reason: 'BVAS faults', count: 1 }, { state: 'IMO', reason: 'Electoral Commission Failure', count: 1 }, { state: 'IMO', reason: 'No voter/ Zero turnout', count: 3 }, { state: 'IMO', reason: 'Over Voting', count: 3 }, { state: 'IMO', reason: 'Unexplained', count: 174 }, { state: 'IMO', reason: 'Violence/Insecurity', count: 245 }, { state: 'IMO', reason: 'Lack of staff/material', count: 37 }, { state: 'IMO', reason: 'Violence/Lack of staff, material', count: 1 }, // EDO { state: 'EDO', reason: 'Electoral Commission Failure', count: 1 }, { state: 'EDO', reason: 'Over Voting', count: 6 }, { state: 'EDO', reason: 'Unexplained', count: 9 }, { state: 'EDO', reason: 'Violence/Insecurity', count: 104 }, { state: 'EDO', reason: 'Lack of staff/material', count: 65 }, // SOKOTO { state: 'SOKOTO', reason: 'BVAS faults', count: 5 }, { state: 'SOKOTO', reason: 'Blurred documents', count: 2 }, { state: 'SOKOTO', reason: 'No voter/ Zero turnout', count: 3 }, { state: 'SOKOTO', reason: 'Over Voting', count: 9 }, { state: 'SOKOTO', reason: 'Unexplained', count: 12 }, { state: 'SOKOTO', reason: 'Violence/Insecurity', count: 123 }, { state: 'SOKOTO', reason: 'Over voting/BVAS issues', count: 1 }, // DELTA { state: 'DELTA', reason: 'BVAS faults', count: 4 }, { state: 'DELTA', reason: 'Over Voting', count: 3 }, { state: 'DELTA', reason: 'Unexplained', count: 27 }, { state: 'DELTA', reason: 'Violence/Insecurity', count: 100 }, // KATSINA { state: 'KATSINA', reason: 'BVAS faults', count: 13 }, { state: 'KATSINA', reason: 'Electoral Commission Failure', count: 1 }, { state: 'KATSINA', reason: 'No voter/ Zero turnout', count: 3 }, { state: 'KATSINA', reason: 'Over Voting', count: 15 }, { state: 'KATSINA', reason: 'Unexplained', count: 2 }, { state: 'KATSINA', reason: 'Violence/Insecurity', count: 65 }, { state: 'KATSINA', reason: 'Lack of staff/material', count: 17 }, { state: 'KATSINA', reason: 'Violence/Over voting', count: 1 }, // KOGI { state: 'KOGI', reason: 'BVAS faults', count: 2 }, { state: 'KOGI', reason: 'Over Voting', count: 1 }, { state: 'KOGI', reason: 'Unexplained', count: 40 }, { state: 'KOGI', reason: 'Violence/Insecurity', count: 57 }, // KADUNA { state: 'KADUNA', reason: 'BVAS faults', count: 32 }, { state: 'KADUNA', reason: 'Over Voting', count: 20 }, { state: 'KADUNA', reason: 'Unexplained', count: 4 }, { state: 'KADUNA', reason: 'Violence/Insecurity', count: 34 }, { state: 'KADUNA', reason: 'Lack of staff/material', count: 1 }, { state: 'KADUNA', reason: 'Violence/Over voting', count: 1 }, // LAGOS { state: 'LAGOS', reason: 'BVAS faults', count: 1 }, { state: 'LAGOS', reason: 'Electoral Commission Failure', count: 2 }, { state: 'LAGOS', reason: 'Over Voting', count: 2 }, { state: 'LAGOS', reason: 'Unexplained', count: 4 }, { state: 'LAGOS', reason: 'Violence/Insecurity', count: 75 }, { state: 'LAGOS', reason: 'Lack of staff/material', count: 4 }, { state: 'LAGOS', reason: 'Over voting/BVAS issues', count: 1 }, { state: 'LAGOS', reason: 'Over voting/BVAS issues/Violence', count: 1 }, { state: 'LAGOS', reason: 'Violence/BVAS issues', count: 1 }, { state: 'LAGOS', reason: 'Violence/Over voting', count: 1 }, // CROSS RIVER { state: 'CROSS RIVER', reason: 'BVAS faults', count: 1 }, { state: 'CROSS RIVER', reason: 'Over Voting', count: 7 }, { state: 'CROSS RIVER', reason: 'Unexplained', count: 42 }, { state: 'CROSS RIVER', reason: 'Violence/Insecurity', count: 18 }, // KANO { state: 'KANO', reason: 'BVAS faults', count: 1 }, { state: 'KANO', reason: 'Electoral Commission Failure', count: 3 }, { state: 'KANO', reason: 'Over Voting', count: 8 }, { state: 'KANO', reason: 'Unexplained', count: 24 }, { state: 'KANO', reason: 'Violence/Insecurity', count: 18 }, { state: 'KANO', reason: 'Violence/Over voting', count: 2 }, ]; // 2. Define main categories const mainCategories = [ 'Violence/Insecurity', 'Unexplained', 'Overvoting', 'Lack of staff/material', ]; // 3. Define state name mapping for proper capitalization const stateNameMap = { 'IMO': 'Imo', 'EDO': 'Edo', 'SOKOTO': 'Sokoto', 'DELTA': 'Delta', 'KATSINA': 'Katsina', 'KOGI': 'Kogi', 'KADUNA': 'Kaduna', 'LAGOS': 'Lagos', 'CROSS RIVER': 'Cross River', 'KANO': 'Kano', }; // Map each reason to a main category or "Other" function mapToCategory(reason) { const rLower = reason.toLowerCase(); if (rLower.includes('over voting') || rLower.includes('overvoting')) { return 'Overvoting'; } if (mainCategories.includes(reason)) { return reason; } return 'Other'; } // 4. Transform data const transformed = rawData.map(item => ({ state: item.state, category: mapToCategory(item.reason), documents: item.count, })); // 5. Sort states by total documents descending const groupedByState = transformed.reduce((acc, cur) => { acc[cur.state] = (acc[cur.state] || 0) + cur.documents; return acc; }, {}); const sortedStates = Object.entries(groupedByState) .sort((a, b) => b[1] - a[1]) .map(entry => entry[0]); // 6. Final array in sorted order const plotData = []; sortedStates.forEach(st => { plotData.push(...transformed.filter(d => d.state === st)); }); // 7. Rank dictionary const stateRankings = {}; sortedStates.forEach((st, i) => { stateRankings[st] = i + 1; // 1-based rank }); // 8. Color map const colorMap = { 'Violence/Insecurity': '#007585', 'Unexplained': '#FFC941', 'Overvoting': '#9CE1E5', 'Lack of staff/material': '#9487E5', 'Other': '#C6C8CE' }; // 9. The wrapper layout const wrapper = html`

Imo state leads in election cancellations

Factors behind election cancellations: Violence, overvoting and lack of ballot materials.

Reasons for cancellation Click to filter view

Note: The "Other" category includes polling units where election results were not counted for various reasons. This encompasses malfunctions of the Bimodal Voter Accreditation System (BVAS), a biometric system designed to verify voter identities. It also covers instances where election paperwork was filled out incorrectly, appeared blurry or lacked necessary information. Additionally, this category includes documents listing two or more reasons for cancellation, reflecting the complexity of challenges faced during the election process.

Data Source: INEC Result Viewing (IReV) portal

`; // Select the container for the chart const container = wrapper.querySelector('#chart-container'); // 10. Create the stacked bar chart const bar = new G2Plot.Bar(container, { data: plotData, isStack: true, yField: 'state', xField: 'documents', seriesField: 'category', color: ({ category }) => colorMap[category], barSize: 20, padding: [40, 40, 50, 100], // [top, right, bottom, left] // Force the legend order meta: { category: { values: [ 'Violence/Insecurity', 'Unexplained', 'Overvoting', 'Lack of staff/material', 'Other' ] } }, xAxis: { title: { text: 'Documents', style: { fontFamily: 'Helvetica', fontSize: 12, // Set to 12px fill: 'grey', // Changed from 'black' to 'grey' }, offset: 40, }, label: { formatter: (val) => new Intl.NumberFormat().format(val), style: { fontFamily: 'Helvetica', fontSize: 12, // Set to 12px color: 'black' } }, grid: { line: { style: { stroke: '#eee', lineWidth: 1 } } } }, yAxis: { type: 'cat', label: { formatter: (state) => { // Use the stateNameMap for proper capitalization const normalCase = stateNameMap[state] || (state.charAt(0) + state.slice(1).toLowerCase()); const rank = stateRankings[state] || ''; return `${rank}. ${normalCase}`; }, style: { fontFamily: 'Helvetica', color: 'black', fontSize: 13 // Set to 13px } } }, legend: { position: 'top-left', layout: 'horizontal', flipPage: false, itemName: { style: { fontFamily: 'Helvetica', fontSize: 12, // Set to 12px color: 'black' } } }, tooltip: { shared: true, showMarkers: false, // SAFETY CHECK: Make sure title is defined customContent: (title, items) => { if (!title || !items || items.length === 0) { return ''; } const normalCaseState = stateNameMap[title] || (title.charAt(0) + title.slice(1).toLowerCase()); let contentHtml = `

State: ${normalCaseState}
`; for (const item of items) { const bulletColor = item.color; const formattedCount = new Intl.NumberFormat().format(item.data.documents); contentHtml += ` ${item.name}: ${formattedCount}
`; } contentHtml += `

`; return contentHtml; }, domStyles: { 'g2-tooltip': { backgroundColor: 'white', border: '1px solid #ccc', fontFamily: 'Helvetica', color: 'black' } } }, // renderer: 'svg', }); // 11. Render bar.render(); return wrapper; }); 35:T277c,barChartSimple = { const wrapper = html`

Voting documents that lack required information

Various essential details were missing from voting tally sheets across multiple polling stations, raising concerns among election observers.

Document category Click to filter view

Data Source: INEC Result Viewing (IReV) portal

`; const container = wrapper.querySelector('#container'); // Custom formatter for numbers using comma as thousands separator const commaFormatter = (value) => { return new Intl.NumberFormat('en-US').format(value); }; let dataNoOfficerName = [ { "State": "LAGOS", "Count": 487 }, { "State": "KANO", "Count": 418 }, { "State": "KATSINA", "Count": 381 }, { "State": "SOKOTO", "Count": 280 }, { "State": "OYO", "Count": 267 }, { "State": "KADUNA", "Count": 266 }, { "State": "BAUCHI", "Count": 259 }, { "State": "OGUN", "Count": 240 }, { "State": "KEBBI", "Count": 240 }, { "State": "RIVERS", "Count": 239 } ]; let dataNoOfficerSignature = [ { "State": "KANO", "Count": 249 }, { "State": "LAGOS", "Count": 247 }, { "State": "KATSINA", "Count": 208 }, { "State": "OYO", "Count": 205 }, { "State": "BAUCHI", "Count": 181 }, { "State": "OGUN", "Count": 160 }, { "State": "OSUN", "Count": 149 }, { "State": "PLATEAU", "Count": 148 }, { "State": "JIGAWA", "Count": 143 }, { "State": "KADUNA", "Count": 140 } ]; let dataNoPollingAgentSignature = [ { "State": "RIVERS", "Count": 286 }, { "State": "IMO", "Count": 232 }, { "State": "SOKOTO", "Count": 173 }, { "State": "BORNO", "Count": 165 }, { "State": "KANO", "Count": 159 }, { "State": "KATSINA", "Count": 152 }, { "State": "LAGOS", "Count": 136 }, { "State": "OYO", "Count": 132 }, { "State": "DELTA", "Count": 123 }, { "State": "KEBBI", "Count": 118 } ]; let dataNoBlackStamp = [ { "State": "KANO", "Count": 779 }, { "State": "KADUNA", "Count": 677 }, { "State": "KATSINA", "Count": 677 }, { "State": "LAGOS", "Count": 654 }, { "State": "SOKOTO", "Count": 571 }, { "State": "OGUN", "Count": 510 }, { "State": "NIGER", "Count": 508 }, { "State": "BENUE", "Count": 500 }, { "State": "OYO", "Count": 493 }, { "State": "KEBBI", "Count": 480 } ]; // Helper to capitalize only the first letter of each state, making the rest lowercase const formatStateName = (state) => { return state.charAt(0).toUpperCase() + state.slice(1).toLowerCase(); }; // Updated addRankings function to incorporate capitalizing state names const addRankings = (data) => { const sortedData = [...data].sort((a, b) => b.Count - a.Count); sortedData.forEach((item, index) => { item.Rank = index + 1; // Convert the State to have only the first letter capitalized const capitalizedState = formatStateName(item.State); item.StateWithRank = `${item.Rank}. ${capitalizedState}`; }); return sortedData; }; const renderBarChart = (data, valueField, xAxisTitle) => { const rankedData = addRankings(data); container.innerHTML = ''; // Clear the container const xAxisOptions = { title: { text: xAxisTitle, style: { fontFamily: 'Helvetica', fontSize: 12, fill: 'grey', } }, label: { formatter: (value) => commaFormatter(value) }, nice: true, }; const barChart = new G2Plot.Bar(container, { data: rankedData, xField: 'Count', yField: 'StateWithRank', seriesField: 'State', legend: false, xAxis: xAxisOptions, color: '#007585', yAxis: { label: { style: { fontWeight: 'normal', color: 'black', fontSize: 14 }, // Keep as-is, since we're already formatting the state name in `StateWithRank` formatter: (text) => text } }, tooltip: { showMarkers: false, customContent: (title, items) => { if (!items || items.length === 0) return ''; const datum = items[0].data; const originalValue = datum.Count; const formattedValue = commaFormatter(originalValue); const suffix = 'documents'; // Use the formatStateName function here so that the popup has only the first letter uppercase const stateNameFormatted = formatStateName(datum.State); return `

${stateNameFormatted}: ${formattedValue} ${suffix}

`; }, domStyles: { 'g2-tooltip': { backgroundColor: 'white', border: '1px solid #ccc', fontFamily: 'Helvetica', color: 'black' }, } }, padding: [5, 20, 50, 85], // [top, right, bottom, left] }); barChart.render(); }; const highlightButton = (buttonId) => { // Reset all buttons to default styles document.getElementById('noOfficerNameButton').style.backgroundColor = 'white'; document.getElementById('noOfficerSignatureButton').style.backgroundColor = 'white'; document.getElementById('noBlackStampButton').style.backgroundColor = 'white'; document.getElementById('noPollingAgentSignatureButton').style.backgroundColor = 'white'; document.getElementById('noOfficerNameButton').style.color = 'black'; document.getElementById('noOfficerSignatureButton').style.color = 'black'; document.getElementById('noBlackStampButton').style.color = 'black'; document.getElementById('noPollingAgentSignatureButton').style.color = 'black'; // Highlight the active button const activeButton = document.getElementById(buttonId); activeButton.style.backgroundColor = '#000000'; // Dark color when active activeButton.style.color = 'white'; }; // Initial render requestAnimationFrame(() => { document.getElementById('noOfficerNameButton').addEventListener('click', () => { renderBarChart(dataNoOfficerName, 'NoOfficerName', 'Documents'); highlightButton('noOfficerNameButton'); }); document.getElementById('noOfficerSignatureButton').addEventListener('click', () => { renderBarChart(dataNoOfficerSignature, 'NoOfficerSignature', 'Documents'); highlightButton('noOfficerSignatureButton'); }); document.getElementById('noBlackStampButton').addEventListener('click', () => { renderBarChart(dataNoBlackStamp, 'NoBlackStamp', 'Documents'); highlightButton('noBlackStampButton'); }); document.getElementById('noPollingAgentSignatureButton').addEventListener('click', () => { renderBarChart(dataNoPollingAgentSignature, 'NoPollingAgentSignature', 'Documents'); highlightButton('noPollingAgentSignatureButton'); }); // Set default view to "No black stamp" renderBarChart(dataNoBlackStamp, 'NoBlackStamp', 'Documents'); highlightButton('noBlackStampButton'); }); return wrapper; }; 36:T25f5,scatterPlotExample = { // Helper: Capitalize only the first letter of each word, handling spaces and slashes const capitalizeWords = (str) => { return str .replace(/\b\w/g, char => char.toUpperCase()) .replace(/\/\w/g, char => char.toUpperCase()); }; // Helper: Format numbers with commas (e.g., 80239 -> "80,239") const formatNumber = (num) => { return num.toLocaleString(); }; // Define the Y-axis order with the new label format const yOrder = [ "(Rivers) Obio/Akpor", "(Rivers) Oyigbo", "(Rivers) Eleme", "(Plateau) Jos North", "(Lagos) Surulere", ]; // Helper: Combine the table rows into a single data array // Each row yields 4 data points: APC - Official results, APC - CCIJ analysis, LP - Official results, LP - CCIJ analysis const createDataPoints = () => { const rawData = [ { State: "Rivers", LGA: "Obio/Akpor", "APC - Official (%)": 94.8, "APC - OCR (%)": 18.8, "LP - Official (%)": 4.5, "LP - OCR (%)": 75.7, "APC Votes Official": 80239, "LP Votes Official": 3829, "APC Votes OCR": 16980, "LP Votes OCR": 68521 }, { State: "Rivers", LGA: "Oyigbo", "APC - Official (%)": 58.2, "APC - OCR (%)": 11.4, "LP - Official (%)": 37.7, "LP - OCR (%)": 83.7, "APC Votes Official": 16630, "LP Votes Official": 10784, "APC Votes OCR": 2435, "LP Votes OCR": 17875 }, { State: "Rivers", LGA: "Eleme", "APC - Official (%)": 45.6, "APC - OCR (%)": 29.7, "LP - Official (%)": 41.0, "LP - OCR (%)": 54.2, "APC Votes Official": 8368, "LP Votes Official": 7529, "APC Votes OCR": 4077, "LP Votes OCR": 7431 }, { State: "Plateau", LGA: "Jos North", "APC - Official (%)": 40.2, "APC - OCR (%)": 28.4, "LP - Official (%)": 43.1, "LP - OCR (%)": 54.9, "APC Votes Official": 65656, "LP Votes Official": 70357, "APC Votes OCR": 41404, "LP Votes OCR": 80067 }, { State: "Lagos", LGA: "Surulere", "APC - Official (%)": 49.4, "APC - OCR (%)": 39.6, "LP - Official (%)": 46.7, "LP - OCR (%)": 56.4, "APC Votes Official": 39002, "LP Votes Official": 36923, "APC Votes OCR": 31428, "LP Votes OCR": 44752 }, ]; const flattened = []; for (const row of rawData) { const formattedState = capitalizeWords(row.State); const formattedLGA = capitalizeWords(row.LGA); const locationLabel = `(${formattedState}) ${formattedLGA}`; flattened.push( { location: locationLabel, partyType: "APC - Official results", value: row["APC - Official (%)"], votes: row["APC Votes Official"] }, { location: locationLabel, partyType: "APC - CCIJ analysis", value: row["APC - OCR (%)"], votes: row["APC Votes OCR"] }, { location: locationLabel, partyType: "LP - Official results", value: row["LP - Official (%)"], votes: row["LP Votes Official"] }, { location: locationLabel, partyType: "LP - CCIJ analysis", value: row["LP - OCR (%)"], votes: row["LP Votes OCR"] } ); } return flattened; }; const data = createDataPoints(); const wrapper = html`

APC vs. LP: Discrepancies in vote percentages

CCIJ data analysis highlights major gaps in official results in Rivers, Plateau, and Lagos states.

Official vote percentages vs. CCIJ analysis for APC and LP Click to filter view

Note: Based on the documents analyzed by CCIJ, the official results counted over 110,000 additional votes for APC compared to what was recorded on INEC’s public portal.

Data Source: INEC Result Viewing (IReV) portal

`; const container = wrapper.querySelector('#containerExample'); const scatterPlot = new G2Plot.Scatter(container, { data, xField: 'value', yField: 'location', colorField: 'partyType', color: ({ partyType }) => { switch(partyType) { case 'APC - Official results': return '#8AAEF7'; case 'APC - CCIJ analysis': return '#007585'; case 'LP - Official results': return '#F59A9A'; case 'LP - CCIJ analysis': return '#E64B4B'; default: return '#999'; } }, shape: 'circle', size: 6, pointStyle: { fillOpacity: 1, }, appendPadding: [20, 20, 10, 20], legend: { position: 'top-left', layout: 'horizontal', itemName: { style: { fill: 'grey', fontSize: 12, fontFamily: 'Helvetica', }, }, }, xAxis: { min: 0, max: 100, tickInterval: 20, label: { formatter: (val) => `${val}%`, style: { fontFamily: 'Helvetica', fontSize: 12, }, }, grid: { line: { style: { stroke: '#eee', }, }, }, line: { style: { stroke: '#aaa', }, }, }, yAxis: { meta: { values: yOrder, }, line: { style: { stroke: '#aaa', }, }, label: { formatter: (lgaName) => lgaName, style: { fontSize: 13, lineHeight: 30, fontFamily: 'Helvetica', fill: 'grey', }, }, range: [1, 0], }, tooltip: { shared: false, // Makes tooltip show only the current hovered point showMarkers: false, // Disable markers for cleaner tooltips customContent: (title, items) => { if (!items || items.length === 0) return ''; const datum = items[0].data; // Format the votes for better readability const formattedVotes = new Intl.NumberFormat().format(datum.votes); // Map the partyType to its corresponding background color const categoryColors = { "APC - Official results": "#8AAEF7", "APC - CCIJ analysis": "#007585", "LP - Official results": "#F59A9A", "LP - CCIJ analysis": "#E64B4B", }; const highlightColor = categoryColors[datum.partyType] || "#999"; // Default to grey if category not found // Determine font color based on partyType // Official results → black text // CCIJ analysis → white text const fontColor = ["APC - CCIJ analysis", "LP - CCIJ analysis"].includes(datum.partyType) ? "white" : "black"; return `

Location: ${datum.location}
${datum.partyType}
Vote percentage: ${datum.value}%
Vote count: ${formattedVotes}

`; }, domStyles: { 'g2-tooltip': { display: 'flex', // Flexbox for alignment flexDirection: 'column', // Ensures proper spacing justifyContent: 'flex-start', // Align content to the top alignItems: 'flex-start', // Align content to the left paddingTop: '5px', // Independent top padding paddingBottom: '5px', // Independent bottom padding paddingLeft: '5px', // Optional left padding paddingRight: '5px', // Optional right padding backgroundColor: 'white', border: '1px solid #ccc', fontFamily: 'Helvetica', color: 'black', minHeight: '50px', // Minimum height for spacing }, }, }, }); scatterPlot.render(); return wrapper; }; 37:T35c4,voteDiscrepancyPlot = { // Helper: Capitalize only the first letter of each word, handling spaces and slashes const capitalizeWords = (str) => { return str .toLowerCase() .replace(/\b\w/g, char => char.toUpperCase()) .replace(/\/\w/g, char => char.toUpperCase()); }; // Helper: Format numbers with commas (e.g., 80239 -> "80,239") const formatNumber = (num) => { const number = typeof num === 'number' ? num : Number(num); // Ensure the number is valid if (isNaN(number)) return '0'; return number.toLocaleString('en-US', { useGrouping: true, // Adds comma as thousand separator }); }; // Define the Y-axis order with the new label format const yOrder = [ "(Imo) Oru East", "(Bauchi) Zaki", "(Kano) Kumbotso", "(Kogi) Dekina", "(Bayelsa) Yenagoa", "(Kogi) Ibaji", ]; // Helper: Combine the table rows into a single data array // Each row yields 2 data points: Total votes - CCIJ analysis and Accredited voters - BVAS machines const createDataPoints = () => { const rawData = [ { State: "IMO", LGA: "ORU EAST", "Accredit_backend": "326", "Total Number of Votes from OCR": "15075", "total- accredit_backend": "14749" }, { State: "BAUCHI", LGA: "ZAKI", "Accredit_backend": "733", "Total Number of Votes from OCR": "12526", "total- accredit_backend": "11793" }, { State: "KANO", LGA: "KUMBOTSO", "Accredit_backend": "3347", "Total Number of Votes from OCR": "14496", "total- accredit_backend": "11149" }, { State: "KOGI", LGA: "DEKINA", "Accredit_backend": "475", "Total Number of Votes from OCR": "10180", "total- accredit_backend": "9705" }, { State: "BAYELSA", LGA: "YENAGOA", "Accredit_backend": "928", "Total Number of Votes from OCR": "10501", "total- accredit_backend": "9573" }, { State: "KOGI", LGA: "IBAJI", "Accredit_backend": "630", "Total Number of Votes from OCR": "8637", "total- accredit_backend": "8007" }, ]; const flattened = []; for (const row of rawData) { const formattedState = capitalizeWords(row.State); const formattedLGA = capitalizeWords(row.LGA); const locationLabel = `(${formattedState}) ${formattedLGA}`; const totalVotesOCR = Number(row["Total Number of Votes from OCR"]) || 0; const accreditedVotes = Number(row["Accredit_backend"]) || 0; const differenceVotes = Number(row["total- accredit_backend"]) || 0; flattened.push( { location: locationLabel, partyType: "Accredited voters - BVAS machines", votes: accreditedVotes, differenceVotes: differenceVotes }, { location: locationLabel, partyType: "Total votes - CCIJ analysis", votes: totalVotesOCR, differenceVotes: differenceVotes } ); } return flattened; }; const data = createDataPoints(); // Compute the maximum vote count to set the xAxis maximum const maxVotes = Math.max(...data.map(d => d.votes)); const xAxisMax = Math.ceil(maxVotes / 1000) * 1000 * 1.1; // Round up to the next 1000 and add 10% // Generate annotations for lines connecting data points and differenceVotes labels const generateAnnotations = () => { const rawData = [ { State: "IMO", LGA: "ORU EAST", "Total Number of Votes from OCR": "15075", "Accredit_backend": "326", "total- accredit_backend": "14749" }, { State: "BAUCHI", LGA: "ZAKI", "Total Number of Votes from OCR": "12526", "Accredit_backend": "733", "total- accredit_backend": "11793" }, { State: "KANO", LGA: "KUMBOTSO", "Total Number of Votes from OCR": "14496", "Accredit_backend": "3347", "total- accredit_backend": "11149" }, { State: "KOGI", LGA: "DEKINA", "Total Number of Votes from OCR": "10180", "Accredit_backend": "475", "total- accredit_backend": "9705" }, { State: "BAYELSA", LGA: "YENAGOA", "Total Number of Votes from OCR": "10501", "Accredit_backend": "928", "total- accredit_backend": "9573" }, { State: "KOGI", LGA: "IBAJI", "Total Number of Votes from OCR": "8637", "Accredit_backend": "630", "total- accredit_backend": "8007" }, ]; const annotations = []; // Define a fixed offset in data units to adjust the connecting lines const offset = 200; // Adjust this value as needed based on data scale rawData.forEach((row, index) => { const formattedState = capitalizeWords(row.State); const formattedLGA = capitalizeWords(row.LGA); const locationLabel = `(${formattedState}) ${formattedLGA}`; const totalVotesOCR = Number(row["Total Number of Votes from OCR"]) || 0; const accreditedVotes = Number(row["Accredit_backend"]) || 0; const differenceVotes = Number(row["total- accredit_backend"]) || 0; // Calculate adjusted start and end X positions to start/end at the edge of the dots const startX = accreditedVotes + offset; const endX = totalVotesOCR - offset; // Add the connecting line annotation with adjusted positions annotations.push({ type: 'line', start: [startX, locationLabel], end: [endX, locationLabel], style: { stroke: '#999', // Grey color for the connecting lines lineWidth: 3, // Adjusted thickness for better visibility }, zIndex: 'back', // Ensure lines are behind the scatter points }); // Add the differenceVotes text annotation annotations.push({ type: 'text', position: [(accreditedVotes + totalVotesOCR) / 2, locationLabel], content: index === 0 ? `${formatNumber(differenceVotes)}-vote gap between accredited voters and total votes` : formatNumber(differenceVotes), style: { fill: '#000', // Black color for the text fontSize: 12, textAlign: 'center', textBaseline: 'bottom', // Position text above the line }, offsetY: -10, // Move text upwards by 10 pixels zIndex: 'back', // Ensure text is behind the scatter points }); }); return annotations; }; const annotations = generateAnnotations(); const wrapper = html`

Significant gaps in multiple LGAs where total votes exceed accredited voter counts

Field reports and data analysis highlight troubling patterns in voter accreditation.

Note: The largest gap was observed in Oru East, Imo state, with 14,749 unaccounted votes. Other LGAs, including Zaki in Bauchi state and Kumbotso in Kano state, also showed concerning patterns, with gaps of 11,793 and 11,149 votes respectively.

Data Source: INEC Result Viewing (IReV) portal

`; const container = wrapper.querySelector('#containerExample'); const scatterPlot = new G2Plot.Scatter(container, { data, xField: 'votes', // Changed from 'percentage' to 'votes' yField: 'location', colorField: 'partyType', // 'Total votes - CCIJ analysis', 'Accredited voters - BVAS machines' // **Updated Color Configuration to Set Legend Order** color: ({ partyType }) => { switch(partyType) { case 'Accredited voters - BVAS machines': return '#9CE1E5'; // Light Blue case 'Total votes - CCIJ analysis': return '#007585'; // Blue shade default: return '#999'; // Grey for any unexpected category } }, shape: 'circle', size: 6, // Maintained at 6 as per user request pointStyle: { fillOpacity: 1, }, appendPadding: [35, 20, 10, 20], // Increased top padding from 20 to 40 // **Updated Legend Configuration** legend: { position: 'top-left', layout: 'horizontal', itemName: { style: { fill: 'grey', fontSize: 11.5, // Decreased font size from 12 to 10 fontFamily: 'Helvetica', }, }, itemWidth: 250, // Increased item width to accommodate longer labels itemSpacing: -10, // Decreased spacing from 30 to 10 to bring categories closer // G2Plot orders legend items based on the order of color definitions, // ensuring "Accredited voters - BVAS machines" appears before "Total votes - CCIJ analysis" }, interactions: [ { type: 'element-highlight' }, { type: 'element-active' }, ], // X-axis from 0 to calculated max, show numbers with commas, and add title "Votes" xAxis: { min: 0, max: xAxisMax, // Set dynamically based on data title: { text: 'Votes', style: { fontSize: 12, fontFamily: 'Helvetica', fill: '#aaa', // Changed to grey }, offset: 40, // Adjust as needed }, label: { formatter: (val) => formatNumber(val), // Format with commas style: { fontFamily: 'Helvetica', fontSize: 12, color: '#aaa', // Grey color for X-axis labels }, }, grid: { line: { style: { stroke: '#eee', }, }, }, line: { style: { stroke: '#aaa', }, }, }, yAxis: { // Define the order of Y-axis labels meta: { // 'location' is the yField values: yOrder, // The array of y-values in the desired order }, line: { style: { stroke: '#aaa', }, }, label: { formatter: (lgaName) => lgaName, style: { fontSize: 13, lineHeight: 30, fontFamily: 'Helvetica', fill: 'grey', // Grey color to match X-axis labels }, }, // Flip so the first item is at the top range: [1, 0], }, tooltip: { shared: false, // Makes tooltip show only the current hovered point showMarkers: false, // Disable markers for cleaner tooltips customContent: (title, items) => { if (!items || items.length === 0) return ''; // Since 'shared' is false, only one item is present const datum = items[0].data; // Format the votes for better readability const formattedVotes = formatNumber(datum.votes); // Determine the label based on partyType const voteLabel = datum.partyType === "Accredited voters - BVAS machines" ? "Number of voters" : "Vote count"; // Map the partyType to its corresponding background color const categoryColors = { "Accredited voters - BVAS machines": "#9CE1E5", "Total votes - CCIJ analysis": "#007585", }; const highlightColor = categoryColors[datum.partyType] || "#999"; // Default to grey if category not found // Determine font color based on partyType const fontColor = datum.partyType === "Total votes - CCIJ analysis" ? "white" : "black"; return `

Location: ${datum.location}
${datum.partyType}
${voteLabel}: ${formattedVotes}

`; }, domStyles: { 'g2-tooltip': { backgroundColor: 'white', border: '1px solid #ccc', fontFamily: 'Helvetica', color: 'black', padding: '5px', // Adds padding for better readability } } }, // **Add annotations for connecting lines and differenceVotes labels** annotations: annotations, }); // Render the scatter plot scatterPlot.render(); return wrapper; }; 38:[{"id":"369f17c1c1bce65c2d0d22f8ca5e341be554aadff4b7dc04c422b4b927a342f018eaebdc97b7e2f7d92f1b1f03f6896c707343fd1919e1e9046232549ddb7544","href":"https://static.observableusercontent.com/files/369f17c1c1bce65c2d0d22f8ca5e341be554aadff4b7dc04c422b4b927a342f018eaebdc97b7e2f7d92f1b1f03f6896c707343fd1919e1e9046232549ddb7544","name":"CCIJ-image-credit (1).svg","type":"image/svg+xml","lastModified":1743305337269.597,"size":34683}] 2f:{"id":"93acdf575819ff48","slug":null,"title":"Data Story","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2025-03-30T03:28:57.269Z","update_time":"$D2025-03-31T07:03:15.177Z","view_time":null,"first_public_time":"$D2025-03-30T03:28:57.269Z","has_unpublished_edits":null,"fork":{"id":"886b9ffc61735160","slug":null,"title":"Data Story","owner":{"id":"f1917a480c8ae104","login":"disinformation","name":"disinformation"}},"stars":0,"starred":false,"owner":{"type":"team","id":"16a10fc53f561ffb","login":"jillian-dudziak-ws","name":"Jillian Dudziak's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/15d08d47267a7a50d20af7357e1aae8378a90649227c52c3d13b5aee0f6d4473","tier":"starter_2024"},"version":537,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"53a6e142a54532c2","login":"jillian-dudziak","name":"Jillian Dudziak","avatar_url":"https://avatars-next.observableusercontent.com/f51c95d8b7aec9528f827e5b97159d84fddad35857a7a04d09829f4df770bf71","tier":null}],"members":[{"type":"individual","id":"53a6e142a54532c2","login":"jillian-dudziak","name":"Jillian Dudziak","avatar_url":"https://avatars-next.observableusercontent.com/f51c95d8b7aec9528f827e5b97159d84fddad35857a7a04d09829f4df770bf71","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Data Story","cells":[{"id":0,"value":"# Data Story","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":9,"value":"G2 = require(\"@antv/g2@4.0.2\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"G2Plot = require('https://cdn.jsdelivr.net/npm/@antv/g2plot@2.4.23/dist/g2plot.min.js')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"ccijImageCredit = FileAttachment(\"CCIJ-image-credit (1).svg\").image()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":386,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":186,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":388,"value":"$37","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W38","stdlib":"1","titling":"auto"}} 30:"$2f:body"