🤝 Dashboard: Coalition & Voting Pattern Analysis #52
Description
📋 Issue Type
Feature - Data Visualization Dashboard
🎯 Objective
Implement comprehensive coalition and voting pattern dashboard revealing party alignment dynamics, voting anomalies, behavioral trends, and decision patterns using CIA platform data with advanced D3.js network visualizations.
📊 Current State
- No coalition visualization exists
- CIA voting data available but not consumed (50+ years of voting records)
- No anomaly detection visualizations
- No behavioral pattern analysis displays
🚀 Desired State
Interactive dashboard featuring:
- Coalition Network Diagram: D3.js force-directed graph showing party alliances
- Voting Anomaly Detection: Highlight unusual voting patterns
- Behavioral Patterns: Party voting consistency analysis
- Decision Trends: Temporal decision-making patterns
- Party Alignment Matrix: Cross-party voting agreement heat map
📊 CIA Data Integration Context
CIA Product(s):
- Coalition Analysis Dashboard
- Voting Pattern Analysis
- Top 10 Rankings (Party Rebels, Coalition Brokers)
Data Sources:
Primary CSV Files:
Coalition & Alignment:
- distribution_coalition_alignment.csv (party alignment scores)
- distribution_behavioral_patterns_by_party.csv (behavioral analysis)
- distribution_decision_patterns_by_party.csv (decision patterns)
Voting Analysis:
- distribution_voting_anomaly_classification.csv (anomaly types)
- distribution_anomaly_by_party.csv (anomalies by party)
- distribution_annual_party_votes.csv (voting volume by year)
Temporal Trends:
- distribution_decision_trends.csv (decision trends over time)
- percentile_party_effectiveness_trends.csv (effectiveness)
Percentile Distributions:
- percentile_voting_anomaly_detection.csv (P1-P99 anomaly scores)
- percentile_politician_behavioral_trends.csv (behavioral percentiles)
- percentile_politician_decision_pattern.csv (decision percentiles)
Annual Time Series:
- distribution_annual_party_votes.csv (1971-2026)
- distribution_annual_ballots.csv (ballot volume)
Sample Size: 300-500 rows (voting data)
Coverage: 50+ years (1971-2026)
Sample Data: Reference https://github.com/Hack23/cia/tree/master/service.data.impl/sample-data/
Methodology:
- Coalition detection via correlation analysis (DATA_ANALYSIS_INTOP_OSINT.md)
- Anomaly detection using statistical thresholds
- Behavioral pattern clustering
- Network analysis for alliance visualization
Implementation Notes:
- Fetch CSV files via GitHub raw content API
- Calculate real-time coalition scores
- Detect anomalies using P90/P99 thresholds
- Cache locally in
/data/cia/voting/ - Update frequency: Weekly (voting data changes weekly)
🔧 Implementation Approach
1. Data Integration
async function loadVotingData() {
const datasets = {
coalition: 'distribution_coalition_alignment.csv',
anomalies: 'distribution_voting_anomaly_classification.csv',
behavioral: 'distribution_behavioral_patterns_by_party.csv',
decisions: 'distribution_decision_patterns_by_party.csv',
annual: 'distribution_annual_party_votes.csv'
};
const data = await fetchMultipleCIADatasets(datasets);
return {
network: buildCoalitionNetwork(data.coalition),
anomalies: detectAnomalies(data.anomalies),
patterns: analyzeBehavior(data.behavioral)
};
}2. D3.js Network Visualization
// Coalition network force-directed graph
function renderCoalitionNetwork(data) {
const svg = d3.select('#coalitionNetwork')
.append('svg')
.attr('width', width)
.attr('height', height);
// Nodes = Political parties (8 parties)
// Links = Coalition strength (weighted edges)
// Color = Party color
// Size = Influence score
const simulation = d3.forceSimulation(nodes)
.force('link', d3.forceLink(links).distance(d => 200 - d.strength * 100))
.force('charge', d3.forceManyBody().strength(-300))
.force('center', d3.forceCenter(width / 2, height / 2));
}3. HTML Structure
<section id="coalition-dashboard" class="dashboard-container">
<h2>🤝 Coalition & Voting Pattern Analysis</h2>
<div class="dashboard-grid">
<div class="chart-card wide">
<h3>Coalition Network (Interactive)</h3>
<div id="coalitionNetwork" role="img" aria-label="Coalition network diagram"></div>
<table class="sr-only" id="coalitionNetworkTable">
<!-- Accessible table fallback -->
</table>
</div>
<div class="chart-card">
<h3>Voting Anomalies (Last 5 Years)</h3>
<canvas id="votingAnomalyChart"></canvas>
</div>
<div class="chart-card">
<h3>Party Alignment Heat Map</h3>
<div id="alignmentHeatMap"></div>
</div>
<div class="chart-card">
<h3>Behavioral Patterns</h3>
<canvas id="behavioralPatternsChart"></canvas>
</div>
<div class="chart-card wide">
<h3>Decision Trends (1990-2026)</h3>
<canvas id="decisionTrendsChart"></canvas>
</div>
</div>
</section>4. Anomaly Detection Logic
// Detect voting anomalies using percentile thresholds
function detectAnomalies(votingData, thresholds) {
return votingData.filter(vote => {
const score = calculateDeviationScore(vote);
return score > thresholds.p90; // P90 = significant anomaly
}).map(vote => ({
...vote,
severity: score > thresholds.p99 ? 'critical' : 'high',
type: classifyAnomaly(vote)
}));
}5. Accessibility
- Network diagram keyboard navigation (Tab to nodes)
- Alternative table with coalition data
- ARIA labels for all interactive elements
- High contrast mode for visually impaired
- Screen reader announcements for updates
🤖 Recommended Agent
data-visualization-specialist - Expert in D3.js network diagrams, statistical analysis, and political coalition visualization
Rationale: Requires advanced D3.js force-directed graph expertise, statistical anomaly detection, and deep understanding of Swedish parliamentary coalition dynamics.
Custom Instructions:
- Use D3.js v7+ for coalition network diagram
- Implement force-directed graph with weighted edges
- Use Chart.js for time series and anomaly charts
- Add zoom and pan to network diagram
- Implement anomaly detection with P90/P99 thresholds
- Use Swedish party colors (S=red, M=blue, SD=yellow, etc.)
- Ensure WCAG 2.1 AA accessibility
- Support RTL for Arabic/Hebrew
- Cache voting data locally
- Add real-time coalition score calculations
- No JavaScript frameworks (vanilla JS + D3/Chart.js)
✅ Acceptance Criteria
Data Integration
- CIA voting CSV files fetched and parsed
- Coalition scores calculated correctly
- Anomaly detection implemented (P90/P99 thresholds)
- Behavioral patterns analyzed
- Local caching in
/data/cia/voting/
Visualizations
- D3.js coalition network (force-directed graph)
- Party alignment heat map (D3.js)
- Voting anomaly scatter plot (Chart.js)
- Behavioral patterns bar chart (Chart.js)
- Decision trends timeline (Chart.js)
- Interactive zoom/pan on network diagram
Coalition Network Features
- 8 party nodes with party colors
- Weighted edges showing coalition strength
- Node size proportional to influence
- Click on node shows party details
- Hover shows coalition strength tooltip
- Drag nodes to rearrange
Anomaly Detection
- Anomalies highlighted in red (critical) / orange (high)
- Tooltip shows anomaly type and score
- Filter by anomaly type (cross-party, rebel, absence)
- Temporal anomaly trends displayed
Quality
- HTML validation passes
- WCAG 2.1 AA compliance
- Responsive design (320px-1440px+)
- Load time < 4 seconds (complex D3.js)
- D3.js v7+ and Chart.js via CDN with SRI
Multi-Language
- Party names localized (14 languages)
- Anomaly type labels translated
- Chart legends in current locale
- Network diagram tooltips localized
Documentation
- Coalition scoring methodology
- Anomaly detection algorithm
- Network diagram interaction guide
- Update ARCHITECTURE.md with network component
📚 References
- Repository: https://github.com/Hack23/riksdagsmonitor
- CIA Sample Data: https://github.com/Hack23/cia/tree/master/service.data.impl/sample-data
- CIA Voting Analysis: Focus on voting_anomaly_* and coalition_* CSV files
- D3.js Force Graph: https://d3-graph-gallery.com/network.html
- D3.js v7 Documentation: https://d3js.org/
- Chart.js: https://www.chartjs.org/
- ISMS Policy: https://github.com/Hack23/ISMS-PUBLIC/blob/main/Secure_Development_Policy.md
🏷️ Labels
type:feature, priority:high, component:visualization, component:data-integration, agent:data-visualization-specialist, cia-data, dashboard, voting-analysis, coalition-analysis, network-diagram
🌐 Multi-Language Support
All 14 languages supported with localized party names and labels
🔐 Security & Compliance
- Public Data: Parliamentary voting records (public domain)
- No PII: Aggregated party-level data only
- HTTPS-only: Secure data transmission
- SRI: D3.js and Chart.js with integrity hashes
- ISMS: Follows data analysis documentation standards