gridviz 2.1.17 → 3.0.0

package/src/style/TimeSeriesStyle.js

@@ -1,7 +1,7 @@
 //@ts-check
 'use strict'
 
-import { Style } from '../Style.js'
+import { Style } from '../core/Style.js'
 
 /** @typedef {"first"|"bottom"|"center"|"top"|"last"} AnchorModeYEnum */
 
@@ -27,65 +27,46 @@ export class TimeSeriesStyle extends Style {
 
         //x
         /** in geo unit
-         * @type {function(import("../Dataset.js").Cell,number,number):number} */
-        this.offsetX = opts.offsetX || ((c, r, zf) => 0)
-        /** @type {function(import("../Dataset.js").Cell,number,number):number} */
-        this.width = opts.width || ((c, r, zf) => r)
+         * @type {function(import("../core/Dataset.js").Cell,number,number):number} */
+        this.offsetX = opts.offsetX || ((c, r, z) => 0)
+        /** @type {function(import("../core/Dataset.js").Cell,number,number):number} */
+        this.width = opts.width || ((c, r, z) => r)
 
         //y
         /** in geo unit
-         * @type {function(import("../Dataset.js").Cell,number,number):number} */
-        this.offsetY = opts.offsetY || ((c, r, zf) => 0)
-        /** @type {function(import("../Dataset.js").Cell,number,number):number} */
-        this.height = opts.height || ((c, r, zf) => r)
-        /** @type {function(import("../Dataset.js").Cell,number,number):AnchorModeYEnum} */
-        this.anchorModeY = opts.anchorModeY || ((c, r, zf) => "center")
-
-
-        /**
-         * @type {string} */
-        this.lineWidthCol = opts.lineWidthCol
+         * @type {function(import("../core/Dataset.js").Cell,number,number):number} */
+        this.offsetY = opts.offsetY || ((c, r, z) => 0)
+        /** @type {function(import("../core/Dataset.js").Cell,number,number):number} */
+        this.height = opts.height || ((c, r, z) => r)
+        /** @type {function(import("../core/Dataset.js").Cell,number,number):AnchorModeYEnum} */
+        this.anchorModeY = opts.anchorModeY || ((c, r, z) => "center")
 
         /** A function returning the width of the line, in geo unit
-         * @type {function(number,number,import("../Style.js").Stat|undefined,number):number} */
-        this.lineWidth = opts.lineWidth || ((v, r, s, zf) => 1.5 * zf)
-
-        /**
-         * @type {string} */
-        this.colorCol = opts.colorCol
-
-        /** A function returning the color of the cell.
-         * @type {function(number,number,import("../Style.js").Stat|undefined,number):string} */
-        this.color = opts.color || ((v, r, s, zf) => 'black')
+         * @type {function(import('../core/Dataset.js').Cell, number, number, object):number} */
+        this.lineWidth = opts.lineWidth || ((v, r, s, z) => 1.5 * z)
 
+        /** A function returning the color of the chart.
+         * @type {function(import('../core/Dataset.js').Cell, number, number, object):string} */
+        this.color = opts.color || (() => "black") //(c,r,z,vs) => {}
     }
 
     /**
      * Draw cells as text.
      *
-     * @param {Array.<import("../Dataset.js").Cell>} cells
-     * @param {number} r
-     * @param {import("../GeoCanvas.js").GeoCanvas} cg
+     * @param {Array.<import("../core/Dataset.js").Cell>} cells
+     * @param {import("../core/GeoCanvas.js").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 statWidth
-        if (this.lineWidthCol) {
-            //and compute size variable statistics
-            statWidth = Style.getStatistics(cells, (c) => c[this.lineWidthCol], true)
-        }
-
-        let statColor
-        if (this.colorCol) {
-            //compute color variable statistics
-            statColor = Style.getStatistics(cells, (c) => c[this.colorCol], true)
-        }
+        //get view scale
+        const viewScale = this.viewScale ? this.viewScale(cells, resolution, z) : undefined
 
         //compute cell amplitude
         const getAmplitude = c => {
@@ -111,40 +92,36 @@ export class TimeSeriesStyle extends Style {
 
         const nb = this.ts.length
 
-        //draw with HTML canvas
-        //in geo coordinates
-        cg.setCanvasTransform()
-
-        cg.ctx.lineCap = "butt"
+        geoCanvas.ctx.lineCap = "butt"
         for (let c of cells) {
 
             //line width
             /** @type {number|undefined} */
-            const wG = this.lineWidth ? this.lineWidth(c[this.lineWidthCol], r, statWidth, zf) : undefined
+            const wG = this.lineWidth ? this.lineWidth(c, resolution, z, viewScale) : undefined
             if (!wG || wG < 0) continue
 
             //line color
             /** @type {string|undefined} */
-            const col = this.color ? this.color(c[this.colorCol], r, statColor, zf) : undefined
+            const col = this.color ? this.color(c, resolution, z, viewScale) : undefined
             if (!col) continue
 
 
             //x
-            const offX = this.offsetX ? this.offsetX(c, r, zf) : 0
+            const offX = this.offsetX ? this.offsetX(c, resolution, z) : 0
             if (offX == undefined || isNaN(offX)) continue
-            const w = this.width ? this.width(c, r, zf) : r
+            const w = this.width ? this.width(c, resolution, z) : resolution
             if (w == undefined || isNaN(w)) continue
 
             //y
-            const offY = this.offsetY ? this.offsetY(c, r, zf) : 0
+            const offY = this.offsetY ? this.offsetY(c, resolution, z) : 0
             if (offY == undefined || isNaN(offY)) continue
-            const h = this.height ? this.height(c, r, zf) : r
+            const h = this.height ? this.height(c, resolution, z) : resolution
             if (h == undefined || isNaN(h)) continue
-            const anchY = this.anchorModeY ? this.anchorModeY(c, r, zf) : "center"
+            const anchY = this.anchorModeY ? this.anchorModeY(c, resolution, z) : "center"
             if (!anchY) continue
 
-            cg.ctx.lineWidth = wG
-            cg.ctx.strokeStyle = col
+            geoCanvas.ctx.lineWidth = wG
+            geoCanvas.ctx.strokeStyle = col
 
             //compute anchor Y figures
             let val0, y0
@@ -171,7 +148,7 @@ export class TimeSeriesStyle extends Style {
                     if (val == undefined) continue
                     if (val0 == undefined || val > val0) val0 = val
                 }
-                y0 = r
+                y0 = resolution
             } else if (anchY === "center") {
                 //get min and max
                 let min, max
@@ -182,7 +159,7 @@ export class TimeSeriesStyle extends Style {
                     if (max == undefined || val > max) max = val
                 }
                 val0 = (+max + +min) * 0.5
-                y0 = r / 2
+                y0 = resolution / 2
             } else {
                 console.log("Unexpected anchorModeY: " + anchY)
                 continue;
@@ -209,8 +186,8 @@ export class TimeSeriesStyle extends Style {
             //handle first point
             let v0 = c[this.ts[0]]
             if (!this.noData(v0)) {
-                cg.ctx.beginPath()
-                cg.ctx.moveTo(c.x + offX, c.y + y0 + (v0 - val0) * h / ampMax + offY)
+                geoCanvas.ctx.beginPath()
+                geoCanvas.ctx.moveTo(c.x + offX, c.y + y0 + (v0 - val0) * h / ampMax + offY)
             }
             //console.log(v0, isNaN(v0))
 
@@ -225,18 +202,18 @@ export class TimeSeriesStyle extends Style {
 
                     //second point 'no data'
                 } else if (!this.noData(v0) && this.noData(v1)) {
-                    cg.ctx.stroke()
+                    geoCanvas.ctx.stroke()
 
                     //first point 'no data'
                 } else if (this.noData(v0) && !this.noData(v1)) {
-                    cg.ctx.beginPath()
-                    cg.ctx.moveTo(c.x + i * sX + offX, c.y + y0 + (v1 - val0) * h / ampMax + offY)
+                    geoCanvas.ctx.beginPath()
+                    geoCanvas.ctx.moveTo(c.x + i * sX + offX, c.y + y0 + (v1 - val0) * h / ampMax + offY)
 
                     //both points have data: trace line
                 } else {
-                    cg.ctx.lineTo(c.x + i * sX + offX, c.y + y0 + (v1 - val0) * h / ampMax + offY)
+                    geoCanvas.ctx.lineTo(c.x + i * sX + offX, c.y + y0 + (v1 - val0) * h / ampMax + offY)
                     //if it is the last point, stroke
-                    if (i == nb - 1) cg.ctx.stroke()
+                    if (i == nb - 1) geoCanvas.ctx.stroke()
                 }
                 v0 = v1
             }
@@ -244,15 +221,7 @@ export class TimeSeriesStyle extends Style {
         }
 
         //update legend, if any
-        this.updateLegends({
-            widthFun: this.lineWidth,
-            r: r,
-            zf: zf,
-            sColor: statColor,
-            //sLength: statLength,
-            sWidth: statWidth,
-        })
-
+        this.updateLegends({ style: this, resolution: resolution, z: z, viewScale: viewScale })
     }
 
 }

package/src/utils/WebGLSquareColoringAdvanced.js

@@ -70,7 +70,7 @@ export class WebGLSquareColoringAdvanced {
             if (stretching.fun == 'pow')
                 //sPow = (t, alpha = 3) => Math.pow(t, alpha);
                 fshString += '   float t = pow(vt, alpha);\n'
-            else if (stretching.fun == 'powRev')
+            else if (stretching.fun == 'powInv')
                 //sPowRev = (t, alpha = 3) => 1 - Math.pow(1 - t, 1 / alpha);
                 fshString += '   float t = 1.0-pow(1.0-vt, 1.0/alpha);\n'
             else if (stretching.fun == 'exp')
@@ -79,13 +79,13 @@ export class WebGLSquareColoringAdvanced {
                     stretching.alpha == 0
                         ? `float t = vt;`
                         : '   float t = (exp(vt * alpha) - 1.0) / (exp(alpha) - 1.0);\n'
-            else if (stretching.fun == 'expRev')
+            else if (stretching.fun == 'log')
                 //sExpRev = (t, alpha = 3) => alpha == 0 ? t : 1 - (1 / alpha) * Math.log(Math.exp(alpha) * (1 - t) + t);
                 fshString +=
                     stretching.alpha == 0
                         ? `float t = vt;`
                         : '   float t = 1.0 - (1.0 / alpha) * log(exp(alpha) * (1.0 - vt) + vt);\n'
-            else if (stretching.fun == 'circleLow') {
+            else if (stretching.fun == 'circle') {
                 if (stretching.alpha == 0)
                     //if (alpha == 0) return t;
                     fshString += '   float t = vt;\n'
@@ -99,7 +99,7 @@ export class WebGLSquareColoringAdvanced {
                         '   float a = alpha / (1.0 - alpha);\n' +
                         '   float t = sqrt(1.0 / (a * a) + vt * ( 2.0/a + 2.0 - vt )) - 1.0 / a;\n'
                 }
-            } else if (stretching.fun == 'circleHigh') {
+            } else if (stretching.fun == 'circleInv') {
                 // 1 - sCircleLow(1 - t, alpha)
                 if (stretching.alpha == 0)
                     //if (alpha == 0) return t;

package/src/utils/scale.js

@@ -0,0 +1,202 @@
+//@ts-check
+'use strict'
+
+import { extent, max } from "d3-array"
+import { scaleQuantile } from "d3-scale"
+
+/**
+ * A scale is simply a function that map a domain to a range.
+ * @typedef {function(number):number} Scale */
+
+/**
+ * A scale whose range is a color (string).
+* @typedef {function(number):string} ColorScale */
+
+
+
+/**
+ * Generic function for view scale - continuous
+ * 
+ * @param {{ valueFunction:function(import("../core/Dataset").Cell):number, minValue?:number, minSizePix?:number, maxSizeFactor?:number, range?:[number, number], domain?:[number, number], stretching?:function(number):number }} opts 
+ * @returns {function(Array.<import("../core/Dataset").Cell>):Scale}
+ */
+export const viewScale = (opts) => {
+    const valueFunction = opts.valueFunction
+    const minValue = opts.minValue || 0
+    const minSizePix = opts.minSizePix || 0
+    const maxSizeFactor = opts.maxSizeFactor || 1
+    const stretching = opts.stretching
+    const range_ = opts.range
+    const domain_ = opts.domain
+    return (cells, r, z) => {
+        const domain = domain_ || [minValue, max(cells, valueFunction)]
+        const range = range_ || [minSizePix * z, r * maxSizeFactor]
+        return t => {
+            //scale to [0,1]
+            t = (t - domain[0]) / (domain[1] - domain[0])
+            //stretch
+            if (stretching) t = stretching(t)
+            //scale to range
+            return range[0] + t * (range[1] - range[0])
+        }
+    }
+}
+
+
+/**
+ * Generic function for view scale - quantile
+ * 
+ * @param {{ valueFunction:function(import("../core/Dataset").Cell):number, classNumber?:number, minSizePix?:number, maxSizeFactor?:number }} opts 
+ * @returns {function(Array.<import("../core/Dataset").Cell>):Scale}
+ */
+export const viewScaleQuantile = (opts) => {
+    const valueFunction = opts.valueFunction
+    const classNumber = opts.classNumber || 12
+    const minSizePix = opts.minSizePix || 1
+    const maxSizeFactor = opts.maxSizeFactor || 1
+    const scale = scaleQuantile()
+    return (cells, r, z) => {
+        scale.domain(cells.map(valueFunction))
+        const minSizeGeo = minSizePix * z, maxSizeGeo = r * maxSizeFactor
+        scale.range(Array.from({ length: classNumber }, (_, i) => minSizeGeo + i * (maxSizeGeo - minSizeGeo) / (classNumber - 1)))
+        scale.breaks = scale.quantiles()
+        scale.values = scale.range()
+        return scale;
+    }
+}
+
+
+
+
+
+
+/**
+ * Generic function for color view scale - continuous
+ * 
+ * @param {{ valueFunction:function(import("../core/Dataset").Cell):number, colorScale?:function(number):string, stretching?:function(number):number }} opts 
+ * @returns {function(Array.<import("../core/Dataset").Cell>):ColorScale}
+ */
+export const viewScaleColor = (opts) => {
+    const valueFunction = opts.valueFunction
+    const colorScale = opts.colorScale || (() => "purple")
+    const stretching = opts.stretching
+    return (cells) => {
+        if (cells.length == 0 || !cells) return
+        /** @type {[undefined, undefined] | [number, number]} */
+        const domain = extent(cells, valueFunction)
+        if (domain[0] == undefined) return
+        const amplitude = domain[1] - domain[0]
+        const scale = t => {
+            //scale to [0,1]
+            t = (t - domain[0]) / amplitude
+            //stretch
+            if (stretching) t = stretching(t)
+            return colorScale(t)
+        }
+        //function that return the domain value from the [0,1] range.
+        scale.invert = t => {
+            if (stretching) t = stretching.invert(t)
+            return domain[0] + t * amplitude
+        }
+
+        return scale;
+    }
+}
+
+/**
+ * Generic function for color view scale - quantile
+ * 
+ * @param {{ valueFunction:function(import("../core/Dataset").Cell):number, classNumber?:number, colors?:Array.<string>, colorScale?:function(number):string }} opts 
+ * @returns {function(Array.<import("../core/Dataset").Cell>):ColorScale}
+ */
+export const viewScaleColorQuantile = (opts) => {
+    const valueFunction = opts.valueFunction
+    const classNumber = opts.classNumber || 12
+
+    let colors = opts.colors
+    if (opts.colorScale) colors = discreteColors(opts.colorScale, classNumber)
+    colors = colors || Array.from({ length: classNumber }, (_, i) => "rgb(" + Math.floor(255 * i / (classNumber - 1)) + ",150,150)")
+
+    const scale = scaleQuantile().range(colors)
+    return (cells) => {
+        scale.domain(cells.map(valueFunction));
+        scale.breaks = scale.quantiles()
+        scale.colors = colors
+        return scale;
+    }
+}
+
+
+
+
+/**
+ * combine view scale functions
+ * 
+ * @param {*} obj 
+ * @returns 
+ */
+export const viewScaleCombination = (obj) => {
+    //obj: prop and a function to call
+    return (cells, r, z) => {
+        const out = {}
+        for (const p in obj) { out[p] = obj[p](cells, r, z) }
+        return out
+    }
+}
+
+
+
+
+
+
+/**
+ * Return a classifier function from break values.
+ * The classifier function returns the class id (from 0 to breaks.length) from a value to classifiy.
+ * @param {Array.<number>} breaks the breaks
+ */
+export function classifier(breaks) {
+    const bl = breaks.length
+    const classifier = value => {
+        let i = 0
+        while (i < bl) {
+            const break_ = breaks[i]
+            if (value <= break_) return i
+            i++
+        }
+        return i
+    }
+    classifier.breaks = breaks
+    return classifier
+}
+
+
+
+/**
+ * Return a color classifier function from break values.
+ * The classifier function returns the color from a value to classifiy.
+ * There should be one color more than break values.
+ * @param {Array.<number>} breaks the breaks
+ * @param {Array.<string>} colors the colors
+ */
+export function colorClassifier(breaks, colors) {
+    const classifier_ = classifier(breaks)
+    const colorClassifier = value => colors[classifier_(value)]
+    colorClassifier.breaks = breaks
+    colorClassifier.colors = colors
+    return colorClassifier
+}
+
+/**
+ * Make array of colors from a colorScale.
+ * It is a kind of sampling, or un-interpolation
+ * 
+ * @param {function(number):string} colorScale 
+ * @param {number} nb 
+ */
+export function discreteColors(colorScale, nb) {
+    if (nb == 1) return [colorScale(0.5)]
+    const out = []
+    for (let i = 0; i < nb; i++)
+        out.push(colorScale(i / (nb - 1)))
+    return out
+}