Building a Southern Mosaic

The following is a guest post from Innovation Intern Aditya Jain on his Southern Mosaic visualization.

Two weeks into my LC Labs Innovation internship, I came across Rachel I. Howard’s essay Southern Mosaic on the Library of Congress website. The essay describes the story of John and Ruby Lomax, a husband and wife who made a 6,502 mile journey through the Southern United States in 1939 to collect folk songs for the Library of Congress’ Music Division. This trip is part of a much larger Lomax collection available at the American Folklife Center.

I was fascinated by the Lomax’s story and I wasted no time diving into the audio recordings on the Library’s website, which features religious songs, field hollers, corridos, ballads, and spoken word performances reflecting Southern folk culture in the 1930s. Inspired by the richness of the collection, I created an interactive visualization of the Lomax Journey to make exploring the audio collections easier and highlight the individuals the Lomaxes recorded.

Mapping the Lomax Journey

Acquiring JSON data from the Library of Congress’ website is an extraordinarily simple task (shoutout to Laura Wrubel for teaching me this simple trick). All one has to do is to append a ?fo=json parameter to the URL one wishes to acquire data out of. So for example if I wish to get the data for I would go to

Once I had the data, I discovered each song included the timestamp and location of where it was recorded. Hence one can create a linear timeline of the Lomaxes journey through the South. Unfortunately, modern highways in the United States didn’t exist at the time of the Lomax journey, so I visited the Library of Congress’ Maps Division to continue my research.  A curator helped me find a map of southern roads and highways from the late 1930s, but in order to publish it online, I would need to enquire about its copyright. A visit to the Copyright reading room ensued, where to my relief (and to the efforts of kind staff), I found that the map’s copyright had not been renewed.

entries in a handwritten copyright register

Copyright register documents the status for a map of roads and highways in the Southern United States

The resultant digital map I created for Southern Mosaic was made using some Scalable Vector Graphics (SVG) methods, which define shapes using vectors. In Adobe Illustrator, you can trace paths on to an underlying image and export that product as an SVG and your browser will respect that hierarchy and render that SVG exactly as you intended to be, on screens of all shapes and sizes.

Map of state highways and roads

The interactive map of the route the Lomaxes traveled

Where it really gets interesting is that the browser will also let you manipulate each individual layer based on its layer name, so you can use JavaScript to turn layers on and off. I can also change its color, or manipulate the length of a path using the dash-offset trick. The hardest part was tracing the actual paths, which had to be done by hand. Luckily for me I had a wonderful collaborator in Nirja Desai who helped me trace the paths using a Wacom Bamboo drawing tablet. Once you have the SVG map with all paths and locations making it interactive is only a matter of some JavaScript hacking.


Code snippet to map the route of John and Ruby Lomax on an interactive map

Here’s the pseudo code for the interactive map


I used the wonderful d3-annotation library by Susie Lu to draw annotations. d3-annotation is great because you can just specify where you wish to draw the annotation and it takes care of some annoying <tspan> math for you.

The Bloom Visualization

Once I had completed the map my next order of business was to come up with a visualization-tool that could help people expose the collection. I’m a big fan of Giorgia Lupi’s Data Humanism manifesto that encourages visualization practitioners to deep-dive into the data. This time I visited the American Folklife Center to study the paper copies of the Lomax fieldnotes, which informed a significant chunk of my project. Through its anecdotes the fieldnotes surface a more complex portrait of a nation and its peoples than you would understand from listening to a recording. It was in the field notes, for example, where I learned the term ‘state farm’ (where many recordings were made) referred to a prison work-camp. I also became increasingly aware of the spectre of racism lurking in the background of this otherwise romantic story, such as this example from the Ramsey State Farm.

I thought about ways I could add to the identity of the creators, and one idea was to compile data about race and ethnicity. My initial assumption, informed by the library API which lacked such data, was that the Lomaxes did not collect such data and I would have to do it myself. (This assumption ended up being wrong).

I made a set of everyone who performed the recordings, and then scanned the field notes for references to the race of a person.  If I couldn’t find references to a person’s ethnicity/race in the fieldnotes, I referred to the Prints and Photographs division’s Lomax collections which contain pictures of some recorded artists.  Failing all other means, I searched the publicly available 1940 census. An example of a performer’s race that I found through this method is Aunt Caroline Horn’s public record.

After speaking with a Folklife curator Todd Harvey, I discovered that my initial assumption about the Lomaxes’ not collecting race data was wrong, for they did intermittently record race on the disc sleeves of the disc-recordings. Once I found out about this fact, the disc-sleeves became one of my primary sources for race data in conjunction with the field notes.

At this point in time I had with me the following data points: state and town (or prison) names, creator names, creator race, recording titles, and audio files. I liked the idea of creating bloom visualizations to reflect the hierarchical nature of the data, another idea that was partly inspired by Lupi’s work which makes the look-and-feel of data organic and humane. The other half of the inspiration comes from one of the few things I know about the American South: that its associated with magnolias.

Data hierarchy for Southern Mosaic

Navigating Southern Mosaic

I ended up choosing the open-source Vue.js for my front-end framework to build my visualizations. I had little prior-experience in Vue but it’s a ridiculously easy API to pick up. Vue is reactive, so features like computed properties mean that heavy computations are cached and recalculated only when underlying dependencies change. The performance gains for this feature are evident when you start breaking down a big function into smaller discrete parts. I love Vue’s ability to create an elegant harmony between user interface elements and its corresponding visualization(s). Creating filters is a breeze, and the code for the user interface can be nicely tucked away in its own .vue file (which is a beautiful concept in its own right). The user interface can communicate data to the visualization component either through a common parent component or a global store like Vuex or Redux, whichever one suits your fancy. If you’re looking to get into Vue I highly recommend the Vue documentation itself, which is simple enough to understand.

a visualization of locations, performers, and songs documented by John and Ruby Lomax

The Alabama Vue visualization

Images and Audio

Though the Lomaxes did not take pictures on their 1939 Southern States trip, the Library of Congress Prints and Photographs Division has a wealth of stunning material from their later trips through the South and elsewhere. It was difficult to include dozens of high quality pictures in my visual essay without ruining the page-load times for my readers on slower internet connections, so I decided to look into lazy-loading the images (loading images only when you need them). I uploaded low-resolution placeholder images and their corresponding high-resolution images into Lozad library, and it took care of the rest of the work for me.

The in-line player component piece of my project was inspired by a similar component I had seen implemented on the Pudding (I saw this version first but it was later pointed out that Shirley Wu had also implemented this Hamilton visualization a long time ago). Writing the SoundText component was fun but I had to wrestle with the WebAudio API. If all you need to do is play/pause a sound file then you probably want to use a higher abstraction library such as Howler.js. The SoundText component itself is just a colored <span>. As the sound recording progresses, an overlaid <div> changes its width to match the progress %.

snippet of text with song files embedded with pink audio buttons

Examples of embedded audio in the Southern Mosaic text

Creating Southern Mosaic was a deeply satisfactory experience. Along the way I made new friends, learned some cool new technologies, learned something new about the world but most importantly for me, I ended up learning quite a few things about myself. I am grateful to LC Labs for giving me the extraordinary opportunity that lead me to this gem of a story. There are many such gems tucked away in the annals of the republic, and if you’re a creative developer I hope my work has encouraged you to explore the Library of Congress’ Collections as Data.