Hi, this is my first blog entry in the Lumira space (No, I'm not lost, I promise! :smile: )
I've spend most of my time over in SAP BusinessObjects Design Studio space but once in a while I get a wild hair to try something different. As those who follow me in the Design Studio space know, we have a pretty big Open Source repository available for Design Studio extensions. (SCN Design Studio SDK Development Community) Our GitHub repo is here: org-scn-design-studio-community/sdkpackage · GitHub -- While our page and GitHub repository isn't always as pretty/tidy as what I've seen over in Lumira's equivalent page and repo, I have some visualization components that I thought would be a good fit to try to port over to Lumira so here I am. :smile:
The component I chose to use is a Hexagonal Binning component that I developed a while back, and posted a recent blog entry in Design Studio that you can see here (Design Studio SDK - Hexagonal Binning) and this is an adaptation for it that is meant for Lumira, but not necessarily a copy and paste verbatim with that entry.
So what is it? A HexBin Chart allows us to visualize x/y data in a bit of a different way. Traditional Scatter Plots and Bubble Charts are good at showing correlations (or lack thereof) such as below:
A Scatter Plot showing Hits (x-axis) compared to unique visitors (y-axis).
The example above is a manageable visualization because of the low volume of data points where the legend and colors are identifiable and can for the most part be distinguished from one another.
For larger data points, this may not be as useful:
A Scatter Plot showing 2000 data points. Or a pile of marbles.
This visualization doesn't seem to be as useful. There's no indication if there's a certain area of more plot density than another. Generally, the data points seem to be within a range of 0 to 500 and 200 to 700, but how uniform is the distribution?
I took a look at some of Mike Bostock's examples and liked what I saw with his HexBin example here: Hexagonal Binning
Let's look at the HexBin's representation of this same data:
A HexBin using 'Median' sampling to set color binning.
As you can see above, we can use hexagonal binning to start binning certain thresholds of density into a color scale (dictated in color and occurrence by your color palette). I have 3 automated options to try to bin them. Above was using Median, and below we see two others. Depending on the profile of your data, one may work better than another:
Mean and Max methods shown. Same data, but note the difference in the color distribution thresholds in the legend.
Next, suppose you need a little more fidelity or less fidelity in your hexagon bins. I have a radius parameter that you can control how large the hexagons are. Below are examples of different sizes and colors for sake of variety:
A larger hexagon size with a multi-hue color range.
A smaller hexagon size with simpler color range
Lessons Learned/Comparisons with Design Studio:
- Lumira seems to have a more fully implemented RequireJS dependency pattern which took me some getting used to.
- I was unable to expose charting parameters (as shown in the Compose Room screenshots above) in the Visualize Room. Ideally, I'd like to have them available there in the Context Menu (the little Gear icon) when I could have a dialog box come up to tweak these properties.
- In Design Studio, I provide a Legend also, but did not implement in Lumira because I'm exploring the possibility of using their Flow Layout convention to render it there which is different than the Design Studio approach.
- Aside from that limitation, I was able to re-use some of my Design Studio Property Editor components such as the palette builder to save Property Editor development time. Below is an illustration of the Design Studio equivalent, for example:
Design Studio Equivalent showing Advanced Property Sheet and Legend.
Feedback is welcomed. You can view the source and download the .ZIP bundle here (which includes more goodies):
Enjoy!
*PS: This repository has a ZIP file in the root that you can simply install and the repository itself is one big Eclipse project as I developed this largely without WebIDE or VizPacker after getting some template code, but I'll save those gory details for another blog post. Also I'm interested in contributing to SAP/lumira-extension-viz · GitHub after cleaning up a few pieces, but I'm not sure who to reach out to to proceed yet.
- SAP Managed Tags:
