Skip to content

Tutorial: Building an Interactive Weather Dashboard with Claude Code

In this tutorial, you will create a professional weather analysis dashboard that explores Seattle weather patterns from 2012-2015 using Claude Code from the command line.

By the end, you'll have built a complete interactive application with multi-year filtering, animated charts, and modern styling that works beautifully in both light and dark modes.

Prerequisites

Before starting, ensure you have:

  • An understanding of Python, Panel, and data visualization concepts
  • HoloViz MCP installed and configured (Getting Started Guide)
  • Claude Code CLI configured with HoloViz MCP server

Step 1: Gather Context

Before we start building, let's examine an existing project to understand the key elements of an effective weather visualization:

For context, please analyze the weather visualization at https://altair-viz.github.io/case_studies/exploring-weather.html. Summarize the key features and visualization techniques used.

Take a moment to review Claude's summary. This will guide our dashboard design!

Step 2: Plan Your Dashboard

Now let's ask Claude to help us plan the dashboard architecture:

I want to create a modern, professional looking dashboard for exploring the Seattle Weather dataset. The dashboard should:

- Enable filtering by multiple years (default: 2015)
- Include plots for temperature and wind grouped by year
- Include a plot by weather type
- Include a table with the raw data
- Use panel-material-ui for a modern look and feel
- Use ECharts with smooth transitions for an awesome look and feel. Not hvplot
- Use consistent, modern and appealing styling
- Use the vega-datasets package for providing the Seattle weather data

Please plan the architecture for this dashboard. What components should I use from Panel? How should I organize them?
Keep it as a single script weather_dashboard.py file for simplicity
Add the tests in test_weather_dashboard.py file and make sure the tests pass

Claude will provide a detailed architecture including:

  • Data layer with caching and filtering functions
  • Chart creation functions using ECharts
  • Dashboard class with reactive parameters
  • Recommendations for file organization
  • Color palette suggestions

What you'll see

Take time to review and refine Claude's plan - it's the blueprint for your application!

Step 3: Implement the Dashboard

With a solid plan, let's create the dashboard. We'll create it as a project file:

Based on the plan implement the Seattle Weather dashboard in a single weather_dashboard.py file. Make sure all tests pass.

Claude will create the weather_dashboard.py file in your current directory.

Step 4: Run Your Dashboard

Now let's run the dashboard:

panel serve weather_dashboard.py --dev --show

Your browser will open and display your weather dashboard!

Dashboard Served

Checkpoint

If you see an interactive dashboard with charts, filters, and a data table - congratulations! Try:

  • Selecting different years in the filter
  • Hovering over the charts to see interactive tooltips
  • Exploring the animated transitions when filters change

Step 5: Review and Understand the Code

Let's take a look at what was created:

cat weather_dashboard.py

You'll see:

  • Data functions: Loading and filtering the Seattle weather dataset
  • Chart functions: Creating ECharts visualizations
  • Dashboard class: Reactive Panel application with parameters
  • Main block: Serving the dashboard

Step 6: Add More Features

Let's enhance the dashboard. Ask Claude:

Add a precipitation plot to the weather dashboard that shows rainfall patterns by month. Include it in the layout.

Claude will update the file. The panel server will autoreload the dashboard.

Step 7: Improve Styling

Let's make the dashboard even more visually appealing:

Improve the dashboard styling:
- Add a descriptive header with title and description
- Use a card layout for the plots
- Add subtle shadows and spacing
- Make it responsive for different screen sizes

Again, restart the server to see the improvements.

Step 8: Use the Display Tool

For quick iterations, you can also use the holoviz_display tool:

Create a simplified version of the weather dashboard and display it using the holoviz_display tool. Focus on just the temperature plot and year filter.

Claude will use the display tool and provide a URL. This is faster for prototyping!

Common Issues and Solutions

Dataset Not Loading

What you see: Error about missing dataset

Solution: Install vega_datasets:

pip install vega_datasets

Charts Not Rendering

What you see: Empty plots or errors

Solution:

  1. Check that Panel and hvPlot are installed: pip install panel hvplot
  2. Verify the data is loading correctly
  3. Ask Claude to debug: 
    claude "The charts aren't rendering. Here's the error: [paste error]. Please fix this."

Server Won't Start

What you see: Port already in use

Solution: Use a different port:

panel serve weather_dashboard.py --dev --show --port 5007

Step 9: Create Tests

Let's add some tests to ensure our dashboard works correctly:

Create a test_weather_dashboard.py file that tests:
- Data loading functions
- Data filtering by year
- Chart creation functions
Include pytest fixtures and assertions."

Run the tests:

pytest test_weather_dashboard.py -v

Step 10: Package for Sharing

Create a requirements file and README:

Create a requirements.txt file with all dependencies needed to run the weather dashboard, and a README.md with setup instructions.

Now you can share your project with others!

What You've Accomplished

Congratulations! In this tutorial, you have:

  • ✅ Planned and built a complex dashboard with Claude Code
  • ✅ Created animated, interactive charts with ECharts
  • ✅ Built a Panel dashboard with professional styling
  • ✅ Implemented reactive programming with Panel parameters
  • ✅ Added features through iterative development
  • ✅ Used the display tool for rapid prototyping
  • ✅ Created tests for your application
  • ✅ Packaged a shareable project

You now have a production-ready weather dashboard and the skills to build your own data applications from the command line!

Next Steps

Now that you've mastered weather dashboards with Claude Code, try:

  • Add more metrics: Include humidity, pressure, or UV index
  • Compare cities: Extend to analyze weather in multiple locations
  • Time series forecasting: Add predictions using statsmodels or prophet
  • Real-time data: Connect to a weather API for live updates
  • Export functionality: Add buttons to download data or charts

Additional Resources

Happy building! 🌤️