For the last few months I have been playing around with PowerBI.com quite a lot, because I have been doing some IoT demos. I really like the product, and honestly believe that it is the best that has come out of Microsoft in many years.
So I was happy when I saw that the PowerBI team announced that they was gonna have a contest in creating the best visualization. Naturally I wanted to compete in that since I like the product and the prices were also very nice, 5000$ for the winner.
Building a custom visualization is not that hard, and there are lot of code to get inspired from in the github repo, that contains all the existing visualizations, https://github.com/Microsoft/PowerBI-visuals. Coming up with a great idea for a visualization on the other hand, is a little more challenging.
I originally wanted to enter the contest more than once, but I simply ran out of time in September, so the weekend before the deadline I had to decide on something fairly small, so I at least would get something submitted. I like the computer game Heroes of the Storm, and follow along with the different tools that the community build for the game, and generally like digging into statistic for the game. Thus my original plan for the visualization for the contest was to leverage some game data and present in a nice way with PowerBI.
My first idea was to build a heat map of positions on the maps where heroes dies, in order to figure out if some areas are more dangerous than others, and to which hero classes. For this to work with PowerBI i had to build a heat map visualization, that on top of an existing image (an image of the game map) would be able to draw the heat points. I felt that this task could be accomplished in the day that I had set aside for the challenge. In the end I had to use some different data than plotting dead positions, as I couldn’t get the data extracted from the replays, so I ended up just using regular player movement.
When building the visualization I started by finding an open source heatmap implementation that I could use in my visualization, as I didn’t want to spent the majority of my time to build this part. I was more interested in the integration aspects. I found https://github.com/mourner/simpleheat to be easy to use and fairly powerful, so I decided to go with that. Unfortunately it’s not based on D3 like most of the existing visualizations, but I still feel that it does a good job as it uses HTML canvas, and I don’t have to do any DOM manipulation after the initialization. The library wasn’t written in TypeScript, but as I have converted a fair amount of JavaScript to TypeScript at work, the small heatmap library was quickly converted.
Building the plugin was for most part a great experience, I used the sandbox that comes with the github repo in the beginning, but throughout the process I occasionally copied my code to the PowerBI developer tool (call powerbi.com with this added to the querystring to enable dev mode ?devToolsEnabled=true) to check that it still worked. Due to this process I also opted out of placing e.g. the capabilities in a separate file, as I can see is the custom for Microsoft’s visualizations. I also had to change all, my use of the let keyword to var, as let apparently is not supported by the developer tool. Also you have to remove your references when you copy paste your code into the dev tools.
I did have some issues figuring out whether to use, the categorized data model or a tabular model, I’m not entirely happy with my current design, but I simply ran out of time and just had to get it working and submitted. One nice thing though is that it does work with streaming data, and it seems performant.
I also spent too much time on getting the custom input fields to work, as I had forgot to add the enumerateObjectInstances function, luckily I could spy in some of the other contestants repos and figure out that it was the missing piece.
[javascript]
public enumerateObjectInstances(options: EnumerateVisualObjectInstancesOptions): VisualObjectInstance[] {
var instances: VisualObjectInstance[] = [];
var dataView = this.dataView;
switch (options.objectName) {
case ‘general’:
var general: VisualObjectInstance = {
objectName: ‘general’,
displayName: ‘General’,
selector: null,
properties: {
backgroundUrl: HeatMapChart.getFieldText(dataView, ‘general’, ‘backgroundUrl’, ”),
radius: HeatMapChart.getFieldNumber(dataView, ‘general’, ‘radius’),
blur: HeatMapChart.getFieldNumber(dataView, ‘general’, ‘blur’),
maxWidth: HeatMapChart.getFieldNumber(dataView, ‘general’, ‘maxWidth’, 600),
maxHeight: HeatMapChart.getFieldNumber(dataView, ‘general’, ‘maxHeight’, 480),
maxValue: HeatMapChart.getFieldNumber(dataView, ‘general’, ‘maxValue’, 1)
}
};
instances.push(general);
break;
}
return instances;
}
[/javascript]
When I was in the process of preparing my presentation I did some googling about heatmap to see if I could find some better demo data. I wanted to find some sports data, e.g. soccer, tennis or basketball but wasn’t able to find any which was quite annoying. During this process I did find that a heatmap visualization for PowerBI was quite high on the user voice site, https://support.powerbi.com/forums/265200-power-bi/suggestions/7000340-heat-maps-in-power-view – I kinda wish I had known that going into the challenge as that would probably have motivated me even more.
I have posted two videos of my visualization on youtube, that you can take a look at.