gridviz 3.0.1 → 3.0.3

package/src/style/StrokeStyle.js

@@ -4,7 +4,7 @@
 import { Style } from '../core/Style.js'
 
 /**
- *
+ * @module style
  * @author Julien Gaffuri
  */
 export class StrokeStyle extends Style {
@@ -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/style/TanakaStyle.js

@@ -8,6 +8,7 @@ import { classifier as clFun, colorClassifier as cclFun } from '../utils/scale.j
 /**
  * @see https://manifold.net/doc/mfd9/example__tanaka_contours.htm
  *
+ * @module style
  * @author Julien Gaffuri
  */
 export class TanakaStyle {
@@ -32,15 +33,20 @@ export class TanakaStyle {
             return Math.min(minWG + (sideValue - 1) * step, maxWG)
         })
 
-        //make classifiers
+        //make classifier
         const classifier = clFun(breaks)
-        const colorClassifier = cclFun(breaks, colors)
+        //make colors table
+        const colorsDict = {};
+        for (let i = 0; i < colors.length; i++) colorsDict[i + ""] = colors[i]
 
-        const cellStyle = new SquareColorCategoryWebGLStyle({ color: (cell) => colorClassifier(value(cell)) })
+        const cellStyle = new SquareColorCategoryWebGLStyle({
+            code: cell => classifier(value(cell)),
+            color: colorsDict
+        })
 
         const getSideValue = (side) => {
-            const cl1 = side.c1 ? classifier(value(side.c1)) : 0
-            const cl2 = side.c2 ? classifier(value(side.c2)) : 0
+            const cl1 = side.c1 ? classifier(value(side.c1)) : -1
+            const cl2 = side.c2 ? classifier(value(side.c2)) : -1
             return cl1 - cl2
         }
 

package/src/style/TextStyle.js

@@ -4,7 +4,7 @@
 import { Style } from '../core/Style.js'
 
 /**
- *
+ * @module style
  * @author Julien Gaffuri
  */
 export class TextStyle extends Style {

package/src/style/TimeSeriesStyle.js

@@ -9,6 +9,7 @@ import { Style } from '../core/Style.js'
  * Show cell as timeseries chart
  * Can be used for sparkline map of https://datagistips.hypotheses.org/488
  *
+ * @module style
  * @author Julien Gaffuri
  */
 export class TimeSeriesStyle extends Style {

package/src/utils/chernoff.js

@@ -0,0 +1,14 @@
+//@ts-check
+'use strict'
+
+import { loadImage } from '../utils/utils.js'
+
+//load chernoff images
+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()
+}

package/src/utils/scale.js

@@ -13,6 +13,10 @@ import { scaleQuantile } from "d3-scale"
 * @typedef {function(number):string} ColorScale */
 
 
+/**
+ * @module utils
+ */
+
 
 /**
  * Generic function for view scale - continuous or discrete
@@ -29,9 +33,9 @@ export const viewScale = (opts) => {
     const range_ = opts.range
     const domain_ = opts.domain
     const classNumber = opts.classNumber
-    return (cells, r, z) => {
+    return (cells, resolution, z) => {
         const domain = domain_ || [minValue, max(cells, valueFunction)]
-        const range = range_ || [minSizePix * z, r * maxSizeFactor]
+        const range = range_ || [minSizePix * z, resolution * maxSizeFactor]
         const domainSize = domain[1] - domain[0], domainMin = domain[0]
         const rangeSize = range[1] - range[0], rangeMin = range[0]
         return t => {
@@ -61,9 +65,9 @@ export const viewScaleQuantile = (opts) => {
     const minSizePix = opts.minSizePix || 1
     const maxSizeFactor = opts.maxSizeFactor || 1
     const scale = scaleQuantile()
-    return (cells, r, z) => {
+    return (cells, resolution, z) => {
         scale.domain(cells.map(valueFunction))
-        const minSizeGeo = minSizePix * z, maxSizeGeo = r * maxSizeFactor
+        const minSizeGeo = minSizePix * z, maxSizeGeo = resolution * maxSizeFactor
         scale.range(Array.from({ length: classNumber }, (_, i) => minSizeGeo + i * (maxSizeGeo - minSizeGeo) / (classNumber - 1)))
         scale.breaks = scale.quantiles()
         scale.values = scale.range()
@@ -87,9 +91,10 @@ export const viewScaleColor = (opts) => {
     const stretching = opts.stretching
     let colorScale = opts.colorScale || (() => "purple")
 
-    //case of discrete colors
-    if (opts.colors)
-        colorScale = t => opts.colors[t == 1 ? opts.colors.length - 1 : Math.floor(t * opts.colors.length)]
+    //discrete colors case: build continuous color scale from discrete ones.
+    const nbClass = opts.colors?.length
+    if (opts.colors && nbClass)
+        colorScale = t => opts.colors[t == 1 ? nbClass - 1 : Math.floor(t * nbClass)]
 
     return (cells) => {
         if (cells.length == 0 || !cells) return
@@ -109,6 +114,12 @@ export const viewScaleColor = (opts) => {
             if (stretching) t = stretching.invert(t)
             return domain[0] + t * domainSize
         }
+        //discrete colors: return the breaks
+        if (opts.colors && nbClass) {
+            scale.breaks = []
+            for (let i = 1; i < nbClass; i++)
+                scale.breaks.push(scale.invert(i / nbClass))
+        }
 
         return scale;
     }
@@ -145,16 +156,16 @@ export const viewScaleColorQuantile = (opts) => {
 
 
 /**
- * combine view scale functions
+ * Combine view scale functions
  * 
  * @param {*} obj 
- * @returns 
+ * @returns {function}
  */
 export const viewScaleCombination = (obj) => {
     //obj: prop and a function to call
-    return (cells, r, z) => {
+    return (cells, resolution, z) => {
         const out = {}
-        for (const p in obj) { out[p] = obj[p](cells, r, z) }
+        for (const p in obj) { out[p] = obj[p](cells, resolution, z) }
         return out
     }
 }

package/src/utils/stretching.js

@@ -1,6 +1,10 @@
 //@ts-check
 'use strict'
 
+/**
+ * @module utils
+ */
+
 
 //TODO invert for circular
 //TODO use Math.sqrt

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,8 +29,18 @@ 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
 
 let previousDate
@@ -48,3 +58,4 @@ export function monitorDuration(message) {
     previousDate = nowDate
     console.log(d, message)
 }
+*/