Country Visas: A Chart with Tooltips and Images

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.

Including external resources

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:

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:

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

Data mapping, calculation of domains, ranges and defining the scales for the axes

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

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

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.

Making sure the numbers are actual numbers

Just to confirm that the measures are actually read as numbers

Mapping the column stacks to custom colors

We define the color palette with a custom color range:

And then we map it to the column stack sections:

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.

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.

Append tooltips

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

Append flag images to columns

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

Add the legend

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.

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

This extension 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 · GitHub