This article is part of a series of posts about building Power BI reports for tennis datasets. You can check our introductory article here.

While implementing the Power BI reports for the ATP Tour Dataset, we faced some limitations with the built-in visualizations in terms of how we were expecting certain data to be filtered as well as the way it should be presented to users. Luckily for us, Power BI offers a set of tools that made it possible to create tailored visuals that behave exactly as we needed.

‍

The Custom Slicer

A key part of our Head to Head report is the selection of the players that will be compared. Even though the built-in slicer provided by Power BI could take care of this, we had some special requirements to fulfill:

• The user experience when dealing with large datasets should be optimal (e.g. our player’s dataset contains more than 11.000 records).
• Performance should not be degraded by the amount of information shown simultaneously.
• The user should always be aware of the players selected. The built-in slicer does not provide a natural way to identify the selected options (e.g. it displayed a “Multiple Selections” legend instead of showing the actual selection upfront).
• A specific number of selections should be allowed. Even though the built-in slicer can be configured for multiple selection, it does not allow defining a maximum number of selections; users could then select three or even more players, leading to inconsistent results.
• The filter should only be applied when the minimum selections are met.

These reasons lead us toward the creation of our own visual.

While working on the custom visual, our philosophy was to keep it simple, visually appealing, performant, and easy to customize.

The visual consists of a search box to type and quickly filter the available options, and a selection list to easily identify the selections applied.

‍

‍

We added some features that differentiate this visual from others available:

• The filter will only be applied when the minimum number of selections configured are met (defaults to 1)
• The slicer will not let users to select more options than the maximum number configured (defaults to 2)
• The number of options shown in the filtered list is configurable
• The selected options can be configured to be shown as a list (one selection per row) or side-by-side.

Every piece of the visual can be configured through the Format tab, so the visual can be used in any context and be adapted to the look and feel of any report.

‍

‍

The custom Comparison Chart

Once we had the player selection sorted out, we discussed with the team how could be the best way to compare metrics and stats of the selected players.

We came with the idea that using a tornado-like chart might be a good way to visually achieve that; however, the visuals available didn’t quite cover what we were expecting as they didn’t render the “mirrored comparison” visual effect that tornado charts provide.

Our first approach was to replicate the tornado chart behavior using multiple built-in visuals each associated to a particular measure but, even though we could -in a way- mimic the behavior, it had a negative impact in terms of performance and user experience. So, once again, we decided to create our own implementation of the visual.

The goal of this visual is to show the values to compare between players side by side, creating a clean visual representation of the comparison. To accomplish that, we placed the name of the data field to compare at the center of the visual and arranged its field value for each player at the left and right side. The field value is represented as a bar chart.

‍

We faced an “uh-oh” moment when rendering field values that handle different scales. For example, the integer value of the aces per match is usually in the order of 1 digit (e.g. 5.25, 2.89), which is relatively small compared to the value for matches count (e.g. 1047, 920); this makes the bar charts difficult to read when those type of fields coexist in the visual. Taking advantage of the versatility of custom visuals, we added support for independent multipliers associated to each field. That made it possible to adjust each field value to the right proportion and show a wide range of measures in the same visual.

‍

‍

Like in the custom slicer, we included an extensive list of options to configure the style of the visual allowing the user to adapt it to the layout of any report.

‍

‍

Those visuals ended up being an essential part of our reports 😊.

The source code of the visuals, the packages, and the details to configure the development environment can be found in the Sample Power BI Report for Tennis Datasets sample under the Power BI samples repository.

‍‍

Originally published by Leandro Dardick for SOUTHWORKS on Medium 27 November 2020