gridviz 2.0.28 → 2.0.31

package/src/style/SegmentStyle.js

@@ -0,0 +1,142 @@
+//@ts-check
+'use strict'
+
+import { Style } from '../Style.js'
+
+/**
+ * A style where each cell is represented by a segment whose length, width, color and orientation can vary according to statistical values.
+ *
+ * @author Julien Gaffuri
+ */
+export class SegmentStyle extends Style {
+    /** @param {object} opts */
+    constructor(opts) {
+        super(opts)
+        opts = opts || {}
+
+        /** A function returning the orientation (in degrees) of the segment representing a cell.
+         * @type {function(import("../Dataset").Cell):number} */
+        this.orientation = opts.orientation || (() => 0)
+
+        /**
+         * @type {string} */
+        this.colorCol = opts.colorCol
+
+        /** A function returning the color of the cell segment.
+         * @type {function(number,number,import("../Style").Stat|undefined):string} */
+        this.color = opts.color || (() => '#EA6BAC')
+
+        /**
+         * @type {string} */
+        this.lengthCol = opts.lengthCol
+
+        /** A function returning the length of the segment representing a cell, in geo unit
+         * @type {function(number,number,import("../Style").Stat|undefined,number):number} */
+        this.length = opts.length
+
+        /**
+         * @type {string} */
+        this.widthCol = opts.widthCol
+
+        /** A function returning the width of the segment representing a cell, in geo unit
+         * @type {function(number,number,import("../Style").Stat|undefined,number):number} */
+        this.width = opts.width
+    }
+
+    /**
+     * Draw cells as segments.
+     *
+     * @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)
+
+        //zoom factor
+        const zf = cg.getZf()
+
+        let statColor
+        if (this.colorCol) {
+            //compute color variable statistics
+            statColor = Style.getStatistics(cells, (c) => c[this.colorCol], true)
+        }
+
+        let statLength
+        if (this.lengthCol) {
+            //if length is used, sort cells by length so that the longests are drawn first
+            cells.sort((c1, c2) => c2[this.lengthCol] - c1[this.lengthCol])
+            //and compute size variable statistics
+            statLength = Style.getStatistics(cells, (c) => c[this.lengthCol], true)
+        }
+
+        let statWidth
+        if (this.widthCol) {
+            //and compute size variable statistics
+            statWidth = Style.getStatistics(cells, (c) => c[this.widthCol], true)
+        }
+
+        //
+        cg.ctx.lineCap = 'butt'
+
+        //conversion factor degree -> radian
+        const f = Math.PI / 180
+
+        //draw in geo coordinates
+        cg.setCanvasTransform()
+
+        for (let c of cells) {
+            //color
+            /** @type {string|undefined} */
+            const col = this.color ? this.color(c[this.colorCol], r, statColor) : undefined
+            if (!col) continue
+
+            //width
+            /** @type {number|undefined} */
+            const wG = this.width ? this.width(c[this.widthCol], r, statWidth, zf) : undefined
+            if (!wG || wG < 0) continue
+
+            //length
+            /** @type {number|undefined} */
+            const lG = this.length ? this.length(c[this.lengthCol], r, statLength, zf) : undefined
+            if (!lG || lG < 0) continue
+
+            //orientation (in radian)
+            /** @type {number} */
+            const or = this.orientation(c) * f
+            if (or === undefined || isNaN(or)) continue
+
+            //get offset
+            const offset = this.offset(c, r, zf)
+
+            //set color and width
+            cg.ctx.strokeStyle = col
+            cg.ctx.lineWidth = wG
+
+            //compute segment centre postition
+            const cx = c.x + r / 2 + offset.dx
+            const cy = c.y + r / 2 + offset.dy
+
+            //compute segment direction
+            const dx = 0.5 * Math.cos(or) * lG
+            const dy = 0.5 * Math.sin(or) * lG
+
+            //draw segment
+            cg.ctx.beginPath()
+            cg.ctx.moveTo(cx - dx, cy - dy)
+            cg.ctx.lineTo(cx + dx, cy + dy)
+            cg.ctx.stroke()
+        }
+
+        //update legend, if any
+        this.updateLegends({
+            style: this,
+            r: r,
+            zf: zf,
+            sColor: statColor,
+            sLength: statLength,
+            sWidth: statWidth,
+        })
+    }
+}

package/src/style/ShapeColorSizeStyle.js

@@ -0,0 +1,126 @@
+//@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 || {}
+
+        /** The name of the column/attribute of the tabular data where to retrieve the variable for color.
+         * @type {string} */
+        this.colorCol = opts.colorCol
+
+        /** A function returning the color of the cell.
+         * @type {function(number,number,import("../Style").Stat|undefined,number):string} */
+        this.color = opts.color || (() => '#EA6BAC') //(v,r,s,zf) => {}
+
+        /** The name of the column/attribute of the tabular data where to retrieve the variable for size.
+         * @type {string} */
+        this.sizeCol = opts.sizeCol
+
+        /** A function returning the size of a cell in geographical unit.
+         * @type {function(number,number,import("../Style").Stat|undefined,number):number} */
+        this.size = opts.size
+
+        /** A function returning the shape of a cell.
+         * @type {function(import("../Dataset").Cell):import("../Style").Shape} */
+        this.shape = opts.shape || (() => 'square')
+    }
+
+    /**
+     * Draw cells as squares, with various colors and size.
+     *
+     * @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)
+
+        //zoom factor
+        const zf = cg.getZf()
+
+        let statSize
+        if (this.sizeCol) {
+            //if size is used, sort cells by size so that the biggest are drawn first
+            cells.sort((c1, c2) => c2[this.sizeCol] - c1[this.sizeCol])
+            //and compute size variable statistics
+            statSize = Style.getStatistics(cells, (c) => c[this.sizeCol], true)
+        }
+
+        let statColor
+        if (this.colorCol) {
+            //compute color variable statistics
+            statColor = Style.getStatistics(cells, (c) => c[this.colorCol], true)
+        }
+
+        //draw with HTML canvas
+        //in geo coordinates
+        cg.setCanvasTransform()
+
+        const r2 = r * 0.5
+        for (let cell of cells) {
+            //color
+            const col = this.color ? this.color(cell[this.colorCol], r, statColor, zf) : undefined
+            if (!col || col === 'none') continue
+            cg.ctx.fillStyle = col
+
+            //shape
+            const shape = this.shape ? this.shape(cell) : 'square'
+            if (shape === 'none') continue
+
+            //size
+            /** @type {function(number,number,import("../Style").Stat|undefined,number):number} */
+            let s_ = this.size || (() => r)
+            //size - in geo unit
+            const sG = s_(cell[this.sizeCol], r, statSize, zf)
+
+            //get offset
+            const offset = this.offset(cell, r, zf)
+
+            if (shape === 'square') {
+                //draw square
+                const d = r * (1 - sG / r) * 0.5
+                cg.ctx.fillRect(cell.x + d + offset.dx, cell.y + d + offset.dy, sG, sG)
+            } else if (shape === 'circle') {
+                //draw circle
+                cg.ctx.beginPath()
+                cg.ctx.arc(cell.x + r2 + offset.dx, cell.y + r2 + offset.dy, sG * 0.5, 0, 2 * Math.PI, false)
+                cg.ctx.fill()
+            } else if (shape === 'donut') {
+                //draw donut
+                const xc = cell.x + r2 + offset.dx,
+                    yc = cell.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 - sG / r) * r2, 0, 2 * Math.PI, true)
+                cg.ctx.closePath()
+                cg.ctx.fill()
+            } else if (shape === 'diamond') {
+                const s2 = sG * 0.5
+                cg.ctx.beginPath()
+                cg.ctx.moveTo(cell.x + r2 - s2, cell.y + r2)
+                cg.ctx.lineTo(cell.x + r2, cell.y + r2 + s2)
+                cg.ctx.lineTo(cell.x + r2 + s2, cell.y + r2)
+                cg.ctx.lineTo(cell.x + r2, cell.y + r2 - s2)
+                cg.ctx.fill()
+            } else {
+                throw new Error('Unexpected shape:' + shape)
+            }
+        }
+
+        //update legends
+        this.updateLegends({ style: this, r: r, zf: zf, sSize: statSize, sColor: statColor })
+    }
+}

package/src/style/SideCatStyle.js

@@ -0,0 +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 })
+    }
+}

package/src/style/SideStyle.js

@@ -0,0 +1,218 @@
+//@ts-check
+'use strict'
+
+import { Style } from '../Style.js'
+
+/** @typedef {{x:number,y:number,or:"v"|"h",value:number}} Side */
+
+/**
+ *
+ * @author Julien Gaffuri
+ */
+export class SideStyle 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 variable for the cell values.
+         * @type {string} */
+        this.valueCol = opts.valueCol
+
+        /** A function returning the value of a cell side. This value is computed from the two adjacent cell values.
+         * For horizontal sides, v1 is the value of the cell below and v2 the value of the cell above.
+         * For vertical sides, v1 is the value of the cell left and v2 the value of the cell right.
+         * @type {function(number|undefined,number|undefined,number,import("../Style").Stat|undefined,number):number} */
+        this.value = opts.value || ((v1, v2, r, s, zf) => 1)
+
+        /** A function returning the color of a cell side.
+         * @type {function(Side,number,import("../Style").Stat|undefined,number):string} */
+        this.color = opts.color || (() => '#EA6BAC')
+
+        /** A function returning the width of a cell side, in geo unit
+         * @type {function(Side,number,import("../Style").Stat|undefined,number):number} */
+        this.width = opts.width || ((side, r, s, zf) => (r * side.value) / 5)
+
+        /** orientation. Set to 90 to show sides as slope lines for example.
+         * @type {number} */
+        this.orientation = opts.orientation || 0
+
+        /** 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)
+
+        //zoom factor
+        const zf = cg.getZf()
+
+        //compute stats on cell values
+        let statValue
+        if (this.valueCol) {
+            //compute color variable statistics
+            statValue = Style.getStatistics(cells, (c) => c[this.valueCol], true)
+        }
+
+        /**  @type {Array.<Side>} */
+        const sides = []
+
+        const epsilon = r * 0.001
+
+        //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]
+        for (let i = 1; i < cells.length; i++) {
+            let c2 = cells[i]
+
+            if (Math.abs(c1.y + r - c2.y) <= epsilon && Math.abs(c1.x - c2.x) <= epsilon)
+                //cells in same column and touch along horizontal side
+                //make shared side
+                sides.push({
+                    x: c1.x,
+                    y: c2.y,
+                    or: 'h',
+                    value: this.value(c1[this.valueCol], c2[this.valueCol], r, statValue, zf),
+                })
+            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',
+                    value: this.value(c1[this.valueCol], undefined, r, statValue, zf),
+                })
+                sides.push({
+                    x: c2.x,
+                    y: c2.y,
+                    or: 'h',
+                    value: this.value(undefined, c2[this.valueCol], r, statValue, zf),
+                })
+            }
+
+            c1 = c2
+        }
+
+        //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]
+        for (let i = 1; i < cells.length; i++) {
+            let c2 = cells[i]
+
+            if (Math.abs(c1.x + r - c2.x) <= epsilon && Math.abs(c1.y - c2.y) <= epsilon)
+                //cells in same row and touch along vertical side
+                //make shared side
+                sides.push({
+                    x: c1.x + r,
+                    y: c1.y,
+                    or: 'v',
+                    value: this.value(c1[this.valueCol], c2[this.valueCol], r, statValue, zf),
+                })
+            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',
+                    value: this.value(c1[this.valueCol], undefined, r, statValue, zf),
+                })
+                sides.push({
+                    x: c2.x,
+                    y: c2.y,
+                    or: 'v',
+                    value: this.value(undefined, c2[this.valueCol], r, statValue, zf),
+                })
+            }
+
+            c1 = c2
+        }
+
+        //
+        if (sides.length == 0) return
+
+        //compute stats on sides
+        const statSides = SideStyle.getSideStatistics(sides, true)
+
+        //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'
+        const r2 = r / 2
+        for (let s of sides) {
+            //color
+            /** @type {string|undefined} */
+            const col = this.color ? this.color(s, r, statSides, zf) : undefined
+            if (!col || col == 'none') continue
+
+            //width
+            /** @type {number|undefined} */
+            const wG = this.width ? this.width(s, r, statSides, zf) : undefined
+            if (!wG || wG <= 0) continue
+
+            //set color and width
+            cg.ctx.strokeStyle = col
+            cg.ctx.lineWidth = wG
+
+            //draw segment with correct orientation
+            cg.ctx.beginPath()
+            if (this.orientation == 90) {
+                cg.ctx.moveTo(s.x + r2, s.y + r2)
+                if (s.or === 'h') cg.ctx.lineTo(s.x + r2, s.y - r2)
+                else cg.ctx.lineTo(s.x - r2, s.y + r2)
+            } else {
+                cg.ctx.moveTo(s.x, s.y)
+                cg.ctx.lineTo(s.x + (s.or === 'h' ? r : 0), s.y + (s.or === 'v' ? r : 0))
+            }
+            cg.ctx.stroke()
+        }
+
+        //update legends
+        this.updateLegends({ style: this, r: r, zf: zf })
+    }
+
+    /**
+     * Compute some statistics on a value of some sides.
+     * This is used to define how to draw specifically the sides within the view.
+     *
+     * @param {Array.<Side>} sides
+     * @param {boolean} ignoreZeros
+     * @returns {import("../Style").Stat | undefined}
+     */
+    static getSideStatistics(sides, ignoreZeros) {
+        if (!sides || sides.length == 0) return undefined
+        let min = Infinity
+        let max = -Infinity
+        //let sum = 0
+        //let nb = 0
+        for (const s of sides) {
+            const v = s.value
+            if (ignoreZeros && !v) continue
+            if (v < min) min = v
+            if (v > max) max = v
+            //sum += v
+            //nb++
+        }
+        return { min: min, max: max }
+    }
+}