Creating a unique benchmarking visual with Sisense Blox and SVG
Use Case
Our challenge was that we needed a dynamic visual that showed a company's percentile amongst their peers within the 10th – 90th percentiles along with the median. The closest visual we could find was the Box and Whisker Plot but this widget did not do everything we need.
Creating the SVG Image and Integrating SVG with Sisense Blox
Using an Adobe XD plugin for Sisense Blox our UI design team created and svg image of what our visual needed to look like.
Copy the code generated by the XD plugin and paste into a Blox editor. You will need to replace the hard coded attributes with variable names that match the Sisense formula names you create below.
Building the Percentile Comparison Chart
Add the percentile formulas you need for each value you want to show. (ex. my percentile, median, 10th percentile, 90th percentile and the min and max).
You will then modify the svg code to show these values instead of the hardcoded values.
Using this formula gives you the position of the points on the chart.
start + (end - start) * (x - min value) / (max value - min value)
x is the value you want to plot on the chart.
As you filter or your data changes your image will change as well!
