Week 5 - Kuckelkorn/bubble-machine Wiki

Detailed description of what work was done in this week

This is the last week we have worked on the website and fixed the last bugs. We added small features like darkmode and step counter and added onboarding. Most of us started with the documentation and we have divided the documentation in sections. The last part of the puzzle was added to the website was the onboarding to complete this project. We have shown the project to Yuri and Marcio. The feedback from both were positive and liked the result we have made.


  • Step counter
  • Hover over points for more info
  • Work out onboarding
  • light- and dark mode
  • Fix DOMexception in autoplay

Not completed

  • Svg offline and current hover state
  • Completely responsive
  • Save taken steps to cache in serviceworker to take steps back
  • Simulation parameters (editable)
  • Zoom in on every cluster and see the details
  • Draggable datapoints
  • Delete unused items
  • Multiple different types of data visualisation (heatmap, force-directed)
  • Sockets

Last week


In the last week i've tried to implement the websocket connection, i've struggled a full day with this and came to conclusion that there would be no time enough to succesfull create this functionality. After that i focused on the redesign of the prototype in a version that we were happy with. At last I worked on the remaining bugs in the application so no errors would show up when using a simulation.


On Thursday the UX students showed us their final iteration for the styling. Everything had changed so there was a lot of work to do on the onboarding. I finished the functionality last friday and went on to make some animations on click of the elements that had to be explained. I then changed the styling around and added my own introductory texts so it would be understandable. On Wednesday Joeri and I finished rerouting the application to the onboarding route when you enter the website. I made a button that lets you skip the onboarding and spent the rest of my time on documentation.


On monday I started working on the new design of the UX students which was finished after a day of work. After that I went further on the documentation of this project.


This week I made the main graph highlight when you hover over the bubbles and the connected friend highlight at the same time. This highlight function has made the content more easy to view and you do not show a graph with more than 400 data points but only the important items. I added a label of the current hovert item based on the code of Joerie. The last part that I did was connecting the bubbles with lines of the current hovert item. This week I have added a darkmode function that inverts all colours and changes the hue saturation of the items. I worked on the documentations and tried working with sockets but I didn't have enough time to complete this so I started fixing little bugs.