Multi-series line chart

Stock prices of five tech companies over time. The sonification maps price to pitch and plays each company as a separate sequence.

Open this example in the editor

Spec & Code

Spec

{
  "data": {
    "name": "stocks.csv",
    "url": "https://raw.githubusercontent.com/vega/vega-datasets/master/data/stocks.csv"
  },
  "fields": [
    {
      "name": "symbol",
      "type": "nominal"
    },
    {
      "name": "date",
      "type": "temporal"
    },
    {
      "name": "price",
      "type": "quantitative"
    }
  ],
  "key": [
    "symbol",
    "date"
  ],
  "visual": {
    "units": [
      {
        "name": "vis_unit_0",
        "mark": "line",
        "encoding": {
          "x": {
            "field": "date"
          },
          "y": {
            "field": "price"
          },
          "color": {
            "field": "symbol"
          }
        }
      }
    ]
  },
  "audio": {
    "units": [
      {
        "name": "audio_unit_0",
        "encoding": {
          "pitch": {
            "field": "price"
          }
        },
        "traversal": [
          {
            "field": "symbol"
          },
          {
            "field": "date"
          }
        ]
      }
    ]
  }
}

Usage

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

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