The concept

In week one we started on a concept for the Bubble Machine. A couple of different things were important to us:

• Rethink the data visualisation, is a network graph the best way to visualise data?
• Rethink the parameters, they were visualised with sliders but is this the best way?
• Add additional features that make the application easier to use like zooming, additional information about the graph links
• Take steps forward and back in the simulation
• Create and delete multiple sessions
• Reset the graph and start a new simulation
• Show the distance between friends

This project is in collaboration with the students from the minor UX design. They showed us their first ideas for the visualisation and we started working on them. This was their first design.

Steps

Week 1

We started by reading a scientific article that explained the AI model to understand its features. We then made a plan on what we wanted to achieve in these five weeks. At the end of the week we sat together to talk about our plans and make agreements on how we were going to write the code and what we wanted to learn in these weeks personally.

Then we started coding by fetching the API and getting a response. We firstly wanted to see the type of data that was returned and how we could use it. After adding a new session and getting a response, we started on translating the data to svgs.

Week 2

In week two we started on visualising the data using D3.js and think about what kind of visualisation we wanted to make. The original graph featured a network graph but as you got further in the simulation the graph became a hairball. Our starting point was that we wanted a way to keep the graph readable in all stages. We started to research what kinds of data visualisations existed and were possible with our data. We thought about what you want to learn as a user and agreed that the way filter bubbles originate and change was the most important thing. Because of this we prototyped a force-directed graph so you can literally pull and push certain datapoints, we also prototyped a heatmap graph where the color of the graph got darker wehen there were more users in one area. While these ideas were interesting and educational we did not think this represented the data very well. Besides the users there are also links and documents and these were not represented here.

Week 3

Week three consisted of defining the project further, we sat together to change around the issues in the project to see what was important and what had changed. We realised not everything was possible in the time that we had and we needed to start scrapping certain things. For example we had the original idea to have the user see multiple different versions of the data visualisation but this was not viable in the end.

Week 4

In week four we met with the product owner Yuri Westplat to find out if there was a possible way to visualise the data a different way. He explained the basics of data visualisation. In the end we agreed to use the network graph and build a feature to highlight certain parts of it to get a better picture of the links.

Week 5

In week five we tried to build parameters to influence the graph yourself. But because we were out of time we had to stash that for another time. We finished onboarding and redid the design. We fixed issues and bugs and finished the code.

Final concept

The final concept started on the onboarding screens. In three screens you get introduced to the application and what the data means. It explains that there are users and documents and how they influence each other. After that there is a small explanation of how you are able to see filter bubbles if you run the application. When you enter the application you can start a session. At this point you can run the application and see the data visualisation change. In the data visualisation you can click a datapoint to see more information about the links to other users and documents. On hover it highlights one user and their links. You can also click on a button and get a line graph of the distance between friends.