gridviz 2.1.13 → 2.1.15

package/src/style/ShapeColorSizeStyle_.js

@@ -0,0 +1,108 @@
+//@ts-check
+'use strict'
+
+import { Style } from '../Style.js'
+
+/**
+ * A very generic style that shows grid cells with specific color, size and shape.
+ * It can be used to show variables as cell colors, cell size, cell shape, or any combination of the three visual variables.
+ *
+ * @author Joseph Davies, Julien Gaffuri
+ */
+export class ShapeColorSizeStyle_ extends Style {
+    /** @param {object} opts */
+    constructor(opts) {
+        super(opts)
+        opts = opts || {}
+
+        /** A function returning the view scale.
+         * @type {function(Array.<import('../Dataset.js').Cell>,number, number):object} */
+        this.viewScale = opts.viewScale //(cells,r,z) => {}
+
+        /** A function returning the color of the cell.
+         * @type {function(import('../Dataset.js').Cell,number, number,object):string} */
+        this.color = opts.color //(c,r,z,o) => {}
+
+        /** A function returning the size of a cell in geographical unit.
+         * @type {function(import('../Dataset.js').Cell,number, number,object):number} */
+        this.size = opts.size //(c,r,z,o) => {}
+
+        /** A function returning the shape of a cell.
+         * @type {function(import("../Dataset.js").Cell,number, number,object):import("../Style.js").Shape} */
+        this.shape = opts.shape //(c,r,z,o) => {}
+    }
+
+    /**
+     * Draw cells as squares, with various colors and sizes.
+     *
+     * @param {Array.<import("../Dataset.js").Cell>} cells
+     * @param {number} r
+     * @param {import("../GeoCanvas.js").GeoCanvas} cg
+     */
+    draw(cells, r, cg) {
+        //filter
+        if (this.filter) cells = cells.filter(this.filter)
+
+        //zoom factor
+        const zf = cg.getZf()
+
+        //get view scale
+        const vc = this.viewScale ? this.viewScale(cells, r, zf) : undefined
+
+        //draw with HTML canvas in geo coordinates
+        cg.setCanvasTransform()
+
+        const r2 = r * 0.5
+        for (let c of cells) {
+            //color
+            let col = this.color ? this.color(c, r, zf, vc) : "black"
+            if (!col || col === 'none') continue
+
+            //size
+            const size = this.size ? this.size(c, r, zf, vc) : r
+            if (!size) continue
+
+            //shape
+            const shape = this.shape ? this.shape(c, r, zf, vc) : 'square'
+            if (shape === 'none') continue
+
+            //get offset
+            const offset = this.offset(c, r, zf)
+
+            cg.ctx.fillStyle = col
+            if (shape === 'square') {
+                //draw square
+                const d = r * (1 - size / r) * 0.5
+                cg.ctx.fillRect(c.x + d + offset.dx, c.y + d + offset.dy, size, size)
+            } else if (shape === 'circle') {
+                //draw circle
+                cg.ctx.beginPath()
+                cg.ctx.arc(c.x + r2 + offset.dx, c.y + r2 + offset.dy, size * 0.5, 0, 2 * Math.PI, false)
+                cg.ctx.fill()
+            } else if (shape === 'donut') {
+                //draw donut
+                const xc = c.x + r2 + offset.dx,
+                    yc = c.y + r2 + offset.dy
+                cg.ctx.beginPath()
+                cg.ctx.moveTo(xc, yc)
+                cg.ctx.arc(xc, yc, r2, 0, 2 * Math.PI)
+                cg.ctx.arc(xc, yc, (1 - size / r) * r2, 0, 2 * Math.PI, true)
+                cg.ctx.closePath()
+                cg.ctx.fill()
+            } else if (shape === 'diamond') {
+                const s2 = size * 0.5
+                cg.ctx.beginPath()
+                cg.ctx.moveTo(c.x + r2 - s2, c.y + r2)
+                cg.ctx.lineTo(c.x + r2, c.y + r2 + s2)
+                cg.ctx.lineTo(c.x + r2 + s2, c.y + r2)
+                cg.ctx.lineTo(c.x + r2, c.y + r2 - s2)
+                cg.ctx.fill()
+            } else {
+                throw new Error('Unexpected shape:' + shape)
+            }
+        }
+
+        //update legends
+        this.updateLegends({ style: this, r: r, zf: zf, viewScale: vc })
+    }
+}

package/src/style/SideCatStyle.js

@@ -1,172 +1,172 @@
-//@ts-check
-'use strict'
-
-import { Style } from '../Style.js'
-
-/** @typedef {{x:number,y:number,or:"v"|"h",v1:string|undefined,v2:string|undefined}} Side */
-
-/**
- * A style to show the sides of grid cells based on their different categories.
- *
- * @author Julien Gaffuri
- */
-export class SideCatStyle extends Style {
-    /** @param {object} opts */
-    constructor(opts) {
-        super(opts)
-        opts = opts || {}
-
-        /** The name of the column/attribute of the tabular data where to retrieve the categorical value.
-         * @type {string} */
-        this.col = opts.col
-
-        /**
-         * The dictionary (string -> color) which give the color of each category.
-         * @type {object} */
-        this.color = opts.color
-
-        /** A function returning the width of a cell side line, in geo unit
-         * @type {function(Side,number,number):number} */
-        this.width = opts.width || ((side, r, z) => r * 0.2)
-
-        /** A fill color for the cells.
-         * @type {function(import("../Dataset").Cell):string} */
-        this.fillColor = opts.fillColor
-    }
-
-    /**
-     * @param {Array.<import("../Dataset").Cell>} cells
-     * @param {number} r
-     * @param {import("../GeoCanvas").GeoCanvas} cg
-     */
-    draw(cells, r, cg) {
-        //filter
-        if (this.filter) cells = cells.filter(this.filter)
-
-        if (!cells || cells.length == 0) return
-
-        //zoom factor
-        const zf = cg.getZf()
-
-        /**  @type {Array.<Side>} */
-        const sides = []
-
-        //make horizontal sides
-        //sort cells by x and y
-        cells.sort((c1, c2) => (c2.x == c1.x ? c1.y - c2.y : c1.x - c2.x))
-        let c1 = cells[0]
-        let v1 = c1[this.col]
-        for (let i = 1; i < cells.length; i++) {
-            let c2 = cells[i]
-            let v2 = c2[this.col]
-
-            if (c1.y + r == c2.y && c1.x == c2.x) {
-                //cells in same column and touch along horizontal side
-                //make shared side
-                if (v1 != v2) sides.push({ x: c1.x, y: c2.y, or: 'h', v1: v1, v2: v2 })
-            } else {
-                //cells do not touch along horizontal side
-                //make two sides: top one for c1, bottom for c2
-                sides.push({ x: c1.x, y: c1.y + r, or: 'h', v1: v1, v2: undefined })
-                sides.push({ x: c2.x, y: c2.y, or: 'h', v1: undefined, v2: v2 })
-            }
-
-            c1 = c2
-            v1 = v2
-        }
-
-        //make vertical sides
-        //sort cells by y and x
-        cells.sort((c1, c2) => (c2.y == c1.y ? c1.x - c2.x : c1.y - c2.y))
-        c1 = cells[0]
-        v1 = c1[this.col]
-        for (let i = 1; i < cells.length; i++) {
-            let c2 = cells[i]
-            let v2 = c2[this.col]
-
-            if (c1.x + r == c2.x && c1.y == c2.y) {
-                //cells in same row and touch along vertical side
-                //make shared side
-                if (v1 != v2) sides.push({ x: c1.x + r, y: c1.y, or: 'v', v1: v1, v2: v2 })
-            } else {
-                //cells do not touch along vertical side
-                //make two sides: right one for c1, left for c2
-                sides.push({ x: c1.x + r, y: c1.y, or: 'v', v1: v1, v2: undefined })
-                sides.push({ x: c2.x, y: c2.y, or: 'v', v1: undefined, v2: v2 })
-            }
-
-            c1 = c2
-            v1 = v2
-        }
-
-        //
-        if (sides.length == 0) return
-
-        //draw in geo coordinates
-        cg.setCanvasTransform()
-
-        //draw cells, if fillColor specified
-        if (this.fillColor)
-            for (let c of cells) {
-                const fc = this.fillColor(c)
-                if (!fc || fc == 'none') continue
-                cg.ctx.fillStyle = fc
-                cg.ctx.fillRect(c.x, c.y, r, r)
-            }
-
-        //draw sides
-        cg.ctx.lineCap = 'butt'
-        for (let s of sides) {
-            //width
-            /** @type {number|undefined} */
-            const wG = this.width ? this.width(s, r, zf) : undefined
-            if (!wG || wG <= 0) continue
-            const w2 = wG * 0.5
-
-            //set color and width
-            cg.ctx.lineWidth = wG
-
-            //draw segment with correct orientation
-            if (s.or === 'h') {
-                //top line
-                if (s.v2) {
-                    cg.ctx.beginPath()
-                    cg.ctx.strokeStyle = this.color[s.v2]
-                    cg.ctx.moveTo(s.x, s.y + w2)
-                    cg.ctx.lineTo(s.x + r, s.y + w2)
-                    cg.ctx.stroke()
-                }
-
-                //bottom line
-                if (s.v1) {
-                    cg.ctx.beginPath()
-                    cg.ctx.strokeStyle = this.color[s.v1]
-                    cg.ctx.moveTo(s.x, s.y - w2)
-                    cg.ctx.lineTo(s.x + r, s.y - w2)
-                    cg.ctx.stroke()
-                }
-            } else {
-                //right line
-                if (s.v2) {
-                    cg.ctx.beginPath()
-                    cg.ctx.strokeStyle = this.color[s.v2]
-                    cg.ctx.moveTo(s.x + w2, s.y)
-                    cg.ctx.lineTo(s.x + w2, s.y + r)
-                    cg.ctx.stroke()
-                }
-
-                //left line
-                if (s.v1) {
-                    cg.ctx.beginPath()
-                    cg.ctx.strokeStyle = this.color[s.v1]
-                    cg.ctx.moveTo(s.x - w2, s.y)
-                    cg.ctx.lineTo(s.x - w2, s.y + r)
-                    cg.ctx.stroke()
-                }
-            }
-        }
-
-        //update legends
-        this.updateLegends({ style: this, r: r, zf: zf })
-    }
-}
+//@ts-check
+'use strict'
+
+import { Style } from '../Style.js'
+
+/** @typedef {{x:number,y:number,or:"v"|"h",v1:string|undefined,v2:string|undefined}} Side */
+
+/**
+ * A style to show the sides of grid cells based on their different categories.
+ *
+ * @author Julien Gaffuri
+ */
+export class SideCatStyle extends Style {
+    /** @param {object} opts */
+    constructor(opts) {
+        super(opts)
+        opts = opts || {}
+
+        /** The name of the column/attribute of the tabular data where to retrieve the categorical value.
+         * @type {string} */
+        this.col = opts.col
+
+        /**
+         * The dictionary (string -> color) which give the color of each category.
+         * @type {object} */
+        this.color = opts.color
+
+        /** A function returning the width of a cell side line, in geo unit
+         * @type {function(Side,number,number):number} */
+        this.width = opts.width || ((side, r, z) => r * 0.2)
+
+        /** A fill color for the cells.
+         * @type {function(import("../Dataset").Cell):string} */
+        this.fillColor = opts.fillColor
+    }
+
+    /**
+     * @param {Array.<import("../Dataset").Cell>} cells
+     * @param {number} r
+     * @param {import("../GeoCanvas").GeoCanvas} cg
+     */
+    draw(cells, r, cg) {
+        //filter
+        if (this.filter) cells = cells.filter(this.filter)
+
+        if (!cells || cells.length == 0) return
+
+        //zoom factor
+        const zf = cg.getZf()
+
+        /**  @type {Array.<Side>} */
+        const sides = []
+
+        //make horizontal sides
+        //sort cells by x and y
+        cells.sort((c1, c2) => (c2.x == c1.x ? c1.y - c2.y : c1.x - c2.x))
+        let c1 = cells[0]
+        let v1 = c1[this.col]
+        for (let i = 1; i < cells.length; i++) {
+            let c2 = cells[i]
+            let v2 = c2[this.col]
+
+            if (c1.y + r == c2.y && c1.x == c2.x) {
+                //cells in same column and touch along horizontal side
+                //make shared side
+                if (v1 != v2) sides.push({ x: c1.x, y: c2.y, or: 'h', v1: v1, v2: v2 })
+            } else {
+                //cells do not touch along horizontal side
+                //make two sides: top one for c1, bottom for c2
+                sides.push({ x: c1.x, y: c1.y + r, or: 'h', v1: v1, v2: undefined })
+                sides.push({ x: c2.x, y: c2.y, or: 'h', v1: undefined, v2: v2 })
+            }
+
+            c1 = c2
+            v1 = v2
+        }
+
+        //make vertical sides
+        //sort cells by y and x
+        cells.sort((c1, c2) => (c2.y == c1.y ? c1.x - c2.x : c1.y - c2.y))
+        c1 = cells[0]
+        v1 = c1[this.col]
+        for (let i = 1; i < cells.length; i++) {
+            let c2 = cells[i]
+            let v2 = c2[this.col]
+
+            if (c1.x + r == c2.x && c1.y == c2.y) {
+                //cells in same row and touch along vertical side
+                //make shared side
+                if (v1 != v2) sides.push({ x: c1.x + r, y: c1.y, or: 'v', v1: v1, v2: v2 })
+            } else {
+                //cells do not touch along vertical side
+                //make two sides: right one for c1, left for c2
+                sides.push({ x: c1.x + r, y: c1.y, or: 'v', v1: v1, v2: undefined })
+                sides.push({ x: c2.x, y: c2.y, or: 'v', v1: undefined, v2: v2 })
+            }
+
+            c1 = c2
+            v1 = v2
+        }
+
+        //
+        if (sides.length == 0) return
+
+        //draw in geo coordinates
+        cg.setCanvasTransform()
+
+        //draw cells, if fillColor specified
+        if (this.fillColor)
+            for (let c of cells) {
+                const fc = this.fillColor(c)
+                if (!fc || fc == 'none') continue
+                cg.ctx.fillStyle = fc
+                cg.ctx.fillRect(c.x, c.y, r, r)
+            }
+
+        //draw sides
+        cg.ctx.lineCap = 'butt'
+        for (let s of sides) {
+            //width
+            /** @type {number|undefined} */
+            const wG = this.width ? this.width(s, r, zf) : undefined
+            if (!wG || wG <= 0) continue
+            const w2 = wG * 0.5
+
+            //set color and width
+            cg.ctx.lineWidth = wG
+
+            //draw segment with correct orientation
+            if (s.or === 'h') {
+                //top line
+                if (s.v2) {
+                    cg.ctx.beginPath()
+                    cg.ctx.strokeStyle = this.color[s.v2]
+                    cg.ctx.moveTo(s.x, s.y + w2)
+                    cg.ctx.lineTo(s.x + r, s.y + w2)
+                    cg.ctx.stroke()
+                }
+
+                //bottom line
+                if (s.v1) {
+                    cg.ctx.beginPath()
+                    cg.ctx.strokeStyle = this.color[s.v1]
+                    cg.ctx.moveTo(s.x, s.y - w2)
+                    cg.ctx.lineTo(s.x + r, s.y - w2)
+                    cg.ctx.stroke()
+                }
+            } else {
+                //right line
+                if (s.v2) {
+                    cg.ctx.beginPath()
+                    cg.ctx.strokeStyle = this.color[s.v2]
+                    cg.ctx.moveTo(s.x + w2, s.y)
+                    cg.ctx.lineTo(s.x + w2, s.y + r)
+                    cg.ctx.stroke()
+                }
+
+                //left line
+                if (s.v1) {
+                    cg.ctx.beginPath()
+                    cg.ctx.strokeStyle = this.color[s.v1]
+                    cg.ctx.moveTo(s.x - w2, s.y)
+                    cg.ctx.lineTo(s.x - w2, s.y + r)
+                    cg.ctx.stroke()
+                }
+            }
+        }
+
+        //update legends
+        this.updateLegends({ style: this, r: r, zf: zf })
+    }
+}