gridviz 3.0.1 → 3.0.2

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,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/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)
 }
+*/