political-data-visualization

Official

CSS-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 required

Components

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.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.