Quick Start

HTML
<!-- Clean analytics dashboard layout -->
<div class="dashboard-layout">
  <header class="top-nav">
    <div class="logo">DataViz</div>
    <div class="upload-zone">
      <button class="primary-btn">Upload Dataset</button>
    </div>
  </header>
  
  <aside class="sidebar">
    <nav class="data-controls">
      <h3>Data Sources</h3>
      <ul class="dataset-list">
        <li class="active">Sales_2024.csv</li>
        <li>User_Analytics.json</li>
      </ul>
    </nav>
  </aside>
  
  <main class="viz-canvas">
    <div class="chart-grid">
      <div class="chart-card">
        <h4>Revenue Trend</h4>
        <div class="chart-container"></div>
      </div>
    </div>
  </main>
</div>

Workflow

Progress:

• Data Onboarding Flow: Design upload → preview → validation sequence
• Dashboard Layout: Create sidebar navigation + main canvas structure
• Interactive Controls: Add filters, date pickers, chart type selectors
• Visualization Components: Design chart cards with consistent styling
• Responsive Breakpoints: Ensure mobile-friendly data exploration
• Loading States: Show progress during data processing
• Error Handling: Display clear messages for data issues

Color Palette:

• Primary: #2563eb (blue for data elements)
• Secondary: #64748b (gray for UI chrome)
• Success: #10b981 (green for positive metrics)
• Warning: #f59e0b (amber for alerts)
• Background: #f8fafc (light gray)

Typography:

• Headers: Inter 600
• Body: Inter 400
• Data: JetBrains Mono (monospace for numbers)

Examples

Example 1: Upload Flow Input: User drops CSV file Output:

[Progress indicator: 45%]
Validating data structure...
✓ 15,000 rows detected
✓ 8 columns identified
⚠ 3 missing values in 'revenue' column
[Continue] [Fix Issues]

Example 2: Filter Interface Input: Sales dataset with date/region columns Output:

Filters Applied:
📅 Jan 2024 - Dec 2024
📍 North America, Europe  
💰 Revenue > $10,000
[2,847 records shown]

Example 3: Chart Configuration Input: User selects "Revenue by Month" Output: Interactive card with chart type selector (line/bar/area), color picker, and export options

Best Practices

• Progressive Disclosure: Show simple view first, reveal advanced options on demand
• Data Context: Always display record counts, date ranges, and filter states
• Visual Hierarchy: Use card-based layouts to separate different data views
• Consistent Interactions: Standardize hover states, selection behavior across all charts
• Performance Feedback: Show loading spinners for operations >2 seconds
• Keyboard Navigation: Support tab/arrow key navigation for accessibility
• Export Options: Include PNG, PDF, CSV download buttons on visualizations
• Responsive Grid: Use CSS Grid for dashboard layouts that adapt to screen size

Common Pitfalls

• Overwhelming Options: Don't show all chart types at once; suggest based on data
• Poor Loading States: Never leave users staring at blank screens during processing
• Inconsistent Styling: Maintain same padding, colors, fonts across all components
• Mobile Neglect: Analytics tools need mobile access; design touch-friendly controls
• No Data States: Always design empty/error states for when datasets fail to load
• Cluttered Legends: Keep chart legends minimal; use direct labeling when possible
• Fixed Layouts: Avoid hardcoded dimensions; let users resize/rearrange panels