Responses by Caspar Lam and YuJune Park, cofounders, Synoptic Office.

Background: Carnegie Hall first created the digital Timeline of African American Music in 2009 as part of the festival Honor! A Celebration of the African American Cultural Legacy. The timeline itself is based on the work of Dr. Portia Maultsby, the founding director of the Archives of African American Music and Culture at Indiana University in Bloomington, Indiana. Over the past decade, the resource was widely used by high school and college educators and students. Since that time, Carnegie Hall saw considerable public interest in the resource and, with grants from the National Endowment for the Humanities, sought to make the site a public resource and destination that could be living, dynamic and able to capture the evolving history of African American music. It was here that Synoptic Office was brought in to help with the digital strategy, design and implementation of this incredible resource.

Larger picture: Carnegie Hall is involved in a lot of music educational activities, and the site intersected with both its public programming (such as the upcoming Afrofuturism festival) as well as its educational initiatives.

Favorite details: The site comprises two main areas: an interactive timeline of musical genres and editorial stories that give life and context across periods of African American music history. We built into the platform the ability for the site to weave together text, images and–most importantly—sound. We leveraged Carnegie Hall’s Apple Music partnership to enable music to be embedded throughout the reading experience and the website. This means that the audience can not only read about history or see artifacts from Carnegie Hall’s Rose Archives but also hear clips of music. It is hard to learn about music history without hearing the music! Users with an Apple account can then add these songs directly into their libraries, turning the past into something present in their everyday lives.

Challenges: The most challenging part of the site was honoring Dr. Maultsby’s incredible scholarship. In particular, the timeline itself was extremely challenging not only technically but also in the representation of the data. Because musical history is so fluid, translation was necessary to represent the data on the screen. Given that the platform was developed over many years, it was interesting to see how new and emerging visualization libraries might handle this challenge in the future.

Navigation structure: The navigation is the central “pivot” of the site and serves as a signifier and enabler of its two main views: the narrative story of history and the timeline view of history. We made sure that every part of the site could be accessed through the navigation and that users could control the audio at any time. The site also enables individual users to backtrack and see a breadcrumb trail of their own journey. We hope that users explore and become lost in the history, so the breadcrumb trail in the index lets users trace where they started and where they ended up in their explorations.

Technology: The entire site was designed to be open source so that other cultural institutions could take the codebase and build upon it. We used a headless CMS called Twill connected to a React front end. D3.js was used for the visualization. Notably, the Apple Music API powers all the music throughout the site.