gridviz 3.0.2 → 3.0.4

package/src/style/StrokeStyle.js

@@ -49,50 +49,82 @@ export class StrokeStyle extends Style {
         const viewScale = this.viewScale ? this.viewScale(cells, resolution, z) : undefined
 
         const r2 = resolution * 0.5
-        for (let cell of cells) {
+        for (let c of cells) {
 
             //color
-            const col = this.strokeColor ? this.strokeColor(cell, resolution, z, viewScale) : undefined
+            const col = this.strokeColor ? this.strokeColor(c, resolution, z, viewScale) : undefined
             if (!col || col === 'none') continue
             geoCanvas.ctx.strokeStyle = col
 
             //size - in geo unit
-            const sG = this.size ? this.size(cell, resolution, z, viewScale) : resolution
+            const size = this.size ? this.size(c, resolution, z, viewScale) : resolution
 
             //width
-            const wi = this.strokeWidth ? this.strokeWidth(cell, resolution, z, viewScale) : 1 * z
+            const wi = this.strokeWidth ? this.strokeWidth(c, resolution, z, viewScale) : 1 * z
             if (!wi || wi <= 0) continue
             geoCanvas.ctx.lineWidth = wi
 
             //shape
-            const shape = this.shape ? this.shape(cell, resolution, z, viewScale) : 'square'
+            const shape = this.shape ? this.shape(c, resolution, z, viewScale) : 'square'
             if (shape === 'none') continue
 
             //get offset
-            const offset = this.offset(cell, resolution, z)
+            const offset = this.offset(c, resolution, z)
 
             if (shape === 'square') {
                 //draw square
-                const d = resolution * (1 - sG / resolution) * 0.5
+                const d = resolution * (1 - size / resolution) * 0.5
                 geoCanvas.ctx.beginPath()
-                geoCanvas.ctx.rect(cell.x + d + offset.dx, cell.y + d + offset.dy, sG, sG)
+                geoCanvas.ctx.rect(c.x + d + offset.dx, c.y + d + offset.dy, size, size)
                 geoCanvas.ctx.stroke()
             } else if (shape === 'circle') {
                 //draw circle
                 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.arc(c.x + r2 + offset.dx, c.y + r2 + offset.dy, size * 0.5, 0, 2 * Math.PI, false)
                 geoCanvas.ctx.stroke()
             } else if (shape === 'diamond') {
-                const s2 = sG * 0.5
+                const s2 = size * 0.5
                 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.moveTo(c.x + r2 - s2, c.y + r2)
+                geoCanvas.ctx.lineTo(c.x + r2, c.y + r2 + s2)
+                geoCanvas.ctx.lineTo(c.x + r2 + s2, c.y + r2)
+                geoCanvas.ctx.lineTo(c.x + r2, c.y + r2 - s2)
+                geoCanvas.ctx.lineTo(c.x + r2 - s2, c.y + r2)
                 geoCanvas.ctx.stroke()
             } else if (shape === 'donut') {
                 console.error('Not implemented')
+            } else if (shape === 'triangle_up') {
+                const dr2 = (size - resolution) / 2
+                geoCanvas.ctx.beginPath()
+                geoCanvas.ctx.moveTo(c.x - dr2, c.y - dr2)
+                geoCanvas.ctx.lineTo(c.x + r2, c.y + resolution + dr2)
+                geoCanvas.ctx.lineTo(c.x + resolution + dr2, c.y - dr2)
+                geoCanvas.ctx.closePath()
+                geoCanvas.ctx.stroke()
+            } else if (shape === 'triangle_down') {
+                const dr2 = (size - resolution) / 2
+                geoCanvas.ctx.beginPath()
+                geoCanvas.ctx.moveTo(c.x - dr2, c.y + resolution + dr2)
+                geoCanvas.ctx.lineTo(c.x + r2, c.y - dr2)
+                geoCanvas.ctx.lineTo(c.x + resolution + dr2, c.y + resolution + dr2)
+                geoCanvas.ctx.closePath()
+                geoCanvas.ctx.stroke()
+            } else if (shape === 'triangle_left') {
+                const dr2 = (size - resolution) / 2
+                geoCanvas.ctx.beginPath()
+                geoCanvas.ctx.moveTo(c.x + resolution + dr2, c.y + resolution + dr2)
+                geoCanvas.ctx.lineTo(c.x - dr2, c.y + r2)
+                geoCanvas.ctx.lineTo(c.x + resolution + dr2, c.y - dr2)
+                geoCanvas.ctx.closePath()
+                geoCanvas.ctx.stroke()
+            } else if (shape === 'triangle_right') {
+                const dr2 = (size - resolution) / 2
+                geoCanvas.ctx.beginPath()
+                geoCanvas.ctx.moveTo(c.x - dr2, c.y - dr2)
+                geoCanvas.ctx.lineTo(c.x + resolution + dr2, c.y + r2)
+                geoCanvas.ctx.lineTo(c.x - dr2, c.y + resolution + dr2)
+                geoCanvas.ctx.closePath()
+                geoCanvas.ctx.stroke()
             } else {
                 throw new Error('Unexpected shape:' + shape)
             }

package/src/utils/chernoff.js

@@ -0,0 +1,24 @@
+//@ts-check
+'use strict'
+
+import { loadImage } from '../utils/utils.js'
+
+//
+
+/**
+ * Load chernoff images
+ * See for example: https://github.com/jgaffuri/chernoff-faces
+ * @param {object} out 
+ * @param {string} baseURL 
+ * @param {function|undefined} callback 
+ * @returns 
+ */
+export async function loadChernoffFacesImages(out, baseURL, callback = undefined) {
+    out = out || {}
+    for (let s of ["f", "m"])
+        for (let a of ["y", "m", "o"])
+            for (let i = 0; i <= 2; i++)
+                out[s + a + i] = await loadImage(baseURL + (s + a + i) + ".png")
+    if (callback) callback()
+    return out
+}

package/src/utils/trivariate.js

@@ -0,0 +1,203 @@
+//@ts-check
+'use strict'
+
+import { interpolateLab } from "d3-interpolate"
+
+
+
+export const trivariateClassifier = (properties, totalFunction, opts = {}) => {
+
+    //the three properties
+    const p0 = properties[0], p1 = properties[1], p2 = properties[2]
+
+    //the classifier center point. sum must be equal to 1
+    const [c0, c1, c2] = opts.center || [1 / 3, 1 / 3, 1 / 3]
+
+    //parameter to decide wether to use mixed classes m0, m1, m2.
+    const withMixedClasses = opts.withMixedClasses != undefined ? opts.withMixedClasses : true
+
+    //paramerter decide wether to use a central class, and the size of this central class.
+    //set to 0 or undefined for not showing any central class. Set to 1 for a central class that contains the mix classes
+    const cc = opts.centerCoefficient ? 1 - opts.centerCoefficient : undefined
+
+    //the output classifier method
+    const fun = c => {
+        //get total
+        const tot = totalFunction(c)
+        if (!tot) return undefined
+        //compute shares
+        const [s0, s1, s2] = [+c[p0] / tot, +c[p1] / tot, +c[p2] / tot]
+
+        //class 0
+        if (s0 >= c0 && s1 <= c1 && s2 <= c2) {
+            //central class near class 0
+            if (cc != undefined && (s2 - c2) * (c1 - cc * c1) >= (s1 - cc * c1) * (cc * c2 - c2))
+                return "center"
+            return "0"
+        }
+        //class 1
+        if (s0 <= c0 && s1 >= c1 && s2 <= c2) {
+            //central class near class 1
+            if (cc != undefined && (s2 - c2) * (c0 - cc * c0) >= (s0 - cc * c0) * (cc * c2 - c2))
+                return "center"
+            return "1"
+        }
+        //class 2
+        if (s0 <= c0 && s1 <= c1 && s2 >= c2) {
+            //central class near class 2
+            if (cc != undefined && (s1 - c1) * (c0 - cc * c0) >= (s0 - cc * c0) * (cc * c1 - c1))
+                return "center"
+            return "2"
+        }
+        //middle class 0 - intersection class 1 and 2
+        if (s0 <= c0 && s1 >= c1 && s2 >= c2) {
+            //central class
+            if (cc != undefined && s0 > cc * c0) return "center"
+            if (withMixedClasses) return "m0"
+            return s1 > s2 ? "1" : "2"
+        }
+        //middle class 1 - intersection class 0 and 1
+        if (s0 >= c0 && s1 <= c1 && s2 >= c2) {
+            //central class
+            if (cc != undefined && s1 > cc * c1) return "center"
+            if (withMixedClasses) return "m1"
+            return s0 > s2 ? "0" : "2"
+        }
+        //middle class 2 - intersection class 0 and 1
+        if (s0 >= c0 && s1 >= c1 && s2 <= c2) {
+            //central class
+            if (cc != undefined && s2 > cc * c2) return "center"
+            if (withMixedClasses) return "m2"
+            return s1 > s0 ? "1" : "0"
+        }
+        //should not happen
+        return "unknown"
+    }
+
+    //attach information to output function
+    fun.center = [c0, c1, c2]
+    fun.centerCoefficient = opts.centerCoefficient
+
+    return fun
+}
+
+
+
+export const trivariateColorClassifier = (properties, totalFunction, colors, opts = {}) => {
+
+    //the three colors
+    const [color0, color1, color2] = colors || ["red", "green", "blue"]
+
+    //the color interpolation function
+    const colorInterpolation = opts.colorInterpolation || interpolateLab
+
+    //parameter to decide wether to use mixed classes.
+    const withMixedClasses = opts.withMixedClasses != undefined ? opts.withMixedClasses : true
+    //https://d3js.org/d3-interpolate/color
+    const mixColorFunction = (color1, color2) => colorInterpolation(color1, color2)(0.5)
+    //the colors corresponding to the mixed classes
+    const [mixColor0, mixColor1, mixColor2] = opts.mixedColors || withMixedClasses ? [mixColorFunction(color1, color2), mixColorFunction(color0, color2), mixColorFunction(color0, color1)] : []
+
+    //the central color, used for the central class, if any. The central class is the class of relatively balanced values, around the center point
+    const centerColor = opts.centerColor || colorInterpolation(mixColorFunction(color0, color1), color2)(0.333)
+
+    //make classifier
+    const classifier = trivariateClassifier(properties, totalFunction, opts)
+
+    //the output color classifier method
+    const fun = c => {
+        const cla = classifier(c)
+        if (cla == "0") return color0
+        if (cla == "1") return color1
+        if (cla == "2") return color2
+        if (cla == "m0") return mixColor0
+        if (cla == "m1") return mixColor1
+        if (cla == "m2") return mixColor2
+        if (cla == "center") return centerColor
+        return opts.defaultColor || "black"
+    }
+    fun.center = classifier.center
+    fun.centerCoefficient = opts.centerCoefficient
+    fun.colors = [color0, color1, color2]
+    fun.mixColors = [mixColor0, mixColor1, mixColor2]
+    fun.centerColor = centerColor
+
+    return fun
+}
+
+
+
+
+
+
+/*
+const orderedIndexesDec = arr => [...arr.keys()].sort((a, b) => arr[b] - arr[a]);
+const orderedIndexesInc = arr => [...arr.keys()].sort((a, b) => arr[a] - arr[b]);
+
+export const trivariateClassifier = (properties, totalFunction, opts = {}) => {
+    const lowThreshold = opts.lowThreshold || [1 / 3, 1 / 3, 1 / 3]
+    const highThreshold = opts.highThreshold || [2 / 3, 2 / 3, 2 / 3]
+    const colors = opts.colors || ["red", "green", "blue"]
+    const colorInterpolation = opts.colorInterpolation || interpolateLab
+
+    //https://d3js.org/d3-interpolate/color
+    const middleColorFunction = (color1, color2) => colorInterpolation(color1, color2)(0.5)
+    const middleColors = opts.middleColors || [middleColorFunction(colors[1], colors[2]), middleColorFunction(colors[0], colors[2]), middleColorFunction(colors[0], colors[1])]
+    const centerColor = opts.centerColor || colorInterpolation(middleColors[2], colors[2])(0.333)
+
+    const high_ = orderedIndexesDec(highThreshold)
+    const low_ = orderedIndexesInc(lowThreshold)
+
+    const p0 = properties[0], p1 = properties[1], p2 = properties[2]
+    const fun = c => {
+        //get total
+        const tot = totalFunction(c)
+        if (!tot) return undefined
+        //compute shares
+        const shares = [+c[p0] / tot, +c[p1] / tot, +c[p2] / tot]
+        //return colors
+        //start first with the extreme high (triangles): from the larger value (small triangle) to the lower value (large triangle)
+        for (let i of high_) if (shares[i] > highThreshold[i]) return colors[i]
+        //then draw the extreme low (trapeziums): from the lower value (small trapeziums) to the larger values (large trapezium)
+        for (let i of low_) if (shares[i] < lowThreshold[i]) return middleColors[i]
+        //else central color
+        return centerColor
+    }
+    fun.lowThreshold = lowThreshold
+    fun.highThreshold = highThreshold
+    fun.colors = colors
+    fun.middleColors = middleColors
+    fun.centerColor = centerColor
+    fun.lowIndex = low_
+    fun.highIndex = high_
+    return fun
+}
+*/
+
+/*
+export const trivariateClassifier3 = (properties, totalFunction, opts = {}) => {
+    const [a01, a12, a20] = opts.thresholds || [1/3, 1/3, 1/3]
+    const [c0, c1, c2] = opts.colors || ["red", "green", "blue"]
+    const centerColor = opts.centerColor || "gray"
+
+    const fff = a => a == 1 ? Infinity : a / (1 - a)
+    const c01 = fff(a01), c12 = fff(a12), c20 = fff(a20)
+
+    const p0 = properties[0], p1 = properties[1], p2 = properties[2]
+    const fun = c => {
+        //get total
+        const tot = totalFunction(c)
+        if (!tot) return undefined
+        //compute shares
+        const [s0, s1, s2] = [+c[p0] / tot, +c[p1] / tot, +c[p2] / tot]
+        //return colors
+        if (s0 * c01 > s1 && s0 > s2 * c20) return c0
+        else if (s1 > s0 * c01 && s1 * c12 > s2) return c1
+        else if (s2 * c20 > s0 && s2 > s1 * c12) return c2
+        else return centerColor
+    }
+    fun.colors = [c0, c1, c2]
+    fun.centerColor = centerColor
+    return fun
+}
+*/

package/src/utils/utils.js

@@ -29,6 +29,16 @@ export function nice(v, multiples = [8, 6, 5, 4, 2.5, 2]) {
 }
 
 
+export function loadImage(src) {
+    return new Promise((resolve, reject) => {
+        const img = new Image();
+        img.onload = function () { resolve(img); };
+        img.onerror = function () { reject(new Error('Error loading image')); };
+        img.src = src;
+    });
+}
+
+
 
 /*
 export let monitor = false