Complete visualization guides for all CIA JSON export types with color-coded Mermaid diagrams, implementation examples, and interactive patterns.

Last Updated: 2024-11-24
Version: 1.0.0

This directory contains comprehensive visualization documentation for rendering political intelligence data from the CIA JSON export system. All visualizations are based on actual data sources documented in the repository, including:

• 85 Database Views: DATABASE_VIEW_INTELLIGENCE_CATALOG.md
• 45-50 Risk Rules: RISK_RULES_INTOP_OSINT.md
• JSON Schemas: schemas/ (politician, party, committee, ministry, intelligence)
• Analysis Frameworks: DATA_ANALYSIS_INTOP_OSINT.md
• Business Products: BUSINESS_PRODUCT_DOCUMENT.md

Each visualization guide includes:

• 🟦 Data Structure Diagrams - JSON schema visualization using Mermaid
• 🟩 Data Flow Diagrams - API to UI rendering pipeline
• 🟨 Component Architecture - UI component relationships
• 🟥 Interaction Flow - User interaction state machines
• 📊 Example Data - Representative samples based on documented metrics
• 📱 Responsive Design - Mobile-first patterns
• ♿ Accessibility - WCAG 2.1 AA compliance
• ⚡ Performance - Optimization techniques

Note: Visualizations use illustrative examples with realistic ranges based on documented classification systems (e.g., attendance thresholds, effectiveness levels, risk categories). Actual data values are available through the platform's database views and JSON export APIs.

• D3.js v7 - Network graphs, force layouts, custom visualizations
• Chart.js v4 - Standard charts (line, bar, radar, doughnut)
• Plotly.js - 3D visualizations, statistical plots

• React 18 - Component-based UI
• Vue.js 3 - Composition API patterns
• Vanilla JavaScript - Framework-agnostic examples

• Tailwind CSS - Utility-first styling
• CSS Grid & Flexbox - Responsive layouts
• CSS Custom Properties - Theme system

# Install required dependencies
npm install d3 chart.js react-chartjs-2

# Or with yarn
yarn add d3 chart.js react-chartjs-2

// Fetch JSON data
const response = await fetch('https://cdn.cia.se/v1.0.0/politicians/active.json');
const data = await response.json();

// Render with D3.js
import * as d3 from 'd3';
// See individual guides for implementation

// Or use Chart.js
import { Line } from 'react-chartjs-2';
// See individual guides for React examples

• 🟦 Blue (#e1f5ff) - Data structures and JSON schemas
• 🟩 Green (#d4f1d4) - Data flow and processing pipelines
• 🟨 Yellow (#fff3cd) - Component architecture and UI structure
• 🟥 Red (#f8d7da) - User interactions and state management
• 🟪 Purple (#e7d5f5) - Advanced features and integrations

const partyColors = {
  'S': '#E8112d',   // Social Democrats (Red)
  'M': '#52BDEC',   // Moderates (Blue)
  'SD': '#DDDD00',  // Sweden Democrats (Yellow)
  'C': '#009933',   // Center Party (Green)
  'V': '#DA291C',   // Left Party (Red)
  'KD': '#000077',  // Christian Democrats (Dark Blue)
  'L': '#006AB3',   // Liberals (Blue)
  'MP': '#83CF39'   // Green Party (Light Green)
};

const riskColors = {
  low: '#28a745',      // Green
  medium: '#ffc107',   // Yellow
  high: '#fd7e14',     // Orange
  critical: '#dc3545' // Red
};

const ResponsiveChart = ({ data }) => {
  const containerRef = useRef(null);
  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });

  useEffect(() => {
    const updateDimensions = () => {
      if (containerRef.current) {
        setDimensions({
          width: containerRef.current.offsetWidth,
          height: containerRef.current.offsetHeight
        });
      }
    };

    updateDimensions();
    window.addEventListener('resize', updateDimensions);
    return () => window.removeEventListener('resize', updateDimensions);
  }, []);

  return (
    <div ref={containerRef} className="chart-container">
      <SVGChart width={dimensions.width} height={dimensions.height} data={data} />
    </div>
  );
};

const Tooltip = ({ data, x, y, visible }) => {
  if (!visible) return null;

  return (
    <div 
      className="tooltip"
      style={{
        position: 'absolute',
        left: x + 10,
        top: y - 10,
        background: 'white',
        border: '1px solid #ccc',
        padding: '8px',
        borderRadius: '4px',
        pointerEvents: 'none'
      }}
    >
      <h4>{data.name}</h4>
      <p>Party: {data.party}</p>
      <p>Score: {data.score}</p>
    </div>
  );
};

• Tab - Navigate between interactive elements
• Enter/Space - Activate buttons and selections
• Arrow Keys - Navigate within charts
• Escape - Close modals and tooltips

<svg role="img" aria-label="Electoral risk visualization">
  <title>Electoral Risk Rankings for 2026</title>
  <desc>Bar chart showing 10 politicians with highest risk of losing their seats</desc>
  {/* Chart elements */}
</svg>

All visualizations meet WCAG 2.1 AA standards:

• Text contrast ratio ≥ 4.5:1
• Large text (18pt+) ≥ 3:1
• UI components ≥ 3:1

// Use Canvas for 500+ elements
const useCanvas = data.length > 500;

if (useCanvas) {
  renderCanvas(data);
} else {
  renderSVG(data);
}

import { debounce } from 'lodash';

const handleFilterChange = debounce((value) => {
  setFilter(value);
  refetchData();
}, 300);

import { FixedSizeList } from 'react-window';

<FixedSizeList
  height={600}
  itemCount={data.length}
  itemSize={50}
  width="100%"
>
  {Row}
</FixedSizeList>

• Chrome 90+
• Firefox 88+
• Safari 14+
• Edge 90+
• Mobile browsers (iOS Safari 14+, Chrome Mobile 90+)

visualizations/
├── README.md                          (This file)
├── politician-profile.md
├── party-performance.md
├── government-cabinet.md
├── committee-network.md
├── intelligence-dashboard.md
├── politician-career-analysis.md      (v1.58 - NEW)
├── election-cycle-analysis.md         (v1.59-v1.60 - NEW)
├── party-longitudinal-analysis.md     (v1.61 - NEW)
├── top10-electoral-risk.md
├── top10-ethics-concerns.md
├── top10-most-influential.md
├── top10-rising-stars.md
├── top10-most-absent.md
├── top10-party-rebels.md
├── top10-most-productive.md
├── top10-coalition-brokers.md
├── top10-media-presence.md
└── top10-most-controversial.md

When adding new visualization guides:

1. Follow the established structure (see any existing guide)
2. Include all 4 color-coded Mermaid diagrams
3. Provide complete code examples (D3.js + React/Vue)
4. Add accessibility annotations
5. Include performance considerations
6. Test on mobile devices
7. Validate color contrast ratios

• Main README - JSON export system overview
• Schema Specifications - JSON data structures
• Database View Catalog - 85 documented database views
• Risk Rules Documentation - 45-50 behavioral detection rules
• Data Analysis Frameworks - OSINT methodologies
• Business Product Document - Data products and APIs
• Intelligence Data Flow - Complete data pipeline

All visualizations in this directory are based on documented data sources from the Hack23 CIA platform:

• Politician Views: view_riksdagen_politician, view_politiker_behavioral_trends, view_riksdagen_politician_influence_metrics
• Party Views: view_riksdagen_party, view_riksdagen_party_summary, view_riksdagen_party_decision_flow
• Committee Views: view_riksdagen_committee, view_committee_productivity, view_committee_productivity_matrix
• Government Views: view_riksdagen_goverment, view_ministry_effectiveness_trends, view_ministry_productivity_matrix
• Intelligence Views: view_riksdagen_intelligence_dashboard, view_riksdagen_voting_anomaly_detection, view_riksdagen_coalition_alignment_matrix

Attendance Status (from view_politician_behavioral_trends):

• EXCELLENT_ATTENDANCE: <5% absence
• GOOD_ATTENDANCE: 5-10% absence
• MODERATE_ABSENTEEISM: 10-20% absence
• HIGH_ABSENTEEISM: 20-30% absence
• CRITICAL_ABSENTEEISM: >30% absence

Effectiveness Status:

• HIGHLY_EFFECTIVE: >70% win rate
• EFFECTIVE: 55-70% win rate
• MODERATE_EFFECTIVENESS: 45-55% win rate
• INEFFECTIVE: <45% win rate

Discipline Status:

• HIGH_INDEPENDENCE: >15% rebellion (frequent dissent)
• MODERATE_INDEPENDENCE: 10-15% rebellion
• LOW_INDEPENDENCE: 5-10% rebellion
• PARTY_LINE: <5% rebellion (high discipline)

Risk Assessment Levels:

• EXCELLENT_BEHAVIOR: All metrics strong
• STANDARD_BEHAVIOR: Normal patterns
• MODERATE_RISK: One metric concerning
• ELEVATED_RISK: Multiple concerning metrics
• CRITICAL_CONCERN: All metrics problematic

• S (Social Democrats): #E8112d - 107 seats
• M (Moderates): #52BDEC - 68 seats
• SD (Sweden Democrats): #DDDD00 - 73 seats
• C (Center Party): #009933 - 24 seats
• V (Left Party): #DA291C - 24 seats
• KD (Christian Democrats): #000077 - 19 seats
• L (Liberals): #006AB3 - 16 seats
• MP (Green Party): #83CF39 - 16 seats

Total: 349 seats in Riksdag

The platform implements 45-50 behavioral detection rules across 5 domains:

• 24 Politician Rules: Absenteeism, effectiveness, productivity, isolation
• 10 Party Rules: Organizational effectiveness monitoring
• 4 Committee Rules: Legislative body performance
• 4 Ministry Rules: Government executive assessment
• 5 Decision Pattern Rules: Legislative effectiveness and coalition stability

Apache 2.0 - See LICENSE file in repository root

• Issues: https://github.com/Hack23/cia/issues
• Documentation: https://github.com/Hack23/cia/wiki
• Community: https://github.com/Hack23/cia/discussions