Week 2 - Kuckelkorn/bubble-machine GitHub Wiki
Detailed description of what work was done in this week
Frontend team
This week, we spoke with the UX students again to update each other on our progress and expectations. We started off by listing what we did in the last couple of days. Joeri made the menu to start and reset the simulation. Remco is experimenting with D3.js and showed the graph he made, which consisted of dots to show people and friends. Tim showed how he made a zoom function to zoom in and out of the canvas, and also how you can drag over the page to show different parts of the graph. Nora started on capturing the data points' X and Y axis and storing them in local storage to be able to take a step "back" in the simulation, since this is not incorporated in the API itself since this is not it's purpose.
UX team
The UX students showed their first prototypes. They showed three designs and told us about their ideas for new features. They wanted a collapsable menu with parameters, every time you click a new parameter the other one closes. Not only that, but they also had the idea to be able to hover over the people and friends circles to reveal extra information about the data point. While this is a good idea to inform people about what they are looking at, it is complicated because the graph is so dense with information. The dots are so close together that it's difficult to distinguish them from each other. They also had the idea to incorporate onboarding, they showed us a few examples of graphs where the user is first introduced to the topic by showing screens of what the data entails. We thought this was a good idea, but are going to start on it when we have a better grip of the data and visualisations. Lastly, they wanted to show a graph of the relationships between friends and other information Marcio incorporated in his visualisation in the form of a line graph. The graph shows, for example, that the distance between friends grows smaller as you get deeper in to the filter bubble.
Ideas
- collapsable menu
- Hover over data points to reveal information
- Onboarding to introduce the topic
- Show a line graph of different relationships
Meeting with the product owner (Marcio)
On Thursday we met with Marcio, he built the algorithm and the API. Joeri had a question about the use of websockets. He explained that they work in a different way than we are used to. He uses a websocket server that you can make calls to, to update the data you get on the first API call. This is better than making a new API request every time you want an update on the data. With this websocket server you can listen to events and get them as changes happen. We also had a question regarding taking steps back in the simulation. At this point you can take a step forward and see the progression of the simulation. To make it more clear for users we wanted to take steps back. He told us that is not possible to add to the API in the time we have. Lastly we want to make an API call to the parameters to be able to change the simulation, he told us he is working on that and he will send us a message when it's ready to use.
Standup with Justus
On Friday we briefly talked to Justus about the state of the project. Earlier this week we moved all of our to-do's into issues and on the projectboard. We labeled them by Must have, Should have, Could have and Would have and to what part of the tech stack it belongs. We had a question about moving back in the simulation and Nora explained that she tried to add the X and Y axis of every person, link and document to local storage for every step. That would mean you can only go one step back so that would not help us. Justus explained that a service worker might be really useful for this. Using this you would save a "state" of the simulation by adding it to the cache and opening the cache when the user wants to go back. For now we've parked this but we want to look at it at a later time. we discussed using d3 in our project and how it was going. Justus shared an article on rendering large amounts of data without it turning into one hairball of unusable points. Lastly he explained d3's 'general update pattern' and how we might use it in our project using a websocket server so we can continuously update the simulation.
Articles and recources on d3 and sessions
Completed
- Deployment
- Data visualised in network graph
- Multiple sessions
- Automatic (real-time) steps
- Reset and next step
Joeri
Start on incorporating websockets. Because Marcio didn't had the socket connection ready i couldn't work further on this. the rest of the week i've worked on the extendable menu and functions connected to these buttons.
Nora
Start styling the website and start on making usable parameters. I started by doing the general styling of the application. After this I made a slide out harmonica with Javascript. After this I started on saving steps in local storage to take a step back in the application. After a lot of trying I realised that this was not the way to do it. There's a lot of data that needs to be saved and local storage does not have the amount storage to save multiple steps. Other options would be saving in cache with a service worker or using a database.
Remco
I started this week with remembering the little knowledge of D3 I still had left. I was able to plot all the nodes on a plane. After that I was going to focus on making the links between nodes. On Tuesday I moved my sandbox code to the project and made some changes to the code, I also started watching some tutorials on D3 links, with no prevail. Because I couldn't figure out how to make links between nodes I decided to shift the focus on restructuring the code for the rest of the day. Wednesday I had a code review and further worked on the network graph still wasn't able to create links between nodes. On thursday I left the links alone for a minute and made some progress on the autoplay function. There are some limitations regarding the API, for now it is hard for me to tell if there are too many API call's or there is a different issue but it stops at around 25 steps for the first run, then takes 5 steps on the second run and it scales further down. For the next day, the goal is to solve this problem and add the possibility of adding a pause option.
Tim
This week I started experimenting with three different layers above each other spoken of in the given article about social bubbles. I have made a prototype with the 3 different layers and given all bubbles a blend mode to give the effect of creating a social bubble. I made the zoom function on serverside.