# Example Specification for Configuration-Driven System

## Content Type
Interactive Data Visualization with D3.js

## Purpose
Generate diverse, unique data visualizations that demonstrate various D3.js techniques and data representation methods.

## Output Format
Single HTML file per iteration containing:
- Complete HTML5 structure
- Embedded D3.js (via CDN)
- Inline CSS styling
- JavaScript visualization code
- Sample dataset

## Naming Convention
Pattern defined in configuration: `{theme}_{iteration:03d}_{variant}.html`

Examples:
- `scatter_001_interactive.html`
- `network_002_animated.html`
- `timeline_003_hierarchical.html`

## Content Requirements

### Structure
Each file must include:
1. **HTML Head**
   - Title describing the visualization
   - Meta tags for charset and viewport
   - D3.js library (v7+)
   - Responsive CSS

2. **Visualization Container**
   - SVG or canvas element
   - Responsive sizing
   - Proper margins and padding

3. **Data Section**
   - Embedded sample data (JSON or CSV)
   - Or data generation code
   - Minimum 20 data points

4. **Visualization Code**
   - D3.js implementation
   - Clear variable names
   - Comments explaining key techniques

5. **Interactivity (if applicable)**
   - Tooltips, hover effects, or controls
   - Smooth transitions
   - User-friendly interactions

### Design Dimensions

Each iteration must vary across these dimensions:
- **Chart Type**: scatter, line, bar, area, pie, network, tree, map, chord, sankey, etc.
- **Color Scheme**: sequential, diverging, categorical, custom palettes
- **Interactivity Level**: static, hover effects, click interactions, drag interactions, zoom/pan
- **Animation**: none, entrance animations, transition animations, continuous animations
- **Layout**: force-directed, hierarchical, radial, geographic, matrix, custom
- **Data Domain**: scientific, business, social, environmental, temporal, geographic

### Quality Standards
- **Code Quality**: Clean, well-commented, follows D3.js best practices
- **Visual Quality**: Aesthetically pleasing, good use of color and typography
- **Uniqueness**: Must be genuinely different from existing iterations (threshold set in config)
- **Completeness**: Fully functional, no broken features
- **Responsiveness**: Adapts to different screen sizes

## Uniqueness Requirements

Uniqueness threshold is configured in quality settings (e.g., 0.85 = 85% different).

Each iteration must differ in at least 3 of these aspects:
1. Chart type or visualization technique
2. Data domain and theme
3. Color palette and styling
4. Interactivity patterns
5. Animation approach
6. Layout algorithm

## Technical Requirements

### Libraries
- D3.js v7 or later (via CDN)
- No additional dependencies required
- Pure JavaScript (no frameworks)

### Browser Compatibility
- Modern browsers (Chrome, Firefox, Safari, Edge)
- ES6+ JavaScript features allowed
- Responsive design (mobile-friendly)

### Performance
- File size under limit set in configuration (e.g., 500 KB)
- Smooth animations (60 fps target)
- Efficient data processing

## Metadata Requirements

If configuration enables metadata (`generation.include_metadata: true`), include:

```html
<!--
Visualization: {title}
Iteration: {number}
Theme: {theme_name}
Chart Type: {chart_type}
Data Domain: {domain}
Techniques Used: {technique_list}
Web Source: {url_if_web_enhanced}
Generated: {timestamp}
Configuration Profile: {profile}
-->
```

## Progressive Sophistication (Infinite Mode)

When progressive sophistication is enabled (`orchestration.enable_progressive_sophistication: true`), later iterations should:

**Wave 1 (iterations 1-5)**: Basic visualizations
- Simple chart types (bar, line, scatter)
- Static or minimal interactivity
- Basic color schemes

**Wave 2 (iterations 6-10)**: Intermediate complexity
- More complex chart types (network, tree, area)
- Hover effects and tooltips
- Custom color scales

**Wave 3 (iterations 11-15)**: Advanced techniques
- Complex layouts (force-directed, hierarchical)
- Multi-level interactivity
- Custom animations

**Wave 4 (iterations 16+)**: Expert level
- Novel visualization types
- Advanced D3.js techniques (brush, zoom, linked views)
- Sophisticated interactions and animations
- Data transformations and aggregations

## Web Enhancement Integration

If web enhancement is enabled (`web_enhancement.enabled: true`):

1. **Initial Priming**: System fetches foundational D3.js resources
2. **Per-Iteration Learning**: Each agent fetches unique URL and extracts 1-3 techniques
3. **Technique Application**: Learned techniques must be visibly applied in the visualization
4. **Documentation**: Metadata comments must reference web source and techniques learned

## Example Themes

Possible themes (actual themes should be creative and unique):
- Climate & Weather Data
- Network Connectivity
- Financial Markets
- Social Network Analysis
- Biological Systems
- Urban Geography
- Historical Timelines
- Scientific Measurements
- Music & Audio Data
- Sports Statistics

## Validation Criteria

Each output will be validated against (if `quality.enable_validation: true`):
1. **Spec Compliance**: Meets all structural requirements
2. **Uniqueness**: Meets configured uniqueness threshold
3. **File Size**: Within configured limits
4. **Code Quality**: Valid HTML/CSS/JavaScript, no errors
5. **Functionality**: Visualization renders correctly

## Review Stage (Optional)

If `quality.enable_review_stage: true` in configuration:
1. Agent generates visualization
2. Review agent examines output
3. Identifies improvements or issues
4. Original agent refines based on feedback
5. Final output saved

## Notes for Sub-Agents

- Read configuration carefully - all parameters are set there
- Respect uniqueness thresholds - analyze existing iterations
- Apply web-learned techniques when URLs provided
- Follow naming patterns exactly as configured
- Include metadata if configured
- Stay within configured limits (file size, iterations, etc.)
- Use progressive sophistication guidance if enabled