Week 4 - joeriBouwman25/bubble-machine Wiki

Detailed description of what work was done in this week

This week we completed all Must haves from the issues and started to add the extra stuff. A Lot of time is spent styling the website so we can present this like a completed prototype. At the end of the week we got a new design from the UX team and it was very simplistic and we chose to make a separate design that still showed some features we worked on in previous weeks.


  • Hovering over person to highlight their links to people and items
  • Accordion fix
  • View amount of links to items when hovering over a person
  • Parameter harmonica
  • UX minor styling

Last week

Next week


I've used this week to realize the functions to create and delete sessions. I've also refactored the highlight.js script and made it possible that when you opened a session tab you get the correct simulation on your screen. I achieved this by using hash routers for each session. in this way you remained on the same page but i was able to get the correct data in each function.


I worked more on the heat map graph. I realised at this point that a traditional heat map was just not achievable for me in the time that we had left. There were also a lot of other jobs to be done. I finished my experiment by making a heat map with SVG filters and blend modes. After this I started on onboarding, I really underestimated this project. I wanted to get it done quickly because I had already spent a considerable amount of time on the styling and wanted to learn more tech-related things. It did not go like that. I spent a very long time being able to click a next "page" that was an article in a section with one button. I eventually added a class on click to the next article by setting a variable with a number and updating that in the nth-of-type() selector so the class would move down every click.


This week I took it upon me to further start working on the styling of the page. After the meeting last week with the UX students, we sat together this monday to discuss which direction we want to take the deisng. The design was pretty similiar to last week so I focused on the parameters and how they were going to look in the final design. During design reviews last week and this week, the advice was to start looking at how adobe crams all there options and variables in an accordion design. On thursday the UX students stopped by to show us their new design which was a very simplified version of their earlier iterations.


This week I struggled with D3 zoom in function so I started calculating the distance from friends with pythagoras theorem. The distance I have calculated has been placed inside a D3 graph. The graph contains the average distance of friends, items and sharers. The data is shown in 3 lines and the difficult part of this was combining 3 different data sets with one graph. This week I also made a button that allows the users to download the main graph as a SVG.