political-data-visualization
OfficialCSS-only visuals for political metrics.
AuthorHack23
Version1.0.0
Installs0
System Documentation
What problem does it solve?
CSS-only data visualizations enable presenting political metrics on static websites without introducing JavaScript, ensuring accessibility and performance.
Core Features & Use Cases
- CSS-Only: No JavaScript, pure HTML/CSS for reliability and security
- Accessibility First: WCAG 2.1 AA compliant, screen reader friendly
- Semantic Markup: Use tables and ARIA for complex data
- Progressive Disclosure: Show summary, reveal details on interaction
- Color-Blind Safe: Patterns, labels, icons beyond color
- Responsive Design: Mobile/tablet/desktop
- Performance: Minimal CSS, fast rendering
Visualization Types
- Progress Bars (Voting Discipline, Party Cohesion)
- Bar Charts (MPs by Party, Committee Activity)
- Heat Maps (Voting Patterns, Committee Attendance)
- Donut Charts (Coalition Breakdown, Vote Distribution)
- Timeline Visualizations (Legislative Process, MP Career)
- Accessibility requirements: Include ARIA roles and screen-reader friendly semantic structures
Quick Start
Start by defining semantic HTML structure and CSS variables to render a pure CSS visualization on your static page.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: political-data-visualization Download link: https://github.com/Hack23/riksdagsmonitor/archive/main.zip#political-data-visualization Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.