Stereo panning

U.S. population by age group. The sonification sweeps from youngest to oldest, mapping the number of people to pitch and the age group to stereo pan — so the sound moves left to right across the age axis as it plays, placing the value in space as well as pitch.

Visual

Bar chart

Sound

Pitch is population; stereo pan follows the age axis

Text

Ordered by age group

Open this example in the editor

Spec & Code

Spec

{
  "data": {
    "name": "population.json",
    "url": "https://raw.githubusercontent.com/vega/vega-datasets/master/data/population.json"
  },
  "fields": [
    {
      "name": "age",
      "type": "ordinal"
    },
    {
      "name": "people",
      "type": "quantitative"
    }
  ],
  "key": [],
  "visual": {
    "mark": "bar",
    "encoding": {
      "x": {
        "field": "age"
      },
      "y": {
        "field": "people",
        "aggregate": "mean"
      }
    }
  },
  "audio": {
    "encoding": {
      "pitch": {
        "field": "people",
        "aggregate": "mean"
      },
      "pan": {
        "field": "age"
      }
    },
    "traversal": [
      {
        "field": "age"
      }
    ]
  }
}

Usage

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

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