Notes & Code

Programming, music, and the occasional tangent

Introducing Musiker: An Interactive Timeline of Classical Music

Musiker is an interactive timeline that maps the lifetimes and connections of classical music composers and players — from William Byrd in the 1540s to Lang Lang today.

Piano timeline on musiker.page

What You Can Explore

The site currently covers three instruments: piano, violin, and trombone. Each timeline lays out musicians as horizontal bars spanning their lifetimes, set against color-coded era backgrounds — Baroque, Classical, Romantic, Modern, and Contemporary.

Click on any person to open a detail panel with their portrait, biography, Wikipedia link, and a list of related people. Connection lines between musicians show teacher-student relationships (dashed blue) and family ties (solid red), making it easy to trace how musical traditions passed from one generation to the next.

You can zoom in with Ctrl+scroll to focus on a specific period, or scroll horizontally to explore the full span of centuries.

Under the Hood

Musiker is a React + TypeScript application that renders everything as SVG — no charting libraries involved. The main challenge was fitting dozens of overlapping lifetimes into a readable layout. A greedy lane-packing algorithm assigns each person to the first available vertical lane where they don't overlap with anyone else, keeping the timeline compact without losing clarity.

The data is split into three concerns: a shared list of people with bios and metadata, a shared list of connections between them, and per-instrument configuration files that define which people appear and what eras to show. Adding a new instrument is just a matter of creating a new JSON file and listing the relevant people.

Part of Rightkey

Musiker is built in collaboration with Rightkey.app, a music education platform. It's one piece of a broader effort to make classical music more accessible and easier to explore — whether you're a student, a teacher, or just curious about how Beethoven connects to Czerny connects to Liszt.

Try It Out

Head over to musiker.page and explore. If you notice a missing composer, a wrong connection, or an instrument you'd like to see added, use the feedback links at the top of the page — suggestions and corrections are very welcome.