When static data becomes an interactive experience in the web

For the platform ERA Portal Austria, we developed an interactive graphic on behalf of the Federal Ministry of Education, Science and Research and the project participant Zentrum für Soziale Innovation GmbH, which visualises different number dimensions in a quick and clear way and guides the user through different levels with intuitive user guidance.

It all started with data in an Excel spreadsheet. The challenge was to present the extensive key figures as well as the different programme areas in such a way that a clear allocation and an appealing data visualisation could be created for the users.

Therefore, the first step of the process was to work out how to present the data visually. In order to be able to subdivide the complexity of the different funding sources with the corresponding programme areas in a comprehensible way, the graphic was divided into 3 dimensions or levels and uses a pie chart in its basic form, which provides further information via mouse-over.

By clicking or touching, users can intuitively move through the different levels, which reveal more and more information on the corresponding topic. The prominent back button provides orientation to playfully switch between the dimensions. The colour palette forms a visual bracket for the affiliation of information to the corresponding thematic field.

For the technical realisation of this project, we made use of the JavaScript library D3.js, which was our preferred choice due to its ability to »manipulate« documents based on data. Together with our cooperation partner »Syntop - Studio for Interaction and Information Design« and the powerful Data-Driven Documents library (D3), the numbers/data were translated into a visual environment of a pie chart through mathematical calculations.

Through user-centred interaction design, creation and technology merged in such a way that data standing still in the background alone became an interactive data visualisation with an exciting user experience in the foreground. Thus, data is not only something for the head but also something for the eye!

We are therefore looking forward to further projects of this kind in the future!

https://era.gv.at/horizon-europe/budget/