Data visualization as a tool to access Leonardo da Vinci’s greatest work

The Visual Agency Editorial
The Visual Agency
Published in
8 min readMay 9, 2019

--

Behind the scene of the concept, design and development of codex-atlanticus.it: an interactive dashboard that uses data visualization to show, navigate and dig into Leonardo da Vinci’s greatest work the, Codex Atlanticus.

Historical introduction

The Codex Atlanticus is the largest existing collection of original drawings and texts by Leonardo da Vinci and is preserved at the Biblioteca Ambrosiana in Milan. It comprises 1,119 leaves dating from 1478 to 1519. Due to this wide span of time the book contains a great variety of subjects: from architecture to engineering, from art to natural sciences.

The story begins with Leonardo da Vinci’s pupil Francesco Melzi who, after the death of the Florentine genius in 1519 in Amboise in France, inherited a large collection of his master’s manuscripts. The following years the collection passed from hand to hand and risked to be dismembered due to abductions until the sculptor Pompeo Leoni took possession of some volumes at the end of the sixteenth century. It was only at the beginning of XVII century that Pompeo Leoni started to organize the 1,119 leaves by arranging the drawings on large sheets of 64.5 x 43.5 cm, which was the size used for atlases at the time, hence the collection becoming known as the Codex Atlanticus all over the world.

After several hereditary mis-adventures and the looting of Napoleon’s troops that brought the codex to the Bibliothèque Nationale in France, the Codex Atlanticus came back to the Biblioteca Ambrosiana where it has been kept for 200 years and that exhibits only a dozen pages at a time.

Sala Fedricana at the Ambrosiana Library

How the concept was born

The idea stems from the desire to celebrate the 500th anniversary of the master’s death with a digital project. In the initial phases of this work the experiments investigated the possible areas for an in-depth analysis of such a broad work; by analyzing content, chronology, dimensions and scope of the entire production of Leonardo da Vinci.

These initial studies have identified the Codex Atlanticus as the work with the greatest experimental interest; therefore the need of shaping a tool of digital humanities that helped the analysis and the communication of such an articulated content as the one inside these 1,119 pages. From an analytical point of view all papers contain different types of drawings and writings. In order to create an application capable of reporting such heterogenous content our research had to extend into multiple dimensions.

The first dimension concerns the pictures of the pages. Thanks to an archive in concession to Mondadori Portfolio the leaves have been digitized, cropped and cleaned up in order to be used in the application.

The second dimension concerns the writings. The possibility to report the original transcription of the texts has been discarded because the ancient Italian together with dialectal forms and several abbreviations is extremely difficult to understand, even for an Italian today. There was another possibility represented by the so called critical transcription (a specific transcription approach into contemporary Italian language) that unfortunately is protected by rights belonging to third parties and, in any case, too extensive to be translated in English.

At this point a new path has been opened up: finding which topics and subject are treated on every single page in order to represent the Maestro’s thoughts. The philological study of the Codex Atlanticus’ content, made by Augusto Marinoni in the seventies, provided a solution. Augusto Marinoni, professor of Romance studies at the Catholic University of Milan, considered the greatest expert on the philology of Leonardo da Vinci, published his studies in the book Il Codice Atlantico di Leonardo da Vinci : indici per materie e alfabetico (The codex atlanticus by Leonardo da Vinci: alphabetical table of content and by subject) edited by Pietro C. Marani in 2004. In addition to a substantial critical analysis of the work, the philological study contains a list of 140 topics and where they are treated, as well as an estimation of the year of writing for every sheets.

Thanks to this philological study we started to conceive a visualization capable of showing the evolution of Leonardo da Vinci’s thought through the years of his life.

Creating a brand new dataset

The very first step in the process was to understand how to get and build a consistent dataset. The index of Marinoni’s work was, in fact, a classification of all the subjects and topics contained in each page of the Codex. Starting from the digitization of this authoritative source we were able to create our very first textual dataset describing all 1.119 pages.

At the end of this (manual!🖖) transcription phase we had a 45.000+ raws excel file containing the list of topics treated in each page and, for most of them, the year in which they were written. Given the huge amount of topics (140) identified by Marinoni, we decided to group them into 5 subjects that could be easily associated to the content of the pages and could help us to make information accessible.

We decided to make this dataset open source and available on the website codex-atlanticus.it

The dataset has been finally completed adding the high-resolution images of the pages, protected by copyright, that we obtained thanks to the concession of Mondadori Portfolio and the Ambrosiana library.

Understanding and sketching data

The design of the page module was the result of a long process of sketching data. Our goal was to find a flexible visualization of the single page that could be easily scaled down, readable and, at the same time, able to show an intuitive overview of the codex composition.

We created a custom module that visually summarized the subjects contained in a page as well as the numerical and chronological order of the page in the collection. The final result was the consequence of different attempts to combine the data of the page in a single visualization.

Some sketches from the initial phases

Given the amount of data that we had to process, we mostly tested our design through the implementation, creating scripts that could plot the design for all the pages of the codex. This process allowed us to design and test a lot of different options before choosing the most effective one for the application.

Target and devices

Once the visualization module was defined, we started focusing on the design of the entire experience. The design process started with some user research on different targets for the three supports we decided to develop. The user research led the design of the interfaces for three devices: web, mobile and a 27' touch screen exposed in the Ambrosiana library, among the original pages of the Codex Atlanticus. When working on these different outputs we needed to keep in mind that our goal was to create a product that could be easily accessible and useful both for experts and non-experts of Leonardo’s work.
We wanted to create a tool that could help our target to explore the Codex Atlanticus through data visualization. And to do so, we had to make it as easy as possible to explore and understand the data, letting the users coming up with their own stories and conclusions. As an exploratory project, the goal is the exploration though data visualization. Given the complexity of the project, we found it really helpful, in order to build an effective design, to combine the user research with the user testing.

The looping process between design and development

The design was built around the data visualization module. We decided to create a system to show the content of the pages and navigate among them.
The data visualization becomes the page itself where the subjects are represented by different colors and two vertical lines show the chronological and numerical order of the page out of the total of years/pages.

The page is then used as a small multiple to display the total amount of pages of the codex in the main screen of the interface, portraying a general overview of the entire content. The central visualization is surrounded by additional elements that provide extra information (such as the total amount of subjects appearing in the pages displayed with a bar chart) and allows the user to filter the pages according to some data (year of writing, page range, subjects and topics in the page).

General overview of the application

The navigation of the entire application has been structured as a gradual zoom in into the details of a single page, guiding the users through an explorative storytelling.

Given the complexity of the project and the amount of data we had to deal with, the design process has often been combined with the coding. It was not a linear process from the idea to the development but it was a circular looping process from the design to the implementation, testing and back to the design.

How data visualization becomes a tool to access information

This project can be seen as the result of the combination of different disciplines, where data visualization interacts with data exploration, user experience, coding and approaches to the field of digital humanities.
The purpose of the project is to make a substantial amount of heterogeneous data accessible and readable through a data viz driven interface. The application allows users to navigate complex collections of works, exploring the content at different level of details and opening the knowledge of a precious content to a broad audience.

One of the most challenging and exciting aspects of the project was the design of the application for the touchscreen. The touchscreen is situated in the Federiciana room together with a selection of original pages of the Codex Atlanticus. The location of the screen adds an important value to the application, that can be used to understand and dig into the analysis of Leonardo’s work. It represents a new digital way to access information in service of ancient and precious material, otherwise difficult to be known.

Written by: Matteo Bonera, Sara Perozzi, Giulia Zerbini

🔗 Visit us
🔗 Explore the application

--

--