I will be perfectly honest when I say I was not the biggest fan of SAP Lumira (previously Visual Intelligence) when it was first released. I found it to be an imitation of a rather good product already available in the market and several cycles behind in terms of functionality. Still within the last 18 months, the gap narrowed with the competition and customers began taking a more serious look at SAP Lumira for data discovery. For me, though, I needed something more.
Since most development on SAP Dashboards has ceased, during those 18 months I began investigating other open source solutions for data visualizations. This is where I found D3, a JavaScript library for manipulating documents based on data. D3 stands for Data Driven Documents.
A quick glance on the website https://d3js.org and you can see the level of detail and interactivity between components in a single visualization. What’s even more amazing than the visualizations is you will very likely find the code accompanying the graph or chart available by the developer for you to use. I soon began to brush up on my JavaScript and CSS skills to help me to start develop new visualiations with D3. Around that same time, SBOUC 2014 was around the corner and I saw on one of the sessions a title for D3 integration with SAP Lumira by Matt Lloyd of SAP.
It had been some time since I was excited about a session at SBOUC and Matt Lloyd did not disappoint. After attending the session, I decided to start implementing some of the code inside of VizPacker with SAP Lumira to begin bringing in custom components into it with D3. Please note that this is available only in versions 1.20 and greater.
It’s always good to start with a simple ‘Hello World’ example when building in a new coding environment (See below for link to demonstration by Matt Lloyd).
I started to investigate further and look for other opportunities to bring in new components into SAP Lumira built with D3.js.
I came across a great component that works interactively simply by moving your cursor arrow left or right. It was developed by Mike Bostock, the creator of D3. It’s called a population pyramid component and it can be found in the following location:
https://bl.ocks.org/mbostock/4062085
I then came across this great tutorial by Dong Pan, SAP Customer Experience Group, as to how to bring the code for the population pyramid into SAP Lumira. The code template within VizPacker is generic enough where it allows you to copy code from other sources and paste it in the correct location within Lumira to begin incorporating custom components.
I incorporated the code into a file that can be imported into your desktop Lumira file. Additionally, you can copy the data for the pyramid from https://bl.ocks.org/mbostock/4062085, save it to Microsoft Excel or CSV format and import it into Lumira to test your data.
Whichever format you choose, import it into your Lumira Desktop. As you start to visualize the data, you will see a new section for visualizations. Click on it and drag it onto your canvas. This should be your custom Population Pyramid component.
You’re almost there! Pull in the ‘people’ measure into your Y-axis and year, age, and sex into your X-axis dimensions.
You have now added a custom component on your Lumira Desktop.
I feel that D3 integration with Lumira will be a game changer and will encourage integration between open source developers and enterprise developers moving forward with SAP. My hope and feeling is that this would allow for greater innovation. Similar to how in the latter part of the last decade ‘Xcelsius’ brought in external innovation into the enterprise visualization sphere with 3rd party add-ons.
This year, EVT will push to bring you more extensions with SAP Lumira to bring an additional slice to your data and visualizations.
That is really it. To download the new EV Technologies SAP Lumira® Extension please visit our Software Downloads page (registration required).
Helpful Links
Hello World Extension by Matt Lloyd
How to add a D3 extension for SAP Lumira by Matt Lloyd
Creating and Managing Visualization Extensions with SAP Lumira by Dong Pan
(Please note that adding and removing custom D3 components is completely reversible. All that is required is to remove the bundle that was saved into your extensions folder and then restart SAP Lumira.)