Sequences Sunburst

[former_member183462]

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

In this age of thriving eCommerce businesses, online shopping and retailing, it is very important for businesses to be able to keep track of consumers' choices when they visit shopping websites, order products and contribute to the eCommerce ecosystem. As an example, we can consider online shopping websites - eCommerce websites like Amazon, eBay etc., and also independent shopping websites for different retailers like Macy's, American Eagle etc. For any of these kind of websites, it would be great for the business owner to know the flow of action for the visitors of these websites.

The sunburst extension is called the 'Sequences Sunburst', particularly since the sunburst chart represents the sequence of actions that different users perform when they visit a website. It helps to know the user action flow, from a business owner's perspective, so that they get an idea of how users navigate through their website. This can help business owners revamp and develop their business further to attract more consumers towards the products they market and sell.

This extension is based on the D3 example: Sequences sunburst which is further based on Mike Bostock's D3 Sunburst Partition which looks like this:

Let's dive in to the building of this extension in detail:

STEP 1: Foreign objects

When you know your chart has different elements, you tackle them one by one, starting from the simplest. For instance, in this example, we have 3 elements: 

• The breadcrumb trail at the top, which indicates the sequence of events (let's call this the sequence)
• The legend
• The text in the center of the sunburst
  
• The main chart

Out of these, the sequence and the legend are simpler than the main chart, which requires more effort to produce. So, let's tackle these two first. The center text can come later.

After defining these elements, we append them to a div in the main HTML DOM as foreign objects. Be careful to append these elements only to a DIV and not HTML or else Lumira's DOM structure may confuse the HTML element in Web IDE with that of Lumira's main HTML element.

We won't be able to see the sequence breadcrumb and the legend yet, because we haven't mapped data to them yet, duh! And that's what we do next.

STEP 2: Data mapping

Our data is structured in a way that we have one measure and one dimension - the dimension being the sequence of events as a string, and the measure being the number of hits on each sequence. To make it clearer, let's see what a sample of the dataset looks like:

We can see that the Search column has the sequence of events for navigating each page of a website. For instance, the number of times the sequence of pages was "Check Item - Cart - Cart - Cart - Cart - Payment" was 1497, and so on. We then map these data columns as dimension and measure sets.

The data mapping can be seen in the console log:

Moving on, let's create the other elements now!

STEP 3: Defining all elements

This chart is slightly complex in that the elements are interdependent on each other, in what they represent. The legend items, the breadcrumb sequence items, the center text, and of course the arcs of the sunburst in the main chart, are all dependent on the data and the functions used to manipulate them.

Let's first define these elements one by one.

First, the dimensions of the sunburst and the breadcrumb:

And then the text elements:

And then sunburst partition, the arcs, and very importantly, the data object:

json uses the buildHierarchy function, incorporating the data with the dimension and measure sets.

While we're at it, let's also add the color palette to use it in the legend, as well as the sunburst.

STEP 4: Draw the visualization

Yes, now we first call the visualization function, which we define subsequently. This main function is called:

createVisualization(json)

And then we append the inner circle of the sunburst, followed by the arcs, also called "paths". And these paths are mapped with the color palette, and additional mouse hover events.

These mouseover and mouseleave events are also defined in separate functions. We also have another custom function to get the ancestors of each node.

The center text can be modified in the mouseover function where the previously defined text elements are appended at the center of the sunburst.

And we finally define the buildHierarchy function we were talking about earlier, which transforms the two-column dataset into a hierarchical structure suitable for a partition layout. The first column is the sequence of events, from the root node to different leaf nodes, separated by hyphens. The buildHierarchy function includes the data csv, the dimension and measure sets.

The result is a sunburst chart with text at the center, that deploys the color palette.

Pretty, isn't it? Now all we need to do is add the breadcrumb and the legend and of course, map it to the data.

STEP 4: Draw the breadcrumb and legend

Inside the main createVisualization(json) function, we call the respective functions for drawing the breadcrumb and the legend:

These functions are defined individually. For the breadcrumbs, we have three unique functions:

initializeBreadcrumbTrail(), breadcrumbPoints() and updateBreadcrumbs(nodeArray, percentageString)

After defining them, we have our breadcrumb trail visualizing our sequence of events:

Similarly, for the legend we define the drawLegend() function, which yields this:

Combining all of these together, we have the final chart:

And this is what the extension looks like in Lumira:

I would like to say a special thanks to my mentor and colleague matt.lloyd for his valuable input and help with which I was able to reproduce this D3 Sequences sunburst chart.

This extension is now open sourced and available at lumira-extension-viz/Sunburst_Sequence at master · SAP/lumira-extension-viz · GitHub

Here's to new extensions in 2016! Happy new year 2016 to all! :smile: