Dynabars – Can we travel in time?
During his keynote at D-code, an SAP internal developer conference, 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 criterion was set to: “No Boundaries“. The guideline was to build a Lumira extension with VizPacker and to use the extension to narrate a story depicting a powerful 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. The contestants had exactly five weeks to learn about Lumira, D3, create the extension and submit their visualizations. With just a little effort during the after-hours and weekends, over fifty visualizations were submitted and an internal panel of Lumira experts worked hard over a weekend to choose the winners.
And here’s the story of the winning entry – Dynabars !
It has always been the ultimate dream to be able to travel in time. Being software developers for many years, Shailesh Velaparambil and myself often wondered whether a software implementation of time travel would make sense and that is when the Lumira extension challenge came along. The two of us felt that we could bring this dream to life with a new exciting visualization of data growth.
While exploring the existing options in SAP Lumira as well as the open source world, we realized that almost all data visualizations have a common thread – they represent a static point in time. They show data as of today or any other day provided as input. We limit ourselves as soon as we choose a point in time because we only see aggregated data as of that day. We don’t get to see how that data grew over time and so we miss some key insights. This led us to ask a simple question – “Can data tell us its story, can we travel through time with data?” This was the inception of “Dynabars”. They are dynamic bars that display the growth of data over time. Coupled with a Start/Pause/Resume button Dynabars is as thrilling and insightful as a movie that tells us the story of data. 😎
SAP Lumira – “The Whole Nine Yards”
SAP Lumira has been one of the main buzzwords in recent months. As with any powerful tool, it is the simplicity that its drives mass adoption. Lumira can be configured by anyone with any data source in a few minutes. And we found out that the hype was well justified when we started tinkering with it. Extending Lumira is almost as simple as using it. In the end, we felt it is nothing less than a magical wand in the magnificent world of data visualization.
To build a unique, creative visualization, not published anywhere along with the rather scary thought that we were unfamiliar to the details of how Lumira worked; sounded pretty hard. To add to it we had absolutely no D3 skills and we were completely new to Vizpacker, the tool provided to build a Lumira extension. At the outset it seemed like a recipe for disaster – This challenge was definitely a “Challenge” 🙂
But as we took our first steps into the challenge we were pleasantly surprised. The sample videos on how to create a Lumira extension using Vizpacker completely drove away all our anxiety, what seems to be a big hurdle, now seemed like cake walk. With our confidence levels rising we went through all the learning resources on SAP Lumira. We were pleasantly surprised by the number of visualizations supported, varied data sources and the simplicity of the product. Being able to participate and create an extension for Lumira would definitely be a matter of pride.
And so we moved from very uncertain participants at an amazing speed to Lumira-aware, Vizpacker-proficient, excited participants armed with all resources to crack the challenge and the buoyancy to do wonders .
The Story of the Storyteller
And here is how we built Dynabars:
- We sketched a rough wireframe of what we wanted to build focusing on some key aspects
- It had to be simple and creative
- It had to highlight the important information making it easy to derive insights
- It had to enable a wonderful user experience
- Now clear with ‘WHAT’, we had to pick up on the ‘HOW’. D3 was completely unfamiliar. However, numerous blogs and you tube tutorials on D3 quickly helped us understand the basics of how a visualization can be created in just 2 days. Coding in vizpacker was straightforward. Since animation was a very important piece of our idea, we read up relevant blogs on how to animate objects in d3. To our surprise, there were dozens of examples and within a week we had the first basic version of our extension completely working. We had a basic bar chart, an SVG rectangle that mimicked a Play/Pause button, aggregation logic that aggregated subsets of data per time interval once the ‘Play’ button was clicked and a small circle atop each bar to indicate the growth rate of the respective bar compared to the previous time interval.
- The first version did work as we expected, however the ‘WOW’ was still missing. We then reviewed the color schemes, the position and sizes of the elements, the user interaction and the information that was displayed. My mom too suggested a few inputs on what data would be insightful. With a few minor tweaks on the UI, a comprehensive tooltip and an embedded color-coding logic that colored the bars based on the growth percentile of each bar per time interval, we were happy with what we had built and christened it ‘Dynabars’.
That’s our story of how, in nearly a blink of an eye, we created an extension on the ever so fascinating SAP Lumira. The easy of learning D3, the power and simplicity of VizPacker definitely enables Lumira to move from excellent to unparalleled – that’s our say!
Features of Dynabars
- Displays incremental growths of data by appending subsets of data over a time lapse, essentially traveling through the dataset in time.
- During each time interval, the bars with the highest (above 90 percentile)and lowest growths(below 10 percentile) are highlighted in green and red respectively.
- Each bar has an individual indicator (a tiny circle) displayed on top of the bar that indicates the growth rate of the given bar compared to the previous time interval. A red indicator denotes a decline in growth rate and vice versa for a green one. Hovering over the indicator displays the exact growth rate as a tooltip.
- The Start/Pause/Resume button enables pausing the time travel through the dataset.
- Hovering over the Dynabars displays a tooltip that highlights the insightful information with respect to the given bar like the current total of the bar, the growth rate, the current increment on the bar etc. The information displayed in the tooltip updates are the bars travel through time.
A peek into the future
We believe that Dynabars will pioneer a series of dynamic charts in SAP Lumira for time series data. The concept of time lapsing aggregated data can be extended to pie-charts, donuts and all other existing visualizations. The potential use cases are limited only by your imagination. It is a concept that can easily be integrated with existing SAP Lumira controls.
Until next TIME,
Shiney Sooraj and Shailesh Velaparambil.