Week 1 - joeriBouwman25/bubble-machine Wiki

Detailed description of what work was done in this week

On Wednesday, we had a meeting/brainstorm with students from the minor UX design. They are working with us on the UI and the design from the data visualisations. We showed them the work we had started on with the API. Tim showed his first ideas for a data visualisation by showing the data from the API in two types of graphs. Joeri worked on creating multiple different visualisations in a dashboard, so you can start and view multiple simulations at the same time. The UX students showed us their ideas on the User Interface and ideas for the data visualisations. We talked about full-screen visualisations of the data and a collapsible menu for the simulation parameters. They also had the idea to be able to zoom in and out on the page


  • Fetch API data
  • First prototypes
  • Convert code to ES6
  • Add server side code

Next week


During the first week i took the time to explore. I did this by testing the different kind of API calls. With the API build by Marcio Fuckner i've made a dashboard where you could see all your active filter-bubble-sessions, make a new session for a filter bubble simulation, or delete a session. Later on Tim accomplished to visualize the data given back from the API. I implemented this data visualization and made it possible with the API to update the current step of a specific simulation or reset a session. It is not sure that we will use this dashboard in our project but it was very helpful to me because now i understand the API a lot better.


Explore the API further and rewrite code to server side. I started by trying to fetch the API on my own. This was done by the other already but I wanted to get a grip on the data to be able to use it. When that worked I started on setting up a folder structure in the repository. I made sure to add all necessary dependencies, folders and files, package.json, rendered the pages in EJS and divided the HTML in views and partials, added .env files and a gitIgnore file.


First up I started looking at the API, however after seeing the progress Tim and Joeri we're making. I thought it was more helpful in setting up the Wiki. Afer that together we made some code agreements and one of the agreements was writing in ES6. That meant that the code Tim was writing had to be restructured to ES6.


The first week I looked at the API that was given to us and used that data to make a prototype. I have only used client side fetch to make a graph with circles and lines. This prototype only worked with a chrome-extensions (Moesid CORS) so this test was only a temporary solution. Uploaded code to the team repo