gridviz 2.1.10 → 2.1.12

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "gridviz",
-    "version": "2.1.10",
+    "version": "2.1.12",
     "description": "Visualization tool for gridded statistics",
     "keywords": [
         "statistics",

package/src/style/IsoFenceStyle.js

@@ -28,7 +28,7 @@ export class IsoFenceStyle extends Style {
          * @type {function(number,number,import("../Style").Stat|undefined,number):number} */
         this.height = opts.height || ((v, r, s, zf) => r * 0.4)
 
-        /** The perspective angle.
+        /** The perspective angle, in degree, within [-180,180], from [O,x] axis.
          * @type {number} */
         this.angle = opts.angle != undefined ? opts.angle : 50
 
@@ -76,9 +76,6 @@ export class IsoFenceStyle extends Style {
         //nb categories - used for radar and agepyramid
         const cats = Object.keys(this.color)
 
-        //draw in geo coordinates
-        cg.setCanvasTransform()
-
         //half resolution
         const r2 = r / 2
 
@@ -146,32 +143,46 @@ export class IsoFenceStyle extends Style {
         //angle in radians
         const aRad = this.angle * Math.PI / 180, cos = Math.cos(aRad), sin = Math.sin(aRad)
 
+        //sort sides so that the back ones are drawn first. This depends on the angle.
+        //depending on distance to the reference corner point
+        const xCorner = Math.abs(this.angle) < 90 ? cg.extGeo.xMin : cg.extGeo.xMax
+        const yCorner = this.angle < 0 ? cg.extGeo.yMax : cg.extGeo.yMin
+        sides.sort((s1, s2) => (Math.hypot(s2.x - xCorner, s2.y - yCorner) - Math.hypot(s1.x - xCorner, s1.y - yCorner)))
+
+        //prepare function to draw corner line for a cell *c*
+        const drawCornerLine = (c) => {
+
+            if (!c) return
+            //line style
+            const lw = this.cornerLineWidth ? this.cornerLineWidth(c, r, zf, this.angle) : 0.8 * zf
+            if (lw == 0) return
+            cg.ctx.strokeStyle = this.cornerLineStrokeColor ? this.cornerLineStrokeColor(c, r, zf, this.angle) : "#333"
+            cg.ctx.lineWidth = lw
+
+            //height - in geo
+            const hG = h_(c[this.heightCol], r, stat, zf)
+
+            //draw line
+            cg.ctx.beginPath()
+            cg.ctx.moveTo(c.x + r2 + dx, c.y + r2 + dy)
+            cg.ctx.lineTo(c.x + r2 + hG * cos + dx, c.y + r2 + hG * sin + dy)
+            cg.ctx.stroke()
+        }
+
         //draw in geo coordinates
         cg.setCanvasTransform()
 
-        //sort sides so that the back ones are drawn first. This depends on the angle
-        if (Math.abs(this.angle) <= 90)
-            //north east ones are drown first
-            sides.sort((s1, s2) => (Math.hypot(s2.x, s2.y) - Math.hypot(s1.x, s1.y)))
-        else if (this.angle > 90)
-            //north west ones are drown first
-            sides.sort((s1, s2) => (Math.hypot(s2.x - cg.extGeo.xMax, s2.y) - Math.hypot(s1.x - cg.extGeo.xMax, s1.y)))
-        else if (this.angle < 90)
-            //south west ones are drown first
-            sides.sort((s1, s2) => (Math.hypot(s2.x - cg.extGeo.xMax, s2.y - cg.extGeo.yMax) - Math.hypot(s1.x - cg.extGeo.xMax, s1.y - cg.extGeo.yMax)))
-
         //draw sides
+        cg.ctx.lineCap = "round";
         for (let s of sides) {
 
             //heights - in geo
-            /** @type {number} */
-            const hG1 = s.c1 ? h_(s.c1[this.heightCol], r, stat, zf) : 0
-            /** @type {number} */
-            const hG2 = s.c2 ? h_(s.c2[this.heightCol], r, stat, zf) : 0
+            const hG1 = s.c1 ? h_(s.c1[this.heightCol], r, stat, zf) : 0,
+                hG2 = s.c2 ? h_(s.c2[this.heightCol], r, stat, zf) : 0
 
             //compute totals for both cells
-            const total1 = computeTotal(s.c1, cats)
-            const total2 = computeTotal(s.c2, cats)
+            const total1 = computeTotal(s.c1, cats),
+                total2 = computeTotal(s.c2, cats)
             if (total1 == 0 && total2 == 0) continue
 
             let cumul1 = 0, cumul2 = 0
@@ -184,10 +195,10 @@ export class IsoFenceStyle extends Style {
                 if (v1 == 0 && v2 == 0) continue
 
                 //compute heights
-                const h1 = total1 > 0 ? hG1 * cumul1 / total1 : 0
-                const h1n = total1 > 0 ? hG1 * (cumul1 + v1) / total1 : 0
-                const h2 = total2 > 0 ? hG2 * cumul2 / total2 : 0
-                const h2n = total2 > 0 ? hG2 * (cumul2 + v2) / total2 : 0
+                const h1 = hG1 * cumul1 / total1 || 0
+                const h1n = hG1 * (cumul1 + v1) / total1 || 0
+                const h2 = hG2 * cumul2 / total2 || 0
+                const h2n = hG2 * (cumul2 + v2) / total2 || 0
 
                 //make path
                 cg.ctx.beginPath()
@@ -212,7 +223,7 @@ export class IsoFenceStyle extends Style {
                     //top left
                     cg.ctx.lineTo(s.x - r2 + h1n * cos + dx, s.y + h1n * sin + dy)
                 }
-                cg.ctx.closePath()
+                //cg.ctx.closePath()
 
                 //fill
                 cg.ctx.fillStyle = color
@@ -220,27 +231,16 @@ export class IsoFenceStyle extends Style {
 
                 cumul1 += v1
                 cumul2 += v2
-                //break
-            }
-        }
-
-        //draw corner lines
-        for (let c of cells) {
-
-            //line style
-            const lw = this.cornerLineWidth ? this.cornerLineWidth(c, r, zf, this.angle) : 0.8 * zf
-            if (lw == 0) continue
-            cg.ctx.strokeStyle = this.cornerLineStrokeColor ? this.cornerLineStrokeColor(c, r, zf, this.angle) : "#333"
-            cg.ctx.lineWidth = lw
 
-            //height - in geo
-            const hG = h_(c[this.heightCol], r, stat, zf)
-
-            cg.ctx.beginPath()
-            cg.ctx.moveTo(c.x + r2 + dx, c.y + r2 + dy)
-            cg.ctx.lineTo(c.x + r2 + hG * cos + dx, c.y + r2 + hG * sin + dy)
-            cg.ctx.closePath()
-            cg.ctx.stroke()
+                //TODO draw only one line
+                //draw corner line
+                //if (s.or == "h") {
+                drawCornerLine(s.c1)
+                drawCornerLine(s.c2)
+                //if (this.angle > 0 && s.or == "h") drawCornerLine(s.c2)
+                //else drawCornerLine(s.c2)
+                //}
+            }
         }
 
         //update legends

package/src/style/ShapeColorSizeStyle.js

@@ -2,6 +2,7 @@
 'use strict'
 
 import { Style } from '../Style.js'
+import { color } from 'd3-color'
 
 /**
  * A very generic style that shows grid cells with specific color, size and shape.
@@ -34,6 +35,14 @@ export class ShapeColorSizeStyle extends Style {
         /** A function returning the shape of a cell.
          * @type {function(import("../Dataset").Cell):import("../Style").Shape} */
         this.shape = opts.shape || (() => 'square')
+
+        /** The name of the column/attribute of the tabular data where to retrieve the variable for color alpha.
+         * @type {string} */
+        this.alphaCol = opts.alphaCol
+
+        /** A function returning the color alpha of the cell.
+         * @type {function(number,number,import("../Style").Stat|undefined,number):number} */
+        this.alphaF = opts.alphaF
     }
 
     /**
@@ -64,6 +73,12 @@ export class ShapeColorSizeStyle extends Style {
             statColor = Style.getStatistics(cells, (c) => c[this.colorCol], true)
         }
 
+        let statAlpha
+        if (this.alphaCol) {
+            //compute color alpha variable statistics
+            statAlpha = Style.getStatistics(cells, (c) => c[this.alphaCol], true)
+        }
+
         //draw with HTML canvas
         //in geo coordinates
         cg.setCanvasTransform()
@@ -71,9 +86,19 @@ export class ShapeColorSizeStyle extends Style {
         const r2 = r * 0.5
         for (let cell of cells) {
             //color
-            const col = this.color ? this.color(cell[this.colorCol], r, statColor, zf) : undefined
+            let col = this.color ? this.color(cell[this.colorCol], r, statColor, zf) : undefined
             if (!col || col === 'none') continue
-            cg.ctx.fillStyle = col
+
+            //alpha
+            if (this.alphaCol && this.alphaF) {
+                //get alpha
+                const alpha = this.alphaF(cell[this.alphaCol], r, statAlpha, zf)
+                if (alpha == 0) continue
+                //apply alpha to color col
+                const col_ = color(col);
+                if (col_) col = `rgba(${col_.r}, ${col_.g}, ${col_.b}, ${alpha})`;
+                else console.warn("Could not decode color " + col + " in ShapeColorSizeStyle")
+            }
 
             //shape
             const shape = this.shape ? this.shape(cell) : 'square'
@@ -88,6 +113,7 @@ export class ShapeColorSizeStyle extends Style {
             //get offset
             const offset = this.offset(cell, r, zf)
 
+            cg.ctx.fillStyle = col
             if (shape === 'square') {
                 //draw square
                 const d = r * (1 - sG / r) * 0.5