During his keynote at the internal developer conference(D-Code) in Bangalore, Michael Reh EVP of SAP’s Business Information and Technology unit, announced the local ‘Visualize Your Success – the Lumira Extension Challenge‘! All SAP employees in India were invited to participate and the winning criteria was set “No Boundaries“. The guideline was to build & submit a Lumira extension with VizPacker and to use the extension to build and share a story and a use case. Exciting prizes were up for grabs too, including tickets to Sapphire (Orlando).
To start with, several useful resources were provided – Lumira download link, D3 Gallery & Data Geek finalists, Matt Lloyd blogs & YouTube videos, and of-course the very useful Lumira documentation. Contestants had exactly five weeks to learn about Lumira, D3, create the extension and submit their visualizations, all this was to be done apart from regular office work – during evenings and/or weekends. At end of five weeks, over fifty visualizations were submitted and an internal panel of Lumira experts worked hard over a weekend to choose the winners.
I am very excited to describe the awesome experience of creating a custom extension that was adjudged the first runner’s-up entry: “Time-Series Chart”
The one thing on top of my mind was to create a highly re-useable visualization that could display data across various dimensions & measures. An initial idea was to create a radial+slider chart but I soon realized its limitation of being able to show at-most two dimensions. Next up was the “Time-Series chart” submission that could display multiple time dimensions across the X-Axis (Days/Months/Years or Minutes/Hours/Days etc), a dimension on the Y-Axis and multiple measures.
Features of Time Series Chart
- Multiple dimensions support
- A mini-view and a zoomed-out main view area
- Selectable & scrollable areas in the mini-view
- Minimum selection area for a set of measures across the lowest(bottom) dimension
- Expand selection to span multiple dimensions
- Measures Axis for selected data displayed at the top
- Selected area also highlighted in
- When measures axis is too cramped, axis labels changes to lowest dimension with minor ticks representing the measures
- Display measure label once when only 1 measure is available
- Color coded ranges for selected dataset
- Numbers for individual items are displayed; Hovering over an item displays all information (dimensions, Avg etc)
- Average values for currently selected dimensions (No average if only one set of measures are available)
- Animations for selection changes, tooltip(item hover), axis changes etc