Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam

In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre

Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam mehr erfahren

Klima Explorer |  Scientific data visualization

Klima Explorer | Scientific data visualization

Klima Explorer is the final result obtained in the course of Sebastian Meier about scientific data visualizations. It's a webapp for people wanting to explore or discover the climate oriented images collected by Birgit Schneider in her project A Typology of Climate Visualization and Its Changes Since 1800.

course.pngcourse.png

The scientific data visualization course offered us, students, the possibility to explore ways and techniques for data visualizations in the context of a scientific research and climate oriented studies.

Starting from a dataset chosen among a selection of 15 collections, we tried to translate those informations in a visual and, optionally, in an interactive way. The process was about bringing step by step the complexity of the data into a simple, clear and understandable visualization.

In some cases, we researched and experimented how to make this data be discovered or understood, without scientific knowledge, by a large untrained public. In other cases, we investigated how to make this data accessible and/or editable for the initiated scientific professionals. In fact, it's sometimes more likely the complexity of the data format and structure which are too complicated. In such situations, visualizing the data in a clever way is the greatest solution to make it accessible and in many occasions, when interactive, it turns it into editable and improvable data.

Every student in the course entered in touch and communicated directly with the scientific partners who where at the origin of the datasets. The cooperation took place while the whole process of development. Many experts where more or less investigated in the students's projects.

I had the chance to work in collaboration with Dr. Birgit Schneider, who studied art history and media studies, philosophy, and media art and multimedia at the Karlsruhe University of Arts and Design, Goldsmiths College, London, and the Humboldt University of Berlin. She is the author of the project A Typology of Climate Visualization and Its Changes Since 1800. She collected a big amount of climate oriented images, videos, and sounds. The set of medias is filled with scientific visualizations, with engaged artworks about the global warming or even with advertisings relating to ecological issues. She worked in collaboration with Simon Hirsbrunner who made a talk in the course and introduced me to the project.

I received this big amount of media-components and a machine-readable list enriched with many metadata informations. My task was to find out how to visualize the whole collection in an original an interesting way; to bring this big project of Birgit Schneider into the light.

dataset.pngdataset.png

The dataset I received was in the format of an XML file. This file was generated from the tool iView MediaPro, which the expert used to manage all the files. Each file is described in the xml with metadata such as technical properties (aperture, size, format, etc.) but also contextual informations (keywords, author, date, etc.).

I had to filter the most relevant informations for a meaningful visualization. Using all the specifications would not make obligatory sense to reflect the work of the research partner. Obviously, the contextual dimensions of the pictures and media-elements was the most relevant for me. I decided first, also because of my technical knowledge and the technological effort, to concentrate my visualization on pictures. They represent the majority of the files type and are easier to handle.

So, having restricted my choice to pictures, I started then to look closer at the data. I tried to find correlations between data-properties. I quickly realized that this was not the right path to follow. I wasn't dealing directly with scientific data, as it could have been for other students. My dataset was about scientific data but wasn't it directly. So I thought about it and decided that I should rather make a tool/gallery allowing the public to explore, filter and analyse those pictures themselves; a kind of iView MediaPro but much more simple, dedicated for this project and accessible from everyone.

I transformed this XML file into a json file and started to explore those metadata with javascript so I could find out what was the most interesting to be shown.

research.pngresearch.png

The main research was about finding how to visualize data and make it explorative. Also, it was the phase when I decided how it would be made accessible to the public. It already mentioned that this decision has been to make an online webapp, in which all pictures are displayed.

That's what I did: I started to code one simple app with Backbone and requireJS. At the beginning, the app just showed the files thumbs in a list, so the minimal version was reached. Obviously, that was not enough. So I looked at the different ways to display the files in a more original way.

I wanted the metadata to be an important and visible part of the visualization. I thought that displaying pictures per main average color could be an interesting thing. I also had the Idea to display the files in a network chart, linking files having the same keywords, to let users explore them a new way and finding interesting combinations of files. So, looking with hindsight at the many possibilities, I sketched such idea on paper and looked at other projects for inspiration.

The Idea I had, which became the focus of the app, was to let the user concentrate on picture of a particular interest. Selecting one to one or in sets some pictures, he could become detailled informations and a resume of the differences and common points of his selection. I then decided to make a visual list of thumbs which can be selected by clicking on files or by selecting an area.

selection.gifselection.gif

The basic functionality was working, the images could be selected, a detail list appeared on the right, and we even could select images one to one to show them in a bigger size.

The whole thing was still a bit too minimal and didn't really used meaningfully the metadata and its deep structure. As the development of a more complex version of the prototype would last too long for the duration of the course, I decided that I'd rather do a mockup-prototype of the advanced version. You can find it there:

Online prototype of the advanced version

result.pngresult.png

01-KlimabilderDataVisualization-basis.png01-KlimabilderDataVisualization-basis.png
02-KlimabilderDataVisualization-color-filter.png02-KlimabilderDataVisualization-color-filter.png
03-KlimabilderDataVisualization-aperture-filter.png03-KlimabilderDataVisualization-aperture-filter.png
04-KlimabilderDataVisualization-time-filter.png04-KlimabilderDataVisualization-time-filter.png
05-KlimabilderDataVisualization-search.png05-KlimabilderDataVisualization-search.png
06-KlimabilderDataVisualization-keyword-list.png06-KlimabilderDataVisualization-keyword-list.png
07-KlimabilderDataVisualization-keyword-cluster.png07-KlimabilderDataVisualization-keyword-cluster.png
08-KlimabilderDataVisualization-map.png08-KlimabilderDataVisualization-map.png
09-KlimabilderDataVisualization-poeple.png09-KlimabilderDataVisualization-poeple.png

The final mockups show the variety of possibilities the tool offers to explore the data. The pictures are visible to everyone and it offers deeper filtering tools for a more precise analysis. At this point, the app would let normal users to go through the images and get them displayed finely. Interested student could search for relevant pictures relating to one particular topic and data visualization designers look for inspiration based on one or more specific technical properties.

I haven't published an online version of the project yet. To get a fully functional version working, there's still a lot open tasks left. Many technical issues needs to be resolved. For example, hosting the files on an on server, storing them in many sizes and getting them shown using a database or an API represents a big chunk of small adventures to overcome. Also, I have to develop the webapp to its final state and to fix the bugs I already found on the prototype.

Even if the project isn't yet an clean an final state for now, I'm really happy to have reached this progression so far. It was a challenging project and I became the ambition to make it continue further.

I've shown the prototype and the mockups to the experts and received really positive feedback. Everyone is exited about bringing the project to the next level and we are working together with the assistance of Sebastian Meier on a more complete and online version.

If you want to know more about the project or are curious about what comes, you can reach me on my profile: Lucas Vogel

Ein Projekt von

Fachgruppe

Sonstiges

Art des Projekts

Studienarbeit im zweiten Studienabschnitt

Betreuung

foto: Prof. Dr. Sebastian Meier

Entstehungszeitraum

Wintersemester 2014 / 2015

Keywords

zusätzliches Material

Links