gridviz 2.1.16 → 3.0.0

package/src/style/StrokeStyle.js

@@ -1,7 +1,7 @@
 //@ts-check
 'use strict'
 
-import { Style } from '../Style.js'
+import { Style } from '../core/Style.js'
 
 /**
  *
@@ -13,111 +13,84 @@ export class StrokeStyle extends Style {
         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 color of the cell.
+         * @type {function(import('../core/Dataset.js').Cell,number,number,object):string} */
+        this.strokeColor = opts.strokeColor || (() => "#666") //(c,r,z,vs) => {}
 
         /** 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
+         * @type {function(import('../core/Dataset.js').Cell,number,number,object):number} */
+        this.size = opts.size || ((cell, resolution) => resolution) //(c,r,z,vs) => {}
 
         /** 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)=>...
+         * @type {function(import('../core/Dataset.js').Cell,number,number,object):number} */
+        this.strokeWidth = opts.strokeWidth || ((cell, resolution, z) => z * 1.5) //(c,r,z,vs) => {}
 
         /** A function returning the shape of a cell.
-         * @type {function(import("../Dataset").Cell):import("../Style").Shape} */
-        this.shape = opts.shape || (() => 'square')
+        * @type {function(import("../core/Dataset.js").Cell,number,number,object):import("../core/Style.js").Shape} */
+        this.shape = opts.shape || (() => "square") //(c,r,z,vs) => {}
     }
 
     /**
      * Draw cells as squares, with various colors and size.
      *
-     * @param {Array.<import("../Dataset").Cell>} cells
-     * @param {number} r
-     * @param {import("../GeoCanvas").GeoCanvas} cg
+     * @param {Array.<import("../core/Dataset").Cell>} cells
+     * @param {import("../core/GeoCanvas").GeoCanvas} geoCanvas
+     * @param {number} resolution
      */
-    draw(cells, r, cg) {
+    draw(cells, geoCanvas, resolution) {
+
         //filter
         if (this.filter) cells = cells.filter(this.filter)
 
-        //zoom factor
-        const zf = cg.getZf()
+        //
+        const z = geoCanvas.view.z
 
-        let statColor
-        if (this.strokeColorCol) statColor = Style.getStatistics(cells, (c) => c[this.strokeColorCol], true)
+        //get view scale
+        const viewScale = this.viewScale ? this.viewScale(cells, resolution, z) : undefined
 
-        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
+        const r2 = resolution * 0.5
         for (let cell of cells) {
+
             //color
-            const col = this.strokeColor
-                ? this.strokeColor(cell[this.strokeColorCol], r, statColor)
-                : undefined
+            const col = this.strokeColor ? this.strokeColor(cell, resolution, z, viewScale) : undefined
             if (!col || col === 'none') continue
-            cg.ctx.strokeStyle = col
+            geoCanvas.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)
+            const sG = this.size ? this.size(cell, resolution, z, viewScale) : resolution
 
             //width
-            const wi = this.strokeWidth
-                ? this.strokeWidth(cell[this.strokeWidthCol], r, statWidth, zf)
-                : 1 * zf
+            const wi = this.strokeWidth ? this.strokeWidth(cell, resolution, z, viewScale) : 1 * z
             if (!wi || wi <= 0) continue
-            cg.ctx.lineWidth = wi
+            geoCanvas.ctx.lineWidth = wi
 
             //shape
-            const shape = this.shape ? this.shape(cell) : 'square'
+            const shape = this.shape ? this.shape(cell, resolution, z, viewScale) : 'square'
             if (shape === 'none') continue
 
             //get offset
-            const offset = this.offset(cell, r, zf)
+            const offset = this.offset(cell, resolution, z)
 
             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()
+                const d = resolution * (1 - sG / resolution) * 0.5
+                geoCanvas.ctx.beginPath()
+                geoCanvas.ctx.rect(cell.x + d + offset.dx, cell.y + d + offset.dy, sG, sG)
+                geoCanvas.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()
+                geoCanvas.ctx.beginPath()
+                geoCanvas.ctx.arc(cell.x + r2 + offset.dx, cell.y + r2 + offset.dy, sG * 0.5, 0, 2 * Math.PI, false)
+                geoCanvas.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()
+                geoCanvas.ctx.beginPath()
+                geoCanvas.ctx.moveTo(cell.x + r2 - s2, cell.y + r2)
+                geoCanvas.ctx.lineTo(cell.x + r2, cell.y + r2 + s2)
+                geoCanvas.ctx.lineTo(cell.x + r2 + s2, cell.y + r2)
+                geoCanvas.ctx.lineTo(cell.x + r2, cell.y + r2 - s2)
+                geoCanvas.ctx.lineTo(cell.x + r2 - s2, cell.y + r2)
+                geoCanvas.ctx.stroke()
             } else if (shape === 'donut') {
                 console.error('Not implemented')
             } else {
@@ -126,6 +99,6 @@ export class StrokeStyle extends Style {
         }
 
         //update legends
-        //this.updateLegends({ style: this, r: resolution, zf: zf, sSize: statSize, sColor: statColor });
+        this.updateLegends({ style: this, resolution: resolution, z: z, viewScale: viewScale })
     }
 }

package/src/style/TanakaStyle.js

@@ -1,160 +1,62 @@
 //@ts-check
 'use strict'
 
-import { SquareColorWGLStyle } from './SquareColorWGLStyle.js'
 import { SideStyle } from './SideStyle.js'
+import { SquareColorCategoryWebGLStyle } from './SquareColorCategoryWebGLStyle.js'
+import { classifier as clFun, colorClassifier as cclFun } from '../utils/scale.js'
 
 /**
- *
  * @see https://manifold.net/doc/mfd9/example__tanaka_contours.htm
  *
  * @author Julien Gaffuri
  */
 export class TanakaStyle {
     /**
-     * @param {string} col
+     * @param {function(import('../core/Dataset.js').Cell):number} value Function that returns the value of a cell
+     * @param {Array.<number>} breaks The break values
+     * @param {Array.<string>} colors The colors, one more than the break values
      * @param {object} opts
-     * @returns {Array.<import("../Style").Style>}
+     * @returns {Array.<import("../core/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))
+    static get(value, breaks, colors, opts = {}) {
 
         //shadow colors
-        opts.colDark = opts.colDark || '#111'
-        opts.colBright = opts.colBright || '#ddd'
+        opts.colorDark = opts.colorDark || '#111'
+        opts.colorBright = opts.colorBright || '#ddd'
+
+        /** @type { function(number, number):number } */
+        opts.width = opts.width || ((sideValue, resolution, z) => {
+            const minWG = 1 * z
+            const maxWG = 4 * z
+            const step = (maxWG - minWG) / 3
+            return Math.min(minWG + (sideValue - 1) * step, maxWG)
+        })
 
-        //width of the segment (share of the resolution)
-        opts.widthFactor = opts.widthFactor || 0.08
+        //make classifiers
+        const classifier = clFun(breaks)
+        const colorClassifier = cclFun(breaks, colors)
 
-        //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)))
+        const cellStyle = new SquareColorCategoryWebGLStyle({ color: (cell) => colorClassifier(value(cell)) })
 
-        /**
-         * @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 getSideValue = (side) => {
+            const cl1 = side.c1 ? classifier(value(side.c1)) : 0
+            const cl2 = side.c2 ? classifier(value(side.c2)) : 0
+            return cl1 - cl2
         }
 
-        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
+            //white or black, depending on orientation and value
+            color: (side) => {
+                const v = getSideValue(side)
+                if (v === 0) return
+                if (side.or === 'v') return v < 0 ? opts.colorBright : opts.colorDark
+                return v < 0 ? opts.colorDark : opts.colorBright
             },
-
-            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,
+            //width depends on the value, that is the number of classes of difference
+            width: (side, resolution, z) => opts.width(Math.abs(getSideValue(side)), resolution, z)
         })
 
-        return [colStyle, sideStyle]
+        return [cellStyle, sideStyle]
     }
 }

package/src/style/TextStyle.js

@@ -1,7 +1,7 @@
 //@ts-check
 'use strict'
 
-import { Style } from '../Style.js'
+import { Style } from '../core/Style.js'
 
 /**
  *
@@ -13,120 +13,99 @@ export class TextStyle extends Style {
         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,number):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
+         * @type {function(import('../core/Dataset.js').Cell, number, number, object):string} */
+        this.text = opts.text || (() => 'X') //(c,r,z,vs) => {}
 
         /** A function returning the color of the cell.
-         * @type {function(number,number,import("../Style").Stat|undefined,number):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
+         * @type {function(import('../core/Dataset.js').Cell, number, number, object):string} */
+        this.color = opts.color || (() => "black") //(c,r,z,vs) => {}
 
         /** 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)
+         * @type {function(import('../core/Dataset.js').Cell, number, number,object):number} */
+        this.fontSize = opts.fontSize || ((cell, resolution) => resolution) //(c,r,z,vs) => {}
 
         /** The text font family.
-         * @type {string} */
-        this.fontFamily = opts.fontFamily || 'Arial'
+         * @type {function(import('../core/Dataset.js').Cell, number, number, object):string} */
+        this.fontFamily = opts.fontFamily || (() => 'Arial')
 
         /** The text font weight.
-         * @type {string} */
-        this.fontWeight = opts.fontWeight || 'bold'
+         * @type {function(import('../core/Dataset.js').Cell, number, number, object):string} */
+        this.fontWeight = opts.fontWeight || (() => 'bold')
     }
 
     /**
      * Draw cells as text.
      *
-     * @param {Array.<import("../Dataset").Cell>} cells
-     * @param {number} r
-     * @param {import("../GeoCanvas").GeoCanvas} cg
+     * @param {Array.<import("../core/Dataset").Cell>} cells
+     * @param {import("../core/GeoCanvas").GeoCanvas} geoCanvas
+     * @param {number} resolution
      */
-    draw(cells, r, cg) {
+    draw(cells, geoCanvas, resolution) {
+
         //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)
-        }
+        //
+        const z = geoCanvas.view.z
 
-        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)
-        }
+        //get view scale
+        const viewScale = this.viewScale ? this.viewScale(cells, resolution, z) : undefined
 
         //draw with HTML canvas
         //in screen coordinates
-        cg.initCanvasTransform()
+        geoCanvas.initCanvasTransform()
 
         for (let cell of cells) {
             //get cell text
-            const text = this.text ? this.text(cell[this.textCol], r, statText, zf) : undefined
+            const text = this.text ? this.text(cell, resolution, z, viewScale) : undefined
             if (text == undefined || text == null || text + '' === '') continue
 
             //color
-            const col = this.color ? this.color(cell[this.colorCol], r, statColor, zf) : undefined
+            const col = this.color ? this.color(cell, resolution, z, viewScale) : undefined
             if (!col) continue
-            cg.ctx.fillStyle = col
+            geoCanvas.ctx.fillStyle = col
 
             //font size
             //size - in pixel unit
-            const fontSizePix = this.fontSize(cell[this.fontSizeCol], r, statFontSize, zf) / zf
+            const fontSizePix = this.fontSize(cell, resolution, z, viewScale) / z
+            if (!fontSizePix) continue
 
             //set font
-            const fontFamily = this.fontFamily || 'Arial'
-            const fontWeight = this.fontWeight || 'bold'
-            cg.ctx.font = fontWeight + ' ' + fontSizePix + 'px ' + fontFamily
+            const fontFamily = this.fontFamily ? this.fontFamily(cell, resolution, z, viewScale) : 'Arial'
+            const fontWeight = this.fontWeight ? this.fontWeight(cell, resolution, z, viewScale) : 'bold'
+            geoCanvas.ctx.font = fontWeight + ' ' + fontSizePix + 'px ' + fontFamily
 
             //get offset
-            const offset = this.offset(cell, r, zf)
+            const offset = this.offset(cell, resolution, z)
 
             //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
+            geoCanvas.ctx.textAlign = 'center'
+            const tx = geoCanvas.geoToPixX(cell.x + resolution * 0.5 + offset.dx)
+            const ty = geoCanvas.geoToPixY(cell.y + resolution * 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)
+            geoCanvas.ctx.fillText(text, tx, ty)
         }
 
         //update legends
-        this.updateLegends({ style: this, r: r, zf: zf, sColor: statColor })
+        this.updateLegends({ style: this, resolution: resolution, z: z, viewScale: viewScale })
     }
 
     /**
      * Build a function [0,1]->string for characters legend
      *
      * @param {Array.<string>} chars
+     * @param {(function(number):number)|undefined} scale
      * @returns {function(number):string}
      */
-    static getCharLegendFun(chars) {
+    static textScale(chars, scale = undefined) {
         const nb = chars.length
-        return (t) => (t == 0 ? '' : t == 1 ? chars[nb - 1] : chars[Math.floor(t * nb)])
+        return (t) => {
+            if (scale) t = scale(t)
+            if (t == 0) return ""
+            if (t >= 1) return chars[nb - 1]
+            return chars[Math.floor(t * nb)]
+        }
     }
 }