SAP Lumira Chart Extensions Demonstrated at CodeJam Vancouver

[dongpan]

I was delighted to run the SAP Lumira CodeJam event in Vancouver on Jun 24, 2014. I really enjoyed the open atmosphere and interesting discussions that I had with the participants. A big THANK YOU again to all of you who joined the event.

As I mentioned in the session, I would like to share the sample source code of some of the cool demos that I showed at the event.

Disclaimer: the sample code shared here is to show how easy it is to port cool D3 chart into SAP Lumira and illustrate the best practices in creating Lumira chart extensions. The code is shared as is and not meant for production use. Make sure you enhance and test them before using them in production.

1. Stacked Column Chart with a value line (2 Y-Axes)

This chart is an enhancement to the stacked column chart, so that a value line is overlayed on top of the stacked columns. Unlike its original version, it is capable of handling a dynamic number of measures to render the stacked columns, and the chart is not hard coupled to static column names.

The original D3 chart can be found here: http://bl.ocks.org/otfrom/4754261

2. Chord Diagram

Chord diagrams show directed relationships among a group of entities.

The original D3 Chord Diagram can be found here: http://bl.ocks.org/mbostock/4062006

3. Sankey Diagram

Sankey diagrams visualize the magnitude of flow between nodes in a network. It can be used in scenarios such as illustrating in which areas government budget is spent.

The original D3 chart can be found here: http://bost.ocks.org/mike/sankey/

4. Force-directed Layout

Force-directed graph simulates the equilibrium state of a system of force, resulting in edges of more or less equal length and minimum No. of edge crossings, an aesthetically pleasing way to represent relationships among networked entities, e.g. connections on LinkedIn.

The original D3 chart can be found in the book: D3 Tips and Tricks  by Malcolm Maclean

5. Population Pyramid Chart

A population pyramid chart shows the distribution of age groups per gender at various points in history. Use the left/right arrow keys to observe the changing population. The blue bars are the male population for each five-year age bracket, while the pink bars are the female population; the bars are partially transparent so that you can see how they overlap, unlike the traditional side-by-side display which makes it difficult to compare the relative distribution of the sexes.

The original D3 Population Pyramid chart can be found here: http://bl.ocks.org/mbostock/4062085

You can find the source code and sample data files in the attached zip file.

I hope you like the charts:).

Update on 01/23/2015: the source code and the packaged extensions of the Popluation Pyramid Chart, Stacked Column with Line Chart, Force Diagram and Chord Diagram have been shared on Github at https://github.com/SAP/lumira-viz-library.