Hackathon
A week of applying lessons to a real project for a real client.
Week seven | March 25th, 2024 | sell Design sell Data sell JavaScript
In between our four main subjects during this semester, we had a week-long hackathon for an actual client. On monday, we were visited by Krijn Hoetmer, the organiser of the CSS Day: an infamous multiple-day event in the web development world that hosts pioneers in the field speaking about the most recent CSS developments.
Debrief
For the tenth anniversary of CSS Day, Krijn turned to us with the question if we could take the data collected about the CSS Day in the last decade and turn it into an interesting data visualization to showcase on the official CSS Day website. He even told us that it would be a competition, as the group with the best data visualization could win tickets to the actual CSS Day!
The concept
I teamed together with my classmates Rose, Elaine and Sena Nur. We first discussed the database and the particular elements that jumped out to us, which were
- The number of attendees;
- The color codes assigned to each year;
- Where the attendees came from (their countries of origin).
For the latter, Rose and I were reminded of the minor we followed prior to web design and development, information design. We both did the tech track of this minor, where we learned to use the framework Svelte to utilize components and the library D3 for data visualizations. But we also saw the same window of opportunity with the 'country' element of our last idea, as a classmate of ours during the information design minor had used the library Mapbox GL to generate a realistic, 3D and interactive globe.
Together with Elaine and Sena Nur, we settled on the following idea,
The focus will be on the attendees, their volume (the number of attendees) and their countries of origin per year.
My role
While Elaine and Sena Nur started with sketching out the ideas, Rose and I figured that we could once again use SvelteKit and our information design knowledge to set up the app. I was responsible for the repository and getting it ready for collaboration as Rose set up the project's boilerplate, which meant that I created the repo, invited the girls, installed Mapbox GL and made branches for each of us that I continued to streamline with the main branch.
Then, once I successfully rendered the globe and its environment (space), I continued with adding the controls. Users could drag the globe around to inspect different parts of it, but they also needed to be able to zoom in and out with buttons. Additionally, I made the globe responsive by modifying its size according to the window's inner-width and tested this on my phone. The only issue was that I couldn't seem to be able to also modify the size of the controls I added, as they were generated by a node-module.
To refresh my mind, I decided to leave this for the time-being and spent the rest of my time with Rose, where we discussed the color scale that was to indicate the amount of attendeed per country on the world map and actually implementing this.
The ending / Conclusion
Unfortunately, I missed the wednesday and the ending of the project due to a passing in my family. This means that I wasn't able to fix the buttons/controls styling and responsive sizing at a later time like I had planned. Regardless, I feel as though I've made a significant contribution to this project in terms of getting it off the ground and how it ended up, and I am also very happy with the collaboration between myself and my teammates. We were able to sit down together, discuss our options and ideas, and have this result in a project that looks good and has taught us all something new.
I especially am proud of the fact that I have strengthened my collaboration skills both practically (Github, branches, etc.) as socially (sparring, aiding teammembers, compromising on ideas) and that this project testifies how this has gone.
If you wish to see how it turned out, check it out at CSS Dayta!