- D3.js in Action by Elijah Meeks (book)
- “Data Visualization and D3.js” online Udacity course
- D3.js YouTube Tutorial Playlist by d3Vienno
- D3.js documentation (for version 3.x) via Github
After gaining a fundamental understanding of D3.js, I began to learn more specifically about using this to build visualization extensions for SAP Lumira using these:
- Community Wiki and Github pages for visualization extensions to view examples, explore their code, and downloading/installing them to check out in Lumira
- Former Member YouTube video “Creating Cool Lumira Visualization Extensions with SAP Web IDE”
- Annie Niangneihoi’s mini-blog series on “Tweaking Existing Lumira Viz Extensions” (special shout-out to Annie for leaving so many helpful resources behind 🙂!)
I built some simple “Hello world” bar and bubble chart extensions just to test out the process, before receiving a request to build an extension that could visualize ABC Analysis —- similar to this example from Wikipedia:
Before I get into building the extension, I want to give you a brief overview of ABC Analysis itself. I learned that ABC Analysis is a technique typically used to categorize and efficiently manage items in an inventory. Items are divided into 3 categories (A, B, C) based on the following characteristics:
- A items make up the top ~70-80% of the value of the inventory, but only 10-20% of the inventory items
- B items make up ~15-25% of the value, and ~30% of the items
- C items make up the bottom ~5% of the value, but ~50% of the items
The value of each item is found by finding the proportion of that item’s annual cost, out of the total cost of the inventory (annual cost / total inventory cost = item value). The annual cost for each item is calculated by multiplying (cost per item x annual demand = annual cost). This technique helps managers determine which items are highly important/need to be tracked closely (A), moderately important (B), and least important/can be more loosely attended to (C).
The extension is built on top of the existing Extended Bar Chart extension by Jay Thoden van Velzen. Though the Extended Bar Chart was not exactly what I needed and tied to a different dataset, you can easily alter existing extensions to better fit your needs (see Annie’s mini-blog series on this). This extension features a bar chart where both the height and width of the bars have meaning; a good base to start from for the ABC Analysis chart since it does the same.
Data Mapping & Plot Setup
First, store the dimension names in variables since the column names for “value” and “classification” may differ depending on the dataset used.
Next add a SVG element to the container, setting the width and height of the plot to be within the margins (A great practice that was already in the code!).
Create scales for color and x-y values. The color scale will use the built-in color palette array to map indexes to hex codes. The x scale will map the width of the plot to the values 0 to 100%. The y scale will map the height of the plot to the values 0 to 100%.
Functions & Variables
The sortABC() function separates the data into three arrays based on each record’s value for the classification dimension: A, B, or C. It then returns those three arrays.
We now have an array containing arrays of the data classified as A, B, and C at the indexes 0, 1, and 2 respectively. Find the lengths of each of these arrays to determine how many items each classification comprises, and add them all to get the total items.
The calcUsageValue() function sums all of the item values for each classification array.
Here store the total values for each classification, as well as the percentage of total items the classification makes up.
Append our bars to the plot with a width corresponding to the percentage of the total items it represents, and a height matching the total value of its items. The getStartX() and getStartY() helper functions are what make the bars render right after each other on the x-axis, and stack on the y-axis.
Included in the repo are two sample CSV’s, as well as the following Excel file with functions to help you do your own ABC Analysis:
The Excel file has the necessary columns. You just need to add rows with the item’s id (if applicable), the item’s cost per unit, and the annual demand for the item. The Excel sheet will calculate the annual cost for each item, total cost of the inventory, and each item’s value as a percentage. Lastly, in the “classification” column you need to label each item as A, B, or C. To do this, I recommend sorting the table rows by descending usage value. Then label the items as close as you see fit to the criteria for each classification: A items making up the top ~70-80% of the value, B items the middle ~15-25%, and C items the bottom ~5%.
The sample CSV’s also contain columns for item id, cost per unit, annual demand, annual cost, value, and classification (A, B, C). To use the extension in Lumira you need to add the dimension corresponding to value, followed by the dimension for classification. Any measure can be added.
and voilà! We have successfully modified an existing visualization extension to fit our specific use case.
In the future, I would love to see this extension gain the ability to do the ABC Analysis itself without relying on the user to classify the items. It is a somewhat tricky problem, as ABC Analysis is often arbitrary. The criteria for each classification group is often left to what works best for a particular inventory, or the preference of the manager. If you are up for that challenge, or see any more contributions you would like to make, feel free to further build on this open-source project.
Thank you for reading 🙂!