When DataViz embraces Game development: 5 min read
Data Visualization can be revolutionized by adopting Game Development techniques
As a gamer, I’ve been always fascinated by the game development industry. If I had a chance to try a job position other than mine, that would be either a software engineer position in modern Game Development or in a smart modern Robotics team developing autonomous drones, vehicles or robot animals like at @BostonDynamics.
This winter I had a chance, at least, to grasp very basics of what the game development would be. It was an exciting experience and I really liked it. Here I want to share with you how our team designed unorthodox data visualisation charts & how the 2D Game engineering helped us with its implementation.
BACKGROUND STORY When COVID-19 was on its peak, I joined a temporary project within our Firm to support a Covid Response Center with a team of engineers developing a web application with lots of Data Visualisation in it.
I was excited to share every successfully closed project in my LinkedIn profile, some of which you can see also here. While part of the backend logic was designed in Amazon Web Services (AWS), the project’s main core was written in Angular. All DataViz parts were developed using D3.js library (the library I’ve been fascinated with since 2014, though it was first created years earlier, in 2011, by Mike Bostock)
I must admit, I mainly work and prefer to stay on backend engineering but DataViz is something that I can make an exception for a Front-End development.
PROBLEM IDENTIFICATION Our last project was quite unusual in some sense: designers drafted a page full of data visualisation with “walking people” in the charts instead of moving bubbles. Though my first answer would be “very ambitious for a project with a monthly time budget” and also due to Winter holidays, our developers’ capacity was very limited. Thanks to designers persistence, we had no choice but to try at least to accomplish something.
I was particularly responsible for the development of “walking people” in the charts. Here are a few of the design requirements:
- people must walk from one circle to another while we change the data, in other words their movement and count correspond to the data & user interaction
- movement would be in 2D dimensions (this was obvious from the snippet)
- Everything must be as smooth as possible (obviously)
Those requirements were pretty abstract. One of the problematic parts for me was to figure out how people will turn around when they 1) collide with each other & 2) with the boundaries of circles.
SOLUTION Eventually, considering the time constraint I had and some experience gap in this particular area, I had to simplify the requirements & come up with easy little steps towards reaching the final goal:
- Ignore the walking people: consider them as bubbles
- Come up with “random walk” that would simulate or at least be somehow similar to human movement
- Keep in mind that it should be not precise but just look like walking humans
- If all 3 steps are successful, then come up with human motion for each “bubble”.
Meanwhile, our designer came up with a great “compromise”, reducing initial design requirements to something I found to be “more likely” accomplishable given all the constraints. Look at the snippet below:
If you are interested in DataViz and want to learn more I recommend you to follow our DataViz guru and the author of the projects I mentioned above Jason Forrest.