25:["$","title",null,{"children":"Pulitzer AI | disinformation | Observable"}] 4b:T3113, barChart2 = require('@antv/g2plot@2').then(async G2Plot => { // 1. Raw data: capital allocations in Nigerian naira // Agency order: DSS, Police, NIA, DIA, Defense, ONSA const agencyNames = [ 'Directorate of State Security', 'Police Formations and Command', 'National Intelligence Agency', 'Defense Intelligence Agency', 'Ministry of Defense', 'Office of the National Security Adviser (ONSA)' ]; const annualAmounts = [ [2016, 10231048363, 16107272000, 6243565318, 10080127081, 130864439542, 15233959994], [2017, 10871048363, 16107272000, 6631565318, 10522346188, 140000000000, 25307078134], [2018, 9771048363, 25197675025, 6031565318, 2164149774, 157715439613, 27954000000], [2019, 6998515859, 22064903996, 4243568078, 14660631189, 159125439612, 19694239723], [2020, 8759109516, 14255509516, 4243568078, 9710950716, 115873903710, 8143920390], [2021, 10994146151, 13990902475, 6396328606, 11370315797, 127850984984, 18796506533], [2022, 14210646151, 35672730983, 9729328607, 11980106583, 197049920338, 17917834265], [2023, 12207542023, 59146674885, 5831683334, 17880106583, 285045254555, 43747122506], [2024, 18549597344, 66928851985, 8223779675, 8859434037, 339286557299, 36950449844], [2025, 64011483658, 68863706911, 51306427305, 11890015676, 604917085118, 180093123554], [2026, 51808038561, 48204594840, 8323010975, 8323010975, 464474756899, 157565186488] ]; // 2. Define agency order // First three appear in legend row 1. // Last three appear in legend row 2. const agencies = [ 'Ministry of Defense', 'Office of the National Security Adviser (ONSA)', 'Police Formations and Command', 'Directorate of State Security', 'National Intelligence Agency', 'Defense Intelligence Agency' ]; // 3. Color mapping const colorMap = { 'Ministry of Defense': '#456882', 'Office of the National Security Adviser (ONSA)': '#FF8282', 'Police Formations and Command': '#FFC941', 'Directorate of State Security': '#9487E5', 'National Intelligence Agency': '#9CE1E5', 'Defense Intelligence Agency': '#7195B8' }; // 4. Transform data into G2Plot long format const rawData = annualAmounts.flatMap(([year, ...amounts]) => amounts.map((amount, index) => ({ year: String(year), agency: agencyNames[index], amountNGN: amount })) ); const plotData = rawData .map(d => ({ ...d, billions: d.amountNGN / 1e9 })) .sort((a, b) => Number(a.year) - Number(b.year) || agencies.indexOf(a.agency) - agencies.indexOf(b.agency) ); // 5. Formatting helpers and annual totals const formatNGN = value => '₦' + new Intl.NumberFormat('en-NG', { maximumFractionDigits: 0 }).format(value); const formatBillions = value => '₦' + new Intl.NumberFormat('en-NG', { maximumFractionDigits: 1 }).format(value) + 'bn'; const totals = Object.fromEntries( annualAmounts.map(([year, ...amounts]) => [ String(year), amounts.reduce((sum, value) => sum + value, 0) ]) ); // 6. Create wrapper layout const wrapper = html`

Nigerian security agencies' capital budgets surged in 2025

Annual capital allocations to six federal security and defense agencies, 2016–2026.

Government agency Click an agency to show or hide it

Data Source: Nigeria Budget Data, 2016–2026.

`; const container = wrapper.querySelector('.budget-chart'); const legendContainer = wrapper.querySelector('.budget-legend'); // 7. Track visible agencies const visibleAgencies = new Set(agencies); // 8. Create horizontal stacked bar chart const bar = new G2Plot.Bar(container, { data: plotData, isStack: true, yField: 'year', xField: 'billions', seriesField: 'agency', color: ({ agency }) => colorMap[agency], barWidthRatio: 0.65, maxBarWidth: 30, autoFit: true, // Reduced top padding: legend sits outside chart padding: [20, 45, 55, 70], meta: { year: { values: annualAmounts.map(row => String(row[0])) }, agency: { values: agencies }, billions: { min: 0, nice: true } }, // Horizontal axis xAxis: { title: { text: 'Capital allocations (₦ billions)', style: { fontFamily: 'Helvetica', fontSize: 12, fill: 'grey' }, offset: 40 }, label: { formatter: val => new Intl.NumberFormat('en-NG', { maximumFractionDigits: 0 }).format(Number(val)), style: { fontFamily: 'Helvetica', fontSize: 12, fill: 'grey' } }, grid: { line: { style: { stroke: '#eee', lineWidth: 1 } } } }, // Vertical axis yAxis: { label: { style: { fontFamily: 'Helvetica', fill: '#666', fontSize: 13 } } }, // Built-in legend disabled legend: false, // Custom tooltips tooltip: { shared: true, showMarkers: false, customContent: (title, items) => { if (!title || !items || !items.length) { return ''; } const year = String(title); const rows = items.filter( item => item.data && item.data.amountNGN != null && visibleAgencies.has(item.data.agency) ); const displayedTotal = rows.reduce( (sum, item) => sum + item.data.amountNGN, 0 ); const lines = rows.map(item => `

${item.data.agency} ${formatBillions(item.data.billions)}

`).join(''); return `

${year} ${lines}

Visible agencies ${formatBillions(displayedTotal / 1e9)}

All six agencies: ${formatNGN(totals[year])}

`; }, domStyles: { 'g2-tooltip': { backgroundColor: 'white', border: '1px solid #ccc', fontFamily: 'Helvetica', color: 'black' } } }, animation: false }); // 9. Render the chart bar.render(); // 10. Build a natural two-row legend // Three items in each row. // Each item takes only as much width as its name needs. const legendRows = [ agencies.slice(0, 3), agencies.slice(3, 6) ]; legendRows.forEach(rowAgencies => { const row = document.createElement('div'); row.style.cssText = ` display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: flex-start; column-gap: 22px; row-gap: 8px; width: 100%; `; rowAgencies.forEach(agency => { const button = document.createElement('button'); button.type = 'button'; button.style.cssText = ` display: inline-flex; align-items: center; flex: 0 0 auto; gap: 9px; width: auto; max-width: 100%; padding: 2px 0; margin: 0; border: none; background: transparent; font-family: Helvetica, Arial, sans-serif; font-size: 12px; color: #333; text-align: left; cursor: pointer; white-space: normal; line-height: 1.4; `; const swatch = document.createElement('span'); swatch.style.cssText = ` display: inline-block; flex: 0 0 10px; width: 10px; height: 10px; background: ${colorMap[agency]}; `; const label = document.createElement('span'); label.textContent = agency; label.style.cssText = ` display: block; min-width: 0; white-space: normal; overflow-wrap: break-word; `; button.appendChild(swatch); button.appendChild(label); button.setAttribute('aria-pressed', 'true'); button.setAttribute( 'aria-label', `Show or hide ${agency}` ); button.addEventListener('click', () => { if (visibleAgencies.has(agency)) { visibleAgencies.delete(agency); } else { visibleAgencies.add(agency); } const isVisible = visibleAgencies.has(agency); button.style.opacity = isVisible ? '1' : '0.35'; button.setAttribute( 'aria-pressed', String(isVisible) ); // Keep all 11 years present when filtering. // Hidden agencies contribute zero. const filteredData = plotData.map(d => ({ ...d, billions: visibleAgencies.has(d.agency) ? d.amountNGN / 1e9 : 0 })); bar.changeData(filteredData); }); row.appendChild(button); }); legendContainer.appendChild(row); }); // 11. Return the complete visualization return wrapper; }); 4c:[{"id":"369f17c1c1bce65c2d0d22f8ca5e341be554aadff4b7dc04c422b4b927a342f018eaebdc97b7e2f7d92f1b1f03f6896c707343fd1919e1e9046232549ddb7544","href":"https://static.observableusercontent.com/files/369f17c1c1bce65c2d0d22f8ca5e341be554aadff4b7dc04c422b4b927a342f018eaebdc97b7e2f7d92f1b1f03f6896c707343fd1919e1e9046232549ddb7544","name":"CCIJ-image-credit (1).svg","type":"image/svg+xml","lastModified":1737483906345.921,"size":34683}] 47:{"id":"886b9ffc61735160","slug":"pulitzer-ai","title":"Pulitzer AI","thumbnail":"82f95d802ba9d77812afbdf786b261b3cc91fbc1975e1c97f01cf5ae9489adbe","access_level":"public","create_time":"$D2025-01-21T18:23:09.791Z","update_time":"$D2026-10-15T17:22:08.682Z","view_time":null,"first_public_time":"$D2025-01-24T18:48:47.997Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"f1917a480c8ae104","login":"disinformation","name":"disinformation","avatar_url":"https://avatars-next.observableusercontent.com/32ad793086710e3a48a95d008b1b29d2d5265ea131a9e9964bf681a46c8efc47","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":580,"publish_version":580,"role":null,"authored":false,"authors":[{"type":"individual","id":"7a8b7016eff54587","login":"sotiris-sideris2","name":"Sotiris Sideris","avatar_url":"https://avatars-next.observableusercontent.com/d022ab7d03c5e216c59823276d3928f49021e6076a1f9baba00816ea03965c2f","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"f1917a480c8ae104","login":"disinformation","name":"disinformation","avatar_url":"https://avatars-next.observableusercontent.com/32ad793086710e3a48a95d008b1b29d2d5265ea131a9e9964bf681a46c8efc47","tier":"starter_2024","role":"editor"},{"type":"individual","id":"7a8b7016eff54587","login":"sotiris-sideris2","name":"Sotiris Sideris","avatar_url":"https://avatars-next.observableusercontent.com/d022ab7d03c5e216c59823276d3928f49021e6076a1f9baba00816ea03965c2f","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Pulitzer AI","cells":[{"id":0,"value":"# Pulitzer AI","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":9,"value":"G2 = require(\"@antv/g2@4.0.2\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":392,"value":"$4b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":391,"value":"","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4c","stdlib":"1"}} 24:null