mascot-vis 2.0.0 → 3.0.0

package/src-old/item/refs/LayoutAxis.js

@@ -0,0 +1,316 @@
+import { DataType, ItemType, LayoutType } from "../../util/Constants";
+import Path from "../mark/Path";
+import PointText from "../mark/PointText";
+import Group from "../composite/Group";
+import * as d3 from 'd3'; 
+import Axis from "./Axis";
+import { sameClass } from "../../util/ItemUtil";
+
+
+export default class LayoutAxis extends Axis {
+    
+    constructor(items, layout, channel, field, args) {
+        super(args);
+        this._channel = channel;
+        this._orientation = "orientation" in args ? args["orientation"] : 
+                                this._channel === "x" || this._channel == "width" ? "bottom" : "left";
+        this._posArg = this._channel == "x" || this._channel == "width"? args["pathY"] : args["pathX"]; 
+        this._padding = [ItemType.Line, ItemType.Path].indexOf(items[0].type) >= 0 ? 10 : 0;
+
+        this._item = items[0];
+        this._items = items;
+        this._mlayout = layout;
+        this._field = field;
+        this._titleText = "title" in args ? args["title"] : this._field;
+        this._showTitle = "showTitle" in args ? args.showTitle : false;
+        
+        // if ("labelRotation" in args)
+        //     this._labelRotation = args.labelRotation;
+
+        this._ticks = new Group();
+        this._ticks.id = this.id + "ticks";
+        this.addChild(this._ticks);
+
+        this._labels = new Group();
+        this._labels.id = this.id + "labels";
+        this.addChild(this._labels);
+
+        //there can be multiple rules if the layout has multiple rows or columns
+        this._rules = new Group();
+        this._rules.id = this.id + "paths";
+        this.addChild(this._rules);
+
+        this._generatePath();
+        this._generateTicks();
+        this._generateLabels();
+        if (this._showTitle) {
+            this._generateTitle();
+        }
+        this._positionPath();
+        this._positionTicks();
+        this._positionLabels();
+        if (this._showTitle) {
+            this._positionTitle();
+        }
+
+    }
+
+    toJSON() {
+        let json = super.toJSON();
+        json.args.item = this._item.id;
+        if (this._channel == "x" || this._channel == "width")
+            json.args.pathY = this._posArg;
+        else
+            json.args.pathX = this._posArg;
+        if (this.classId)
+            json.classId = this.classId;
+        return json;
+    }
+
+    set strokeColor(c) {
+        this._strokeColor = c;
+        for (let t of this._ticks.children)
+            t.strokeColor = c;
+        for (let t of this._rules.children)
+            t.strokeColor = c;
+    }
+
+    get strokeColor() {
+        return this._strokeColor;
+    }
+
+    set textColor(c) {
+        this._textColor = c;
+        for (let l of this._labels.children)
+            l.fillColor = c;
+        if (this._title)
+            this._title.fillColor = c;
+    }
+
+    get textColor() {
+        return this._textColor;
+    }
+
+    get layout() {
+        return this._mlayout;
+    }
+
+    _updateBounds() {
+        this._bounds = this._rules.bounds.clone();
+        this._bounds = this._bounds.union(this._ticks.bounds);
+        this._bounds = this._bounds.union(this._labels.bounds);
+        if (this._showTitle)
+            this._bounds = this._bounds.union(this._title.bounds);
+    }
+
+    _generatePath(){
+        this._rules.removeAll();
+        if (this._mlayout.type == LayoutType.Grid) {
+            let num = this._channel == "x" ? this._mlayout.numRows : this._mlayout.numCols;
+            for (let i = 0; i < num; i++) {
+                let t = new Path({"strokeColor": this._strokeColor});
+                if (!this._pathVisible)
+                    t.visibility = "hidden";
+                t.type = ItemType.Line;
+                t.id = this.id + "rule" + i;
+                this._rules.addChild(t);
+            }
+        } else if (this._mlayout.type === LayoutType.Stack) {
+            let t = new Path({"strokeColor": this._strokeColor});
+            if (!this._pathVisible)
+                t.visibility = "hidden";
+            t.type = ItemType.Line;
+            t.id = this.id + "rule";
+            this._rules.addChild(t);
+        }
+    }
+
+    _generateTicks() {
+        this._ticks.removeAll();
+        for (let i = 0; i < this._mlayout.group.children.length; i++) {
+            let t = new Path({"strokeColor": this._strokeColor});
+            if (!this._tickVisible)
+                t.visibility = "hidden";
+            t.type = ItemType.Line;
+            t.id = this.id + "tick" + i;
+            this._ticks.addChild(t);
+        }
+    }
+
+    //TODO: improve efficiency by reusing components
+    _generateLabels() {
+        this._labels.removeAll();
+        let formatter, fieldType = this._item.dataScope.getFieldType(this._field);
+
+        switch (fieldType) {
+            case DataType.Date:
+                formatter = d3.timeFormat(this._labelFormat);
+                break;
+            case DataType.String:
+                formatter = function(d) {return d;};
+                break;
+            default:
+                formatter = d3.format(this._labelFormat);
+                break;
+        }
+  
+        let cb = this._mlayout.cellBounds;
+        for (let i = 0; i < cb.length; i++) {
+            if (i >= this._mlayout.group.children.length) break;
+            let itm = this._mlayout.group.children[i];
+            let t = new PointText({fillColor: this._textColor, fontSize: this._fontSize, "text": formatter(itm.dataScope.getFieldValue(this._field))});
+            //let t = new PointText({fillColor: this._textColor, fontSize: this._fontSize, "text": formatter(this._items[i].dataScope.getFieldValue(this._field))});
+            t.id = this.id + "label" + i;
+            this._labels.addChild(t);
+        }
+    }
+
+    _positionPath(){
+        if (this._mlayout.type == LayoutType.Grid) {
+            let cb = this._mlayout.cellBounds;
+            let num = this._channel == "x" ? this._mlayout.numRows : this._mlayout.numCols;
+            if (this._channel == "x") {
+                let left = cb[0].left, numCols = this._mlayout.numCols;
+                let padding = this._orientation === "bottom" ? this._padding : - this._padding;
+                for (let r = 0; r < num; r++){
+                    this._rules.children[r]._setVertices([
+                        [left, this._posArg ? cb[r * numCols][this._orientation] + this._posArg - cb[0][this._orientation] : cb[r * numCols][this._orientation] + padding],
+                        [left + cb[0].width * numCols + this._mlayout.colGap * (numCols - 1), this._posArg ? cb[r * numCols][this._orientation] + this._posArg - cb[0][this._orientation] : cb[r * numCols][this._orientation] + padding]
+                    ]);
+                }
+            } else {
+                let top = cb[0].top, numRows = this._mlayout.numRows;
+                let padding = this._orientation === "left" ? this._padding : - this._padding;
+                for (let c = 0; c < num; c++){
+                    // this._rules.children[c]._setVertices([
+                    //     [this._posArg ? cb[c * numRows][this._orientation] + this._posArg - cb[0][this._orientation] : cb[c * numRows][this._orientation], top ],
+                    //     [this._posArg ? cb[c * numRows][this._orientation] + this._posArg - cb[0][this._orientation] : cb[c * numRows][this._orientation], top + cb[0].height * numRows + this._mlayout.rowGap * (numRows - 1), ]
+                    // ]);
+                    this._rules.children[c]._setVertices([
+                        [this._posArg ? cb[c * numRows][this._orientation] + this._posArg - cb[0][this._orientation] : this._mlayout.group.bounds[this._orientation] - padding, top ],
+                        [this._posArg ? cb[c * numRows][this._orientation] + this._posArg - cb[0][this._orientation] : this._mlayout.group.bounds[this._orientation] - padding, top + cb[0].height * numRows + this._mlayout.rowGap * (numRows - 1)]
+                    ]);
+                }
+            }
+        } else if (this._mlayout.type === LayoutType.Stack) {
+            let b = this._mlayout.group.bounds;
+            if (this._channel == "x") {
+                this._rules.children[0]._setVertices([
+                    [b.left, this._posArg ? this._posArg : b[this._orientation] ],
+                    [b.right, this._posArg ? this._posArg : b[this._orientation]]
+                ]);              
+            } else {
+                this._rules.children[0]._setVertices([
+                    [this._posArg ? this._posArg : b[this._orientation], b.top ],
+                    [this._posArg ? this._posArg : b[this._orientation], b.bottom ]
+                ]);
+            }
+        }
+        this._rules.children.forEach(r => r._updateBounds());
+        this._rules._updateBounds();
+        this._updateBounds();
+    }
+
+    _positionTicks(){
+        let cb = this._mlayout.cellBounds;
+        if (this._channel == "x") {
+            let dir = this._orientation == "bottom" ? 1 : -1;
+            let padding = this._orientation === "bottom" ? this._padding : - this._padding;
+            for (let [i, t] of this._ticks.children.entries()) {
+                let pos = this._posArg ? cb[i][this._orientation] + this._posArg - cb[0][this._orientation] + this._tickOffset * dir : 
+                            cb[i][this._orientation] + this._tickOffset * dir + padding;
+                t._setVertices([
+                    [cb[i].x, pos],
+                    [cb[i].x, pos + dir * this._tickSize]
+                ]);
+                t._updateBounds();
+            }
+        } else if (this._channel == "y"){
+            let dir = this._orientation == "left" ? -1 : 1;
+            let padding = this._orientation === "left" ? this._padding : - this._padding;
+            for (let [i, t] of this._ticks.children.entries()) {
+                // let xPos = this._posArg ? cb[i][this._orientation] + this._posArg - cb[0][this._orientation] + this._tickOffset * dir : 
+                //                 cb[i][this._orientation] + this._tickOffset * dir,
+                let xPos = this._posArg ? cb[i][this._orientation] + this._posArg - cb[0][this._orientation] + this._tickOffset * dir : 
+                                    this._mlayout.group.bounds[this._orientation] + this._tickOffset * dir - padding,
+                    yPos = this._tickAnchor == "middle" ? cb[i].y : cb[i][this._tickAnchor];
+                t._setVertices([
+                    [xPos, yPos],
+                    [xPos + dir * this._tickSize, yPos]
+                ]);
+                t._updateBounds();
+            }
+        }
+        this._ticks._updateBounds();
+        this._updateBounds();
+    }
+
+    _positionLabels(){
+        let cb = this._mlayout.cellBounds;
+        if (this._channel == "x") {
+            let anchor = this._orientation == "bottom" ? ["center", "top"] : ["center", "bottom"],
+                offset = this._orientation == "bottom" ? this._labelOffset : -this._labelOffset;
+            let padding = this._orientation === "bottom" ? this._padding : - this._padding;
+            for (let [i, l] of this._labels.children.entries()) {
+                l.x = cb[i].x;
+                l.y = this._posArg ? cb[i][this._orientation] + this._posArg - cb[0][this._orientation] + offset : 
+                                cb[i][this._orientation] + offset + padding;
+                l.anchor = anchor;
+                if (this._labelRotation){
+                    l._rotate = [this._labelRotation, l.x, l.y];
+                    l.anchor = ["right", anchor[1]];
+                }
+                    
+            }
+        } else if (this._channel == "y"){
+            let anchor = this._orientation == "left" ? ["right", "middle"] : ["left", "middle"],
+                offset = this._orientation == "left" ? - this._labelOffset : this._labelOffset;
+            let padding = this._orientation === "left" ? this._padding : - this._padding;
+            for (let [i, l] of this._labels.children.entries()) {
+                // l.x = this._posArg ? cb[i][this._orientation] + this._posArg - cb[0][this._orientation] + offset 
+                //             : cb[i][this._orientation] + offset;
+                l.x = this._posArg ? cb[i][this._orientation] + this._posArg - cb[0][this._orientation] + offset 
+                            : this._mlayout.group.bounds[this._orientation] + offset - padding;
+                l.y = this._tickAnchor == "middle" ? cb[i].y : cb[i][this._tickAnchor];
+                l.anchor = anchor;
+                if (this._labelRotation) {
+                    l._rotate = [this._labelRotation, l.x, l.y];
+                }
+            }
+        }
+        this._labels._updateBounds();
+        this._updateBounds();
+    }
+
+    _positionTitle(){
+        let pb = this._rules.bounds;
+        this._title.achor = this._titleAnchor;
+        if (!this._titlePosition) {
+            if (this._channel == "x") {
+                this._title.x = pb.x;
+                this._titleOffset = this._labels.bounds.height + this._labelOffset + 15;
+                this._title.y = this._orientation == "top" ? pb.top - this._titleOffset : pb.bottom + this._titleOffset;
+            } else {
+                this._titleOffset = this._labels.bounds.width + this._labelOffset + 15;
+                this._title.x = this._orientation == "left" ? pb.left - this._titleOffset : pb.right + this._titleOffset;
+                this._title.y = pb.y;
+                if (this._rotateYTitle)
+                    this._title._rotate = this._orientation == "left" ?  [-90, this._title.bounds.x, this._title.bounds.y] : [90, this._title.bounds.x, this._title.bounds.y];
+            }
+        } else {
+            this._title.x = this._titlePosition[0];
+            this._title.y = this._titlePosition[1];
+            if (this._channel == "y" || this._channel == "height") {
+                if (this._rotateYTitle)
+                    this._title._rotate = this._orientation == "left" ?  [-90, this._title.bounds.x, this._title.bounds.y] : [90, this._title.bounds.x, this._title.bounds.y];
+            }
+        }   
+        this._title._updateBounds();
+        this._updateBounds();
+    }
+
+    matches(item) {
+        return sameClass(this._item, item);
+        //return getEncodingKey(this._item).split("_")[0] === getEncodingKey(item).split("_")[0];
+    }
+}

package/src-old/item/refs/Legend.js

@@ -0,0 +1,273 @@
+import Group from "../composite/Group";
+import { DataType, ItemType, Orientation } from "../../util/Constants";
+import PointText from "../mark/PointText";
+import { ItemCounter, getLeafItems, isPath, getEncodingKey } from "../../util/ItemUtil";
+import LinearGradient from "../../basic/Gradient";
+import DataTable from "../../data/DataTable";
+import { uniqueNumbers } from "../../util/DataUtil";
+import GridLayout from "../../layout/Grid";
+
+
+export default class Legend extends Group {
+
+    constructor(encoding, args) {
+        super();
+        this.type = ItemType.Legend;
+        this.id = this.type + ItemCounter[this.type]++;
+        this.encoding = encoding;
+        this._textColor = ("textColor" in args) ? args["textColor"] : "#555";
+        this._strokeColor = ("strokeColor" in args) ? args["strokeColor"] : "#555";
+        this._fontSize = "fontSize" in args? args.fontSize: "12px";
+        this._x = ("x" in args) ? args["x"] : 0;
+        this._y = ("y" in args) ? args["y"] : 0;
+        this._showTitle = ("showTitle" in args) ? args["showTitle"] : true;
+        this._orientation = ("orientation" in args) ? args["orientation"] : Orientation.Vertical;
+        
+        //for categorical legend
+        if (!("numCols" in args) && !("numRows" in args)) {
+            if (this._orientation === Orientation.Vertical)
+                this._numCols = 1;
+            else
+                this._numRows = 1;
+        }
+        else {
+            this._numCols = args["numCols"];
+            this._numRows = args["numRows"];
+        }
+        this._initialize();
+    }
+
+    toJSON(){
+        let json = super.toJSON();
+        if (!("args" in json))
+            json.args = {};
+        json.args.textColor = this._textColor;
+        json.channel = this.encoding.channel;
+        json.field = this.encoding.field;
+        json.args.strokeColor = this._strokeColor;
+        json.args.x = this._x;
+        json.args.y = this._y;
+        json.args.orientation = this._orientation;
+        return json;
+    }
+
+    get field() {
+        return this.encoding.field;
+    }    
+
+    get channel() {
+        return this.encoding.channel;
+    }
+
+    get fieldType() {
+        return this.encoding.datatable.getFieldType(this.field);
+    }
+
+    _initialize() {
+        let scene = this.encoding.scene, f = this.encoding.field;
+        switch (this.encoding.datatable.getFieldType(f)) {
+            case DataType.String:
+                this._createCategoricalColorLegend(scene, f);
+                break;
+            case DataType.Date:
+            case DataType.Number:
+            case DataType.Integer:
+                this._createNumericalColorLegend(scene, f);
+                break;
+        }
+        this._updateBounds();
+    }
+
+    _createNumericalColorLegend(scene, f) {
+        let wd, ht;
+        if (this._orientation == Orientation.Vertical) {
+            wd = 15;
+            ht = 300;
+        } else {
+            wd = 300;
+            ht = 15;
+        }
+        let titleSize;
+        if (this._showTitle){
+            let title = scene.mark("text", {fillColor: this._textColor, "text": f, x: this._x + wd/2, y: this._y, "anchor": ["center", "middle"]});
+            this.addChild(title);
+            titleSize = 20;
+        } else {
+            titleSize = 0;
+        }
+        
+        let rect = scene.mark("rect", {"top": this._y + titleSize, "left": this._x, "width": wd, "height": ht, "strokeWidth": 0, opacity: this.encoding.anyItem.opacity});
+        let domain = [Math.min(...this.encoding.data), Math.max(...this.encoding.data)], mapping = this.encoding.scale.mapping;
+        let gradient;
+        let texts = [], ticks = [], offset = 5, tickSize = 5;
+        if (mapping) {
+            let values = Object.keys(mapping).map(d => parseFloat(d)).sort((a,b) => a - b);
+            if (this._orientation == Orientation.Vertical) {
+                gradient = new LinearGradient({x1: 0, y1: 100, x2: 0, y2: 0});
+                values.forEach(d => {
+                    let p = (d - domain[0])/(domain[1] - domain[0]);
+                    gradient.addStop(p*100, mapping[d], 1.0);
+                    let tk = scene.mark("line", {"x1": this._x + wd, "x2": this._x + wd + tickSize, "y1": this._y + ht - p * ht + titleSize, "y2": this._y + ht - p * ht+ titleSize, "strokeColor": this._strokeColor});
+                    ticks.push(tk);
+                    let t = scene.mark("text", {fillColor: this._textColor, "text": d.toFixed(0), x: this._x + wd + offset + tickSize, y: this._y + ht - p * ht + titleSize, "anchor": ["left", "middle"]});
+                    texts.push(t);
+                })
+            } else {
+                gradient = new LinearGradient({x1: 0, y1: 0, x2: 100, y2: 0});
+                values.forEach(d => {
+                    let p = (d - domain[0])/(domain[1] - domain[0]);
+                    gradient.addStop(p*100, mapping[d], 1.0);
+                    let tk = scene.mark("line", {"x1": this._x + p * wd, "x2": this._x + p * wd, "y1": this._y + 20 - tickSize + titleSize, "y2": this._y + ht + tickSize + titleSize, "strokeColor": this._strokeColor});
+                    ticks.push(tk);
+                    let t = scene.mark("text", {fillColor: this._textColor, "text": d.toFixed(0), x: this._x + p * wd, y: this._y + ht + offset + titleSize, "anchor": ["center", "top"]});
+                    texts.push(t);
+                })
+            }
+        } else {
+            let domain = this.encoding.scale.domain, dt = this.encoding.datatable, ft = dt.getFieldType(f);
+            let stops = [], uniqueVals = ft === DataType.Date? dt.getUniqueFieldValues(f) : uniqueNumbers(this.encoding.data);
+            if (uniqueVals.length <= 10){
+                stops = uniqueVals;
+                stops.sort((a, b) => a - b);
+            } else {
+                if (ft === DataType.Date) {
+                    uniqueVals.sort((a, b) => a - b);
+                    for (let i = 0; i < uniqueVals.length; i+= Math.ceil(uniqueVals.length/10))
+                        stops.push(uniqueVals[i]);
+                } else {
+                    let incr = (domain[1] - domain[0])/9;
+                    for (let i = 0; i < 10; i++)
+                        stops.push(domain[0] + i * incr);
+                }
+            }
+            //determine decimal places
+            let decimalPlaces = 0, interval = (stops[stops.length - 1] - stops[0])/stops.length;
+            while (interval < 1) {
+                interval *= 10;
+                decimalPlaces++;
+            }
+            stops = stops.map(d => d.toFixed(decimalPlaces));
+            if (this._orientation == Orientation.Vertical) {
+                gradient = new LinearGradient({x1: 0, y1: 100, x2: 0, y2: 0});
+                stops.forEach(d => {
+                    let p = (d - domain[0])/(domain[1] - domain[0]);
+                    gradient.addStop(p*100, this.encoding.scale.map(d), 1.0);
+                    let tk = scene.mark("line", {"x1": this._x + wd, "x2": this._x + wd + tickSize, "y1": this._y + ht - p * ht + titleSize, "y2": this._y + ht - p * ht + titleSize, "strokeColor": this._strokeColor});
+                    ticks.push(tk);
+                    let t = scene.mark("text", {fillColor: this._textColor, "text": ft === DataType.Date? dt.getRawValue(f, d) : d, x: this._x + wd + offset + tickSize, y: this._y + ht - p * ht + titleSize, "anchor": ["left", "middle"]});
+                    texts.push(t);
+                });
+            } else {
+                gradient = new LinearGradient({x1: 0, y1: 0, x2: 100, y2: 0});
+                stops.forEach(d => {
+                    let p = (d - domain[0])/(domain[1] - domain[0]);
+                    gradient.addStop(p*100, this.encoding.scale.map(d), 1.0);
+                    let tk = scene.mark("line", {"x1": this._x + p * wd, "x2": this._x + p * wd, "y1": this._y + ht + titleSize, "y2": this._y + ht + tickSize + titleSize, "strokeColor": this._strokeColor});
+                    ticks.push(tk);
+                    let t = scene.mark("text", {fillColor: this._textColor, "text": ft === DataType.Date? dt.getRawValue(f, d) : d, x: this._x + p * wd, y: this._y + ht + offset + titleSize, "anchor": ["center", "top"]});
+                    texts.push(t);
+                })
+            }
+        }
+        rect.styles.fillColor = gradient;
+
+        this.addChild(rect);
+        for (let t of texts)
+            this.addChild(t);
+        for (let tk of ticks)
+            this.addChild(tk);
+    }
+
+    get textColor() {
+        return this._textColor;
+    }
+
+    set textColor(c) {
+        this._textColor = c;
+        this.setTextColor(this);
+    }
+
+    get orientation() {
+        return this._orientation;
+    }
+
+    set orientation(o) {
+        this._orientation = o;
+        this.removeAll();
+        this._initialize();
+    }
+
+    setTextColor(itm) {
+        if (!itm.children || itm.children.length === 0) return;
+        for (let i of itm.children) {
+            if (i.type === ItemType.PointText)
+                i.fillColor = this._textColor;
+            else if (i.children && i.children.length > 0) {
+                this.setTextColor(i);
+            }
+        }
+    }
+
+    _createCategoricalColorLegend(scene, f) {
+        let scale = this.encoding.scale;
+        let dt = new DataTable(scale.domain.map(d => ({"category": d, "value": scale.map(d)})));
+        let longestText = dt.getUniqueFieldValues("category").sort((a,b) => b.length - a.length)[0];
+        let mark = this.encoding.anyItem;
+        let sw = isPath(mark) && mark.closed ? mark.strokeWidth : 0;
+        if (this._orientation === Orientation.Vertical) {
+            let titleSize = 0;
+            if (this._showTitle) {
+                this.addChild(new PointText({fillColor: this._textColor, "fontSize": this._fontSize, "text": f, x: this._x, y: this._y, "anchor": ["left", "top"]})); 
+                titleSize = parseFloat(this._fontSize) + 5;
+            }
+            let rect = scene.mark("rect", {"top": this._y + 2 + titleSize, "left": this._x, "width": 10, "height": 10, "strokeWidth": sw, "strokeColor": mark.strokeColor, "opacity": mark.opacity});
+            let text = scene.mark("text", {text: longestText, fillColor: this._textColor, "fontSize": this._fontSize, x: this._x + 20, y: this._y + titleSize + 12 + sw, "anchor": ["left", "bottom"]});
+            let glyph = scene.glyph(rect, text);
+            let coll = scene.repeat(glyph, dt);
+            scene.encode(text, {"channel": "text", "field": "category", "_remember": false});
+            scene.encode(rect, {"channel": "fillColor", "field": "category", "_remember": false, scale: scale});
+            coll.layout = new GridLayout({"numCols": this._numCols, "numRows": this._numRows});
+            this.addChild(coll);
+        } else {
+            //do not show title for now
+            let rect = scene.mark("rect", {"top": this._y, "left": this._x, "width": 10, "height": 10, "strokeWidth": sw, "strokeColor": mark.strokeColor, "opacity": this.encoding.anyItem.opacity});
+            let text = scene.mark("text", {text: longestText, fillColor: this._textColor, "fontSize": this._fontSize, x: this._x + 15, y: this._y, "anchor": ["left", "top"]});
+            let glyph = scene.glyph(rect, text);
+            let coll = scene.repeat(glyph, dt);
+            scene.encode(text, {"channel": "text", "field": "category", "_remember": false});
+            scene.encode(rect, {"channel": "fillColor", "field": "category", "_remember": false, scale: scale});
+            coll.layout = new GridLayout({"numCols": this._numCols, "numRows": this._numRows, "colGap": 15});
+            this.addChild(coll);
+        }
+        
+    }
+
+    pathHitTest(x, y) {
+        let items = getLeafItems(this);
+        for (let i = items.length - 1; i >= 0; i--) {
+            let c = items[i];
+            if (isPath(c) && c.contains(x, y))
+                return c;
+        }
+        return null;
+    }
+
+    //item is a group or a mark or a vertex or segment
+    matches(item) {
+        let k = getEncodingKey(item).split("_")[0],
+            encodings = this.encoding.scale.encodings;
+        for (let enc of encodings) {
+            let classId = getEncodingKey(enc.anyItem).split("_")[0];
+            if (classId === k)
+                return true;
+        }
+        return false;
+    }
+
+    _doTranslate(dx, dy) {
+        super._doTranslate(dx, dy);
+        this._x += dx;
+        this._y += dy;
+    }
+
+}

package/src-old/layout/Circular.js

@@ -0,0 +1,95 @@
+import {Direction, Alignment} from "../util/Constants";
+import Matrix from "../basic/Matrix";
+import Rectangle from "../basic/Rectangle";
+
+/**
+** Circular layout can not be applied to nested collections
+** Primary use case: people garden
+** For pie charts, use Partition
+** For polar line graphs, area charts, weather radial etc. use Polar Transformation on a scene
+**/
+
+class CircularLayout {
+
+	constructor(args) {
+		this.type = "circular";
+		this.center = args.hasOwnProperty("center") ? args["center"] : {x: 500, y:400};
+		this.radius = args.hasOwnProperty("radius") ? args["radius"] : 200;
+		this.startAngle = args.hasOwnProperty("startAngle") ? args["startAngle"] : 90;
+		this.endAngle = args.hasOwnProperty("endAngle") ? args["endAngle"] : 450;
+		this.direction = args.hasOwnProperty("direction") ? args["direction"] : Direction.Anticlockwise;
+	}
+
+	clone() {
+		return new CircularLayout({
+			center: {x: this.center.x, y: this.center.y},
+			radius: this.radius,
+			startAngle: this.startAngle,
+			endAngle: this.endAngle,
+			direction: this.direction
+		});
+	}
+
+	run() {
+		if (this.collection == undefined)
+			return;
+
+		let collection = this.collection;
+		let scene = this.collection.getScene();
+
+		let bounds = collection.children.map(d => d.unRotatedBounds);
+		let wds = bounds.map(d => d.width),
+			hts = bounds.map(d => d.height);
+		let cellWidth = Math.max(...wds),
+			cellHeight = Math.max(...hts);
+
+		for (let i = 0; i < collection.children.length; i++) {
+			let item = collection.children[i];
+			let cellBounds = this._getCellBounds(item, scene, cellWidth, cellHeight);
+			
+			let cellCenter = cellBounds.center;
+			
+			let dx = this.center.x - cellCenter.x, dy = this.center.y - this.radius - cellCenter.y;
+			let mx = new Matrix();
+			mx._doTranslate(dx, dy);
+
+			let angle = (this.endAngle - this.startAngle)/(collection.children.length+1);
+
+			let mx1 = new Matrix();
+			mx1.rotate(90 - (this.startAngle + angle * i), this.center);
+
+			mx.prepend(mx1);
+		  	item._matrix = mx;
+		}
+		this.collection._updateBounds();
+	}
+
+	//TODO: handle collections
+	_getCellBounds(item, scene, cellWidth, cellHeight) {
+		let left, top;
+		let bounds = item.unRotatedBounds;
+		switch (scene._cellAlign[item.classId].x) {
+			case Alignment.Left:
+				left = bounds.left;
+				break;
+			case Alignment.Center:
+				left = bounds.center.x - cellWidth/2;
+				break;
+			case Alignment.Right:
+				left = bounds.right - cellWidth;
+				break;
+		}
+		switch(scene._cellAlign[item.classId].y) {
+			case Alignment.Top:
+				top = bounds.top;
+				break;
+			case Alignment.Middle:
+				top = bounds.center.y - cellHeight/2;
+				break;
+			case Alignment.Bottom:
+				top = bounds.bottom - cellHeight;
+				break;
+		}
+		return new Rectangle(left, top, cellWidth, cellHeight);
+	}
+}