One of the great things about Deneb and Vega-Lite is how quickly you can customize existing visuals to suit your specific requirements. I saw a speedometer gauge rendered in HTML and CSS inside Power BI the other day and wanted to see if I could create a similar visual using Deneb.
I again started with the Ring Chart template that I posted a while ago, and with less than 30 minutes of changes (it again actually took me significantly longer to do the template development, screenshots, and this write-up than it did to modify the Deneb/Vega-Lite code), had a useful template for a speedometer with poor, average, and good background areas and a needle, all adjusted from the Power BI report.
This template illustrates a number of Deneb/Vega-Lite features, including:
- a title block setting additional display properties
- a transform block to extend the dataset by converting the percent values from Power BI into arc radians
- a parameters block to enhance the visual by setting and calculating values (e.g., ring outer radius, ring inner radius, etc.)
- view composition via layering 5 marks on top of one-another (3x ARC [gauge], 1x ARC [needle], 1x TEXT [needle percent value])
The intent of this template is not to provide a finished visual, but rather to serve as a starting point for further custom visual development.
Also included is the sample PBIX using what-if parameters as a demo.
NOTE: This template is provided as-is for information purposes only, and its use is solely at the discretion of the end user; no responsibility is assumed by the author.
Greg
deneb.speedometer.0.2.json (6.1 KB)
Deneb Templates - Speedometer - V2.pbix (1.3 MB)