gridviz 2.1.14 → 2.1.16

package/src/style/ShapeColorSizeStyle_.js

@@ -0,0 +1,108 @@
+//@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 || {}
+
+        /** A function returning the view scale.
+         * @type {function(Array.<import('../Dataset.js').Cell>,number, number):object} */
+        this.viewScale = opts.viewScale //(cells,r,z) => {}
+
+        /** A function returning the color of the cell.
+         * @type {function(import('../Dataset.js').Cell,number, number,object):string} */
+        this.color = opts.color //(c,r,z,o) => {}
+
+        /** A function returning the size of a cell in geographical unit.
+         * @type {function(import('../Dataset.js').Cell,number, number,object):number} */
+        this.size = opts.size //(c,r,z,o) => {}
+
+        /** A function returning the shape of a cell.
+         * @type {function(import("../Dataset.js").Cell,number, number,object):import("../Style.js").Shape} */
+        this.shape = opts.shape //(c,r,z,o) => {}
+    }
+
+    /**
+     * Draw cells as squares, with various colors and sizes.
+     *
+     * @param {Array.<import("../Dataset.js").Cell>} cells
+     * @param {number} r
+     * @param {import("../GeoCanvas.js").GeoCanvas} cg
+     */
+    draw(cells, r, cg) {
+        //filter
+        if (this.filter) cells = cells.filter(this.filter)
+
+        //zoom factor
+        const zf = cg.getZf()
+
+        //get view scale
+        const vc = this.viewScale ? this.viewScale(cells, r, zf) : undefined
+
+        //draw with HTML canvas in geo coordinates
+        cg.setCanvasTransform()
+
+        const r2 = r * 0.5
+        for (let c of cells) {
+            //color
+            let col = this.color ? this.color(c, r, zf, vc) : "black"
+            if (!col || col === 'none') continue
+
+            //size
+            const size = this.size ? this.size(c, r, zf, vc) : r
+            if (!size) continue
+
+            //shape
+            const shape = this.shape ? this.shape(c, r, zf, vc) : 'square'
+            if (shape === 'none') continue
+
+            //get offset
+            const offset = this.offset(c, r, zf)
+
+            cg.ctx.fillStyle = col
+            if (shape === 'square') {
+                //draw square
+                const d = r * (1 - size / r) * 0.5
+                cg.ctx.fillRect(c.x + d + offset.dx, c.y + d + offset.dy, size, size)
+            } else if (shape === 'circle') {
+                //draw circle
+                cg.ctx.beginPath()
+                cg.ctx.arc(c.x + r2 + offset.dx, c.y + r2 + offset.dy, size * 0.5, 0, 2 * Math.PI, false)
+                cg.ctx.fill()
+            } else if (shape === 'donut') {
+                //draw donut
+                const xc = c.x + r2 + offset.dx,
+                    yc = c.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 - size / r) * r2, 0, 2 * Math.PI, true)
+                cg.ctx.closePath()
+                cg.ctx.fill()
+            } else if (shape === 'diamond') {
+                const s2 = size * 0.5
+                cg.ctx.beginPath()
+                cg.ctx.moveTo(c.x + r2 - s2, c.y + r2)
+                cg.ctx.lineTo(c.x + r2, c.y + r2 + s2)
+                cg.ctx.lineTo(c.x + r2 + s2, c.y + r2)
+                cg.ctx.lineTo(c.x + r2, c.y + r2 - s2)
+                cg.ctx.fill()
+            } else {
+                throw new Error('Unexpected shape:' + shape)
+            }
+        }
+
+        //update legends
+        this.updateLegends({ style: this, r: r, zf: zf, viewScale: vc })
+    }
+}

package/src/utils/stretching.js

@@ -1,52 +1,89 @@
 //@ts-check
 'use strict'
 
+
 /**
  * Some function [0,1]->[0,1] to stretch range of values.
  * @see https://github.com/eurostat/gridviz/blob/master/docs/reference.md#stretching
  * @see https://observablehq.com/@jgaffuri/stretching
  */
 
+
+export const powerScale = (exponent = 3) => t => Math.pow(t, exponent)
+export const powerInverseScale = (exponent = 3) => t => 1 - Math.pow(1 - t, 1 / exponent)
+export const exponentialScale = (base = 3) => {
+    if (base == 0) return t => t
+    const a = (Math.exp(base) - 1)
+    return t => (Math.exp(t * base) - 1) / a
+}
+export const logarithmicScale = (base = 3) => {
+    if (base == 0) return t => t
+    return t => 1 - (1 / base) * Math.log(Math.exp(base) * (1 - t) + t)
+}
+
+export const circularScale = (alpha = 0.8) => {
+    if (alpha == 0) return t => t
+    if (alpha == 1) return t => Math.sqrt(t * (2 - t))
+    else {
+        const a = alpha / (1 - alpha)
+        return t => Math.sqrt(1 / (a * a) + t * (2 / a + 2 - t)) - 1 / a
+    }
+}
+export const circularInverseScale = (alpha = 0.8) => {
+    const f = circularScale(alpha)
+    return t => 1 - f(1 - t)
+}
+
+
+
+
+
+
+
+
+// deprecated
+
+
 /**
  * Function [0,1]->[0,1] to stretch range of values.
  * Polynomial
  *
  * @param {number} t The value to stretch, within [0,1]
- * @param {number} alpha 1: no stretching. <1: show low values. >1: show high values.
+ * @param {number} exponent 1: no stretching. <1: show low values. >1: show high values.
  * @returns {number} The stretched value, within [0,1]
  */
-export const sPow = (t, alpha = 3) => Math.pow(t, alpha)
+export const sPow = (t, exponent = 3) => Math.pow(t, exponent)
 
 /**
  * Function [0,1]->[0,1] to stretch range of values.
  * Polynomial (reverse)
  *
  * @param {number} t The value to stretch, within [0,1]
- * @param {number} alpha 1: no stretching. <1: show low values. >1: show high values.
+ * @param {number} exponent 1: no stretching. <1: show low values. >1: show high values.
  * @returns {number} The stretched value, within [0,1]
  */
-export const sPowRev = (t, alpha = 3) => 1 - Math.pow(1 - t, 1 / alpha)
+export const sPowRev = (t, exponent = 3) => 1 - Math.pow(1 - t, 1 / exponent)
 
 /**
  * Function [0,1]->[0,1] to stretch range of values.
  * Exponential
  *
  * @param {number} t The value to stretch, within [0,1]
- * @param {number} alpha 0: no stretching. -Inf: show low values. Inf: show high values.
+ * @param {number} base 0: no stretching. -Inf: show low values. Inf: show high values.
  * @returns {number} The stretched value, within [0,1]
  */
-export const sExp = (t, alpha = 3) => (alpha == 0 ? t : (Math.exp(t * alpha) - 1) / (Math.exp(alpha) - 1))
+export const sExp = (t, base = 3) => (base == 0 ? t : (Math.exp(t * base) - 1) / (Math.exp(base) - 1))
 
 /**
  * Function [0,1]->[0,1] to stretch range of values.
  * Exponential (reverse)
  *
  * @param {number} t The value to stretch, within [0,1]
- * @param {number} alpha 0: no stretching. -Inf: show low values. Inf: show high values.
+ * @param {number} base 0: no stretching. -Inf: show low values. Inf: show high values.
  * @returns {number} The stretched value, within [0,1]
  */
-export const sExpRev = (t, alpha = 3) =>
-    alpha == 0 ? t : 1 - (1 / alpha) * Math.log(Math.exp(alpha) * (1 - t) + t)
+export const sExpRev = (t, base = 3) =>
+    base == 0 ? t : 1 - (1 / base) * Math.log(Math.exp(base) * (1 - t) + t)
 
 /**
  * Function [0,1]->[0,1] to stretch range of values.
@@ -82,36 +119,40 @@ export const sCircleHigh = (t, alpha = 0.8) => 1 - sCircleLow(1 - t, alpha)
 /**
  * Inverse function of sExp
  * @param {number} y
- * @param {number} alpha
+ * @param {number} base
  * @returns {number}
  */
-export const sExpInverse = (y, alpha = 3) =>
-    alpha == 0 ? y : (1 / alpha) * Math.log(1 - y + y * Math.exp(alpha))
+export const sExpInverse = (y, base = 3) =>
+    base == 0 ? y : (1 / base) * Math.log(1 - y + y * Math.exp(base))
 
 /**
  * Inverse function of sExpRev
  * @param {number} y
- * @param {number} alpha
+ * @param {number} base
  * @returns {number}
  */
-export const sExpRevInverse = (y, alpha = 3) => (Math.exp(-alpha * y) - 1) / (Math.exp(-alpha) - 1)
+export const sExpRevInverse = (y, base = 3) => (Math.exp(-base * y) - 1) / (Math.exp(-base) - 1)
 
 /**
  * Inverse function of sPow
  * @param {number} y
- * @param {number} alpha
+ * @param {number} exponent
  * @returns {number}
  */
 
-export const sPowInverse = (y, alpha = 3) => Math.pow(y, 1 / alpha)
+export const sPowInverse = (y, exponent = 3) => Math.pow(y, 1 / exponent)
+
+
+
+
 
 /**
  * Inverse function of sPowRev
  * @param {number} y
- * @param {number} alpha
+ * @param {number} exponent
  * @returns {number}
  */
-export const sPowRevInverse = (y, alpha = 3) => 1 - Math.pow(1 - y, alpha)
+export const sPowRevInverse = (y, exponent = 3) => 1 - Math.pow(1 - y, exponent)
 
 //test code
 /*