Notes to Nodes
Introduction
This piece depicts the networks traced by a pianist's hands as Yiruma's 'River Flows in You'aYiruma (Lee Ru-ma) is a South Korean pianist and composer. 'River Flows in You' from his 2001 album First Love became one of the most recognisable contemporary piano pieces, often mistaken for a Chopin composition. is played. In the [somewhat unlikely, but always possible] case you're unfamiliar, I highly recommend giving it a listen while you analyse the piece above: YouTube/Spotify. The Rousseau channelbRousseau is a YouTube channel featuring visualised piano performances, where falling bars represent notes in a style reminiscent of the game Guitar Hero. I linked has stunning neon visuals to accompany the rendition — they actually formed part of the inspiration for creating the piece. It is an exceedingly simple melody, but it has never failed to bring me peace.
Circograms
Circograms or network chord diagrams are a neat way to visualise complex networks, and I first came across them while doing an undergraduate research project.1 The piece takes direct visual inspiration from my research on structural brain networks, where the strength of a cortical region's connections to another is represented by edge width.
Each little segment on the outer border of the circogram represents a note, which is communicated via both colour and label. The note transition frequencies (here I mean the number of occurrences, not the sonic frequency) are encoded by the width of the directed arcs connecting different segments. The arcs between a given note pair (say A2 and E3) are asymmetric, since the number of transitions from A2 to E3 differs from the converse. If you're interested in network analysis, this makes it a directed graphcEuler invented graph theory in 1736 to solve the Königsberg bridge problem — whether one could cross each of the city's seven bridges exactly once. The directed variant adds asymmetry: the path from A to B is distinct from B to A..
This decomposition is meant to provide a general feel for the sonic ingredients and their interplay.
The circogram for the right hand
Figure a. Detail of the directed arcs connecting note segments. Arc width encodes transition frequency; colour follows the source note. is noticeably more intricate and more vibrant than the circogram for the left hand, which reflects the structure of the song.
If you zoom out your perspective a bit, you might notice a superficial resemblance to a DJ turntable. I'll leave the other visual easter eggs to your imagination.
Colour
People often ask me about the colours assigned to the notes. Although the implemented hues don't reflect too much thought/design on my part, I did go on a whole quest to see if there was an ideal pairing. Newton actually divided the rainbow into VIBGYOR (seven colours)dThere is a statue of Newton at Trinity College, Cambridge. Wordsworth's verses ('The marble index of a mind for ever / Voyaging through strange seas of Thought, alone') were penned based on it. because he believed there should be correspondence between the colour spectrum and the musical scale.2 Unfortunately, the fact that visible light varies over one octave while audible sound varies over ten complicates any association schema. In the end I went with built-in colour maps and made some intuitive edits, which works well enough.
The dimension of time is collapsed and the precise order of notes/their duration/their loudness cannot be recovered from this particular depiction. I was tempted to add some extra features that would preserve more of the original tune's information (like a radially arranged line chart to encode the average loudness of each note, and altering the radial extent of each note segment to reflect the duration for which it is played), but this seemed like a suitable end point for the static visualisation. I coded up an animated version that actually highlights the notes in real time while playing the song using simple sound synthesis.
The 88 piano keys in the legend
Figure b. The 88-key legend. Middle C (marked) is the inflection point between left and right hand networks. are colour-coded to match the note segments in the circograms — any keys/notes not in the song are left black/white, as they would appear on an actual piano. Each piano note has an associated MIDI number which helped make my programmatic analysis of the song considerably simpler. The MIDI (Musical Instrument Digital Interface) format made it straightforward to parse note events and build the transition tables.
Code
The code I wrote for this visualisation takes the MIDI file of the song as input, parses it, and converts it to a format suitable for network representation.
This essentially involves moving from a sequential representation of the notes in the song to one that only captures the relationships between adjacent note pairs.
I separated the song into two networks to bring out the mechanistic relationship to a pianist's hands
Figure c. The piano silhouette anchoring the composition — a dashed leader line traces the instrument to a magnified representation of the keys. — which intrinsically translates to the two contralateral brain hemisphereseThe brain's motor control is contralateral: the left hemisphere controls the right side of the body, and vice versa. For pianists, this means the left hand is primarily controlled by the right hemisphere and the right hand by the left hemisphere. whose networks inspired the whole thing! MIDI note number 60 (C4 or middle C) was set as the inflection point between hands. This is a simplification of how a pianist operates.
Once I had the network data in two tables with the right format (Note 1 | Note 2 | Count), I generated the circograms using RAWGraphsfRAWGraphs is an open-source data visualisation framework developed at Politecnico di Milano's DensityDesign Lab. It bridges spreadsheets and vector graphics editors, enabling complex visualisations without coding. (the same tool I later used for visualising phylogenetic trees). The Python libraries for circogram generation did not have the kinds of results I was looking for. I think notes are placed on the circogram in order of appearance, clockwise from 12:00. Finally, I went on to throw everything together into one cohesive whole using Adobe Illustrator. I have since mostly finished stitching the code together to be able to go straight from MIDI file to final visual, but automating the process entirely to pump out versions for all the classical pieces I like would take some of the soul out of it.
Conclusion
In the interest of concision I won't go on about all the other little things behind and in front of this piece, but it is dear to me because it was the first from my data-driven art series and I am a somewhat sentimental person deeply attached to all my firsts. I'll try to make the analysis code available as a GitHub repository for anyone interested in making their own visuals from MIDI files once I've completed the visuals series.
One of the central things I wanted to communicate/capture with this visual is the possibility of translation between sequential and network representations of information. The power of perspective.