Seattle Weather

An interactive view of Seattle's weather, including maximum temperature, amount of precipitation, and type of weather. By dragging on the scatter plot, you can see the proportion of days in that range that have sun, fog, drizzle, rain, or snow.

Loading Example... ⏳

Credit: Based on a Vega-Lite/Altair example by Jake Vanderplas.

Specification

JavaScript

import * as vg from "@uwdata/vgplot";

await vg.coordinator().exec([
  vg.loadParquet("weather", "data/seattle-weather.parquet")
]);

const $click = vg.Selection.single();
const $domain = vg.Param.array(["sun", "fog", "drizzle", "rain", "snow"]);
const $colors = vg.Param.array(["#e7ba52", "#a7a7a7", "#aec7e8", "#1f77b4", "#9467bd"]);
const $range = vg.Selection.intersect();

export default vg.vconcat(
  vg.hconcat(
    vg.plot(
      vg.dot(
        vg.from("weather", {filterBy: $click}),
        {
          x: vg.dateMonthDay("date"),
          y: "temp_max",
          fill: "weather",
          r: "precipitation",
          fillOpacity: 0.7
        }
      ),
      vg.intervalX({as: $range, brush: {fill: "none", stroke: "#888"}}),
      vg.highlight({by: $range, fill: "#ccc", fillOpacity: 0.2}),
      vg.colorLegend({as: $click, columns: 1}),
      vg.xyDomain(vg.Fixed),
      vg.xTickFormat("%b"),
      vg.colorDomain($domain),
      vg.colorRange($colors),
      vg.rDomain(vg.Fixed),
      vg.rRange([2, 10]),
      vg.width(680),
      vg.height(300)
    )
  ),
  vg.plot(
    vg.barX(
      vg.from("weather"),
      {x: vg.count(), y: "weather", fill: "#ccc", fillOpacity: 0.2}
    ),
    vg.barX(
      vg.from("weather", {filterBy: $range}),
      {x: vg.count(), y: "weather", fill: "weather"}
    ),
    vg.toggleY({as: $click}),
    vg.highlight({by: $click}),
    vg.xDomain(vg.Fixed),
    vg.yDomain($domain),
    vg.yLabel(null),
    vg.colorDomain($domain),
    vg.colorRange($colors),
    vg.width(680)
  )
);

YAML

meta:
  title: Seattle Weather
  description: >
    An interactive view of Seattle's weather, including maximum temperature, amount of precipitation, and type of weather.
    By dragging on the scatter plot, you can see the proportion of days in that range that have sun, fog, drizzle, rain, or snow.
  credit: Based on a [Vega-Lite/Altair example](https://vega.github.io/vega-lite/examples/interactive_seattle_weather.html) by Jake Vanderplas.
data:
  weather: { file: data/seattle-weather.parquet }
params:
  click: { select: single }
  domain: [sun, fog, drizzle, rain, snow]
  colors: ['#e7ba52', '#a7a7a7', '#aec7e8', '#1f77b4', '#9467bd']
vconcat:
- hconcat:
  - plot:
    - mark: dot
      data: { from: weather, filterBy: $click }
      x: { dateMonthDay: date }
      y: temp_max
      fill: weather
      r: precipitation
      fillOpacity: 0.7
    - select: intervalX
      as: $range
      brush: { fill: none, stroke: '#888' }
    - select: highlight
      by: $range
      fill: '#ccc'
      fillOpacity: 0.2
    - legend: color
      as: $click
      columns: 1
    xyDomain: Fixed
    xTickFormat: '%b'
    colorDomain: $domain
    colorRange: $colors
    rDomain: Fixed
    rRange: [2, 10]
    width: 680
    height: 300
- plot:
  - mark: barX
    data: { from: weather }
    x: { count: }
    y: weather
    fill: '#ccc'
    fillOpacity: 0.2
  - mark: barX
    data: { from: weather, filterBy: $range }
    x: { count: }
    y: weather
    fill: weather
  - select: toggleY
    as: $click
  - select: highlight
    by: $click
  xDomain: Fixed
  yDomain: $domain
  yLabel: null
  colorDomain: $domain
  colorRange: $colors
  width: 680

JSON

{
  "meta": {
    "title": "Seattle Weather",
    "description": "An interactive view of Seattle's weather, including maximum temperature, amount of precipitation, and type of weather. By dragging on the scatter plot, you can see the proportion of days in that range that have sun, fog, drizzle, rain, or snow.\n",
    "credit": "Based on a [Vega-Lite/Altair example](https://vega.github.io/vega-lite/examples/interactive_seattle_weather.html) by Jake Vanderplas."
  },
  "data": {
    "weather": {
      "file": "data/seattle-weather.parquet"
    }
  },
  "params": {
    "click": {
      "select": "single"
    },
    "domain": [
      "sun",
      "fog",
      "drizzle",
      "rain",
      "snow"
    ],
    "colors": [
      "#e7ba52",
      "#a7a7a7",
      "#aec7e8",
      "#1f77b4",
      "#9467bd"
    ]
  },
  "vconcat": [
    {
      "hconcat": [
        {
          "plot": [
            {
              "mark": "dot",
              "data": {
                "from": "weather",
                "filterBy": "$click"
              },
              "x": {
                "dateMonthDay": "date"
              },
              "y": "temp_max",
              "fill": "weather",
              "r": "precipitation",
              "fillOpacity": 0.7
            },
            {
              "select": "intervalX",
              "as": "$range",
              "brush": {
                "fill": "none",
                "stroke": "#888"
              }
            },
            {
              "select": "highlight",
              "by": "$range",
              "fill": "#ccc",
              "fillOpacity": 0.2
            },
            {
              "legend": "color",
              "as": "$click",
              "columns": 1
            }
          ],
          "xyDomain": "Fixed",
          "xTickFormat": "%b",
          "colorDomain": "$domain",
          "colorRange": "$colors",
          "rDomain": "Fixed",
          "rRange": [
            2,
            10
          ],
          "width": 680,
          "height": 300
        }
      ]
    },
    {
      "plot": [
        {
          "mark": "barX",
          "data": {
            "from": "weather"
          },
          "x": {
            "count": null
          },
          "y": "weather",
          "fill": "#ccc",
          "fillOpacity": 0.2
        },
        {
          "mark": "barX",
          "data": {
            "from": "weather",
            "filterBy": "$range"
          },
          "x": {
            "count": null
          },
          "y": "weather",
          "fill": "weather"
        },
        {
          "select": "toggleY",
          "as": "$click"
        },
        {
          "select": "highlight",
          "by": "$click"
        }
      ],
      "xDomain": "Fixed",
      "yDomain": "$domain",
      "yLabel": null,
      "colorDomain": "$domain",
      "colorRange": "$colors",
      "width": 680
    }
  ]
}