infinite-agents-public/infinite_variants/infinite_variant_5/specs/example_spec.md

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:

<!--
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