gridviz 2.0.28 → 2.0.31

package/src/style/DotDensityStyle.js

@@ -0,0 +1,156 @@
+//@ts-check
+'use strict'
+
+import { Style } from '../Style.js'
+import { randomNormal } from 'd3-random'
+import { checkWebGLSupport, makeWebGLCanvas } from '../utils/webGLUtils.js'
+import { WebGLSquareColoring } from '../utils/WebGLSquareColoring.js'
+import { color } from 'd3-color'
+import { monitor, monitorDuration } from '../utils/Utils.js'
+
+/**
+ *
+ * @author Julien Gaffuri
+ */
+export class DotDensityStyle 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 dot number.
+         * @type {string} */
+        this.nbCol = opts.nbCol
+
+        /** A function returning the number of dots for a cell value.
+         * @type {function(number,number,import("../Style").Stat,number):number} */
+        this.nb = opts.nb || ((v, r, s, zf) => (((0.3 * r * r) / (zf * zf)) * v) / s.max)
+
+        /** The color of the dots. Same color for all dots within a cell.
+         * @type {function(import("../Dataset").Cell):string} */
+        this.color = opts.color || (() => '#FF5733')
+
+        /** A function returning the size of the dots, in geo unit.
+         * @type {function(number,number):number} */
+        this.dotSize = opts.dotSize //|| ((r, zf) => ...
+
+        /** A function returning the sigma of the distribution from the resolution, in geo unit.
+         * @type {function(number,number):number} */
+        this.sigma = opts.sigma //|| ((r,zf) => ...
+    }
+
+    /**
+     * Draw cells as text.
+     *
+     * @param {Array.<import("../Dataset").Cell>} cells
+     * @param {number} r
+     * @param {import("../GeoCanvas").GeoCanvas} cg
+     */
+    draw(cells, r, cg) {
+        if (monitor) monitorDuration('*** DotDensityStyle draw')
+
+        //filter
+        if (this.filter) cells = cells.filter(this.filter)
+
+        //zoom factor
+        const zf = cg.getZf()
+
+        let stat
+        if (this.nbCol) stat = Style.getStatistics(cells, (c) => c[this.nbCol], true)
+        if (!stat) return
+
+        //size of the dots
+        const sGeo = this.dotSize ? this.dotSize(r, zf) : 2 * zf
+
+        //make random function
+        const sig = this.sigma ? this.sigma(r, zf) : r * 0.4
+        const rand = randomNormal(0, sig)
+
+        if (monitor) monitorDuration(' preparation')
+
+        if (checkWebGLSupport()) {
+            //create canvas and webgl renderer
+            const cvWGL = makeWebGLCanvas(cg.w + '', cg.h + '')
+            if (!cvWGL) {
+                console.error('No webGL')
+                return
+            }
+
+            //create webGL program
+            const prog = new WebGLSquareColoring(cvWGL.gl, sGeo / zf)
+
+            if (monitor) monitorDuration(' webgl creation')
+
+            const r2 = r / 2
+
+            let col, offset, nb, cx, cy, cc
+            for (let c of cells) {
+                //get color
+                col = this.color(c)
+                if (!col || col === 'none') continue
+
+                //get offset
+                offset = this.offset(c, r, zf)
+
+                //number of dots
+                nb = this.nb(c[this.nbCol], r, stat, zf)
+
+                //cell center
+                cx = c.x + offset.dx + r2
+                cy = c.y + offset.dy + r2
+
+                //convert color
+                cc = color(col)
+                if (!cc) return
+
+                //random points
+                for (let i = 0; i <= nb; i++)
+                    prog.addPointData2(cx + rand(), cy + rand(), cc.r, cc.g, cc.b, cc.opacity)
+            }
+
+            if (monitor) monitorDuration(' data preparation')
+
+            //draw
+            prog.draw(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')
+        } else {
+            //draw with HTML canvas
+
+            //draw in geo coordinates
+            cg.setCanvasTransform()
+
+            for (let c of cells) {
+                //get color
+                const col = this.color(c)
+                if (!col || col === 'none') continue
+                //set color
+                cg.ctx.fillStyle = col
+
+                //get offset
+                const offset = this.offset(c, r, zf)
+
+                //number of dots
+                const nb = this.nb(c[this.nbCol], r, stat, zf)
+
+                //draw random dots
+                const cx = c.x + offset.dx + r / 2,
+                    cy = c.y + offset.dy + r / 2
+                for (let i = 0; i <= nb; i++) {
+                    cg.ctx.fillRect(cx + rand(), cy + rand(), sGeo, sGeo)
+                }
+            }
+        }
+
+        //update legends
+        this.updateLegends({ style: this, r: r, zf: zf })
+
+        if (monitor) monitorDuration('*** DotDensityStyle end draw')
+    }
+}

package/src/style/JoyPlotStyle.js

@@ -0,0 +1,135 @@
+//@ts-check
+'use strict'
+
+import { Style } from '../Style.js'
+
+/**
+ *
+ * @author Julien Gaffuri
+ */
+export class JoyPlotStyle extends Style {
+    /** @param {object} opts */
+    constructor(opts) {
+        super(opts)
+        opts = opts || {}
+
+        /** The cell column where to get the value to represent.
+         * @type {string} */
+        this.heightCol = opts.heightCol
+
+        /** A function returning the height of a cell.
+         * @type {function(number,number,import("../Style").Stat|undefined,number):number} */
+        this.height = opts.height || ((v) => Math.sqrt(v))
+
+        /**
+         * @type {function(number,{min:number, max:number},number,number):string} */
+        this.lineColor = opts.lineColor || ((y, ys, r, zf) => '#BBB')
+        /**
+         * @type {function(number,{min:number, max:number},number,number):number} */
+        this.lineWidth = opts.lineWidth || ((y, ys, r, zf) => zf)
+        /**
+         * @type {function(number,{min:number, max:number},number,number):string} */
+        this.fillColor = opts.fillColor || ((y, ys, r, zf) => '#c08c5968')
+    }
+
+    /**
+     * Draw cells as squares depending on their value.
+     *
+     * @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)
+
+        cg.ctx.lineJoin = 'round'
+
+        //zoom factor
+        const zf = cg.getZf()
+
+        //compute statistics
+        const stat = Style.getStatistics(cells, (c) => c[this.heightCol], true)
+
+        //index cells by y and x
+        /**  @type {object} */
+        const ind = {}
+        for (const cell of cells) {
+            let row = ind[cell.y]
+            if (!row) {
+                row = {}
+                ind[cell.y] = row
+            }
+            row[cell.x] = this.height(cell[this.heightCol], r, stat, zf)
+        }
+
+        //compute extent
+        const e = cg.extGeo
+        if (!e) return
+        const xMin = Math.floor(e.xMin / r) * r
+        const xMax = Math.floor(e.xMax / r) * r
+        const yMin = Math.floor(e.yMin / r) * r
+        const yMax = Math.floor(e.yMax / r) * r
+
+        /**  @type {{min:number, max:number}} */
+        const ys = { min: yMin, max: yMax }
+
+        //draw in geo coordinates
+        cg.setCanvasTransform()
+
+        //draw lines, row by row, stating from the top
+        for (let y = yMax; y >= yMin; y -= r) {
+            //get row
+            const row = ind[y]
+
+            //no row
+            if (!row) continue
+
+            //place first point
+            cg.ctx.beginPath()
+            cg.ctx.moveTo(xMin - r / 2, y)
+
+            //store the previous height
+            /** @type {number|undefined} */
+            let hG_
+
+            //go through the line cells
+            for (let x = xMin; x <= xMax; x += r) {
+                //get column value
+                /** @type {number} */
+                let hG = row[x]
+                if (!hG) hG = 0
+
+                if (hG || hG_) {
+                    //draw line only when at least one of both values is non-null
+                    //TODO test bezierCurveTo
+                    cg.ctx.lineTo(x + r / 2, y + hG)
+                } else {
+                    //else move the point
+                    cg.ctx.moveTo(x + r / 2, y)
+                }
+                //store the previous value
+                hG_ = hG
+            }
+
+            //last point
+            if (hG_) cg.ctx.lineTo(xMax + r / 2, y)
+
+            //draw fill
+            const fc = this.fillColor(y, ys, r, zf)
+            if (fc && fc != 'none') {
+                cg.ctx.fillStyle = fc
+                cg.ctx.fill()
+            }
+
+            //draw line
+            const lc = this.lineColor(y, ys, r, zf)
+            const lw = this.lineWidth(y, ys, r, zf)
+            if (lc && lc != 'none' && lw > 0) {
+                cg.ctx.strokeStyle = lc
+                cg.ctx.lineWidth = lw
+                cg.ctx.stroke()
+            }
+        }
+    }
+}

package/src/style/KernelSmoothingOldStyle.js

@@ -0,0 +1,221 @@
+//@ts-check
+'use strict'
+
+import { Style } from '../Style.js'
+
+/**
+ * A style representing the cell as a smoothed layer, to smoothing local variations and show main trends across space.
+ *
+ * @author Julien Gaffuri
+ */
+export class KernelSmoothingStyle extends Style {
+    //bandwidth
+    // https://observablehq.com/@uwdata/fast-kde
+    // https://observablehq.com/d/3127b6d89ada959f
+    //TODO use https://github.com/uwdata/fast-kde ?
+    //TODO https://observablehq.com/@sahilchinoy/areal-interpolation-iii ?
+
+    /** @param {object} opts */
+    constructor(opts) {
+        super(opts)
+        opts = opts || {}
+
+        /** A function specifying the value to consider for each cell. This is the value to smooth.
+         * @type {function(import("../Dataset").Cell):number} */
+        this.value = opts.value
+
+        /** The smoothing parameter, in geo unit. The larger, the more smoothed.
+         * @type {function(number,number):number}
+         */
+        this.sigma = opts.sigma // (r, zf)=>...
+
+        /** The styles to represent the smoothed cells.
+         * @type {Array.<Style>}
+         */
+        this.styles = opts.styles
+    }
+
+    /**
+     * Compute the kernel matrix, that is the matrix of the weights.
+     * One quadrant is necessary only, since it is symetrical (along both x and y axes).
+     * @param {number} s Sigma (in grid pixel !)
+     * @returns {Array.<Array<number>>}
+     * @private
+     */
+    getKernelMatrix(s) {
+        //the size of the kernel: lets limit that to ~3 times the standard deviation, as an approximation.
+        const kernelSize = Math.floor(3.25 * s)
+
+        //pre-compute coefficient for gaussian computation, to avoid computing them every time.
+        const c2 = 2 * s * s
+
+        /**
+         * The gaussian function. TODO expose that function as a parameter, to use other kernels ?
+         * @param {number} x
+         * @param {number} y
+         * @returns {number}
+         */
+        const gaussian = (x, y) => (c2 != 0 ? Math.exp(-(x * x + y * y) / c2) : x == 0 && y == 0 ? 1 : 0) //dirac case
+
+        /** @type {Array.<Array<number>>} */
+        const kw = []
+        for (let wi = 0; wi <= kernelSize; wi++) {
+            /** @type {Array<number>} */
+            const col = []
+            for (let wj = 0; wj <= kernelSize; wj++) {
+                //compute weight at wi,wj
+                col.push(gaussian(wi, wj))
+            }
+            kw.push(col)
+        }
+
+        /*
+        //debug: show values
+        for (let wj = kernelSize-1; wj >=0; wj--) {
+            let st = "";
+            for (let wi = 0; wi <= kernelSize; wi++) {
+                st += "   " + Math.floor(kw[wi][wj].w *1000) /1000
+            }
+            console.log(st)
+        }*/
+
+        return kw
+    }
+
+    /**
+     * Compute kernel smoothing of some cells.
+     *
+     * @private
+     * @param {Array.<import("../Dataset").Cell>} cells The cells to be smoothed.
+     * @param {import("../Dataset").Envelope} e Geo envelope to consider.
+     * @param {number} r Resolution, in geo unit.
+     * @param {number} s Sigma (in grid pixel !)
+     * @returns {Array.<import("../Dataset").Cell>} The list of cells, including the initial ones and the ones with smoothed values, in "ksmval" property.
+     */
+    kernelSmoothing(cells, e, r, s) {
+        //filter
+        if (this.filter) cells = cells.filter(this.filter)
+
+        const wThr = 0.01 //gaussian weights below this value will be ignored
+
+        //compute extent, in grid position
+        const xMin = Math.floor(e.xMin / r) * r
+        const xMax = Math.floor(e.xMax / r) * r
+        const yMin = Math.floor(e.yMin / r) * r
+        const yMax = Math.floor(e.yMax / r) * r
+
+        //compute matrix dimensions
+        const nbX = (xMax - xMin) / r + 1
+        const nbY = (yMax - yMin) / r + 1
+
+        //initialise smoothed value to 0
+        for (const c of cells) c['ksmval'] = 0
+
+        //make matrix. add input cells by i/j (grid position)
+        const index = {}
+        for (const c of cells) {
+            // i,j of the cell
+            const i = Math.floor((c.x - xMin) / r)
+            const j = Math.floor((c.y - yMin) / r)
+            if (!index[i]) index[i] = {}
+            index[i][j] = c
+        }
+
+        /** Check that the cell i,j is within the frame */
+        const isWithinFrame = (i, j) => i >= 0 && i < nbX && j >= 0 && j < nbY
+
+        //get kernel matrix
+        /** @type {Array.<Array.<number>>} */
+        const kernelMatrix = this.getKernelMatrix(s)
+        const kernelSize = kernelMatrix.length
+
+        //compute summ of the weights over entire kernel window
+        /** @type {number} */
+        let sumWeights = 0
+        for (let ki = 1 - kernelSize; ki < kernelSize; ki++) {
+            for (let kj = 1 - kernelSize; kj < kernelSize; kj++) {
+                let w = kernelMatrix[Math.abs(ki)][Math.abs(kj)]
+                if (w < wThr) continue
+                sumWeights += w
+            }
+        }
+
+        /** Add v as a contribution to the cell i,j */
+        const addContributionTo = (i, j, v) => {
+            //get cell at (i,j)
+            const c_ = index[i] ? index[i][j] : undefined
+
+            if (c_) {
+                //cell exists: add contribution
+                if (c_.ksmval) c_.ksmval += v
+                else c_.ksmval = v
+            } else {
+                //cell does not exist: create a new one with the smoothed value
+                if (!index[i]) index[i] = {}
+                index[i][j] = { x: xMin + i * r, y: yMin + j * r, ksmval: v }
+            }
+        }
+
+        //compute smoothing, input cell by input cell
+        for (const c of cells) {
+            /** get value of cell c
+             * @type {number} */
+            const val = this.value(c)
+            if (!val) continue
+
+            //cell matrix coordinates
+            const i = Math.floor((c.x - xMin) / r)
+            const j = Math.floor((c.y - yMin) / r)
+
+            //add contributions to smoothed values
+            for (let ki = 1 - kernelSize; ki < kernelSize; ki++) {
+                for (let kj = 1 - kernelSize; kj < kernelSize; kj++) {
+                    //check cell is within the frame
+                    if (!isWithinFrame(i + ki, j + kj)) continue
+
+                    //get contribution (ki,kj)
+                    let w = kernelMatrix[Math.abs(ki)][Math.abs(kj)]
+                    if (!w || w < wThr) continue
+                    let v = w * val
+                    if (!v) continue
+                    v /= sumWeights
+                    if (!v) continue
+
+                    //add contribution
+                    addContributionTo(i + ki, j + kj, v)
+                }
+            }
+        }
+
+        //make output list
+        const out = []
+        for (let i of Object.keys(index)) for (const j of Object.keys(index[i])) out.push(index[i][j])
+
+        return out
+    }
+
+    /**
+     * Draw the smoothed cells depending on the list of styles specified.
+     *
+     * @param {Array.<import("../Dataset").Cell>} cells
+     * @param {number} r
+     * @param {import("../GeoCanvas").GeoCanvas} cg
+     */
+    draw(cells, r, cg) {
+        if (!cells || cells.length == 0) return
+
+        //get smoothing param in geo unit
+        /** @type {number} */
+        const sG = this.sigma(r, cg.zf)
+
+        //apply kernel smoothing
+        cells = this.kernelSmoothing(cells, cg.extGeo, r, sG / r)
+
+        //draw smoothed cells from styles
+        for (let s of this.styles) s.draw(cells, r, cg)
+
+        //update legends
+        //for (let s of this.styles)
+        //    s.updateLegends({ style: s, r: r, zf: cg.getZf() });
+    }
+}

package/src/style/KernelSmoothingStyle.js

@@ -0,0 +1,115 @@
+//@ts-check
+'use strict'
+
+import { Style } from '../Style.js'
+import { density2d } from 'fast-kde'
+
+/**
+ * A style representing the cell as a smoothed layer, to smoothing local variations and show main trends across space.
+ *
+ * @author Julien Gaffuri
+ */
+export class KernelSmoothingStyle extends Style {
+    // https://observablehq.com/d/5dd1cb5e4d21c021
+    // https://observablehq.com/@uwdata/fast-kde
+    // https://observablehq.com/d/3127b6d89ada959f
+    //TODO https://observablehq.com/@sahilchinoy/areal-interpolation-iii ?
+
+    /** @param {object} opts */
+    constructor(opts) {
+        super(opts)
+        opts = opts || {}
+
+        /** A function returning the value to consider for each cell. This is the value to be smoothed.
+         * @type {function(import("../Dataset").Cell):number} */
+        this.value = opts.value
+
+        /** The smoothing parameter, in geo unit. The larger, the more smoothed.
+         * @type {function(number,number):number}
+         */
+        this.sigma = opts.sigma // (r, zf)=>...
+
+        /** A factor to adjust the smoothed grid resolution.
+         * When set to 1, the smoothed grid is exactly the screen resolution.
+         * Set to 2 to degrade the resolution to a factor 2.
+         * The higher, the more pixelised and the faster to compute.
+         * @type { number }
+         */
+        this.factor = opts.factor || 2
+
+        /** A filter function to filter the smoothed cells based on their smoothed value.
+         *  Return true to keep the cell, false otherwise.
+         * @type { function(number):boolean }
+         */
+        this.filterSm = opts.filterSm
+
+        /** The name of the attribute where the smoothed value is stored in the output smoothed grid.
+         * @type { string }
+         */
+        this.sCol = opts.sCol || 'ksmval'
+
+        /** The styles to represent the smoothed grid.
+         * @type {Array.<Style>}
+         */
+        this.styles = opts.styles || []
+    }
+
+    /**
+     * Draw the smoothed cells depending on the list of styles specified.
+     *
+     * @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
+
+        //get smoothing param in geo unit
+        /** @type {number} */
+        const sG = this.sigma(r, cg.zf)
+
+        //compute smoothed grid dimensions
+        const nbX = Math.ceil(cg.w / this.factor)
+        const nbY = Math.ceil(cg.h / this.factor)
+        //compute smoothed grid geo extent
+        const e_ = [
+            [cg.pixToGeoX(0), cg.pixToGeoX(nbX * this.factor)],
+            [cg.pixToGeoY(nbY * this.factor), cg.pixToGeoY(0)],
+        ]
+
+        //compute smoothed grid
+        let g = density2d(cells, {
+            x: (c) => c.x + r / 2,
+            y: (c) => c.y + r / 2,
+            weight: (c) => this.value(c),
+            bins: [nbX, nbY],
+            bandwidth: sG,
+            extent: e_,
+        }).grid()
+
+        //compute the resolution of the smoothed grid
+        const resSmoothed = (e_[0][1] - e_[0][0]) / nbX
+
+        //make smoothed cells
+        cells = []
+        for (let ind = 0; ind < g.length; ind++) {
+            const v = g[ind]
+            if (this.filterSm && !this.filterSm(v)) continue
+            const row = Math.floor(ind / nbX)
+            const col = ind % nbX
+            const c = { x: e_[0][0] + col * resSmoothed, y: e_[1][0] + row * resSmoothed }
+            c[this.sCol] = v
+            cells.push(c)
+        }
+
+        //draw smoothed cells from styles
+        for (let s of this.styles) s.draw(cells, resSmoothed, cg)
+
+        //update legends
+        //for (let s of this.styles)
+        //    s.updateLegends({ style: s, r: r, zf: cg.getZf() });
+    }
+}