Tracking Movements: The Football Heatmap Extension
SAP Lumira: Flexibility through Custom Visualization Extensions
SAP Lumira is a great data visualization tool that comes with various bar charts, pie charts, cross tables, geo-maps, to name just a few. In most situations, these standard charts are very useful and powerful visuals to represent your data and turn data into information. But, what if you need something very special to your business, for example showing customer traffic in a retail store, player activity in a sports game or website click analytics?
Charts for such unique and special visuals are not offered out of the box with SAP Lumira: Instead, we have a very powerful and flexible option: Custom Visualization Extensions.
In order to show how an unusual visualization can be created for Lumira, I have decided to create football heatmaps, which shows a football player’s activity on a football field. You can see these kind of visuals on Fifa.com or football analysis websites. The heatmap visualization is not limited to sports: It can easily be transferred to uses cases in other industries, for example Retail.
The Data
Data which is shown in this kind of visualizations is usually collected by HD cameras, beacons or RFIDs, which are able to track an object’s movements. In our case, it’s the activity of a football player, but the concept is easily expandable to customers’ activity in a retail store: anywhere, where GPS sensors cannot be attached to the object. The cameras generate tracking data with object id and position (football player, customer, …). The position of the tracked objects are usually represented as X and Y coordinates.
Please don’t get confused with geo-spatial coordinates like latitude and longitude, this position system is different from geographic coordinates. Actually the idea is the same: representing a position in a 2-dimensional world with 2 parameters, but it is very specific to field, industry or camera producer. An example of dataset is available on GitHub.
Let’s Start with the Layout
I have started creating my extension from the football pitch. It is basically a combination of a green rectangle, circles and lines. I have chosen to draw the pitch with D3 code instead of using an image. In this way when you change the size of the visual on stories within SAP Lumira (‘Compose tab’), the pitch will be resized perfectly without any pixelation or distortion.
Drawing lines, circles or green field with d3 is really easy. However, when it comes to semi-circles(arcs) it was more difficult. Main difficulty is when you resize the pitch, edges of penalty arc exceeds the lines. In order to create a perfect penalty arc, you need to calculate the center angle of the arc and dynamically change this angle according to the size of the pitch. That calculation took me back in time, to my college years: I refreshed my trigonometric knowledge and as a result I created a perfect pitch, which preserves its shape even if it is resized.
If you would like to use this extension for a retail store or for a different scenario (like the one below – SAP Forum İstanbul visitor heatmap), you can have an image of your store, instead of d3 coded football pitch. I have an html div called “pitchContainer” inside the code, which contains d3 created layout. With a little HTML effort, you can locate your image inside this div.
Visitor Heatmap Created by Infonomi (blog by Daniel Zimmer)
Locating the Heatmap on Top of the Layout
After creating the pitch, it is time to create the heatmap and locate it to the right place on the pitch. In order to create the heatmap, I used an opensource javascript library called heatmap.js. With this library it is really easy to create dynamic heatmaps for lots of use cases.
Heatmap.js requires 2 important objects; an html div element to create the heatmap inside it, and the data that will be visualized.
As I said before it is crucial to find the right place for locating the heatmap. Data formats will vary for different sports, industries, even for different football data providers. Locating this different
formatted data into right place has one trick: D3 scale functions. If you know the maximum and minimum data points (location x,y) of your data, you can assign these values to yMin, yMax, xMin and xMax variables, otherwise extension will calculate min and max of dataset dynamically. The scale below gets the real data point (location x or y) and converts it to the right point on the football pitch according to current size of the field (fieldHeight and fieldWidth).
If you want to use a different layout, probably you will use the same code for creating the heatmap. The only difference will be the image or drawing that you will be using instead of the football pitch. If you use the same systematic for width and height, most of the work will be done automatically.
Final visual is a combination of the pitch and the heatmap. It is possible to filter according to team, player or time. You can analyze a football game interactively and create a storyboard to show multiple players on the same canvas.
Extension In Action
Let’s start playing. As I said before you need players and location of these players during the game.
- Download sample data set from github, which contains, team, player and location information.
- Load dataset into Lumira.
- Select Football Heatmap extension.
- For this extension measure is not very important, but you have to add one. In this case add Count.
- For the location dimesion add X and Y dimensions as shown.
- You can filter by team or players to see how they perform.
Or
You can simply download sample lumira file (Football Heatmap Demo.lums) and open it with lumira.
Just a Note For the Big Amount of Data Points
Since these kind of visuals require a huge number of points you may need to increase the default maximum number of points that can be visualized. You can find “Dhilo.maxvizdatasetsize” parameter under SAPLumira.ini file and increase that number. I increased it to 100k for my case.
Power of Extensions
Your business may be different from others and it may require special analysis. Lumira provides you a rich portfolio of features and visuals in order to make “Trusted Data Discovery”. When you need special type of visuals for your work, you are not limited to, out of the box ones, you can create your own visuals as you imagine.
It is easy, powerful and flexible. Enjoy the power of extensions.
P.S. Special thanks to Suantak Niangneihoi for migrating extension to WEB IDE.