Transformational Tonnetz

Overview

A React, TypeScript, and SVG web app for visualizing triadic relationships on a Tonnetz. The tool lets users select chords, show transformational relations, adjust the view, and trace paths through harmonic progressions.

Role

Designer and developer responsible for the Tonnetz model, SVG rendering, interaction design, TypeScript application structure, and deployment.

Context

The Tonnetz is a spatial model of tonal relationships. In neo-Riemannian and transformational theory, it is often used to show how major and minor triads relate through small voice-leading changes and transformations such as P, L, and R.

Problem

Transformational relationships can be hard to follow when they are described only with chord labels or abstract operations. The project needed a way to make those relations visible as paths through a harmonic space.

Outcome

The tool gives students, analysts, and curious musicians a hands-on way to explore triadic transformations and visualize harmonic motion through the Tonnetz.

Approach

1. 01 Built a Vite and React application with TypeScript for clearer state, component, and data modelling.
2. 02 Rendered the Tonnetz as an SVG triangular tiling so chords, paths, labels, and transformations could update directly from application state.
3. 03 Added chord selection, transformation toggles, zoom controls, and path drawing for tracing progressions through the network.
4. 04 Designed the interface as a teaching and analysis tool rather than a playback or composition app.