Name: YMTreeMap
Owner: Yahoo Inc.
Description: High performance Swift treemap layout engine for iOS and macOS.
Created: 2017-09-07 14:16:21.0
Updated: 2018-05-09 18:39:34.0
Pushed: 2018-05-09 16:43:35.0
Size: 4081
Language: Swift
GitHub Committers
| User | Most Recent Commit | # Commits |
|---|
Other Committers
| User | Most Recent Commit | # Commits |
|---|
YMTreeMap is a high performance treemap layout engine for iOS and macOS, written in Swift.
The input to YMTreeMap is a list of arbitrary numbers, and the output will be a list of layout rectangles representing those numbers graphically. The order of the layout rectangles will match the original input order, so you should sort the input numbers the way that you want your treemap to be ordered. Finally, the size of the layout rectangles will represent the relative weighting of the ordinal input number that it cooresponds to.
YMTreeMap uses the “squarified” layout treemap algorithm. Squarified optimizes for low aspect ratios: meaning it generates rectangles that are as square as possible given a reasonable effort. While not perfectly optimal, the algorithm get pretty close while maintaining high-performance.
The output rectangles can easily be used to render the shapes using whatever rendering system you prefer:
Basic sample of how to draw a small heat map using random colors in Swift and Objective-C.
randomColor: UIColor {
turn UIColor(red: CGFloat(arc4random_uniform(255) % 255) / 255.0,
green: CGFloat(arc4random_uniform(255) % 255) / 255.0,
blue: CGFloat(arc4random_uniform(255) % 255) / 255.0,
alpha: 1)
ride func draw(_ rect: CGRect) {
t values = [ 445, 203, 110, 105, 95, 65, 33, 21, 10 ].sorted()
These two lines are actual YMTreeMap usage!
t treeMap = YMTreeMap(withValues: values)
t treeMapRects = treeMap.tessellate(inRect: self.bounds)
t context = UIGraphicsGetCurrentContext()
eeMapRects.forEach { (treeMapRect) in
randomColor.setFill()
context?.fill(treeMapRect)
ine RANDOM_COLOR [UIColor colorWithRed:(rand() % 255)/255.0 green:(rand() % 255)/255.0 blue:(rand() % 255)/255.0 alpha:1.0]
oid)drawRect:(CGRect)rect
NSArray<NSNumber *> *values = @[ @445, @203, @110, @105, @95, @65, @33, @21, @10 ];
// These two lines are actual YMTreeMap usage!
YMTreeMap *tm = [[YMTreeMap alloc] initWithValues:values];
NSArray<NSValue *> *treeMapRects = [tm tessellateInRect:rect];
CGContextRef context = UIGraphicsGetCurrentContext();
for (NSValue *rectVal in treeMapRects) {
[RANDOM_COLOR setFill];
CGContextFillRect(context, rectVal.CGRectValue);
}
Here are examples of 30-item and 1000-item sorted treemaps in a verical-orientation.
Tests performed on-device after 3 seconds of idle time, in release configuration. All tests use the same input values, which were sorted lists of large integers.
Even with heat maps with up to 1,000 items, layout time is well controlled at 3.7ms. This should enable use within a scrolling table view.
To run the example project, clone the repo, and run pod install from the Example directory first.
YMTreeMap is available through CocoaPods. To install it, simply add the following line to your Podfile:
'YMTreeMap'
Various papers on treemapping layout algorithms and usability that helped influence this project. A copy of each paper is in the Research folder.
Squarified Treemaps - Mark Bruls, Kees Huizing, Jarke J. van Wijk
Ordered Treemap Layouts - Ben Shneiderman, Martin Wattenberg
Ordered and Quantum Treemaps: Making Effective Use of 2D Space to Display Hierarchies - Benjamin B. Bederson, Ben Shneiderman, Martin Wattenberg
Treemaps for space-constrained visualization of hierarchies - Ben Shneiderman
Animated Exploration of Dynamic Graphs with Radial Layout - Ka-Ping Yee, Danyel Fisher, Rachna Dhamija, Marti Hearst
Adam Kaplan, adamkaplan@oath.com
YMTreeMap is available under the MIT license. See the LICENSE file for more info.