# Medical Data Visualization
> Design principles and patterns for medical data visualization including accessibility, chart selection, and clinical context. Use when designing or reviewing health data visualizations. Use when this capability is needed.
- Skill: `tomevault-io/medical-data-visualization` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/medical-data-visualization`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/medical-data-visualization/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/medical-data-visualization
---
# Medical Data Visualization
This skill documents design principles, patterns, and best practices for visualizing medical sleep therapy data in OSCAR Export Analyzer.
## Principles for CPAP Data Visualization
### 1. Context Matters
Always show clinical thresholds and normal ranges to help users interpret values.
```javascript
// ❌ Show AHI without context
// ✅ Show AHI with severity thresholds
```
### 2. Trend Visibility
Use rolling averages to show patterns, not just noisy raw data.
```javascript
// Show both raw and smoothed data
const smoothed7Day = rollingAverage(ahiValues, 7);
const smoothed30Day = rollingAverage(ahiValues, 30);
;
```
### 3. Outlier Clarity
Highlight unusual values that might indicate sensor errors or significant events.
```javascript
// Detect outliers
const { normal, outliers } = detectOutliers(ahiValues);
;
```
### 4. Multiple Perspectives
Show same data in different ways to reveal different insights.
```javascript
// Time-series + distribution + correlation
{/* Time trend */}
{/* Distribution */}
{/* Correlation */}
```
### 5. Actionable Insights
Design visualizations to answer: "Is my therapy working?"
```javascript
// Show compliance and effectiveness together
```
## Chart Type Selection
### Time-Series (Trends Over Time)
**When to use:** Daily metrics, therapy progression, change detection
```javascript
// Line chart for continuous trends
```
### Distribution (Value Frequency)
**When to use:** Understanding typical values, identifying patterns
```javascript
// Histogram for value distribution
```
### Box Plot (Statistical Summary)
**When to use:** Comparing periods, showing variability
```javascript
// Box plot for comparing before/after
```
### Scatter Plot (Correlation)
**When to use:** Testing relationships between variables
```javascript
// Scatter for EPAP vs AHI correlation
```
### Heatmap (Calendar/Pattern Visualization)
**When to use:** Weekly patterns, compliance tracking
```javascript
// Calendar heatmap (GitHub-style)
```
## Accessibility Guidelines
### Color Contrast (WCAG AA)
```javascript
// ❌ Poor contrast
const colors = {
line: '#87CEEB', // Light blue on white background
text: '#CCCCCC', // Light gray on white
};
// ✅ WCAG AA compliant (4.5:1 minimum)
const colors = {
line: '#0066CC', // Dark blue
text: '#333333', // Dark gray
background: '#FFFFFF',
};
```
**Test contrast:**
- Use browser DevTools color picker
- Online tools: WebAIM Contrast Checker
- Minimum ratio: 4.5:1 for normal text, 3:1 for large text
### Colorblind-Safe Palettes
```javascript
// ❌ Red/green (indistinguishable for colorblind users)
const palette = ['#FF0000', '#00FF00', '#0000FF'];
// ✅ Colorblind-safe (use blue/orange/gray)
const palette = ['#0072B2', '#D55E00', '#666666'];
// ✅ Also use patterns, not just color
data={[
{ name: 'AHI', line: { color: '#0072B2', dash: 'solid' } },
{ name: 'Goal', line: { color: '#D55E00', dash: 'dash' } },
]}
```
### ARIA Labels
```javascript
// Add accessible names and descriptions
Line chart showing AHI values ranging from 3.2 to 12.5 events per hour. AHI decreases over
time, indicating therapy improvement.
```
### Keyboard Navigation
```javascript
// Plotly has built-in keyboard support, but ensure controls are keyboard-accessible