SAP Lumira: Flexibility through Custom Visualization Extensions
Downloads: Related Links: Overview: SAP Lumira Extensions Learn how to develop Extensions Open Sourced Data Access Extensions How to migrate Football Heatmaps extension from Lumira VizPacker to Web IDE |
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
- SAP Managed Tags:
