Skip to content


Repository files navigation

Musical Structure Visualization with MIDI Data

This project was done as a term project of information visualization class in Fall, 2019 by Hyung-Kwon Ko, Dongmoon Min, Seijun Chung, and Dantae An.

Web demo & video

You can find the web demo here, and the video here.

What is this all about?

For visualizing the music, people have conventionally used the music sheet which consists of multiple sets of five lines (i.e., staves). However, the music sheet is unsuitable for analysis as it has unnecessary information which incurs visual clutters for users. The existing method is also difficult to understand for ordinary people who are not familiar with the musical representations (e.g., note). To resolve the challenges, we made a novel visualization system which intuitively shows the target music's overall structure without visual clutters. The visualization is also easily understandable for untrained users. We expect our system to be useful for the users who want to get insight from music or who want to build ML networks for musical analysis.


  1. Clone this repository
    • git clone
  2. Run with VScode
    • cd M1522.000500-infovis
    • code .
  3. Install requirements
    • npm install
  4. Run web server
    • ng serve -o