Using Power BI with Custom SVG Files
Power BI is a data visualisation tool I work with a lot, largely due to its incredible ease of report production and deployment — particularly in relation to other Azure-based services.
One of the elements of Power BI that can be challenging is its restrictiveness when creating visuals. It has plenty of options and functional levers to use when producing visuals, but when compared back to some of the big guns of the open source world (such as ggplot, seaborn, D3, etc) it can become quite ‘samey’.
Step in SVG and Synoptic Panels.
I should start by confirming that I’m not necessarily advocating the synoptic panel approach for all Power BI deployments, but it is a chance to make a report really stand out in the eyes of the user — and in some cases I’ve experienced, it can become a key feature in the user journey through the report.
Using the free, online boxy-svg tool, I’m able to create an SVG file. This is quite simplistic, but without access to deeper and more mature SVG-creation tools (like Adobe Illustrator) it’s a more-than-worthy option.
I’ve simply built a few shapes, but obviously there are deeper and more varied use cases (technical drawings, systems/process visuals, etc).
For each shape, I need to ensure that I access the meta-data menu and set the Title and ID to a given identifier — in this case, I’ve set the squares to “SquareX” and the circle is simply “Circle”.
By doing so, we ensure that the SVG file carries the identifier with it as we proceed into Power BI.
You’ll then need to sign up to boxy-svg (if you haven’t already) and choose to export the file as SVG. It will allow you to generate a small preview before you do. You can check this to ensure you’re on the right track.
Once you have the file exported it’s time to get into Power BI to create the necessary data with which we’ll hook up the visual. I’ve simply used the ‘Enter Data’ functionality in Power BI for speed, but if you’re linked to a data source it’s perfectly acceptable to use that in conjunction with your use case.
After the data is entered, we need to access the Synoptic Panel by OKViz visualisation. This has to be imported, which can be done using the elipsis next to the other visuals and searching for OKViz (or simply typing ‘Syn’):
At this point we’re nearing the home stretch.
I create an object on the canvas using my new visualisation tool and add my Group and Score columns into the Category and Measure fields. After doing so, the panel will come alive and give me a library of Synoptic Panel visualisations — but I can import my own SVG using the “Local Maps” option.
Now, my Panel loads up with my pre-made SVG file and a preset colour (that horrible green!)
I obviously want my visual to change colours somewhat dynamically and there are a great many ways to achieve that, but in simple terms for a bit of a ‘RAG-style’ status indicator, I can simply set the “States” menu to go Blue > Green > Yellow > Orange > Red as the data lift or lower below various thresholds.
The panels themselves will allow filtering in more complex data models, which means that users may click on their own office/state/area or any other breakdown and have the rest of the visuals in the report automatically adjust — just like changing a slicer option. This simple example has obviously wide-ranging implications for custom visualisations within Power BI and I think offers the ability to truly personalise for different businesses, users and use cases.
Happy Counting!
Jamie
