Some heroes wear capes. Other heroes may have plungers, swords, rocket launchers, or gravity guns.
But not our hero.
No, our hero dual wields his legendary laptop and TI-83 calculator. Our hero is armed with facts, figures, and machine learning models that will increase margins by 1.2% over 4 years.
This is Data Science Man.
Data Science Man is here to save your graphs from their terrible fate of being filed in the ‘boring and forgettable’ section of your audiences minds.
In this tutorial, we are going to plot a companies stock price with R‘s ggplot2 library, then easily convert this into an actual video game in Unity. You will control Data Science Man as he fall and stumbles down the mountains of falling profits.
Just want to play the game? Scroll to the bottom of the article for a link to a web version of the game and have fun!
Time to level up your data science skills! Lets get started!
The Game Plan
Data Science Man always has a plan, and so should you! Here is what we are going to do, in the order we are going to do it.
- Get the last year of stock price data for Unity Systems Inc (U). This also happens to be the company that makes Unity 3D, the free game engine software we will use to make the game.
- Create a ggplot2 line graph of this stock price data. This will have labels, dates, axis, etc. This will be the ‘level’ of the game.
- Create a ggplot2 area graph of this stock price. This will be a black chart over a transparent background with no labels. It will become the invisible ground on which Data Science Man will walk.
- Add the two charts plus the above Data Science Man drawing to a new Unity project. We will add some code to make him move. It will literally look like a tiny man is running across your chart. It will be awesome.
- You will convince your boss that this is the future of dashboarding, and get paid to make video games.
Building The Level In R
Getting stock price data for a company is easy, so let’s not focus on that for too long. We want the stock price of Unity Systems Inc for the last year. I like to use Pythons yfinance library because its easy to use and well documented. Here is a link ** to the python code that pulled the data. You could also just download it from any of the hundreds of sites that offer stock data for free. And here is a link to the data** we will be using.
Start by creating a new R Project, and R Script, and drop the stock data csv into this same folder. R Projects allow us to use relative paths, which is great for tutorials. By the way my entire R Project is available on GitHub, in case you are feeling lazy.
Lets start with the main graph of our data. This will be the ‘level’ of our game:
Our first graph has a title, labels, and dates. We are using the tidyverse library to select the data we want (time and price), then ggplot2 to make a line graph. We are manually setting the y axis limits to 0–180. We do this manually for both graphs so they are roughly the same size.
Now unfortunately, we cant just import this chart into a game engine like Unity and have it work as a level. To Unity, this is just another image, the engine has no idea that the line of the chart should be the floor, or that this image should be interacted with in any special way.
In Unity, the boundaries of a game are referred to as colliders. Data Science Man will have a collider on his feet, and this will interact with a collider on the floor to give the appearance of walking on the ground.
Unity may not be able to tell the line in our graph from any other feature in the image, but it does have the ability to easily make a collider out of an entire image composed of only one feature! All we need is a totally black version of our graph over a transparent background, then Unity will be able to detect the boundaries of our graph and create a floor with the click of 1 button!
Fortunately ggplot2 is awesome, and allows us to do whatever the heck we want with any graph. Data Science Man turns his nose up at your n00b friendly out of the box dashboarding solutions!
This is the same as our line chart from earlier, but uses an area instead. We also use some theme parameters to remove literally everything from the chart (labels, ticks, background colors, etc.). What we are left with is just the area chart over a transparent background, meaning the background may appear to be white, but its actually nothing. Cool.
Notice the shape is identical to the shape of our line chart. All we need to do is turn the area chart into a collider in Unity, align it with our original line chart, then make it invisible! Smoke and mirrors.
Finally, we save the two graphs to our images folder.
From R to Unity. Turning our graph into a level.
First, you will need to install Unity 3D onto your computer. Unity is free, and you can download it here. Once thats finished, start Unity and click ‘new’, then create a project called "Data Science Man". Select 2D as the template.
Once you click ‘create’, you should be inside the Unity editor. If this is your first time using Unity, don’t feel intimidated. If you follow my steps you will get the game working. There are also hundreds of Unity tutorials aimed at beginners if you feel like you need to learn more!
In the bottom right of the main window you will see a folder called "Assets". Lets drag all of the images we need into this folder. You can drag multiple files at once from your computer straight to the Assets folder.
All of the images we will use are located in this GitHub folder. Just download them all to your computer and drop them into Unity. They include:
- The line chart we made in R
- The area chart we made in R
- Data Science Man
- A red square called ‘Floor’
- A player movement script. This is the code that makes Data Science Man move!
Drag the white "StockPriceLine" chart to the scene window.
Drag the black "StockPriceArea" image to the scene window.
Now if black area chart is on top of the white line chart like in the above screenshot, you are good. If black chart is beneath the white one, simply click on the black area chart in the scene view and look at the inspector tab on the right side of Unity. Find "position" and change the Z value to -1.
Next, you need to align the area chart with the line chart. To do this, you can use a combination of the ‘scale’ and ‘move’ tools at the top left of the screen. It doesn’t have to be exact, but you want the peaks and valleys to line up as much as possible.
Now its time for the magic sauce. This is the point of everything we did in R, and what allows us to turn your own companies data into a video game level. Click on the black area chart in the scene view and go back to the inspector window to the right. At the bottom, click ‘Add Component" and type "poly". Select "Polygon Collider 2D".
Boom!! Check it out!
Because ggplot2 lets us customize charts however we see fit and put that crisp black shape over a transparent background, Unity is able to detect the boundaries of the chart to create polygons out of it! That means this is now a working floor in our video game.
It is no different from a mountain in any 2D platformer game you might have played before. But think about it… in two dimensions, what is a mountain but a series of data points with varying intervals and slopes going up and down? Its all math in the end man. Everything in nature is just information, from the slopes of a mountain, to the atoms in your cells. Did I just get deep in 2 dimensions? Paradox!
Enough philosophy!
Bringing Data Science Man To Life
Now that we have a level, its time to plop Data Science Man into it and get him moving!
Now that Data Science Man is in our level, lets add an object by his feet so he can walk on the ground. Right click "DataScienceMan" in the hierarchy view to the left and click "Create Empty". This creates an empty game object that is attached to our protagonist.
Rename this object to ‘Origin’. Then use the move tool and adjust it so that our new object is at the feet of our hero. This will collide with our R graph and make him appear to be walking (and falling) across our data!
To make our hero move, we will need to add a movement script to him. This script is in our images folder, so you should have already dragged it into the project. All we need to do is drag this script from our assets folder to DataScienceMan in the hierarchy view:
Now its time to add a few components to Data Science Man. We are almost finished! Click on DataScienceMan in the hierarchy view, and look at the inspector. Click "Add Component" and type "rigid". Select "Rigidbody 2D" from the dropdown:
In unity, adding new components to a game object like Data Science Man gives it new properties. A Rigidbody 2D component allows our character to be affected by physics! Don’t believe me? Hit play at the top and watch him fall down straight through the floor.
Gravity is pulling him down! But to make him hit our graph and stick to it, we need to add one final component. Click "Add Component" and type "box", then select BoxCollider2D:
Now, if you hit play, our character moves and can stand on our graph. There is just one problem, Data Science Man is gigantic! Lets shrink him down a tad so it looks like he is standing on a mountain, rather than a molehill.
Click on "DataScienceMan" again and go back to the inspector. Set his x and y scale value to 0.5. Now he’s half the man he used to be!
There is one final thing to do to Data Science Man. Drag that "Origin" object we created over to the "Ray Origin" parameter of his Move script. This is telling our script that we want to use that as his feet!
You now have a working video game! Click the play button at the top to check it out. The "A" key moves left, the "D" key moves right, and the space bar jumps! If he falls off the level, the "R" key will reset the game.
Right now, Data Science Man kind of launches into outer space when you jump. We can do a few clean up tasks to make our game it a little more fun.
Cleaning Up the Aesthetics
First, lets get rid of the area chart. This is meant to be his invisible ground, we want him to appear to be walking around on the line chart that has labels etc. Simply click on the black area chart in the Scene or Hierarchy views, go to the inspector and uncheck the "Sprite Renderer".
This means the image is no longer drawn, but the object (and thus the collider) is still there.
Ok there are just two final things to do. Grab that red "Floor" image and drag it just above the chart. Use the scale and move tools to stretch it above our graph. In the inspector for that object, click "Add Component" and put a Box Collider 2D on it like we did with our Data Science Man object.
This collider will stop Data Science Man from reaching orbit on his jumps. The final piece is to adjust the camera to get it just right. You can click on the "Game" view (its just next to the "Scene" view we have been using) to see the cameras viewport. Click on "Main Camera" in the hierarchy view and look at its inspector.
With the "Game" view selected (not "Scene"!) adjust the "Size" field until the chart is just within view. Make sure our red ceiling is not visible. Finally, click the eyedropper to the right of "Background" and click somewhere in the chart to make the background match our graph.
That’s it! You now have Data Science Mane walking, jumping, and tumbling across our R ggplot2 graph. When he falls off the screen, just hit "R" to bring him back to life!
The Possibilities Are Endless
This is about as simple as a game can get. But just stop for a second and imagine all of the possibilities. So many of the graphs we use every day would make sweet video games.
Spinning donut charts as razor blades, bar charts as ledges to jump to, ziplining across dendrograms, floating inside of bubble charts, and don’t even get me started with what we might do with radial bar charts and gravity!
I promise we will do all of these in future articles. The Adventures of Data Science Man have only just began!
If you are short on time and just want to play the game, I have uploaded a web version of it here. Enjoy!
All of the code for this project including the R project, images needed to make the game, and the Unity Project are available on GitHub.
Data Science Man always follows the law. The law of large numbers that is. Did you know you are allowed to smash that clap button up to 50 times on a single article!