ContourViz: Creating Interactive Contour Visualizations from the Command Line

Despite the author name, this is a guest post from Christopher Witulski; he can be reached at  chris.witulski at gmail.com.  We thank him for sharing this exciting pre-publication work. -- MSC

Last year I learned about music21 and ever since I have been wondering how I can use it to learn more about the Moroccan musical repertoires that I study. Long story short, I ended up building a tool for creating interactive web-based contour visualizations from the command line and I'd like to share it here.

Climbing out of a rabbit hole

I was working through a project and struggling to keep track of things. The paper was an analysis of a genre of Moroccan sung poetry called malhun for the 2016 Analytical Approaches to World Music conference. The performance of each poem can last twenty-ish minutes and contains a number of repetitions of the refrain text. These refrains are short (roughly eight 2/4 measures long) and modulate through repetitive--but different--melodies. I had transcribed over sixty of them in an attempt to understand how they worked, how they changed, and how they were related to each other.

Malhun Performance in Fez, Morocco

Having performed this music in Morocco (I'm the lone violinist in the photo who can't quite figure out how to play while holding the instrument upright on my knee), I was constantly struck with this feeling of déjà vu. New melodies felt so similar to old ones, but I could not put my finger on how or why. The problem was simple: I could not keep sixty or seventy different transcriptions in my head at once. Comparing them was getting tricky. I wanted a way to stack them on top of each other, almost as if I could print the transcriptions on a transparency and show them all at once on an overhead projector.

Over the previous months, I had been teaching myself Python in an effort to learn more about music21 and what it could do. It was time to try and build the tool that I needed instead of wishing I could find it.

Visualizing contours

For the presentation, I put together a small library that carried out two main tasks. First, it used music21 to parse my transcriptions, normalize the length of each melody, and build a dataset. Using offsets, frequencies, and distances from the final note of each melody, it turned note objects into a JSON of coordinates. At 1,000 different y values (each corresponding with 1/1,000th of the length of the total melody), it measured an x value for the frequency and one for the "distance from the root," the distance in steps above or below the melody's final pitch.

Malhun Contour Example

The JSON was passed to another library that I had been recently learning and working with called D3.js. It is written in JavaScript and designed for creating powerful interactive data visualizations. I supplemented my presentation with an online chart of each of my malhun transcriptions: by grouping contour lines within each poem, I was able to easily see the source of my déjà vu. Despite changes in pitch content, range, root motion, and a host of other things, the contours themselves often stayed strikingly consistent throughout the long performances. You can see the visualization and click through the different poems online, though be aware that some parts (like the "Next" button) are artifacts of the paper presentation.

Building a tool

Maybe two weeks ago I decided to try my hand at creating a Python library of my own. I simplified the chart, creating a sort of template, remove the stepwise element of the visualization, and fought my way through learning to upload a project to PyPI. The result is ContourViz... I didn't give much thought to the name, my apologies.

ContourViz, simple example

The tool takes, as an argument, either a music notation file or a directory with many of them. It parses these files and creates a JSON structure of 1,000 coordinates for D3.js to work with. It then copies a folder called results that includes an index.html file and a folder of JavaScript and CSS files that the generated web page will use into the current directory. Finally, it runs the Python SimpleHTTPServer and opens the new page, parsing the JSON to create the visualization.

You can install ContourViz using the following in your terminal:

pip install contourviz

It runs from the command line, so creating a visualization of multiple melodies, like the one above, is as easy as:

chart-single-contour '/path/to/file.xml'

Working with a directory is similar:

chart-contours '/path/to/directory/full/of/xml/or/mxl/files'

ContourViz, more complex example

I'm still toying with the system and it has a number of issues. For example, I would love for it to parse voices as individual melodies if they are present. Instead, it only works with monophonic lines, meaning that each voice has to be in an individual file if you wanted to visualize voice leaning or other contrapuntal patterns. There are smaller issues: I still need to set up the Y axis to render note names properly.

Please feel free to check out the GitHub repo and suggest any other changes or ways in which it could be more helpful. This is my first go around at building a tool of this sort, so I am eager to hear if it is helpful and how it could be improved. And thank you for allowing me to join the community.