After a busy couple of months organizing a hackathon and also gaining experience in how the world of product management works, I’ve come to know how important it is to make the products that you create and build, relevant to the business world. We don’t want to just develop products that look fancy and eye-catching, but we also need to focus on catering to the business needs of the audiences that we target, for the products that we build – in this case, SAP Lumira extensions. The combination of an aesthetically pleasing data visualization chart with a business-relevant use case equals a rich concoction that translates itself into a successful product.
We already have a variety of visualization extensions for SAP Lumira with different use cases. How nice would it be to add some extensions that can be used for project management methodologies? Some that different departments of an organization like sales, finance etc. could put to use. One of these is the Extended Bubble Matrix – a bubble chart with a differentiation in positive and negative chart areas.
The Extended Bubble Matrix visualization is a chart extension I built for SAP Lumira to cater to generic business use cases that typically involve negative data parameters. In this blog, I describe step-by-step how I built this extension from scratch.
As a sample, I used fake data involving the Net Promoter Score, Revenue Growth and Revenue for different domestic airline companies. Net Promoter Score (NPS) is an indicator of growth for a company, product or line of business. If the NPS for an organization is higher than those of its competitors, that organization will likely outperform the market. Managing the organization to improve its NPS will also improve the performance of its business. Whether the aim is faster growth or increased profits, NPS can be used as the foundation of a measurement framework that is tightly tied to the customer journey.
The NPS Calculation
NPS can be calculated using the answer to the question, “How likely is it that you would recommend this company or product to a friend or colleague?”, on a scale of 1 to 10. This is called the NPS question.
Respondents are grouped as follows:
- Promoters (score 9 – 10) are loyal enthusiasts who will keep buying and refer others, fueling growth
- Passives (score 7 – 8) are satisfied but unenthusiastic customers who are vulnerable to competitive offerings
- Detractors (score 0 – 6) are unhappy customers who can damage your brand and impede growth through negative word-of-mouth
Subtracting the percentage of detractors from the percentage of promoters yields the Net Promoter Score. Technical theory aside, let’s jump into the practical development part!
STEP 1: Data Mapping
For SAP Lumira extensions, it is very important that data measures and dimensions are not hard-coded, but rather loaded into the project and used dynamically, so that the extension canbe extended for other use cases as well. As mentioned before, this chart uses 3 measures: Net Promoter Score (X-Axis), Revenue Growth (Y-Axis), and Revenue (bubble size), and one dimension: Airline (the name of your product/business/company).
Then I mapped these according to the measure and dimension sets in SAP Web IDE respectively as Measures: measure1, measure2, measure3, and Dimensions: dim. We also make sure that our numerical measures are converted into numbers.
We can confirm data retrieval by adding a console alert below this code snippet and checking the browser console:
Yay! Now that we have our data mapped into the project, let’s move forward – – –
STEP 2: Calculation of domains, ranges and determination of scales for axes
To be able to scale the chart according to dynamic measures for each axis, depending on the dataset, it is better to draw the axes with dynamic ticks, calculated according to the domain and range of the measures in the given dataset. Here I calculated the minimum and maximum domain values for the X-Axis, Y-Axis and the bubble radii. This can be done with the help of d3.min and d3.max – D3 APIs for calculating minimum and maximum values.
Using these calculated values, we can determine the scales for the axes..
Notice that everything here is dynamic and does not depend on hard-coded values, which implies the reusability of this chart for other datasets.
STEP 3: Draw the axes
With the help of the calculations done above, we append the X and Y axes.
Notice how the classes are namespaced according to the extension name so as to avoid CSS naming conflicts in the overall DOM structure in Lumira. These are part of the best practices for creating visualization extensions. The axes labels are also dynamic with respect to the measures in the dataset.
And..voila! We have rendered the first component of our chart, and a vital one at that – the axes!
STEP 4: Draw the rectangular, positive chart area
To represent the positive area of the chart, we draw a rectangle (colored gray for brand neutrality, but which can be customized according to your business needs). To make sure the rectangular area doesn’t overflow off the chart canvas area, I wrote two custom functions:
These functions calculate what the origins should be for both axes, as xOrigin and yOrigin. Anything greater than (0, 0) on the chart should be part of the rectangular area. This comes in handy even when drawing some of the grid lines in the chart. These calculations enable the determination of where the rectangular area needs to be positioned on the canvas. And thus we have…
We draw the rectangular area before we start drawing other chart elements because we want it to be at the background, behind every other element.
STEP 5: Draw grid lines
There are three types of grid lines:
The vertical white grid lines that spread across the chart
The horizontal white grid lines that spread across the chart
The horizontal black grid line that determines where the 0 value on the Y-axis lies.
Each of these grid line types are defined and then, appended. Apart from the X and Y origin lines, we do not define the ticks for anything else on the axes. This allows for scalability and dynamicity of the chart.
STEP 6: Draw bubbles
This is the real deal – appending the bubbles to the chart, mapping each of them with the correct data points.
First we use the color palette defined in SAP Web IDE to be used to color our bubbles.
Next, we want to determine where to draw and position the bubbles on the chart using the measures and dimensions of the dataset.
These calculations help determine the coordinates and the radius length for each data point (bubble). And now, we finally append the bubbles using these calculations.
Each of these bubbles represent each data point in the dataset, and are mapped accordingly in the legend as well.
STEP 7: Optional data labels
We have the bubbles now. But let’s add some data labels for each bubble (which can be toggled). For this, we append a foreign object as an HTML form element with a checkbox that toggles the text data labels.
Next, we define the positions for the text labels on chart (using the X and Y coordinates for the data points)
And thus, we have…
Togglable data labels using a checkbox!
STEP 8: Draw tooltips
Finally, as a finishing touch, we can add custom tooltips to the data points. It is easier to get the tooltip from the current position of the mouse.
The tooltip is made up of three components:
1. The container for the entire tooltip
2. The tooltip text that represents the data (which is again not bound to any static data but uses dynamic data mapping for measures and dimensions)
The result gives you a text tooltip – which looks a bit odd by itself. Which brings us to the next component.
3. The bounding box for the tooltip text. This is achieved with the help of the getBBox API in D3.js that gets the bounding box of an element.
Now that looks more like it. I’ve made the tooltip a bit transparent to give that glassy look so that it does not overlap with other data points or chart elements.
All these components make up the tooltip, which is the cherry on the top for this extension. And now we have our finished product in SAP Web IDE.
Packaging this extension and checking it out in Lumira looks like this. The colors change to the Lumira color palette theme.
Thank you all for taking the time to read my blog post. The project is now open sourced and is available on GitHub at lumira-extension-viz/Extended_Bubble_Matrix at master · SAP/lumira-extension-viz · GitHub
Please feel free to add your comments, suggestions or ideas.