political-data-visualization

# Political Data Visualization ## 🔴 AI FIRST Quality Principle > **Apply the AI FIRST principle: never accept first-pass quality. Minimum 2 iterations. Read all output, improve every section. No shortcuts.** ## Purpose Create compelling, accessible data visualizations using pure HTML/CSS (no JavaScript) to display political metrics, voting patterns, parliamentary activity, and democratic accountability indicators for riksdagsmonitor. ## Core Principles 1. **CSS-Only**: No JavaScript frameworks - pure HTML/CSS for reliability and security 2. **Accessibility First**: WCAG 2.1 AA compliant, screen reader friendly 3. **Semantic Markup**: Use `<table>` with ARIA for complex data 4. **Progressive Disclosure**: Show summary, reveal details on interaction 5. **Color-Blind Safe**: Multiple visual cues beyond color (patterns, labels, icons) 6. **Responsive Design**: Adapt visualizations to mobile/tablet/desktop 7. **Performance**: Minimal CSS, no external libraries, fast rendering ## Visualization Types ### Progress Bars (Voting Discipline, Party Cohesion) ```css /* Semantic HTML */ <div class="progress" role="progressbar" aria-valuenow="87" aria-valuemin="0" aria-valuemax="100"> <span class="progress-label">Party Cohesion: 87%</span> <div class="progress-bar" style="--value: 87%"></div> </div> /* CSS implementation */ .progress { position: relative; width: 100%; height: 2rem; background: var(--dark-bg); border-radius: 0.5rem; overflow: hidden; border: 2px solid var(--primary-cyan); } .progress-bar { height: 100%; width: var(--value); background: linear-gradient(90deg, var(--primary-magenta), var(--primary-cyan)); transition: width 0.5s ease-in-out; } .progress-label { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: var(--light-text); font-weight: bold; z-index: 1; } ``` ### Bar Charts (MPs by Party, Committee Activity) ```css /* Horizontal bar chart */ <div class="bar-chart"> <div class="bar-row"> <span class="bar-label">S (Social Democrats)</span> <div class="bar" style="--value: 30%; --color: var(--party-s)"> <span class="bar-value">107 MPs</span> </div> </div> <div class="bar-row"> <span class="bar-label">M (Moderates)</span> <div class="bar" style="--value: 19%; --color: var(--party-m)"> <span class="bar-value">68 MPs</span> </div> </div> </div> /* CSS */ .bar-chart { display: grid; gap: 1rem; } .bar-row { display: grid; grid-template-columns: 200px 1fr; align-items: center; gap: 1rem; } .bar { position: relative; height: 2.5rem; width: var(--value); max-width: 100%; background: var(--color); border-radius: 0.25rem; display: flex; align-items: center; padding: 0 0.5rem; } .bar-value { color: white; font-weight: bold; font-size: 0.875rem; } /* Responsive */ @media (max-width: 767px) { .bar-row { grid-template-columns: 1fr; } .bar-label { font-size: 0.875rem; } } ``` ### Heat Maps (Voting Patterns, Committee Attendance) ```css /* Grid-based heat map */ <div class="heat-map"> <div class="heat-cell" style="--intensity: 1.0" title="100% attendance"> <span class="sr-only">100% attendance</span> </div> <div class="heat-cell" style="--intensity: 0.75" title="75% attendance"> <span class="sr-only">75% attendance</span> </div> <div class="heat-cell" style="--intensity: 0.5" title="50% attendance"> <span class="sr-only">50% attendance</span> </div> </div> /* CSS */ .heat-map { display: grid; grid-template-columns: repeat(auto-fill, minmax(2rem, 1fr)); gap: 0.25rem; } .heat-cell { aspect-ratio: 1; background: color-mix( in srgb, var(--primary-magenta) calc(var(--intensity) * 100%), var(--dark-bg) ); border: 1px solid var(--mid-bg); border-radius: 0.25rem; cursor: help; transition: transform 0.2s; } .heat-cell:hover, .heat-cell:focus { transform: scale(1.2); z-index: 1; outline: 2px solid var(--primary-cyan); } ``` ### Donut Charts (Coalition Breakdown, Vote Distribution) ```css /* CSS-only donut chart using conic-gradient */ <div class="donut-chart" style=" --s: 107; --m: 68; --sd: 73; --total: 349; --s-pct: calc(var(--s) / var(--total) * 100); --m-pct: calc(var(--m) / var(--total) * 100); --sd-pct: calc(var(--sd) / var(--total) * 100); " role="img" aria-label="Coalition distribution: S 107, M 68, SD 73 of 349 MPs"> <div class="donut-hole"> <span class="donut-total">349</span> <span class="donut-label">MPs</span> </div> </div> /* CSS */ .donut-chart { width: 200px; height: 200px; border-radius: 50%; background: conic-gradient( from 0deg, var(--party-s) 0% var(--s-pct), var(--party-m) var(--s-pct) calc(var(--s-pct) + var(--m-pct)), var(--party-sd) calc(var(--s-pct) + var(--m-pct)) 100% ); display: flex; align-items: center; justify-content: center; position: relative; } .donut-hole { width: 60%; height: 60%; border-radius: 50%; background: var(--dark-bg); display: flex; flex-direction: column; align-items: center; justify-content: center; } .donut-total { font-size: 2rem; font-weight: bold; color: var(--primary-cyan); } .donut-label { font-size: 0.875rem; color: var(--light-text); } ``` ### Timeline Visualizations (Legislative Process, MP Career) ```css /* Vertical timeline */ <ol class="timeline"> <li class="timeline-item"> <time datetime="2024-09-15">2024-09-15</time> <div class="timeline-content"> <h3>Motion Submitted</h3> <p>MP submitted motion to committee</p> </div> </li> <li class="timeline-item"> <time datetime="2024-10-20">2024-10-20</time> <div class="timeline-content"> <h3>Committee Review</h3> <p>Committee issued report</p> </div> </li> </ol> /* CSS */ .timeline { list-style: none; padding: 0; margin: 0; position: relative; } .timeline::before { content: ''; position: absolute; left: 2rem; top: 0; bottom: 0; width: 2px; background: var(--primary-cyan); } .timeline-item { position: relative; padding-left: 5rem; padding-bottom: 2rem; } .timeline-item::before { content: ''; position: absolute; left: 1.5rem; top: 0.25rem; width: 1rem; height: 1rem; border-radius: 50%; background: var(--primary-magenta); border: 3px solid var(--dark-bg); box-shadow: 0 0 0 3px var(--primary-cyan); } .timeline-item time { position: absolute; left: 0; top: 0; font-size: 0.875rem; color: var(--primary-cyan); } ``` ## Party Color Palette ```css :root { /* Swedish political parties (official colors) */ --party-s: #E8112d; /* Socialdemokraterna (Red) */ --party-m: #52BDEC; /* Moderaterna (Blue) */ --party-sd: #DDDD00; /* Sverigedemokraterna (Yellow) */ --party-c: #009933; /* Centerpartiet (Green) */ --party-v: #DA291C; /* Vänsterpartiet (Red) */ --party-kd: #000077; /* Kristdemokraterna (Dark Blue) */ --party-l: #006AB3; /* Liberalerna (Blue) */ --party-mp: #83CF39; /* Miljöpartiet (Green) */ } ``` ## Accessibility Requirements ### Screen Reader Support ```html <!-- Always include sr-only labels for data --> <div class="progress-bar" style="--value: 87%"> <span class="sr-only">87% party cohesion</span> </div> <!-- Data tables for complex visualizations --> <table class="data-table" role="table"> <caption>MPs by Party Distribution</caption> <thead> <tr> <th scope="col">Party</th> <th scope="col">MPs</th> <th scope="col">Percentage</th> </tr> </thead> <tbody> <tr> <th scope="row">Socialdemokraterna (S)</th> <td>107</td> <td>30.7%</td> </tr> </tbody> </table> <!-- Hide visual chart from screen readers, show data table --> <div aria-hidden="true" class="visual-chart">...</div> ``` ### Color Contrast ```css /* Ensure 4.5:1 contrast ratio minimum */ .bar-label { color: var(--light-text); /* #e0e0e0 on #0a0e27 = 12.6:1 ✅ */ } /* Use patterns for color-blind accessibility */ .bar-striped { background-image: repeating-linear-gradient( 45deg, transparent, transparent 10px, rgba(255,255,255,0.1) 10px, rgba(255,255,255,0.1) 20px ); } ``` ### Keyboard Navigation ```css /* Make interactive elements focusable */ .heat-cell { cursor: pointer; position: relative; } .heat-cell:focus { outline: 2px solid var(--primary-cyan); outline-offset: 2px; z-index: 1; } /* Tooltip on focus/hover */ .heat-cell::after { content: attr(title); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);