Week 3 - joeriBouwman25/bubble-machine Wiki

Detailed description of what work was done in this week

This week we changed all code from svg javascript to D3. The graph now works with an autoplay function with a couple of little bugs. You can now see the social bubbles being created. We have implemented the new design from the UX team on the development branch and sent this to the UX team.


  • Downloading an SVG of the graph
  • Making modules
  • Hidden menu
  • Pause autoplay
  • Distance between friends graph
  • Heatmap graph with d3
  • change styling to UX students

Last week

Next week


This week I've started experimenting with D3 and made multiple graph designs. After a session with Justus who explained the basics of D3 to me i was able to understand the working of this library. The types of graphs that i made this week included:

  • scatterplot
  • force directed graph
  • heat-map
  • vonoroi

After this week i gained a lot of new skills with D3


I started on understanding d3.js. In the third week I wanted to learn about D3.js. My goal was to make something that resembled a heat map graph. I made my own d3 experiment folder and used my own code to fetch the API, by this point Remco had figured out how to render the users and items in d3 himself but I wanted to learn how to do this myself. I also continued on the styling and incorporating the design from the UX minor students.


This week I continued working on the D3 application of our app, I was able to also display the data in a canvas instead of an svg. So if the possibility arises where the svg fails I now know how to implement a canvas. Still wasn't able to make the connecting links of the items and persons. I also was able to make the play/pause button for the automatic steps. Next up on the list is to make an step counter so people can see on which step you are. On thursday I worked some more on the wiki of this project. I wrote about the D3 library and the API Marcio made, after that we had a meeting with Yuri which was a brainstorm session about what visualisations we can use to properly display the data.


This week I have made a drag and drop system for the graph and a zoom in and out button to look at the bubbles closure. The team has decided to go make the final prototype in D3 and I have tried to convert my code to D3. I have played with D3 and looked up a couple of examples of graphs and looked up how this works.