D3 Exoplanets extension for SAP Lumira

For one of our recent 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.

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.

Prerequisites

You need to install:

1. SAP Lumira 1.15
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), you can grab my updated version here.

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 fdata
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 fdata (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
   • Renamed the JSON property names so they are more friendly when displayed in Lumira (so radius to Radius, distance to Distance, name to Name)
   • Added parseFloat to the radius and distance variable references because in vizPacker 1.15 when you load in a CSV test file the numbers are converted to strings (this should be fixed in a later release)
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:        comsapsampleexoplanets
   • Name:  Exoplanets
3. In LAYOUT DESIGN tab set the plot area settings:
   • ID:        comsapsampleexoplanetsmodule
   • Name:  Exoplanets Module
4. In LAYOUT DESIGN tab remove the legend
5. In the DATA MODEL tab import the test data:
   • File: Exoplanets.csv
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 (which defines the JSON data for the chart):
   
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(fdata));
9. Paste in all of the code from exoplanets.js which you can get from my modified version of the Exoplanets Chart code
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/comsapsampleexoplanets folder to <installdir>\SAP Lumira\Desktop\extensions\bundles
     
     For example: <installdir>\SAP Lumira\Desktop\extensions\bundles\comsapsampleexoplanets
     
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 from here
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 Getting Started Guide

Resources

• D3 Exoplanets example
• My reusable version of the Exoplanets Chart code
• Exoplanets.csv
• Completed extension