Data Visualization Components (Charts, Graphs, Heatmaps)

[pethers]

📋 Issue Type

Feature - Data Visualization

🎯 Objective

Implement comprehensive data visualization components (charts, graphs, heatmaps, network diagrams) for riksdagsmonitor to display CIA platform intelligence products with interactive, accessible, and performant visualizations across all 14 languages.

📊 Current State

• ✅ Static HTML with text-based information
• ✅ External links to CIA platform visualizations
• ❌ No embedded visualizations
• ❌ No charts or graphs
• ❌ No interactive data exploration
• ❌ No visual analytics

Measured Metrics:

• Visualization components: 0
• Chart libraries: 0
• Interactive elements: 0

🚀 Desired State

• ✅ Comprehensive visualization component library
• ✅ Party performance line charts (50+ years)
• ✅ Voting pattern heatmaps
• ✅ Committee network graphs
• ✅ MP influence rankings bar charts
• ✅ Election trend analysis
• ✅ Interactive tooltips and legends
• ✅ Responsive visualizations (mobile-first)
• ✅ Accessibility (WCAG 2.1 AA)

📊 CIA Data Integration Context

CIA Product(s): All 19 visualization products

• Party Performance Dashboard (line charts, area charts)
• Committee Network Analysis (network graphs, force-directed)
• Top 10 Rankings (bar charts, leaderboards)
• Voting Pattern Analysis (heatmaps, calendar views)
• Election Cycle Analysis (time series, forecasting)
• Politician Career Analysis (timeline charts)

Data Source:

• json-export-specs/visualizations/ - Visualization specifications
• json-export-specs/schemas/ - Data schemas for each visualization
• service.data.impl/sample-data/ - Sample data for testing

Sample Data Files:

party-performance.json       # Line/area charts
committee-network.json       # Network graphs
top10-influential-mps.json   # Bar charts
voting-patterns.json         # Heatmaps
election-analysis.json       # Time series
politician-career.json       # Timeline charts

Methodology:

• Visualization best practices from BUSINESS_PRODUCT_DOCUMENT.md
• OSINT data presentation from DATA_ANALYSIS_INTOP_OSINT.md
• Accessibility guidelines for data visualizations

Implementation Notes:

• Review viz specs: https://github.com/Hack23/cia/tree/master/json-export-specs/visualizations
• Sample data: https://github.com/Hack23/cia/tree/master/service.data.impl/sample-data

🔧 Implementation Approach

Phase 1: Visualization Library Selection

Criteria:

• Lightweight (bundle size < 200KB)
• Static site compatible
• Accessibility support
• Mobile-responsive
• No framework dependencies

Options:

1. Chart.js (Recommended) - 60KB, simple API, good accessibility
2. D3.js - Powerful but larger, maximum flexibility
3. Plotly.js - Interactive but 3MB+ (too large)
4. ApexCharts - 150KB, good mobile support

Decision: Chart.js for standard charts, D3.js for network graphs

Phase 2: Core Visualization Components

1. Line Charts (Party Performance)

// components/line-chart.js
- Historical party trends (1971-2024)
- Multiple series support (8 parties)
- Tooltips with data points
- Responsive sizing

2. Bar Charts (Top 10 Rankings)

// components/bar-chart.js
- Horizontal bars for rankings
- Color-coded by category
- Interactive tooltips
- Mobile-optimized

3. Heatmaps (Voting Patterns)

// components/heatmap.js
- Calendar-style heatmap
- Color gradient for intensity
- Clickable cells
- Legend and scale

4. Network Graphs (Committee Influence)

// components/network-graph.js
- Force-directed layout (D3.js)
- Interactive node dragging
- Zoom and pan
- Clustering visualization

5. Time Series (Election Analysis)

// components/time-series.js
- Historical election data
- Trend lines
- Forecast visualization
- Confidence intervals

6. Timeline Charts (Politician Careers)

// components/timeline.js
- Career milestones
- Event markers
- Scrollable timeline
- Responsive layout

Phase 3: Integration & Styling

1. Create reusable visualization components
2. Implement consistent color scheme (cyberpunk theme)
3. Add loading states and error handling
4. Implement lazy loading for performance
5. Add print-friendly styles
6. Ensure keyboard navigation
7. Add screen reader support

Phase 4: Accessibility & Testing

1. ARIA labels for all visualizations
2. Alternative text descriptions
3. Keyboard navigation
4. High contrast mode
5. Focus indicators
6. Screen reader testing
7. Cross-browser validation

Files to Create/Modify

visualizations/
  components/
    line-chart.js
    bar-chart.js
    heatmap.js
    network-graph.js
    time-series.js
    timeline.js
  styles/
    charts.css
    visualizations.css
  utils/
    data-loader.js
    chart-helpers.js
data/
  viz-config.json      # Visualization configurations
examples/
  party-performance.html
  committee-network.html
  top10-rankings.html
package.json           # Add Chart.js, D3.js

🤖 Recommended Agent

frontend-specialist - Best suited for:

• Visualization component development
• Responsive design for charts/graphs
• Accessibility implementation
• Performance optimization

Alternative: performance-engineer for lazy loading and optimization

✅ Acceptance Criteria

• Chart.js and D3.js integrated
• 6 core visualization components implemented
• Party performance line charts working
• Voting pattern heatmaps functional
• Committee network graph interactive
• Top 10 rankings bar charts responsive
• Election time series with forecasts
• Politician career timelines
• All visualizations mobile-responsive
• WCAG 2.1 AA accessibility compliant
• Keyboard navigation working
• Screen reader compatible
• Color-blind friendly palettes
• Lazy loading implemented
• Bundle size < 300KB total
• Cross-browser tested
• All 14 languages supported
• Documentation with examples

📚 References

• Chart.js Documentation: https://www.chartjs.org/docs/
• D3.js Gallery: https://d3-graph-gallery.com/
• Accessibility for Data Viz: https://www.w3.org/WAI/tutorials/images/complex/
• Color Palettes: https://colorbrewer2.org/ (color-blind safe)
• CIA Visualizations: https://github.com/Hack23/cia/tree/master/json-export-specs/visualizations
• Security Architecture: SECURITY_ARCHITECTURE.md
• Skills: .github/skills/html-accessibility.md

🏷️ Labels

enhancement, dependencies

🔒 Performance & Security

• CDN for Chart.js/D3.js with SRI
• Lazy load visualizations on scroll
• CSP-compliant scripts
• No external data sources (except CIA)
• Bundle size monitoring
• First Contentful Paint < 2s

---

Priority: High
Estimated Effort: 5-7 days
Dependencies: Issue #13 (CIA data integration)
Related Issues: Issue #15 (dashboard integration)

[copilot-swe-agent]

The agent encountered an error and was unable to start working on this issue: The token used to assign the agent doesn't have the necessary permissions. Please make sure your token has read and write access to actions, contents, issues, and pull requests, and has permission to assign issues to the target repository. Learn more: https://docs.github.com/en/copilot/how-tos/use-copilot-agents/coding-agent/create-a-pr