Country Visas: A Chart with Tooltips and Images

[former_member183462]

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

This visualization extension for SAP Lumira was developed by one of the winning teams, Team Limitless, at the SAP Lumira BizViz Hackathon 2015 held at the Palo Alto office in September 2015. The team consisted of seven members: Jordan Christensen, Uma Devi Jonnalagadda, Ramchand Karumuri, Ka Kit Lam, Karthik Rayala, Jitendra Sharma and Daniel Nava. These were both SAP and non-SAP employees, students, independent developers, customers and partners, a rich variety of participants who worked together as a team to develop this beautiful extension called the Country Visas extension - a stacked column chart with tooltips and images.

The use case for this extension covers a scenario where one can visualize visa application data for different countries as a count, for different categories of applicants. This extension currently features a limited number of countries, and can be considered as a subset of countries, which is further extensible to fit in more countries and compare their numbers collectively.

The images were custom designed for the flags of the countries included in the dataset that was used. The columns are stacked to fit in the categories for each country. Currently, there are three stacked sections, featuring the current three categories of visa applicants for each country: families, professionals and students.

Let's move ahead to how the extension was built.

Step 1: INCLUDING EXTERNAL RESOURCES - A D3 tooltip library & images

• For the tooltip, the extension uses an external JavaScript library in D3, which we name "LimitlessTooltip.js". This is required into the extension project using require.js which is in-built in the Web IDE project:

     define("limitless_viz_ext_chartwithtooltipandimage-src/js/render", ['require','LimitlessTooltip'], function(require,LimitlessTooltip) {

• We also want to append the images of the country flags to each column of the chart. For this, we add an "Images" folder to the /resources section of the project, and include all the image PNGs in that folder. These can then be required as follows:

Note: Remember, this can be expanded for any use case to include any thumbnail image we want for representing our columns. We can do so by:

Right clicking on the /resources folder --> New --> Folder

Right click on the folder and add images to the new folder by Import -> From File System. You can add any image to the project in this way.

Also, remember to put in the correct path.

For example, change 'limitless_viz_ext_chartwithtooltipandimage-src' to the appropriate extension folder name 'companyname_viz_ext_extensionname-src' and then /resources/imagefolder.

Make sure all the images are in the same format (png/jpeg etc. although png is preferred). Accordingly, change the file extension name in the above code. Consider this even for lowercase/uppercase file extensions since JavaScript is case-sensitive.

For example, if you use .PNG, change to .PNG

     becomes

Another thing to remember is that, the names of the image files should not have any whitespaces or they won't load into the Web IDE project. They also need to be consistent with the names of the dimensions in the dataset or else the images won't load to the visualization chart.

For example, if your dimension is called 'Sierra Leone', rename the corresponding image to 'SierraLeone' as well as the data field in your data source the same.

This is extremely important in order to load images onto the extension appropriately.

Once we've acquired these external resources which we will be needing in our project, we can move forward to the actual building part.

Step 2: DATA MAPPING, CALCULATION OF DOMAINS, RANGES AND DEFINING THE AXES SCALES

We first map the data to the extension with respect to the measures and dimensions so that data can be visualized dynamically.

Note: For a generic use case, we can edit these lines to:

var dimension = meta.dimensions('X Axis')[0];

var measures = meta.measures('Y Axis');

Accordingly, we must replace every occurrence of 'countryName' and 'visaValues' with 'dimension' and 'measures' or the correct variable names assigned respectively.

After this, we can define the X and Y scales and axes.

Step 3: ADDING THE CHART AND TOOLTIP TO THE MAIN CHART BODY

Here we make sure that when we draw the main chart and the tooltip, they are appended to the main chart body of the visualization.

Step 4: MAKING SURE THE NUMBERS ARE ACTUAL NUMBERS

Just to confirm that the measures are actually read as numbers

Note: Again, you may replace the measure variable names to your liking, for your use case.

Step 5: MAPPING THE COLUMN STACKS TO CUSTOM COLORS

We define the color palette with a custom color range:

Note: For more measures, we might want to just map the color palette to the default one for Lumira:

          var color = d3.scale.ordinal().range(colorPalette);

And then we map it to the column stack sections:

Note: By the way, we replace

               return key !== 'Country';

                    with

               return key !== dimension;   //the variable you assigned to your dimension set for X Axis

Step 6: DRAW THE AXES

Here comes the fun part now. Let's get to rendering our first element:

Thus we have our chart skeleton with the axes and tick names.

Step 7: DRAW THE STACKED COLUMNS

The next elements we  render to the chart are the stacked columns, which are also the main elements of the chart.

Step 8: APPEND TOOLTIPS

Next, we append the tooltips for each stacked section of every column.

Step 9: APPEND IMAGES TO COLUMNS

The custom images from the /Images folder are now appended to the top of each column.

For another use case, we can also append other custom images, like in this custom chart I created for the developer community that shows the collective views for SCN blogs on open sourced extensions, month after month. I used the thumbnails of all extensions as the custom images. The resultant chart looks like this:

In this way, you can add any custom image to your chart elements.

Step 10: ADD THE LEGEND

Moving back to the original extension, finally, the chart is now ready. All that's left now is to add a custom legend. Each of the stacked sections of the columns represent each measure in the dataset, and are mapped accordingly in the legend.

Step 11:  Deploy to SAP Lumira

Our final chart extension looks like this when imported into Lumira:

Don't forget, this chart is extensible to the capability of adding larger datasets to include more countries and add more custom flags for each country. It is also reusable for other use cases like a business comparison scenario where the stacked sections can represent different products or product types for different businesses. The use cases possible for this extension are many and is a very recyclable and reusable chart.

The extension is available for download on: lumira-extension-viz/CountryVisas_Chart_with_tooltip_and_image at master · SAP/lumira-extension-viz ...