gridviz 2.0.28 → 2.0.31

package/src/style/SquareColorCatWGLStyle.js

@@ -0,0 +1,120 @@
+//@ts-check
+'use strict'
+
+import { Style } from '../Style.js'
+import { makeWebGLCanvas } from '../utils/webGLUtils.js'
+import { WebGLSquareColoringCatAdvanced } from '../utils/WebGLSquareColoringCatAdvanced.js'
+import { monitor, monitorDuration } from '../utils/Utils.js'
+
+/**
+ * Style based on webGL
+ * To show cells as colored squares, from categories.
+ * Alls squares with the same size
+ *
+ * @author Julien Gaffuri
+ */
+export class SquareColorCatWGLStyle 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 category of the cell, for coloring.
+         * @type {string} */
+        this.colorCol = opts.colorCol
+
+        /**
+         * The dictionary (string -> color) which give the color of each category.
+         * @type {object} */
+        opts.color = opts.color || undefined
+
+        /** @type { Array.<string> } @private */
+        const keys = Object.keys(opts.color)
+
+        /** @type { object } @private */
+        this.catToI = {}
+        for (let i = 0; i < keys.length; i++) this.catToI[keys[i]] = i + ''
+
+        /** @type { Array.<string> } @private */
+        this.colors = []
+        for (let i = 0; i < keys.length; i++) {
+            this.colors.push(opts.color['' + keys[i]])
+        }
+
+        /**
+         * A function returning the size of the cells, in geographical unit. All cells have the same size.
+         * @type {function(number,number):number} */
+        this.size = opts.size // (resolution, zf) => ...
+
+        /**
+         * @private
+         * @type { WebGLSquareColoringCatAdvanced } */
+        this.wgp = new WebGLSquareColoringCatAdvanced(this.colors)
+    }
+
+    /**
+     * @param {Array.<import("../Dataset").Cell>} cells
+     * @param {number} r
+     * @param {import("../GeoCanvas").GeoCanvas} cg
+     */
+    draw(cells, r, cg) {
+        if (monitor) monitorDuration('*** SquareColorCatWGLStyle draw')
+
+        //filter
+        if (this.filter) cells = cells.filter(this.filter)
+
+        //zoom factor
+        const zf = cg.getZf()
+
+        //add vertice and fragment data
+        const r2 = r / 2
+        let c,
+            nb = cells.length
+        const verticesBuffer = []
+        const iBuffer = []
+        for (let i = 0; i < nb; i++) {
+            c = cells[i]
+            const cat = c[this.colorCol]
+            if (cat == undefined) {
+                console.log('Unexpected category: ' + cat)
+                continue
+            }
+            /** @type {number} */
+            const i_ = this.catToI[cat]
+            if (isNaN(+i_)) {
+                console.log('Unexpected category index: ' + cat + ' ' + i_)
+                continue
+            }
+            verticesBuffer.push(c.x + r2, c.y + r2)
+            iBuffer.push(+i_)
+        }
+
+        if (monitor) monitorDuration('   webgl program inputs preparation')
+
+        //create canvas and webgl renderer
+        const cvWGL = makeWebGLCanvas(cg.w + '', cg.h + '')
+        if (!cvWGL) {
+            console.error('No webGL')
+            return
+        }
+        if (monitor) monitorDuration('   web GL canvas creation')
+
+        //draw
+        const sizeGeo = this.size ? this.size(r, zf) : r + 0.2 * zf
+        this.wgp.draw(cvWGL.gl, verticesBuffer, iBuffer, cg.getWebGLTransform(), sizeGeo / zf)
+
+        if (monitor) monitorDuration('   webgl drawing')
+
+        //draw in canvas geo
+        cg.initCanvasTransform()
+        cg.ctx.drawImage(cvWGL.canvas, 0, 0)
+
+        if (monitor) monitorDuration('   canvas drawing')
+
+        //update legends
+        this.updateLegends({ style: this, r: r, zf: zf })
+
+        if (monitor) monitorDuration('*** SquareColorCatWGLStyle end draw')
+    }
+}

package/src/style/SquareColorWGLStyle.js

@@ -0,0 +1,146 @@
+//@ts-check
+'use strict'
+
+import { Style } from '../Style.js'
+import { makeWebGLCanvas } from '../utils/webGLUtils.js'
+import { WebGLSquareColoringAdvanced } from '../utils/WebGLSquareColoringAdvanced.js'
+import { monitor, monitorDuration } from '../utils/Utils.js'
+
+/**
+ * Style based on webGL
+ * To show cells as colored squares, with computation of the colors on GPU side (faster than JavaScript side).
+ * Alls squares with the same size
+ *
+ * @author Julien Gaffuri
+ */
+export class SquareColorWGLStyle 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 t value (within [0,1]) of the cell.
+         * @type {function(number,number,import("../Style").Stat):number} */
+        this.tFun = opts.tFun || ((v, r, s) => v / s.max)
+
+        /**
+         * Distribution stretching method.
+         * The stretching is performed on GPU side (fragment shader).
+         * @type {{ fun:string, alpha:number }} */
+        this.stretching = opts.stretching
+
+        /**
+         * The sample of the color ramp.
+         * The color is computed on GPU side (fragment shader) based on those values (linear interpolation).
+         * @type {Array.<string>} */
+        this.colors =
+            opts.colors ||
+            [
+                'rgb(158, 1, 66)',
+                'rgb(248, 142, 83)',
+                'rgb(251, 248, 176)',
+                'rgb(137, 207, 165)',
+                'rgb(94, 79, 162)',
+            ].reverse()
+        if (opts.color)
+            this.colors = [
+                opts.color(0),
+                opts.color(0.2),
+                opts.color(0.4),
+                opts.color(0.6),
+                opts.color(0.8),
+                opts.color(1),
+            ]
+
+        /**
+         * Define the opacity of the style, within [0,1].
+         * If this opacity is defined, the individual color opacity will be ignored.
+         * @type {function(number,number):number} */
+        this.opacity = opts.opacity // (r,zf) => ...
+
+        /**
+         * A function returning the size of the cells, in geographical unit. All cells have the same size.
+         * @type {function(number,number):number} */
+        this.size = opts.size // (resolution, zf) => ...
+    }
+
+    /**
+     * @param {Array.<import("../Dataset").Cell>} cells
+     * @param {number} r
+     * @param {import("../GeoCanvas").GeoCanvas} cg
+     */
+    draw(cells, r, cg) {
+        if (monitor) monitorDuration('*** SquareColorWGLStyle draw')
+
+        //filter
+        if (this.filter) cells = cells.filter(this.filter)
+
+        //zoom factor
+        const zf = cg.getZf()
+
+        //compute color variable statistics
+        const statColor = Style.getStatistics(cells, (c) => c[this.colorCol], true)
+        if (monitor) monitorDuration('   color stats computation')
+
+        if (!statColor) return
+
+        //create canvas and webgl renderer
+        //for opacity control, see: https://webglfundamentals.org/webgl/lessons/webgl-and-alpha.html
+        const cvWGL = makeWebGLCanvas(
+            cg.w + '',
+            cg.h + '',
+            this.opacity != undefined ? { premultipliedAlpha: false } : undefined
+        )
+        if (!cvWGL) {
+            console.error('No webGL')
+            return
+        }
+        if (monitor) monitorDuration('   web GL canvas creation')
+
+        //add vertice and fragment data
+        const r2 = r / 2
+        const verticesBuffer = []
+        const tBuffer = []
+        for (let c of cells) {
+            const t = this.tFun(c[this.colorCol], r, statColor)
+            if (t == null || t == undefined) continue
+            verticesBuffer.push(c.x + r2, c.y + r2)
+            tBuffer.push(t > 1 ? 1 : t < 0 ? 0 : t)
+        }
+
+        if (monitor) monitorDuration('   webgl drawing data preparation')
+
+        //compute pixel size
+        const sizeGeo = this.size ? this.size(r, zf) : r + 0.2 * zf
+
+        //compute opacity
+        const op = this.opacity ? this.opacity(r, zf) : undefined
+
+        //
+        const wgp = new WebGLSquareColoringAdvanced(cvWGL.gl, this.colors, this.stretching, sizeGeo / zf, op)
+
+        if (monitor) monitorDuration('   webgl program preparation')
+
+        //draw
+        wgp.draw(verticesBuffer, tBuffer, cg.getWebGLTransform())
+
+        if (monitor) monitorDuration('   webgl drawing')
+
+        //draw in canvas geo
+        cg.initCanvasTransform()
+        cg.ctx.drawImage(cvWGL.canvas, 0, 0)
+
+        if (monitor) monitorDuration('   canvas drawing')
+
+        //update legends
+        this.updateLegends({ style: this, r: r, zf: zf, sColor: statColor })
+
+        if (monitor) monitorDuration('*** SquareColorWGLStyle end draw')
+    }
+}

package/src/style/StrokeStyle.js

@@ -0,0 +1,131 @@
+//@ts-check
+'use strict'
+
+import { Style } from '../Style.js'
+
+/**
+ *
+ * @author Julien Gaffuri
+ */
+export class StrokeStyle 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.strokeColorCol = opts.strokeColorCol
+
+        /** A function returning the color of the stroke.
+         * @type {function(number,number,import("../Style").Stat|undefined):string} */
+        this.strokeColor = opts.strokeColor || (() => '#666')
+
+        /** 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
+
+        /** The stroke line width, in pixels.
+         * @type {string} */
+        this.strokeWidthCol = opts.strokeWidthCol
+
+        /** The stroke line width in geographical unit.
+         * @type {function(number,number,import("../Style").Stat|undefined,number):number} */
+        this.strokeWidth = opts.strokeWidth // (v,r,s,z)=>...
+
+        /** 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 statColor
+        if (this.strokeColorCol) statColor = Style.getStatistics(cells, (c) => c[this.strokeColorCol], true)
+
+        let statSize
+        if (this.sizeCol) statSize = Style.getStatistics(cells, (c) => c[this.sizeCol], true)
+
+        let statWidth
+        if (this.strokeWidthCol) statWidth = Style.getStatistics(cells, (c) => c[this.strokeWidthCol], true)
+
+        //draw with HTML canvas
+        //in geo coordinates
+        cg.setCanvasTransform()
+
+        const r2 = r * 0.5
+        for (let cell of cells) {
+            //color
+            const col = this.strokeColor
+                ? this.strokeColor(cell[this.strokeColorCol], r, statColor)
+                : undefined
+            if (!col || col === 'none') continue
+            cg.ctx.strokeStyle = col
+
+            //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)
+
+            //width
+            const wi = this.strokeWidth
+                ? this.strokeWidth(cell[this.strokeWidthCol], r, statWidth, zf)
+                : 1 * zf
+            if (!wi || wi <= 0) continue
+            cg.ctx.lineWidth = wi
+
+            //shape
+            const shape = this.shape ? this.shape(cell) : 'square'
+            if (shape === 'none') continue
+
+            //get offset
+            const offset = this.offset(cell, r, zf)
+
+            if (shape === 'square') {
+                //draw square
+                const d = r * (1 - sG / r) * 0.5
+                cg.ctx.beginPath()
+                cg.ctx.rect(cell.x + d + offset.dx, cell.y + d + offset.dy, sG, sG)
+                cg.ctx.stroke()
+            } 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.stroke()
+            } 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.lineTo(cell.x + r2 - s2, cell.y + r2)
+                cg.ctx.stroke()
+            } else if (shape === 'donut') {
+                console.error('Not implemented')
+            } else {
+                throw new Error('Unexpected shape:' + shape)
+            }
+        }
+
+        //update legends
+        //this.updateLegends({ style: this, r: resolution, zf: zf, sSize: statSize, sColor: statColor });
+    }
+}

package/src/style/TanakaStyle.js

@@ -0,0 +1,160 @@
+//@ts-check
+'use strict'
+
+import { SquareColorWGLStyle } from './SquareColorWGLStyle.js'
+import { SideStyle } from './SideStyle.js'
+
+/**
+ *
+ * @see https://manifold.net/doc/mfd9/example__tanaka_contours.htm
+ *
+ * @author Julien Gaffuri
+ */
+export class TanakaStyle {
+    /**
+     * @param {string} col
+     * @param {object} opts
+     * @returns {Array.<import("../Style").Style>}
+     */
+    static get(col, opts) {
+        opts = opts || {}
+
+        //get colors from d3 ramps, if 'nb' is specified
+        if (opts.nb != undefined) {
+            if (opts.nb < 2) {
+                console.error('unexpected number of colors in tanaka (<2): ' + opts.nb)
+                opts.nb = 2
+            }
+            if (!opts.color) {
+                console.error('color function not defined in tanaka')
+                opts.color = () => 'gray'
+            }
+            opts.colors = []
+            for (let i = 0; i < opts.nb; i++) opts.colors.push(opts.color(i / (opts.nb - 1)))
+        }
+
+        /**
+         * The colors.
+         * @type {Array.<string>} */
+        opts.colors = opts.colors || ['#a9bb9e', '#c9dcaa', '#fde89f', '#f9a579', '#eb444b']
+        const nb = opts.colors.length
+
+        /** A function to compute 't' from the value v
+         * @type {function(number,number,import("../Style").Stat):number} */
+        opts.tFun = opts.tFun || ((v, r, s) => (v - s.min) / (s.max - s.min))
+
+        //shadow colors
+        opts.colDark = opts.colDark || '#111'
+        opts.colBright = opts.colBright || '#ddd'
+
+        //width of the segment (share of the resolution)
+        opts.widthFactor = opts.widthFactor || 0.08
+
+        //shading
+        opts.newShading = opts.newShading
+        opts.newShadingWidthPix = opts.newShadingWidthPix || 2
+        //transparency value, within [0,1]
+        opts.newShadingTr =
+            opts.newShadingTr ||
+            ((sideValue, sideStat) =>
+                Math.abs(sideValue) / Math.max(Math.abs(sideStat.min), Math.abs(sideStat.max)))
+
+        /**
+         * @param {number} t A cell t value, within [0,1].
+         * @returns the class number for the value
+         */
+        const getClass = (t) => {
+            if (isNaN(t) || t == undefined) {
+                console.error('Unexpected t value 1: ' + t)
+                return -9
+            }
+            for (let i = 0; i < nb; i++) if (t <= (i + 1) / nb) return i
+            console.error('Unexpected t value 2: ' + t)
+            return -9
+        }
+
+        const colStyle = new SquareColorWGLStyle({
+            colorCol: col,
+            colors: opts.colors,
+            tFun: (v, r, s) => {
+                const t = opts.tFun(v, r, s)
+                const c = getClass(t)
+                return c / (nb - 1)
+            },
+            //stretching: { fun: "expRev", alpha: -7 },
+            size: (r, zf) => r + 0.5 * zf, //that is to ensure no gap between same class cells is visible
+            filter: opts.filter,
+        })
+
+        /*
+        if no web gl:    
+            const colStyle = new ShapeColorSizeStyle({
+                colorCol: col,
+                //the color corresponding to the class
+                color: (v, r, s, zf) => {
+                    if (v == 0 && opts.tFun && isNaN(opts.tFun(v, r, s)))
+                        return undefined
+                    return opts.colors[getClass(opts.tFun ? opts.tFun(v, r, s) : v)]
+                },
+                shape: () => "square",
+                size: (v, r, s, zf) => r + 0.5 * zf, //that is to ensure no gap between same class cells is visible
+            })
+        */
+
+        /** The side style, for the shadow effect */
+        const sideStyle = new SideStyle({
+            valueCol: col,
+            value: (v1, v2, r, s, zf) => {
+                //compute the number of classes of difference
+                if (v1 === undefined && v2 === undefined) return 0
+                else if (v2 === undefined) {
+                    const t = opts.tFun(v1, r, s)
+                    if (t == undefined || isNaN(t)) throw new Error('Unexpected value: ' + v1 + ' - ' + t)
+                    const c = getClass(t)
+                    return c + 1
+                } else if (v1 === undefined) {
+                    const t = opts.tFun(v2, r, s)
+                    if (t == undefined || isNaN(t)) throw new Error('Unexpected value: ' + v2 + ' - ' + t)
+                    const c = getClass(t)
+                    return -c - 1
+                }
+                const t1 = opts.tFun(v1, r, s)
+                if (t1 == undefined || isNaN(t1)) throw new Error('Unexpected value: ' + v1 + ' - ' + t1)
+                const t2 = opts.tFun(v2, r, s)
+                if (t2 == undefined || isNaN(t2)) throw new Error('Unexpected value: ' + v2 + ' - ' + t2)
+                const c1 = getClass(t1)
+                const c2 = getClass(t2)
+                return -c2 + c1
+            },
+
+            color: opts.newShading
+                ? //black with transparency depending on difference
+                  (side, r, s, z) => {
+                      const tr = opts.newShadingTr(side.value, s)
+                      return (side.value > 0 && side.or === 'h') || (side.value < 0 && side.or === 'v')
+                          ? 'rgba(255,255,100,' + tr + ')'
+                          : 'rgba(0,0,0,' + tr + ')'
+                  }
+                : //white or black, depending on orientation and value
+                  (side, r, s, z) => {
+                      if (side.value === 0) return
+                      //return "gray"
+                      if (side.or === 'v') return side.value < 0 ? opts.colBright : opts.colDark
+                      return side.value < 0 ? opts.colDark : opts.colBright
+                  },
+
+            width: opts.newShading
+                ? //fill size
+                  (side, r, s, z) => {
+                      return opts.newShadingWidthPix * z
+                  }
+                : //width depends on the value, that is the number of classes of difference
+                  (side, r, s, z) =>
+                      opts.widthFactor * r * Math.abs(side.value) * (side.or === 'v' ? 0.5 : 1),
+
+            filter: opts.filter,
+        })
+
+        return [colStyle, sideStyle]
+    }
+}

package/src/style/TextStyle.js

@@ -0,0 +1,132 @@
+//@ts-check
+'use strict'
+
+import { Style } from '../Style.js'
+
+/**
+ *
+ * @author Julien Gaffuri
+ */
+export class TextStyle 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 text.
+         * @type {string} */
+        this.textCol = opts.textCol
+
+        /** A function returning the text of a cell.
+         * @type {function(number,number,import("../Style").Stat|undefined):string} */
+        this.text = opts.text || ((v, r, s, z) => 'X')
+
+        /** 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):string} */
+        this.color = opts.color || (() => '#EA6BAC')
+
+        /** The name of the column/attribute of the tabular data where to retrieve the variable for font size.
+         * @type {string} */
+        this.fontSizeCol = opts.fontSizeCol
+
+        /** A function returning the font size of a cell in geo unit.
+         * @type {function(number,number,import("../Style").Stat|undefined,number):number} */
+        this.fontSize = opts.fontSize || ((v, r, s, z) => r * 0.8)
+
+        /** The text font family.
+         * @type {string} */
+        this.fontFamily = opts.fontFamily || 'Arial'
+
+        /** The text font weight.
+         * @type {string} */
+        this.fontWeight = opts.fontWeight || 'bold'
+    }
+
+    /**
+     * Draw cells as text.
+     *
+     * @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 statText
+        if (this.textCol) {
+            //compute text variable statistics
+            statText = Style.getStatistics(cells, (c) => c[this.textCol], true)
+        }
+
+        let statColor
+        if (this.colorCol) {
+            //compute color variable statistics
+            statColor = Style.getStatistics(cells, (c) => c[this.colorCol], true)
+        }
+
+        let statFontSize
+        if (this.fontSizeCol) {
+            //if size is used, sort cells by size so that the biggest are drawn first
+            cells.sort((c1, c2) => c2[this.fontSizeCol] - c1[this.fontSizeCol])
+            //and compute size variable statistics
+            statFontSize = Style.getStatistics(cells, (c) => c[this.fontSizeCol], true)
+        }
+
+        //draw with HTML canvas
+        //in screen coordinates
+        cg.initCanvasTransform()
+
+        for (let cell of cells) {
+            //get cell text
+            const text = this.text ? this.text(cell[this.textCol], r, statText) : undefined
+            if (text == undefined || text == null || text + '' === '') continue
+
+            //color
+            const col = this.color ? this.color(cell[this.colorCol], r, statColor) : undefined
+            if (!col) continue
+            cg.ctx.fillStyle = col
+
+            //font size
+            //size - in pixel unit
+            const fontSizePix = this.fontSize(cell[this.fontSizeCol], r, statFontSize, zf) / zf
+
+            //set font
+            const fontFamily = this.fontFamily || 'Arial'
+            const fontWeight = this.fontWeight || 'bold'
+            cg.ctx.font = fontWeight + ' ' + fontSizePix + 'px ' + fontFamily
+
+            //get offset
+            const offset = this.offset(cell, r, zf)
+
+            //text position
+            cg.ctx.textAlign = 'center'
+            const tx = cg.geoToPixX(cell.x + r * 0.5 + offset.dx)
+            const ty = cg.geoToPixY(cell.y + r * 0.5 + offset.dy) + fontSizePix * 0.3 //it should be 0.5 but 0.3 seems to work better
+
+            //draw the text
+            cg.ctx.fillText(text, tx, ty)
+        }
+
+        //update legends
+        this.updateLegends({ style: this, r: r, zf: zf, sColor: statColor })
+    }
+
+    /**
+     * Build a function [0,1]->string for characters legend
+     *
+     * @param {Array.<string>} chars
+     * @returns {function(number):string}
+     */
+    static getCharLegendFun(chars) {
+        const nb = chars.length
+        return (t) => (t == 0 ? '' : t == 1 ? chars[nb - 1] : chars[Math.floor(t * nb)])
+    }
+}