data-visualization-principles

name	data-visualization-principles
description	Chart selection, color theory, dashboard design, and data storytelling principles for political transparency data
license	Apache-2.0

Data Visualization Principles

Purpose

This skill provides guidance for creating effective data visualizations in the CIA platform, including chart type selection, color theory for accessibility, dashboard layout, and data storytelling techniques for political transparency data.

When to Use

✅ Use this skill when:

• Designing dashboards and reports
• Selecting appropriate chart types
• Choosing color palettes
• Creating comparative visualizations
• Displaying time-series data
• Showing relationships and networks
• Building interactive visualizations
• Presenting complex political data

❌ Don't use this skill for:

• UI component implementation (use vaadin-component-design)
• Accessibility compliance (use accessibility-wcag-patterns)
• Backend data processing (use data-science-for-intelligence)
• Security (use secure-code-review)

Patterns & Examples

Chart Type Selection Guide

Data Type	Best Chart	Use When	Avoid
Comparison	Bar chart	Comparing categories	Pie chart for >5 items
Trend over time	Line chart	Showing temporal patterns	Bar chart for continuous time
Distribution	Histogram	Showing frequency distribution	Line chart
Correlation	Scatter plot	Showing relationships	Bar chart
Composition	Stacked bar/area	Showing parts of whole	Multiple pie charts
Geographic	Choropleth map	Regional comparisons	3D visualizations
Network	Force-directed graph	Showing connections	Complex nested structures

Political Risk Dashboard Example

// Vaadin Chart.js integration
@Route("dashboard/risk")
public class RiskDashboardView extends VerticalLayout {
    
    public RiskDashboardView() {
        // KPI Cards at top
        HorizontalLayout kpis = createKPICards();
        
        // Main charts grid
        HorizontalLayout chartsRow1 = new HorizontalLayout();
        chartsRow1.add(
            createRiskDistributionChart(),
            createRiskTrendChart()
        );
        
        HorizontalLayout chartsRow2 = new HorizontalLayout();
        chartsRow2.add(
            createPartyComparisonChart(),
            createTopRisksTable()
        );
        
        add(kpis, chartsRow1, chartsRow2);
    }
    
    private Component createRiskDistributionChart() {
        Chart chart = new Chart(ChartType.BAR);
        chart.getConfiguration().setTitle("Risk Score Distribution");
        
        Configuration config = chart.getConfiguration();
        
        // Data
        DataSeries series = new DataSeries("Politicians");
        series.add( (, ));
        series.add( (, ));
        series.add( (, ));
        series.add( (, ));
        series.add( (, ));
        
        
            ();
        options.setColorByPoint();
        series.setPlotOptions(options);
        
        
        config.setColors(
             (),  
             (),  
             (),  
             (),  
             ()   
        );
        
        config.addSeries(series);
        
        
            ();
        x.setTitle();
        config.addxAxis(x);
        
            ();
        y.setTitle();
        config.addyAxis(y);
        
         chart;
    }
}

Color Palette for Political Data

/* CIA Platform Color System */

/* Primary Semantic Colors */
:root {
  /* Risk levels - WCAG AA compliant */
  --risk-critical: #b71c1c;  /* Red - High contrast */
  --risk-high: #d32f2f;
  --risk-medium: #f57c00;     /* Orange */
  --risk-low: #388e3c;        /* Green */
  --risk-minimal: #1976d2;    /* Blue */
  
  /* Political party colors (Sweden) */
  --party-s: #ed1b34;         /* Social Democrats - Red */
  --party-m: #52bdec;         /* Moderates - Light Blue */
  --party-sd: #dddd00;        /* Sweden Democrats - Yellow */
  --party-c: #009933;         /* Centre - Green */
  --party-v: #da291c;         /* Left - Dark Red */
  --party-kd: #000077;        /* Christian Democrats - Blue */
  --party-l: #006ab3;         /* Liberals - Blue */
  --party-mp: #83cf39;        /* Green Party - Light Green */
  
  /* Data visualization scale */
  --viz-gradient-start: #e3f2fd;
  --viz-gradient-mid: #1976d2;
  : ;
  
  
  : ;
  : ;
  : ;
  : ;
  : ;
}


 {
  : ;
  : ;
  : ;
  : ;
}

Dashboard Layout Principles

## F-Pattern Layout (Eye Tracking)

┌─────────────────────────────────────────┐
│  Logo    Navigation           User      │  ← Primary scan (horizontal)
├─────────────────────────────────────────┤
│  KPI 1    KPI 2    KPI 3    KPI 4      │  ← Key metrics (horizontal)
├─────────────────────────────────────────┤
│                                         │
│  ┌───────────────┐  ┌───────────────┐  │
│  │               │  │               │  │
│  │  Main Chart   │  │  Trend Line   │  │  ← Primary content
│  │               │  │               │  │
│  └───────────────┘  └───────────────┘  │
│                                         │
│  ┌───────────────┐  ┌───────────────┐  │
│  │  Comparison   │  │  Top List     │  │  ← Secondary content
│  │  Bar Chart    │  │  Table        │  │
│  └───────────────┘  └───────────────┘  │
└─────────────────────────────────────────┘

### Dashboard Best Practices:
✅ Most important info top-left
✅ KPIs in horizontal row
✅ Primary chart larger than secondary
✅ Related charts adjacent
✅ Consistent spacing (8px grid)
✅ Responsive breakpoints (mobile-first)

❌ Don't overcrowd (max 6 charts)
❌ Don't use 3D effects
❌ Don't mix too many chart types
❌ Don't use decorative elements

ISMS Compliance Mapping

ISO 27001:2022 Annex A Controls

A.5.37 - Documented operating procedures

• Document visualization standards
• Maintain design system documentation

A.8.16 - Monitoring activities

• Dashboard KPIs include security metrics
• Risk visualizations support threat detection

GDPR Considerations

Article 5 - Principles

• Data minimization in visualizations
• Avoid displaying unnecessary personal data
• Aggregate where possible

Hack23 ISMS Policy References

• Information Security Policy - Responsible data display

References

Visualization Resources

• The Visual Display of Quantitative Information - Edward Tufte
• Information Dashboard Design - Stephen Few
• Chart.js Documentation

CIA Documentation

• DATA_MODEL.md - Available data for visualization

Remember

• Clarity over decoration: Remove chart junk
• Color has meaning: Use semantic colors consistently
• Context is key: Always provide axis labels and legends
• Accessibility first: Ensure WCAG AA color contrast
• Tell a story: Guide users through insights
• Less is more: Don't overcrowd dashboards