Simple Data Dashboard

A refined, single-page data visualization application built with SvelteKit, featuring modern UI components and interactive charts powered by Observable Plot.

🎯 Overview

The Simple Data Dashboard is a minimal yet elegant web application that visualizes monthly sales data across multiple distribution channels. The project demonstrates:

• Clean Data Visualization using Observable Plot and D3.js
• Modern Frontend Architecture with SvelteKit and TypeScript
• Refined UI Design with custom components inspired by shadcn/ui
• Interactive Filtering for dynamic data exploration

Perfect as a learning project, portfolio piece, or foundation for more complex dashboards.

✨ Features

Core Functionality

• 📊 Interactive Bar Chart - Monthly revenue distribution
• 📈 Trend Line Chart - Revenue progression over time
• 🎛️ Category Filtering - Filter by Online, Store, or Wholesale channels
• 💳 Summary Cards - Quick stats for each channel
• 🎨 Dark Editorial Theme - Sophisticated design with Playfair Display and Crimson Pro fonts

Technical Highlights

• ⚡ Fast load times with optimized SvelteKit
• 📱 Responsive design for desktop and tablet
• 🎭 Smooth animations and transitions
• ♿ Semantic HTML and accessible controls
• 🔧 Fully typed with TypeScript

🛠️ Tech Stack

Core

• SvelteKit - Modern web framework
• TypeScript - Type-safe JavaScript
• Tailwind CSS - Utility-first styling

UI Components

• Custom components inspired by shadcn/ui
• Card, CardHeader, CardContent
• Select dropdown with custom styling

Data Visualization

• Observable Plot - Primary charting library
• D3.js - Data parsing and utilities

Data Handling

• CSV data loading with D3 parsers
• Client-side filtering and aggregation

📁 Project Structure

simple-data-dashboard/
├── src/
│   ├── routes/
│   │   ├── +layout.svelte          # Root layout
│   │   └── +page.svelte            # Main dashboard page
│   ├── lib/
│   │   ├── components/
│   │   │   └── ui/                 # Reusable UI components
│   │   │       ├── Card.svelte
│   │   │       ├── CardHeader.svelte
│   │   │       ├── CardContent.svelte
│   │   │       └── Select.svelte
│   │   ├── charts.ts               # Observable Plot configurations
│   │   ├── data.ts                 # Data loading & transformations
│   │   └── types.ts                # TypeScript type definitions
│   ├── app.css                     # Global styles & Tailwind
│   └── app.d.ts                    # TypeScript declarations
├── static/
│   └── data/
│       └── sales.csv               # Sample dataset
├── svelte.config.js                # SvelteKit configuration
├── tailwind.config.js              # Tailwind CSS configuration
├── vite.config.ts                  # Vite configuration
├── tsconfig.json                   # TypeScript configuration
└── package.json                    # Dependencies & scripts

🚀 Quick Start

Prerequisites

• Node.js 18.x or higher
• npm 9.x or higher

Installation

1. Clone or download the project

   cd simple-data-dashboard

2. Install dependencies

   npm install

Development

Start the development server with hot module replacement:

npm run dev

The application will be available at:

• Local: http://localhost:5173
• Network: http://[your-ip]:5173

Production Build

Build the application for production:

npm run build

Preview the production build:

npm run preview

The optimized application will be available at http://localhost:4173

📊 Data Format

The dashboard expects CSV data in the following format:

month,value,category
Jan,120,Online
Feb,90,Online
Mar,140,Store

Fields

• month (string) - Month abbreviation (Jan, Feb, Mar, etc.)
• value (number) - Revenue amount
• category (string) - Distribution channel (Online, Store, Wholesale)

Adding Your Own Data

1. Navigate to static/data/sales.csv
2. Replace the contents with your data (keep the same format)
3. Refresh the application - changes are loaded automatically

🎨 Customization

Color Scheme

Edit the CSS variables in src/app.css:

:root {
  --background: 28 15% 8%;      /* Dark background */
  --foreground: 30 15% 95%;     /* Light text */
  --primary: 38 70% 65%;        /* Golden accent */
  --accent: 185 65% 55%;        /* Teal highlight */
  /* ... */
}

Typography

Change fonts in tailwind.config.js:

fontFamily: {
  display: ['Playfair Display', 'serif'],
  body: ['Crimson Pro', 'serif'],
  mono: ['JetBrains Mono', 'monospace'],
}

Chart Configuration

Modify chart settings in src/lib/charts.ts:

export function createBarChart(data: Sale[], container: HTMLElement) {
  const chart = Plot.plot({
    height: 400,           // Adjust height
    marginLeft: 60,        // Adjust margins
    // Customize colors, tooltips, etc.
  });
}

📐 Component Usage

Card Components

<script>
  import Card from '$lib/components/ui/Card.svelte';
  import CardHeader from '$lib/components/ui/CardHeader.svelte';
  import CardContent from '$lib/components/ui/CardContent.svelte';
</script>

<Card>
  <CardHeader>
    <h2>Chart Title</h2>
  </CardHeader>
  <CardContent>
    <!-- Your content here -->
  </CardContent>
</Card>

Select Dropdown

<script>
  import Select from '$lib/components/ui/Select.svelte';
  
  let selectedValue = 'option1';
  const options = [
    { value: 'option1', label: 'Option 1' },
    { value: 'option2', label: 'Option 2' },
  ];
</script>

<Select bind:value={selectedValue} {options} />

🧪 Type Definitions

All data structures are fully typed:

// src/lib/types.ts
export type Sale = {
  month: string;
  value: number;
  category: string;
};

export type Category = 'Online' | 'Store' | 'Wholesale' | 'All';

⚡ Performance

• Initial load: < 1 second
• Chart updates: Instant on filter changes
• Bundle size: Optimized for production
• No runtime dependencies beyond core libraries

♿ Accessibility

• Semantic HTML structure
• Keyboard-accessible dropdown controls
• High contrast color scheme (WCAG AA compliant)
• Descriptive labels and ARIA attributes

🗺️ Roadmap

Future enhancements (currently out of scope):

• CSV file upload functionality
• Export charts as PNG/SVG
• Multiple dashboard views
• API-based data loading
• Real-time data updates
• Advanced filtering options
• Mobile responsive optimizations
• Dark/Light theme toggle

🐛 Troubleshooting

Port already in use

# Kill the process using port 5173
npx kill-port 5173

# Or use a different port
npm run dev -- --port 3000

Module not found errors

# Clear node_modules and reinstall
rm -rf node_modules package-lock.json
npm install

Chart not rendering

• Check browser console for errors
• Ensure CSV data is properly formatted
• Verify Observable Plot and D3 are installed

📝 Scripts Reference

Command	Description
npm run dev	Start development server with HMR
npm run build	Build for production
npm run preview	Preview production build locally

🤝 Contributing

This is a learning project, but improvements are welcome:

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Submit a pull request

📄 License

MIT License - Feel free to use this project for learning or as a foundation for your own work.

🙏 Acknowledgments

• SvelteKit - Amazing developer experience
• Observable Plot - Elegant data visualization
• D3.js - The foundation of web data viz
• shadcn/ui - Design inspiration for components
• Tailwind CSS - Rapid UI development

📧 Support

For questions or issues:

• Open an issue on GitHub
• Check the SvelteKit documentation
• Review Observable Plot examples

---

Built with ❤️ using SvelteKit, TypeScript, and Tailwind CSS