Skip to content

Seattle Weather

Historical weather patterns from 2012-2015 with multi-panel time series and heatmap visualizations.

Seattle Weather Dashboard

Features

  • Temperature heatmap - Daily highs by month and day
  • Time series - Maximum temperature with precipitation size encoding
  • Weather distribution - Bar chart of weather type frequency
  • URL syncing - Filters sync with browser URL

YAML Specification

seattle.yaml
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
config:
  title: Altair Seattle Weather
  reloadable: false
  sync_with_url: true
sources:
  seattle:
    type: file
    cache_per_query: false
    tables:
      weather: https://raw.githubusercontent.com/vega/vega/main/docs/data/seattle-weather.csv
    kwargs:
      parse_dates: [date]
pipelines:
  seattle:
    source: seattle
    table: weather
    filters:
      - type: widget
        field: date
      - type: widget
        field: weather
layouts:
  - title: Seattle Weather
    pipeline: seattle
    views:
      - type: altair
        marker: rect
        chart:
          title: 2012-2015 Daily High Temperature (F) in Seattle, WA
        x:
          shorthand: date(date):O
          title: Day
        y:
          shorthand: month(date):O
          title: Month
        encode:
          color:
            shorthand: max(temp_max):Q
            scale:
              scheme: inferno
        properties:
          width: container
      - type: altair
        x:
          shorthand: monthdate(date):T
          title: Date
        y:
          shorthand: temp_max:Q
          title: 'Maximum Daily Temperature (C)'
        marker: point
        encode:
          color: weather:N
          size:
            shorthand: precipitation:Q
            scale: [5, 200]
        properties:
          width: container
      - type: altair
        x: count()
        y: weather:N
        encode:
          color: weather:N
        marker: bar
        properties:
          width: container
    sizing_mode: stretch_width

Run this example

Save the YAML above as seattle.yaml and run:

lumen serve seattle.yaml --show

Or explore with AI:

lumen-ai serve https://raw.githubusercontent.com/vega/vega/main/docs/data/seattle-weather.csv

Download YAML

Key concepts

This example demonstrates:

  • Altair views - Declarative Vega-Lite visualizations
  • Date filtering - Filter by date ranges
  • Multiple encodings - Color and size channels
  • URL synchronization - Shareable filtered states