Related Links: Overview: SAP Lumira Extensions | Learn how | Viz Gallery I | Viz Gallery II


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.


Viz Extensions


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.

/wp-content/uploads/2015/11/nps_831621.png

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.

datamapping.PNG

We can confirm data retrieval by adding a console alert below this code snippet and checking the browser console:

console.PNG

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.

domain_range.PNG

Using these calculated values, we can determine the scales for the axes..

scales.PNG

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.

axes-code.PNG

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!

axes.PNG


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:


rect-code.PNG

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…

rect.PNG

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:

  1. The vertical white grid lines that spread across the chart

    grids1.PNG


  2. The horizontal white grid lines that spread across the chart

    grids2.PNG


  3. The horizontal black grid line that determines where the 0 value on the Y-axis lies.

    grid-black.PNG

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.

colorpalette.PNG

Next, we want to determine where to draw and position the bubbles on the chart using the measures and dimensions of the dataset.


bubble1.PNG

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.

bubbles.PNG

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.

labels.PNG

Next, we define the positions for the text labels on chart (using the X and Y coordinates for the data points)


/wp-content/uploads/2015/11/labels2_831655.png

And thus, we have…

label.PNG

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.

tooltip1.PNG

The tooltip is made up of three components:


1. The container for the  entire tooltip

   tooltip-container.PNG

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)

tooltip-text.PNG

tooltip2.PNG

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.

tooltip-bbox.PNG

tooltip3.PNG

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.

final.PNG


Packaging this extension and checking it out in Lumira looks like this. The colors change to the Lumira color palette theme.

inlumira.PNG

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.

Cheers! 🙂

To report this post you need to login first.

Be the first to leave a comment

You must be Logged on to comment or reply to a post.

Leave a Reply