Somewhere amidst a piano keyboard, a dataset, and a Figma file—I haven’t yet found a universal definition—chasing connections between code, design, and music.

2026 © Sabrina Laneve

_making complex data-art *inside* google spreadsheet: Debuss' Treemap

YEAR: 2024

ROLE: designer, developer

TOOLS: gsheets, google apps script, figma, javascript, typescript, d3js

TAGS: [creative coding] [digital music corpus] [data-viz]

Debussy was more of an "out of the grid" kinda guy, so why not push the grid to the limit?

This experiment challenges the constraints of google sheets, visualising nested treemaps made of google sheet cells. The visualisation shows pitch distributions analysed in the digital corpus of Debussy's entire piano oeuvre, serving as an outreach-oriented companion to the corpus study. The aim was to make the analysis more accessible to non-specialist audiences through an unconventional and visually intuitive medium.

The project development involved a preliminary step of data formatting and visualisation prototyping in d3.js. After the data visualisation was assessed, it was transformed into grids and cells using google apps script. This part of the process included testing and navigating the rendering and logic limitations of google sheets.

This treemap view, called “crazy keys”, highlights the distribution of pitch classes inside each piece.

The dataset used to generate the visualisations is made of the following information: album; piece Id; catalogue; year of publication; length in quarter beats of the piece; spotify link; percentage of pitch classes, full title, popularity on spotify.

This slice-and-dice treemap represents Debussy’s entire piano oeuvre nested by albums, pieces and pitch classes. The black and ivory rectangles correspond to the black and white keys on a piano keyboard.

2026 © Sabrina Laneve

Create a free website with Framer, the website builder loved by startups, designers and agencies.