Visual Awesomeness Unlocked – Using the Synoptic Panel
By Amir Netz – Technical Fellow and the Amazing Marco Russo and Daniele Perilli of SQLBI
In this episode of Awesomeness Unlocked we are returning to the winner of the Power BI Custom Visual Contest – the Synoptic Panel by SQLBI.
No, we will not attempt to solve the ancient mystery of “what the heck is Synoptic?” This is of course a question that no one can answer to any satisfaction. So just get used to it folks – it is called Synoptic Panel for no good reason.
Instead in this episode attempt to we will unlock all of the other mysteries of this amazing visual. And it really is amazing. We, in the Power BI team, are extensive users of this visual. If you know how to work it – getting stunning results is unavoidable.
Today’s post was authored by the Amazing Flying Brothers Marco and Daniele (Ok – they are not really brothers, but they are amazing). This blog post is extra-long and it will make you appreciate why the Italians have to speak so fast – they simply need to fit way more words in the same length of time.
So take from here Marco and Daniele…
Introducing Synoptic Panel
The Synoptic Panel by SQLBI is a powerful visual component for Power BI that connects areas in a custom image with attributes in the data model, filling each area with a color or with a saturation of a color related to a value or to another measure.
You can download the latest version from Github or grab it from Power BI Visual Gallery.
In order to demonstrate the use of this Visual, we will use it to display the sales of products related to their position in a store.
Start with a map image
First, you need a map of your store, preferably a grayscale one (JPG/PNG and SVG image files are supported).
You have to import the map in the free tool Synoptic Designer (https://synoptic.design).
Synoptic Designer is a web application that runs within any modern browser (IE 10+, Edge, Chrome, Firefox and Safari) and highlights areas of your map in an easy-to-use way.
Select a tool on the bottom pane and click on the map to define new area points.
If the map is not too complex, you can use the Magic Wand tool to do this job very quickly, clicking in any point of a closed area that you want to color and obtaining as a result the complete definition of the area itself.
If you import an SVG file, all the included vector shapes with an ID attribute will be automatically recognized as areas.
After you defines all the areas, you name them so that every area has the same text of the content of a column in the data model, which you will bind to the component later.
In the following picture, we assigned a product category name to each area, because it is the zone of the shop dedicated to products of that category.
Note that if you want to show on the map a different label than the record name, you can fill the Area name (to display) field.
Once you complete the definition of the areas, you can export your work to use it in your report. Click the Export To Power BI button and download the generated SVG file.
Public Gallery
If you want to use a map from the public gallery, click on the Gallery tab, select an entry and press Edit in Designer button, as shown below.
If you are editing a map taken from our public gallery and you want to export it to Power BI, right click on the map image in the export dialog and choose Save Image as.
You can submit your content to the public gallery by choosing Submit to Gallery button. Note that every submission will be reviewed by the SQLBI team.
Import your content to Power BI
Before starting, you have to import the Synoptic Panel custom component in your Power BI Report. First, you download the latest version from Github or grab it from Power BI Visual Gallery. Then, you import the component by using the three-dot button in the tools panel. You will see a dialog box where you choose the Synoptic Panel .pbiviz file that you downloaded before.
Once imported, you can drag the component into the main canvas area, change its properties, and bind it to your data.
The Synoptic Panel provides the following properties:
- Data Binding
- Legend: binds to generic category data – in our example, we bind it to the Category column containing the product category name, such as Audio.
- Details: (optional) binds to a more detailed categorization (if present) – in our example, we bind it to the Subcategory column containing the product subcategory name, such as Headphones, Hi-Fi, MP3 players values.
- Values: binds to the main measure that represents the value of the area.
- Maps: binds to a measure that contains remote map URLs
- State Values / Saturation Values: (choose only one of them) binds to a measure that controls the color of the area – it can be the same of Values.
- State 1 From / State 1 To / State 2 From / State 2 To / State 3 From / State 3 To: (optional) binds to measures defining state ranges.
- Saturation Min / Saturation Max: (optional) binds to measures defining saturation range.
- Visual Properties
- Unmatched areas
- Show: shows areas that do not match your data – when off, only areas that match Legend/Details measures are visible.
- Colorize: applies Default Color to unmatched areas.
- Labels: shows the area name over every unmatched area.
- Colors
- Default color: defines color for areas if not overwritten by multiple colors selection – it works only with Saturation, but not with State (which overrides data colors settings).
- Multiple colors: assigns a different color to each area.
- State 1 / State 2 / State 3
- From / To: State range in from-top-to-bottom priority – you cannot change these values when State 1/2/3 From/Min from previous panel are bound to a measure.
- Color: color for areas in the range – it overrides Data Colors.
- Saturation state
- Minimum / Maximum: Saturation range – when set to 0 you obtain an automatic range based on Min and Max values in the Saturation measure – you cannot change these values when Saturation Min/Max from previous panel are bound to a measure.
- Data labels: shows measure values over matched areas.
- Category labels: shows Legend/Details values over matched areas – works only if Data Labels is off.
- There are also other standard visual properties, common to many components, so it is not necessary to describe them in this article.
- Unmatched areas
After setting basic data properties (Legend/Details and Values), you have to select the SVG image map generated by Synoptic Designer from your local computer, as shown in the next pictures.
Note that you can choose one of the maps in our public gallery by clicking the Gallery button.
At this point, you can assign State/Saturation measures and set the ranges, as in the following example.
The Synoptic Panel responds to data selection like any other Power BI component. You can drag a slicer on the main canvas and start to see how your categories perform across the time, as you can see in the next picture.
The component also provides you a way to dynamically bind more maps to the same component, binding to the Maps field a measure that returns the map URL (beginning with https) as a string. You can see an example of this feature in the video, and a detailed step-to-step guide for binding dynamic maps will appear on https://synoptic.design web site.
Here is a short video that recap all the steps:
Download the latest version of Synoptic Panel for SQLBI from Github or grab it from Power BI Visual Gallery.
Did you produce some interesting content for the community? Share it in the Synoptic Designer Gallery!
Have you any idea to improve the component? Leave a track in the comments below!
