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)

Figure 1: Farmer preferred channels across the buying journey. A screenshot from the link

Figure 2: American perceptions of economic opportunity. A screenshot from the link

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:

1. Ignore the walking people: consider them as bubbles
2. Come up with “random walk” that would simulate or at least be somehow similar to human movement
3. Keep in mind that it should be not precise but just look like walking humans
4. 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:

Figure 3: A snippet from a final design depicting walking people in the chart

After a through research, I realised that I had to read or learn something from the field of “game development”. I had a pretty hard time to sort out the right resources. Though I thought it would be fast, YouTube videos were not sufficient: they showed magic, but didn’t really explain WHYs & HOWs. In the end, fortunately I came across with Introducing JavaScript Game Development : Build a 2D Game from the Ground Up by Graeme Stuart at O'Reilly Media. It gave me all I needed: the very basics of 2D game development in HTML & Javascript. After spending all weekend reading pages in the book, I came back to my desk and put the basics of 2DEngine ( yes, I like this fancy name) module that would accomplish our team’s expectations. Here is a link to the final product, though due to lack of time we were not able to polish everything.

Figure 4: A snippet from a final product with walking people in the chart

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.

Further readings:

1. How to draw custom topojson maps for d3.js in 3 steps
2. Software Architecture Patterns: 5 minute read
3. How to Scale Your Applications: 5 min read
4. Caching as a part Software Architecture: 5 min read
5. RPC chains: 5 min read