Prototyping the MeLa Critical Archive

by Andreas Koller

During my research residency at CIID I was working on the MeLa project with the goal to create interaction prototypes for the project’s archive. Eventually this archive will document all the results (text, images, videos) that have been produced by the participating researchers from 2011 to 2015. Being responsible for the design of this archive, CIID found the metaphor of a star map, thus reflecting a critical approach to the notion of a complete archive and visualising the complexity and uncertainty of the content itself. The MeLa Critical Archive should be an open critical space, experimental in its navigation and interface – allowing the user to explore content and make connections.
My task was to prototype the interaction in a zoomable interface.

Video documentation

Open the interaction prototype of the MeLa Critical Archive.

An interface for playful discovery

I started to research about zoomable user interfaces and how several hierarchies could be experienced. Then I worked on prototyping the zooming, sorting and filtering of the content, and animating between different the states.

The visitor to the Critical Archive will face a map where every content item is represented by a star (representing a text, video, image or a combination of these), which are organised in constellations (topics) and galaxies (themes). Zooming in would reveal the names of the constellations, and on a further zoom level the names of the actual content item and a thumbnail would show. Activating sorting would rearrange the items on the map, according to the properties selected on the x and y axis (e.g. chronological based on the publishing year). Finally, a filter would fade out items that fall outside selected categories. This UX design and the design of the actual interface was done by CIID.

Getting there, step by step

I decided to realise the prototype in JavaScript and with D3, and there were several reasons for that. The final product has to be accessible on the net, so I thought it might come handy if the prototype already runs inside a browser. Naturally, Processing (and Processing.js) would have been my first choice, as I’m familiar with it. It offers all the possibilities I needed — however, I would have to create all the data structures and interactions myself and it wouldn’t allow me to access the DOM. D3 on the other hand offers a unique approach to exactly this problem which I wanted to get my head around.

After setting up the usual, simple developing environment using Yeoman as a scaffolding tool and Sublime as the text editor of my choice, I could get started with learning D3. The philosphy behind D3 is to bind data to objects. This can look as simple as that:

[code]
var link = d3.svg.line()
.x(function(d) { return d.x; })
.y(function(d) { return d.y; })
.interpolate(‚linear‘);
[/code]

After preparing the x and y scales, I generate a variable called link that contains a function to draw a direct line between two points using the x and y properties of the data.

[code]
var Star = function(x, y) {
this.x = x;
this.y = y;
}

var stars = [];
for (var i = 0; i<8; i++) { stars.push( new Star(Math.random()*width, Math.random()*height) ); } [/code]This creates an array with eight stars on random positions - all the data we need for now. I go ahead and create an svg element, append it to the page and create paths (links). The transformation of these paths are based on the properties of each star. [code] var width=960, height=500; var svg = d3.select('body').append('svg') .attr('width', width) .attr('height', height); svg.append('path') .attr('d', link(stars) ); // connect the stars data to the path [/code]Simple as that! D3's structure allows me to simply bind the data to the DOM objets (svg paths in this case) without using loops, which is very convenient. To add circles for each star, I use the usual method for data binding (selectAll-data-enter-append chain).

[code]
svg.selectAll(’star‘)
.data(stars) // connect the stars data to the circles
.enter().append(‚circle‘)
.attr(‚r‘, 6 )
.attr(‚transform‘, function(d) {
return ‚translate(‚ + d.x + ‚,‘ + d.y + ‚)‘; // place circles on x and y coordinates
});
[/code]

See a working example and its source code.

‚Connected Dots‘, built with D3. See source code.Randomize

In the next step I added a hierarchy above and arranged the stars in clusters (galaxies). I used Mike Bostock’s SVG Semantic Zooming example code to add the zoom behaviour.

‚Zoomable Connected Dots‘, built with D3. Use scrollwheel or trackpad gestures to zoom. See source code. Randomize

Now I add labels and a logic for showing and hiding them at certain zoom levels.

‚Zoomable labeled Dots‘, use scrollwheel or trackpad gestures to zoom into hierarchies. Built with D3. See source code.Randomize

MeLa-CriticalArchive-Screenshot

The prototype includes a force layout to arrange the stars and constellations, a grid (x and y axis), background circles (which should indicate the amount of information contained in each star), and thumbnail images that show at the closest zoom level. Unfortunately I was not supplied with content from the MeLa project, so I used placeholders and random text. Watch out for the final MeLa Critical Archive coming up later this year, it is implemented at the moment (not by me) following CIID’s specifications.

Links

Critical Archive Prototype
MeLa project
CIID Research Residency Programme
D3.js

Schreib einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *