# Example Specification: Interactive Data Visualization This specification demonstrates how the pattern synthesis system works with a concrete example. ## Objective Generate self-contained, interactive data visualizations using HTML, CSS, and JavaScript. Each visualization should be unique, educational, and demonstrate progressively improving quality through pattern learning. ## Output Requirements ### File Format - **Type**: Single HTML file (self-contained) - **Naming**: `visualization_{N}.html` where N is iteration number - **Size**: 5-15KB (optimized but feature-complete) ### Technical Stack - HTML5 for structure - CSS3 for styling (embedded in ` ``` ## Notes for Pattern Synthesis - **First Wave**: Generates without pattern library, explores diverse approaches - **Pattern Extraction**: Identifies 3-5 best patterns per category from first wave - **Subsequent Waves**: Use pattern library as multi-shot examples for consistency - **Continuous Learning**: Library evolves with each wave, quality bar rises - **Innovation Encouraged**: Patterns are foundation, not limitation ## Expected Outcomes After 20 iterations with pattern synthesis: 1. **Consistent Quality**: Last 5 iterations should have <10% variance in quality scores 2. **Pattern Adoption**: 80%+ of iterations should use 2+ library patterns 3. **Continuous Innovation**: Each iteration adds something novel despite using patterns 4. **Established Style**: Clear "house style" emerges while maintaining creativity 5. **Reusable Patterns**: Library becomes valuable resource for future projects This demonstrates the power of cross-iteration pattern synthesis - cumulative learning that improves quality while preserving diversity and innovation.