Image of INI

In the 60s, the Spanish regime created the INI (Instituto Nacional de Industria) to promote the industrialization of the country. The INI was a state-owned holding company that controlled a large part of the Spanish industry. The INI magazine was created to inform the public about the activities of the INI and its companies. The magazine was published between 1964 and 1991.

To celebrate the 30th anniversary of the magazine, the Universidad Politécnica de Madrid (UPM) has created an exhibition to explore its history. The exhibition is called "La Imagen del INI" (the image of the INI) and is located in the Architecture Association building in the center of Madrid.

Goals and challenges

Creating a low-cost installation to explore - using data visualization techniques - the magazine collection, while adding a playful element to the experience.

We received more than 7000 pages of the magazine's dataset; some of the pages had associated metadata. There was no budget to buy new equipment or build museum-like interfaces. So, what did we do?

Result and the Process

The installation was composed of two screens:

• one for filtering and another
• The other one for displaying the results.

For insance, the filtering screen allows the user to select the year and the topic of interest. The visualization screen shows the pages of the magazine and the articles related to the selected topic. To give it an fun touch, we chose to use a non-conventional device for navigating the collection: a retro joystick from an arcade machine.

In our ideation process, we wanted to have something that was not just a computer with a traditional mouse interface, but something that could be more engaging for visitors.

The joystick was a nice trade off: it is an easy-to-use device that is familiar to most people, but not too common to go unnoticed.

This decision drove us to design a simple interface inspired by the TV-boxes "Netflix-style," where you just have a 4-axis pad to move through the options and select the one you want.

There are different ways of navigating the collection by using the metadata: number, year, author. All this criteria is available on the interface. The screen with the representation has two modes of visualization:

• With the overview mode, the visitor can, for instance, select an author and quickly see all the pages of the magazine that were written by that author
• Then, with the gallery mode, the visitor can see the pages in a grid and select some of them for reading

Experiments with Machine Learning

As an addition to the core labels provided by the research team for each page, we added something else. We trained a system to detect pages with images, tables etc. Then we used an image classifier to identify the content of each image.

Doing so, we were able to provide a new way of navigating the collection, like finding pages with tables, maps, machinery, planes, etc.

Technical details

The process is a 100% web project. To our traditional stack of VUE+D3 we added processing for the data visualization and PIXI for the gallery view. The joystick is controlled using the HTML5 Gamepad API. Both screens are part of the same computer and they communicate using the broadcast channel protocol.

The installation has a fully automated process to start and stop every day. Since there is no keyboard or mouse, the Chrome Browser Kiosk offers a safe environment for the installation.