gridviz 3.0.0 → 3.0.2

package/src/style/LegoStyle.js

@@ -7,21 +7,18 @@ import { SquareColorCategoryWebGLStyle } from './SquareColorCategoryWebGLStyle.j
 import { Style } from '../core/Style.js'
 
 /**
+ * @module style
  * @author Julien Gaffuri
  */
 export class LegoStyle {
-    /**
-     * @param {string} col
-     * @param {object} opts
-     * @returns {Array.<Style>}
-     */
-    static get(col, opts) {
+
+    static get(value, breaks, colors, opts = {}) {
         opts = opts || {}
 
         //the colors
         //http://www.jennyscrayoncollection.com/2021/06/all-current-lego-colors.html
         //https://leonawicz.github.io/legocolors/reference/figures/README-plot-1.png
-        opts.colors = opts.colors || [
+        /*opts.colors = opts.colors || [
             '#00852b', //darker green
             '#afd246', //light green
             '#fac80a', //dark yellow
@@ -32,18 +29,18 @@ export class LegoStyle {
             '#720012', //dark red
             //"purple",
             //"#eee" //whithe
-        ]
+        ]*/
 
         opts.colDark = opts.colDark || '#333'
         opts.colBright = opts.colBright || '#aaa'
         opts.widthFactor = opts.widthFactor || 0.12
 
         //reuse tanaka as basis
-        const ts = TanakaStyle.get(col, opts)
+        const ts = TanakaStyle.get(value, breaks, colors, opts)
         //style to show limits between pieces
         const sst = new StrokeStyle({
             strokeColor: () => '#666',
-            strokeWidth: (v, r, s, z) => 0.2 * z,
+            strokeWidth: (c, r, z) => 0.2 * z,
             filter: opts.filter,
         })
 
@@ -56,20 +53,21 @@ export class LegoStyle {
     }
 
     /**
-     * @param {function(string):string} col
+     * @param {function(import('../core/Dataset.js').Cell):string} code
+     * @param {object} color
      * @param {object} opts
      * @returns {Array.<Style>}
      */
-    static getCat(col, opts) {
+    static getCategory(code, color, opts) {
         opts = opts || {}
 
         opts.colDark = opts.colDark || '#333'
         opts.colBright = opts.colBright || '#aaa'
 
         //
-        const s = new SquareColorCategoryWebGLStyle({ colorCol: col, color: opts.color })
+        const s = new SquareColorCategoryWebGLStyle({ code: code, color: color })
         //style to show limits between pieces
-        const sst = new StrokeStyle({ strokeColor: () => '#666', strokeWidth: (v, r, s, z) => 0.2 * z })
+        const sst = new StrokeStyle({ strokeColor: () => '#666', strokeWidth: (c, r, z) => 0.2 * z })
 
         return [s, sst, new LegoTopStyle({ colDark: opts.colDark, colBright: opts.colBright })]
     }
@@ -87,26 +85,26 @@ class LegoTopStyle extends Style {
         this.colBright = opts.colBright || '#aaa'
     }
 
-    draw(cells, r, cg) {
+    draw(cells, geoCanvas, r) {
         //filter
         if (this.filter) cells = cells.filter(this.filter)
 
-        cg.ctx.lineWidth = 0.6 * cg.view.z
+        geoCanvas.ctx.lineWidth = 0.6 * geoCanvas.view.z
 
         //dark part
-        cg.ctx.strokeStyle = this.colDark
+        geoCanvas.ctx.strokeStyle = this.colDark
         for (let c of cells) {
-            cg.ctx.beginPath()
-            cg.ctx.arc(c.x + r * 0.5, c.y + r * 0.5, r * 0.55 * 0.5, Math.PI / 4, -Math.PI * (3 / 4), true)
-            cg.ctx.stroke()
+            geoCanvas.ctx.beginPath()
+            geoCanvas.ctx.arc(c.x + r * 0.5, c.y + r * 0.5, r * 0.55 * 0.5, Math.PI / 4, -Math.PI * (3 / 4), true)
+            geoCanvas.ctx.stroke()
         }
 
         //bright part
-        cg.ctx.strokeStyle = this.colBright
+        geoCanvas.ctx.strokeStyle = this.colBright
         for (let c of cells) {
-            cg.ctx.beginPath()
-            cg.ctx.arc(c.x + r * 0.5, c.y + r * 0.5, r * 0.55 * 0.5, Math.PI / 4, -Math.PI * (3 / 4), false)
-            cg.ctx.stroke()
+            geoCanvas.ctx.beginPath()
+            geoCanvas.ctx.arc(c.x + r * 0.5, c.y + r * 0.5, r * 0.55 * 0.5, Math.PI / 4, -Math.PI * (3 / 4), false)
+            geoCanvas.ctx.stroke()
         }
     }
 }

package/src/style/MosaicStyle.js

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

package/src/style/NinjaStarStyle.js

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

package/src/style/PillarStyle.js

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

package/src/style/SegmentStyle.js

@@ -6,6 +6,7 @@ import { Style } from '../core/Style.js'
 /**
  * A style where each cell is represented by a segment whose length, width, color and orientation can vary according to statistical values.
  *
+ * @module style
  * @author Julien Gaffuri
  */
 export class SegmentStyle extends Style {

package/src/style/ShapeColorSizeStyle.js

@@ -7,6 +7,7 @@ import { Style } from '../core/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.
  *
+ * @module style
  * @author Joseph Davies, Julien Gaffuri
  */
 export class ShapeColorSizeStyle extends Style {

package/src/style/SideCategoryStyle.js

@@ -6,6 +6,7 @@ import { SideStyle } from './SideStyle.js'
 /**
  * A style to show the sides of grid cells based on their different categories.
  *
+ * @module style
  * @author Julien Gaffuri
  */
 export class SideCategoryStyle extends SideStyle {

package/src/style/SideStyle.js

@@ -9,7 +9,7 @@ import { Style } from '../core/Style.js'
  * @typedef {function(Array.<Side>,number, number):*} SideViewScale */
 
 /**
- *
+ * @module style
  * @author Julien Gaffuri
  */
 export class SideStyle extends Style {
@@ -28,6 +28,9 @@ export class SideStyle extends Style {
         /** A function returning the length of a cell side, in geo unit
          * @type {function(Side, number, number, object):number} */
         this.length = opts.length || ((side, resolution, z, sideViewScale) => resolution)
+
+        /** Set to A or true so that the side is drawn as a diamond */
+        this.diamond = opts.diamond
     }
 
     /**
@@ -63,31 +66,51 @@ export class SideStyle extends Style {
             const col = this.color ? this.color(side, resolution, z, viewScale) : undefined
             if (!col || col == 'none') continue
 
-            //width
-            /** @type {number|undefined} */
-            const wG = this.width ? this.width(side, resolution, z, viewScale) : undefined
-            if (!wG || wG <= 0) continue
-
-            //length
-            /** @type {number|undefined} */
-            const lG = this.length ? this.length(side, resolution, z, viewScale) : undefined
-            if (!lG || lG <= 0) continue
-            const lG2 = lG * 0.5
-
-            //set color and width
-            geoCanvas.ctx.strokeStyle = col
-            geoCanvas.ctx.lineWidth = wG
-
-            //draw segment with correct orientation
-            geoCanvas.ctx.beginPath()
-            if (side.or === "v") {
-                geoCanvas.ctx.moveTo(side.x, side.y + r2 - lG2)
-                geoCanvas.ctx.lineTo(side.x, side.y + r2 + lG2)
+            if (this.diamond) {
+
+                //set color
+                geoCanvas.ctx.fillStyle = col
+
+                //draw diamond
+                const x = side.x, y = side.y
+                geoCanvas.ctx.beginPath()
+                geoCanvas.ctx.moveTo(x - r2, y)
+                geoCanvas.ctx.lineTo(x, y + r2)
+                geoCanvas.ctx.lineTo(x + r2, y)
+                geoCanvas.ctx.lineTo(x, y - r2)
+                geoCanvas.ctx.closePath()
+                geoCanvas.ctx.fill()
+
             } else {
-                geoCanvas.ctx.moveTo(side.x + r2 - lG2, side.y)
-                geoCanvas.ctx.lineTo(side.x + r2 + lG2, side.y)
+
+                //width
+                /** @type {number|undefined} */
+                const wG = this.width ? this.width(side, resolution, z, viewScale) : undefined
+                if (!wG || wG <= 0) continue
+
+                //length
+                /** @type {number|undefined} */
+                const lG = this.length ? this.length(side, resolution, z, viewScale) : undefined
+                if (!lG || lG <= 0) continue
+                const lG2 = lG * 0.5
+
+                //set width
+                geoCanvas.ctx.lineWidth = wG
+                //set color
+                geoCanvas.ctx.strokeStyle = col
+
+                //draw segment with correct orientation
+                const x = side.x, y = side.y
+                geoCanvas.ctx.beginPath()
+                if (side.or === "v") {
+                    geoCanvas.ctx.moveTo(x, y - lG2)
+                    geoCanvas.ctx.lineTo(x, y + lG2)
+                } else {
+                    geoCanvas.ctx.moveTo(x - lG2, y)
+                    geoCanvas.ctx.lineTo(x + lG2, y)
+                }
+                geoCanvas.ctx.stroke()
             }
-            geoCanvas.ctx.stroke()
         }
 
         //update legends
@@ -98,18 +121,18 @@ export class SideStyle extends Style {
 
     /**
      * 
-     * @param {Array.<import('../core/Dataset').Cell>} cells The cells to use to build the sides. The side x,y coordinates are those of the left point for horizontal sides, and of the bottom point for vertical sides.
+     * @param {Array.<import('../core/Dataset').Cell>} cells The cells to use to build the sides.
      * @param {number} resolution The cells resolution
      * @param {boolean} withHorizontal Set to true to build horizontal sides, false otherwise.
      * @param {boolean} withVertical Set to true to build vertical sides, false otherwise.
-     * @param {boolean} center Set to true so that the side coordinate are those of its center point rather than its left/bottom point.
+     * @param {boolean} centre Set to true so that the side coordinate are those of its center point rather than its left/bottom point (the side x,y coordinates are those of the left point for horizontal sides, and of the bottom point for vertical sides)
      * @returns { Array.<Side> }
      */
-    static buildSides(cells, resolution, withHorizontal = true, withVertical = true, center = false) {
+    static buildSides(cells, resolution, withHorizontal = true, withVertical = true, centre = true) {
         /** @type { Array.<Side> } */
         const sides = []
 
-        const r2 = center ? resolution / 2 : 0
+        const r2 = centre ? resolution / 2 : 0
 
         //make horizontal sides
         //sort cells by x and y

package/src/style/SquareColorCategoryWebGLStyle.js

@@ -10,6 +10,7 @@ import { WebGLSquareColoringCatAdvanced } from '../utils/WebGLSquareColoringCatA
  * To show cells as colored squares, from categories.
  * All cells are drawn as squares, with the same size
  *
+ * @module style
  * @author Julien Gaffuri
  */
 export class SquareColorCategoryWebGLStyle extends Style {
@@ -19,8 +20,8 @@ export class SquareColorCategoryWebGLStyle extends Style {
         opts = opts || {}
 
         /**
-         * The name of the column/attribute of the tabular data where to retrieve the category code of the cell, for coloring.
-         * @type {string} */
+         * A function returning the category code of the cell, for coloring.
+         * @type {function(import('../core/Dataset.js').Cell):string} */
         this.code = opts.code
 
         /**
@@ -71,7 +72,7 @@ export class SquareColorCategoryWebGLStyle extends Style {
         const iBuffer = []
         for (let i = 0; i < nb; i++) {
             c = cells[i]
-            const cat = c[this.code]
+            const cat = this.code(c)
             if (cat == undefined) {
                 console.log('Unexpected category: ' + cat)
                 continue

package/src/style/SquareColorWebGLStyle.js

@@ -10,6 +10,7 @@ import { WebGLSquareColoringAdvanced } from '../utils/WebGLSquareColoringAdvance
  * To show cells as colored squares, with computation of the colors on GPU side (faster than JavaScript side).
  * Alls squares with the same size
  *
+ * @module style
  * @author Julien Gaffuri
  */
 export class SquareColorWebGLStyle extends Style {

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 {

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/scale.js

@@ -13,11 +13,15 @@ import { scaleQuantile } from "d3-scale"
 * @typedef {function(number):string} ColorScale */
 
 
+/**
+ * @module utils
+ */
+
 
 /**
- * Generic function for view scale - continuous
+ * Generic function for view scale - continuous or discrete
  * 
- * @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 
+ * @param {{ valueFunction:function(import("../core/Dataset").Cell):number, minValue?:number, minSizePix?:number, maxSizeFactor?:number, range?:[number, number], domain?:[number, number], stretching?:function(number):number, classNumber?:number}} opts 
  * @returns {function(Array.<import("../core/Dataset").Cell>):Scale}
  */
 export const viewScale = (opts) => {
@@ -28,21 +32,27 @@ export const viewScale = (opts) => {
     const stretching = opts.stretching
     const range_ = opts.range
     const domain_ = opts.domain
-    return (cells, r, z) => {
+    const classNumber = opts.classNumber
+    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 => {
             //scale to [0,1]
-            t = (t - domain[0]) / (domain[1] - domain[0])
+            t = (t - domainMin) / domainSize
             //stretch
             if (stretching) t = stretching(t)
+            //classify
+            if (classNumber) t = t == 1 ? 1 : Math.floor(t * (classNumber)) / (classNumber - 1)
             //scale to range
-            return range[0] + t * (range[1] - range[0])
+            return rangeMin + t * rangeSize
         }
     }
 }
 
 
+
 /**
  * Generic function for view scale - quantile
  * 
@@ -55,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()
@@ -71,24 +81,30 @@ export const viewScaleQuantile = (opts) => {
 
 
 /**
- * Generic function for color view scale - continuous
+ * Generic function for color view scale - continuous or discrete
  * 
- * @param {{ valueFunction:function(import("../core/Dataset").Cell):number, colorScale?:function(number):string, stretching?:function(number):number }} opts 
+ * @param {{ valueFunction:function(import("../core/Dataset").Cell):number, colorScale?:function(number):string, colors?:Array.<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
+    let colorScale = opts.colorScale || (() => "purple")
+
+    //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
         /** @type {[undefined, undefined] | [number, number]} */
         const domain = extent(cells, valueFunction)
         if (domain[0] == undefined) return
-        const amplitude = domain[1] - domain[0]
+        const domainSize = domain[1] - domain[0]
         const scale = t => {
             //scale to [0,1]
-            t = (t - domain[0]) / amplitude
+            t = (t - domain[0]) / domainSize
             //stretch
             if (stretching) t = stretching(t)
             return colorScale(t)
@@ -96,13 +112,23 @@ export const viewScaleColor = (opts) => {
         //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 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;
     }
 }
 
+
+
+
+
 /**
  * Generic function for color view scale - quantile
  * 
@@ -130,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/utils.js

@@ -30,7 +30,7 @@ export function nice(v, multiples = [8, 6, 5, 4, 2.5, 2]) {
 
 
 
-
+/*
 export let monitor = false
 
 let previousDate
@@ -48,3 +48,4 @@ export function monitorDuration(message) {
     previousDate = nowDate
     console.log(d, message)
 }
+*/