D3 Exoplanets extension for SAP Lumira

[Former Member]

For one of our event demos, we needed to use the D3 Exoplanets example chart, so here is quick write up on how I brought this into SAP Lumira as an extension.

The steps build upon what we did last time, so please read How to add a D3 extension for SAP Lumira first.

Updated for SAP Lumira 1.20 as there were improvements made for creating SAP Lumira  extensions since this was first written

D3 Exoplanets example:

Step by step guide

If you want to skip to the end, look at the bottom of this page to download the finished Exoplanets extension.

What applications do you need?

You need to install:

1. SAP Lumira 1.20 or later (which includes vizPacker), you can get your free Personal Edition here
2. Google Chrome as vizPacker only works with Google Chrome

Prepare the D3 code for re-use

To save time I have already made these changes to a local copy of the D3 Exoplanets Chart code (look for the // MDL comments), see the resources section (below).

At a high level here are the the changes that I made original D3 Exoplanets example to make it reusable:

1. Create a new file called exoplanets_csv.js:
   • This file will have a hard coded version of the exoplanets.csv file but as a hard coded JSON string and assigned to a variable called data
2. Copy and save the index.html file
3. Separate out the JavaScript code from index.html file into its own exoplanets.js file:
   • This will make it easier to put into Lumira later on
4. Edit exoplanets.js:
   • Remove the code that dynamically loads the exoplanets.csv file - as we have that data already in data (step 1)
   • Split references of the size variable into chartWidth and chartHeight so we can adjust to fit in the vizPacker
   • Change the svg variable to vis to it more closely matches vizPacker
   • Like we did for the Bullet Chart add the VizPacker/Lumira code that helps us get the names of the measure and dimension group columns to use (nameCol, radiusCol, distanceCol)
   • Refer to the column names when accessing the exoplanet data(nameCol), radius (radiusCol) or distance (distanceCol)
5. Include both JavaScript files in index.html

Create the D3 extension

Follow these steps (which build upon what we did last time with the D3 Bullet Chart) to create and test your extension inside the vizPacker:

1. Using Google Chrome
   Open: <installdir>\SAP Lumira\Desktop\utilities\vizPacker\vizPacker.html
2. In LAYOUT DESIGN tab set the chart settings:
   • ID:        com.sap.sample.exoplanets
   • Name:  Exoplanets
3. In LAYOUT DESIGN tab set the plot area settings:
   • ID:        com.sap.sample.exoplanetsmodule
   • Name:  Exoplanets Module
4. In LAYOUT DESIGN tab remove the legend
5. In the DATA MODEL tab import the test data:
   • File: Exoplanets.csv, see the resources section (below)
6. In the DATA MODEL tab create the measure and dimension set (aka groups) and map the test columns to them:
   • Map radius to measure set 1 and call it Radius
   • Map distance to measure set 2 and call it Distance
   • Map name to dimension set 1 and call it Name
7. In the render function, change the code so it looks like this (adds the vis container):
   
8. Hint: If you want to see the JSON data structure that is passed in for fdata, add this line after the fdata code:
   • alert(JSON.stringify(data));
9. Paste in all of the code from exoplanets.js which you can get from my modified version of the Exoplanets Chart code, see the resources section (below)
10. Change the chart so it adapts its size to fit:
    • Find these two lines (which are hard coded to 960 pixels):
      • var chartWidth = 960;
        var chartHeight = 960;
    • Change them so the chart adapts to the width and height:

      • var chartWidth = width;

        var chartHeight = height;
11. Test your chart with vizPacker, if it does not work you will need to debug like you would have done with the D3 Bullet Chart
12. Next you are ready to pack(age) and test inside SAP Lumira

Pack and install your extension into SAP Lumira

1. The extension will be packed into a ZIP file. Click the ZIP file link to download it
2. Google Chrome will download the packed ZIP file
3. Select the downloaded ZIP file and select Show in folder
4. Extract out the the packed extension and install it into SAP Lumira:
   • Extract out all the files and folders from the ZIP file
   • Copy the bundles/com folder to <installdir>\SAP Lumira\Desktop\extensions\bundles
     
     For example: <installdir>\SAP Lumira\Desktop\extensions\bundles\com
     
5. Next we can test the extension inside SAP Lumira

Test your D3 chart inside SAP Lumira

1. Start SAP Lumira
2. Import the Exoplanets test CSV file, see the resources section (below)
3. Select the Exoplanets extension
4. Use these settings with the chart:
   

   Radius	radius
   Distance	distance
   Name	name

5. The Exoplanets should now look like this when running in Lumira:
   
   
   
   Note: If this does not work, you will need to refer to the SAP Lumira SDK Getting Started Guide on how to debug within SAP Lumira
6. That's it, you have created, packaged and tested your extension using the vizPacker!
7. Congratulations and happy coding...

More information

• How to add a D3 extension for SAP Lumira
• SAP Lumira SDK Getting Started Guide
• D3 Exoplanets example

Resources

You can find all of the Exoplanets files on GitHub.