Overlaid voices

Seattle daily high and low temperatures over the months. Two audio units share one traversal but play at the same time on distinct timbres, so you hear both series at once — the gap between the voices is the daily temperature range. Playing two measures simultaneously is something the ear can do that a single static chart cannot.

Visual: Layered lines
Sound: Daily high and low as two timbres at once
Text: High and low over the months

Open this example in the editor

Spec & Code

Spec

{
  "data": {
    "name": "seattle-weather.csv",
    "url": "https://raw.githubusercontent.com/vega/vega-datasets/master/data/seattle-weather.csv"
  },
  "fields": [
    {
      "name": "date",
      "type": "temporal",
      "timeUnit": "month"
    },
    {
      "name": "temp_max",
      "type": "quantitative"
    },
    {
      "name": "temp_min",
      "type": "quantitative"
    }
  ],
  "key": [
    "date"
  ],
  "visual": {
    "units": [
      {
        "mark": "line",
        "encoding": {
          "x": {
            "field": "date",
            "timeUnit": "month"
          },
          "y": {
            "field": "temp_max",
            "aggregate": "mean"
          }
        }
      },
      {
        "mark": "line",
        "encoding": {
          "x": {
            "field": "date",
            "timeUnit": "month"
          },
          "y": {
            "field": "temp_min",
            "aggregate": "mean"
          }
        }
      }
    ],
    "composition": "layer"
  },
  "audio": {
    "units": [
      {
        "instrument": "reed",
        "encoding": {
          "pitch": {
            "field": "temp_max",
            "aggregate": "mean"
          }
        },
        "traversal": [
          {
            "field": "date",
            "timeUnit": "month"
          }
        ]
      },
      {
        "instrument": "bell",
        "encoding": {
          "pitch": {
            "field": "temp_min",
            "aggregate": "mean"
          }
        },
        "traversal": [
          {
            "field": "date",
            "timeUnit": "month"
          }
        ]
      }
    ],
    "composition": "layer"
  }
}

Usage

import { createViewer } from 'umwelt-js';
import 'umwelt-js/style.css';

// spec is the Umwelt specification shown above
createViewer(spec, document.getElementById('umwelt-viewer'));