Seattle Temperatures

Historical monthly temperatures in Seattle, WA. The gray range shows the minimum and maximum recorded temperatures. The blue range shows the average lows and highs.

Loading Example... ⏳

Specification

JavaScript

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

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

export default vg.plot(
  vg.areaY(
    vg.from("weather"),
    {
      x: vg.dateMonth("date"),
      y1: vg.max("temp_max"),
      y2: vg.min("temp_min"),
      fill: "#ccc",
      fillOpacity: 0.25,
      curve: "monotone-x"
    }
  ),
  vg.areaY(
    vg.from("weather"),
    {
      x: vg.dateMonth("date"),
      y1: vg.avg("temp_max"),
      y2: vg.avg("temp_min"),
      fill: "steelblue",
      fillOpacity: 0.75,
      curve: "monotone-x"
    }
  ),
  vg.ruleY(
    [15],
    {strokeOpacity: 0.5, strokeDasharray: "5 5"}
  ),
  vg.xTickFormat("%b"),
  vg.yLabel("Temperature Range (°C)"),
  vg.width(680),
  vg.height(300)
);

YAML

meta:
  title: Seattle Temperatures
  description: >
    Historical monthly temperatures in Seattle, WA.
    The gray range shows the minimum and maximum recorded temperatures.
    The blue range shows the average lows and highs.
data:
  weather: { file: data/seattle-weather.parquet }
plot:
- mark: areaY
  data: { from: weather }
  x: { dateMonth: date }
  y1: { max: temp_max }
  y2: { min: temp_min }
  fill: "#ccc"
  fillOpacity: 0.25
  curve: monotone-x
- mark: areaY
  data: { from: weather }
  x: { dateMonth: date }
  y1: { avg: temp_max }
  y2: { avg: temp_min }
  fill: steelblue
  fillOpacity: 0.75
  curve: monotone-x
- mark: ruleY
  data: [15]
  strokeOpacity: 0.5
  strokeDasharray: 5 5
xTickFormat: '%b'
yLabel: Temperature Range (°C)
width: 680
height: 300

JSON

{
  "meta": {
    "title": "Seattle Temperatures",
    "description": "Historical monthly temperatures in Seattle, WA. The gray range shows the minimum and maximum recorded temperatures. The blue range shows the average lows and highs.\n"
  },
  "data": {
    "weather": {
      "file": "data/seattle-weather.parquet"
    }
  },
  "plot": [
    {
      "mark": "areaY",
      "data": {
        "from": "weather"
      },
      "x": {
        "dateMonth": "date"
      },
      "y1": {
        "max": "temp_max"
      },
      "y2": {
        "min": "temp_min"
      },
      "fill": "#ccc",
      "fillOpacity": 0.25,
      "curve": "monotone-x"
    },
    {
      "mark": "areaY",
      "data": {
        "from": "weather"
      },
      "x": {
        "dateMonth": "date"
      },
      "y1": {
        "avg": "temp_max"
      },
      "y2": {
        "avg": "temp_min"
      },
      "fill": "steelblue",
      "fillOpacity": 0.75,
      "curve": "monotone-x"
    },
    {
      "mark": "ruleY",
      "data": [
        15
      ],
      "strokeOpacity": 0.5,
      "strokeDasharray": "5 5"
    }
  ],
  "xTickFormat": "%b",
  "yLabel": "Temperature Range (°C)",
  "width": 680,
  "height": 300
}

Python

import vgplot as vg

weather = vg.parquet("data/seattle-weather.parquet")

view = vg.plot(
    vg.area_y(
        weather,
        x=vg.date_month("date"),
        y1=vg.max("temp_max"),
        y2=vg.min("temp_min"),
        fill="#ccc",
        fill_opacity=0.25,
        curve="monotone-x",
    ),
    vg.area_y(
        weather,
        x=vg.date_month("date"),
        y1=vg.avg("temp_max"),
        y2=vg.avg("temp_min"),
        fill="steelblue",
        fill_opacity=0.75,
        curve="monotone-x",
    ),
    vg.rule_y(data=[15], stroke_opacity=0.5, stroke_dasharray="5 5"),
    vg.x_tick_format("%b"),
    vg.y_label("Temperature Range (°C)"),
    vg.width(680),
    vg.height(300),
)