Umwelt Updates: Example Gallery, Sonification Improvements, Editable Text Structures

Jonathan Zong
Jul 8, 2026

Umwelt is an open-source editor for creating accessible, multimodal data representations. From a single specification, Umwelt produces three coordinated views of a dataset: a visualization, a sonification, and a keyboard-navigable textual structure. Rather than derive non-visual representations from a visual specification, Umwelt treats all modalities as equal outputs — blind and sighted users can author a representation starting from any modality. Umwelt is based on research involving participatory design with blind and low-vision collaborators, and its textual structure is powered by Olli.

Today we’re announcing a set of updates to Umwelt: sonification improvements, a new Text tab for shaping the description structure, a new documentation site with an example gallery, and umwelt-js, an npm package for embedding Umwelt viewers in your own site.

Try it: this scatterplot plots miles per gallon against horsepower for cars, colored by origin. Press Play (or the p key) below to hear two sonifications sweep the plot along each axis — first binned horsepower playing the mean miles per gallon, then binned miles per gallon playing the mean horsepower. Then focus the description tree and use the arrow keys to explore the points grouped by origin as navigable text. If keypresses aren’t reaching the tree, see the screen reader setup notes.

More expressible sonifications

Umwelt’s sonifications map fields to properties of a tone — pitch, duration, volume — and play the data over time following a traversal, an ordered list of fields that works like nested loops. This release expands what sonification are possible to author.

Instruments

Each audio unit now has an instrument — its timbre, chosen from a set of presets (pure, bright, hollow, bell, reed, strings). Think of it like a visual unit’s mark: it’s the voice the whole unit speaks in, not something that varies per data point. pure is the clean default and the easiest for judging pitch precisely; the other presets matter most when units play together (more on that below). The editor’s Audio tab includes a preview button for each instrument so you can audition timbres while you design.

Stereo pan

A new pan encoding channel places tones in the stereo field: higher values play further right. Pan works best as reinforcement rather than a channel on its own — pan the same field you traverse, and the sound sweeps left-to-right in step with playback, placing each value in space as well as pitch. The gallery’s stereo panning example sonifies U.S. population by age group this way: pitch carries the population count while pan follows the age axis. (Since stereo position is lost on mono speakers and for listeners with hearing loss in one ear, we recommend never making pan the only place a field is encoded.)

Layered units

Sonifications with multiple audio units can now be composed by layering, not just concatenation. Where concat plays units one at a time as separate sequences, layer plays them simultaneously under one shared traversal — like overlaying series on a shared axis. Layered units are scheduled on a shared time grid so they stay locked to the same cursor. And each layer automatically takes a distinct instrument so you can tell the voices apart.

The overlaid voices example plays Seattle’s daily high and low temperatures at the same time on two timbres, which means the spread you hear between the two voices communicates the daily temperature range.

Try it: press Play to hear the high temperatures on a reed voice and the lows on a bell, month by month. Or open this example in the editor to change the instruments or flip the composition to concat.

Behind the scenes, we also made the sonification more consistent with the other modalities: playback steps, bins, and aggregates are now computed from the same compiled data as the chart and the Olli tree, so when you scrub the sonification, select a region on the chart, or navigate the description, all three views are talking about exactly the same groups of data points.

A new Text tab for shaping descriptions

The editor previously had tabs for designing the visual and audio modalities; the textual structure was always inferred automatically. A new Text tab makes the third modality authorable too (leveraging recent improvements in Olli’s spec design).

By default you don’t have to touch it: Umwelt infers a description tree from your chart (or, with no chart, from the fields). The Text tab shows that inferred structure as an editable starting point. From there you can:

  • Add and reorder groups — split the data by a field (or several crossed fields), and nest groups to build hierarchy, with per-grouping control over binning and time units
  • Add highlights — named, hand-defined subsets that no field grouping expresses, like After 1975, defined by composable conditions with type-appropriate operators
  • Reset to auto-generated whenever you want to return to Umwelt’s inferred structure

This matters because the description tree provides primary access to the chart for screen reader users, and can carry its own modality-specific information. A highlight, for example, lets an author call out an editorially meaningful slice of the data — the kind of thing a visual annotation would do — and make it a first-class, navigable branch of the structure. The text guide covers the details.

Umwelt now has a proper home on the web: umwelt-data.github.io/umwelt. The site includes:

The gallery is organized by the structure of the data rather than by visual chart type. That framing is modality-neutral: a data shape determines the space of encodings across the visualization, the sonification, and the text structure. Each example describes what its sonification sounds like and what its text structure reads like, not just what the chart looks like.

Every gallery example has an Open in editor link, and the editor’s Export tab produces the same kind of shareable link for your own work: the spec is compressed into the URL’s hash fragment, so it’s never sent to a server, and anyone who opens the link gets your exact representation loaded and ready to remix.

Embed Umwelt anywhere with umwelt-js

The viewer that powers the editor and the gallery — visualization, description tree, and sonification, coordinated — is now published on npm as umwelt-js. The live examples in this post are rendered with it. Give it a spec and a container, and you get the full multimodal viewer in your own page:

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

const viewer = createViewer(spec, document.getElementById('container'));

You don’t have to write specs by hand: author one in the editor and copy the JSON from the Export tab, or start from a gallery example. The quickstart has a complete one-file example.

Get started

  • Open the editor — it runs entirely in your browser, and your data never leaves your machine.
  • Browse the gallery and remix an example in the editor.
  • Read the user guide to learn the editor end to end.
  • Install it: npm install umwelt-js and follow the quickstart.

We’d love your feedback! Open an issue or try Umwelt with your own data and let us know how it goes.