In this course you create interactive data visualizations. We will look at data structures, creative coding, and open data. Tools of the trade are creative coding libraries like Processing, P5js, D3 and Three.js. Whether you end up creating an interactive poster generator, a small web application or an tangible installation we will see.
What influence do you as a designer have on the supposed objectivity of data? How can you find meaning in data, what narrative do you tell? How does your representation or the interaction you design influence the interpretation of users? The goal of the course is, among other things, to become aware of your own interpretations and worldview and to reflect on their influence on your design.
The design task is to present data in an understandable, exciting and entertaining way, to make it tangible.
The project took place in 2017 with a duration of two weeks – to find data stories worth telling, design an interactive data experience and to learn how to use APIs and data endpoints as a resource.
Public statistics and data are often only available as unspectacular text documents or Excel tables. Thus, those who can benefit from this valuable and elaborately collected information have little desire to deal with such figures and values.
Our project "Aesthetic Data" addresses this problem.
A dynamically generated 3D object from these data sets provides an exciting interaction with the user. Through transparent layers he can draw direct comparisons or fly through the data via a scroll bar on the time axis.
This form of visualization is very performant, so that it can also be rendered on a smartphone. The view of the data visualization can be intuitively controlled using the smartphone's gyroscopic sensor data to view the 3D object from multiple angles.
The focus of the 3D visualization is the experimental representation and visual aesthetics of the data, which is enhanced by an informative layer on an external screen. In the next step of our project, several users should be able to have their selected data sets displayed on this screen and compare them. Thus, dry data and numbers can be experienced in an exciting and innovative way through interaction between user and visualization, user and user in physical space.
The goal of the course was the interactive visualization of a data set.
Our project is called MyLyricsWords and gives a statement about the music listening behavior of a user. We use the data of a user to determine his top 50 songs and display the most used words. It was important for us that everyone can log in with their personal Spotify account and thus get different and personal results each time. So this webapp is not based on a fixed data set but is personalized and therefore always has current data.
To achieve this, we first use the Spotify API to access the user's top 50. After that, song titles and artist names are processed to find the corresponding lyrics using the API of a lyric library. Afterwards these lyrics are processed by filtering them, counting and sorting the words. Thus, a personal data set is available that can be visualized.
For the visualization of the data we decided to use a 3D rendering, which displays the 5 most frequent words in descending order. Clicking on each word displays the next word below it in the ranking order. At the bottom of the screen, a bar chart of the 30 most frequent words can be displayed for better comparison.
This visualization can be saved by right-clicking and used, for example, as wallpaper on a laptop or smartphone, or printed out as a poster. You could even create a calendar with the monthly top words.
In this course you create interactive data visualizations. We will look at data structures, creative coding, and open data. Tools of the trade are creative coding libraries like Processing, P5js, D3 and Three.js. Whether you end up creating an interactive poster generator, a small web application or an tangible installation we will see.
What influence do you as a designer have on the supposed objectivity of data? How can you find meaning in data, what narrative do you tell? How does your representation or the interaction you design influence the interpretation of users? The goal of the course is, among other things, to become aware of your own interpretations and worldview and to reflect on their influence on your design.
The design task is to present data in an understandable, exciting and entertaining way, to make it tangible.
The project took place in 2017 with a duration of two weeks – to find data stories worth telling, design an interactive data experience and to learn how to use APIs and data endpoints as a resource.
Public statistics and data are often only available as unspectacular text documents or Excel tables. Thus, those who can benefit from this valuable and elaborately collected information have little desire to deal with such figures and values.
Our project "Aesthetic Data" addresses this problem.
A dynamically generated 3D object from these data sets provides an exciting interaction with the user. Through transparent layers he can draw direct comparisons or fly through the data via a scroll bar on the time axis.
This form of visualization is very performant, so that it can also be rendered on a smartphone. The view of the data visualization can be intuitively controlled using the smartphone's gyroscopic sensor data to view the 3D object from multiple angles.
The focus of the 3D visualization is the experimental representation and visual aesthetics of the data, which is enhanced by an informative layer on an external screen. In the next step of our project, several users should be able to have their selected data sets displayed on this screen and compare them. Thus, dry data and numbers can be experienced in an exciting and innovative way through interaction between user and visualization, user and user in physical space.
The goal of the course was the interactive visualization of a data set.
Our project is called MyLyricsWords and gives a statement about the music listening behavior of a user. We use the data of a user to determine his top 50 songs and display the most used words. It was important for us that everyone can log in with their personal Spotify account and thus get different and personal results each time. So this webapp is not based on a fixed data set but is personalized and therefore always has current data.
To achieve this, we first use the Spotify API to access the user's top 50. After that, song titles and artist names are processed to find the corresponding lyrics using the API of a lyric library. Afterwards these lyrics are processed by filtering them, counting and sorting the words. Thus, a personal data set is available that can be visualized.
For the visualization of the data we decided to use a 3D rendering, which displays the 5 most frequent words in descending order. Clicking on each word displays the next word below it in the ranking order. At the bottom of the screen, a bar chart of the 30 most frequent words can be displayed for better comparison.
This visualization can be saved by right-clicking and used, for example, as wallpaper on a laptop or smartphone, or printed out as a poster. You could even create a calendar with the monthly top words.