gridviz 2.1.16 → 3.0.0

package/src/style/SegmentStyle.js

@@ -1,7 +1,7 @@
 //@ts-check
 'use strict'
 
-import { Style } from '../Style.js'
+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.
@@ -14,129 +14,91 @@ export class SegmentStyle extends Style {
         super(opts)
         opts = opts || {}
 
-        /** A function returning the orientation (in degrees) of the segment representing a cell.
-         * @type {function(import("../Dataset").Cell):number} */
-        this.orientation = opts.orientation || (() => 0)
-
-        /**
-         * @type {string} */
-        this.colorCol = opts.colorCol
-
         /** A function returning the color of the cell segment.
-         * @type {function(number,number,import("../Style").Stat|undefined):string} */
-        this.color = opts.color || (() => '#EA6BAC')
+         * @type {function(import('../core/Dataset.js').Cell, number, number, object):string} */
+        this.color = opts.color || (() => "#EA6BAC") //(c,r,z,vs) => {}
 
-        /**
-         * @type {string} */
-        this.lengthCol = opts.lengthCol
+        /** A function returning the width of the segment representing a cell, in geo unit
+         * @type {function(import('../core/Dataset.js').Cell, number, number, object):number} */
+        this.width = opts.width || ((cell, resolution) => resolution * 0.1)  //(c,r,z,vs) => {}
 
         /** A function returning the length of the segment representing a cell, in geo unit
-         * @type {function(number,number,import("../Style").Stat|undefined,number):number} */
-        this.length = opts.length
+         * @type {function(import('../core/Dataset.js').Cell, number, number, object):number} */
+        this.length = opts.length || ((cell, resolution) => resolution * 0.9)  //(c,r,z,vs) => {}
 
-        /**
-         * @type {string} */
-        this.widthCol = opts.widthCol
-
-        /** A function returning the width of the segment representing a cell, in geo unit
-         * @type {function(number,number,import("../Style").Stat|undefined,number):number} */
-        this.width = opts.width
+        /** A function returning the orientation (in degrees) of the segment representing a cell.
+         * @type {function(import('../core/Dataset.js').Cell, number, number, object):number} */
+        this.orientation = opts.orientation || (() => 180 * Math.random()) //(c,r,z,vs) => {}
     }
 
     /**
      * Draw cells as segments.
      *
-     * @param {Array.<import("../Dataset").Cell>} cells
-     * @param {number} r
-     * @param {import("../GeoCanvas").GeoCanvas} cg
+     * @param {Array.<import("../core/Dataset").Cell>} cells
+     * @param {import("../core/GeoCanvas").GeoCanvas} geoCanvas
+     * @param {number} resolution
      */
-    draw(cells, r, cg) {
+    draw(cells, geoCanvas, resolution) {
+
         //filter
         if (this.filter) cells = cells.filter(this.filter)
 
-        //zoom factor
-        const zf = cg.getZf()
-
-        let statColor
-        if (this.colorCol) {
-            //compute color variable statistics
-            statColor = Style.getStatistics(cells, (c) => c[this.colorCol], true)
-        }
-
-        let statLength
-        if (this.lengthCol) {
-            //if length is used, sort cells by length so that the longests are drawn first
-            cells.sort((c1, c2) => c2[this.lengthCol] - c1[this.lengthCol])
-            //and compute size variable statistics
-            statLength = Style.getStatistics(cells, (c) => c[this.lengthCol], true)
-        }
+        //
+        const z = geoCanvas.view.z
 
-        let statWidth
-        if (this.widthCol) {
-            //and compute size variable statistics
-            statWidth = Style.getStatistics(cells, (c) => c[this.widthCol], true)
-        }
+        //get view scale
+        const viewScale = this.viewScale ? this.viewScale(cells, resolution, z) : undefined
 
         //
-        cg.ctx.lineCap = 'butt'
+        geoCanvas.ctx.lineCap = 'butt'
 
         //conversion factor degree -> radian
         const f = Math.PI / 180
 
-        //draw in geo coordinates
-        cg.setCanvasTransform()
-
-        for (let c of cells) {
+        for (let cell of cells) {
             //color
             /** @type {string|undefined} */
-            const col = this.color ? this.color(c[this.colorCol], r, statColor) : undefined
+            const col = this.color ? this.color(cell, resolution, z, viewScale) : undefined
             if (!col) continue
 
             //width
             /** @type {number|undefined} */
-            const wG = this.width ? this.width(c[this.widthCol], r, statWidth, zf) : undefined
+            const wG = this.width ? this.width(cell, resolution, z, viewScale) : undefined
             if (!wG || wG < 0) continue
 
             //length
             /** @type {number|undefined} */
-            const lG = this.length ? this.length(c[this.lengthCol], r, statLength, zf) : undefined
+            const lG = this.length ? this.length(cell, resolution, z, viewScale) : undefined
             if (!lG || lG < 0) continue
 
             //orientation (in radian)
             /** @type {number} */
-            const or = this.orientation(c) * f
+            const or = this.orientation(cell, resolution, z, viewScale) * f
             if (or === undefined || isNaN(or)) continue
 
             //get offset
-            const offset = this.offset(c, r, zf)
+            const offset = this.offset(cell, resolution, z)
 
             //set color and width
-            cg.ctx.strokeStyle = col
-            cg.ctx.lineWidth = wG
+            geoCanvas.ctx.strokeStyle = col
+            geoCanvas.ctx.lineWidth = wG
 
             //compute segment centre postition
-            const cx = c.x + r / 2 + offset.dx
-            const cy = c.y + r / 2 + offset.dy
+            const cx = cell.x + resolution / 2 + offset.dx
+            const cy = cell.y + resolution / 2 + offset.dy
 
             //compute segment direction
             const dx = 0.5 * Math.cos(or) * lG
             const dy = 0.5 * Math.sin(or) * lG
 
             //draw segment
-            cg.ctx.beginPath()
-            cg.ctx.moveTo(cx - dx, cy - dy)
-            cg.ctx.lineTo(cx + dx, cy + dy)
-            cg.ctx.stroke()
+            geoCanvas.ctx.beginPath()
+            geoCanvas.ctx.moveTo(cx - dx, cy - dy)
+            geoCanvas.ctx.lineTo(cx + dx, cy + dy)
+            geoCanvas.ctx.stroke()
         }
 
-        //update legend, if any
-        this.updateLegends({
-            widthFun: this.width,
-            r: r,
-            zf: zf,
-            sColor: statColor,
-            //sLength: statLength,
-            sWidth: statWidth,
-        })
+        //update legends
+        this.updateLegends({ viewScale: viewScale, resolution: resolution, z: z, cells: cells })
     }
 }

package/src/style/ShapeColorSizeStyle.js

@@ -1,8 +1,7 @@
 //@ts-check
 'use strict'
 
-import { Style } from '../Style.js'
-import { color } from 'd3-color'
+import { Style } from '../core/Style.js'
 
 /**
  * A very generic style that shows grid cells with specific color, size and shape.
@@ -16,137 +15,89 @@ export class ShapeColorSizeStyle extends Style {
         super(opts)
         opts = opts || {}
 
-        /** The name of the column/attribute of the tabular data where to retrieve the variable for color.
-         * @type {string} */
-        this.colorCol = opts.colorCol
-
         /** A function returning the color of the cell.
-         * @type {function(number,number,import("../Style").Stat|undefined,number):string} */
-        this.color = opts.color || (() => '#EA6BAC') //(v,r,s,zf) => {}
-
-        /** The name of the column/attribute of the tabular data where to retrieve the variable for size.
-         * @type {string} */
-        this.sizeCol = opts.sizeCol
+         * @type {function(import('../core/Dataset.js').Cell, number, number, object):string} */
+        this.color = opts.color || (() => "#EA6BAC") //(c,r,z,vs) => {}
 
         /** A function returning the size of a cell in geographical unit.
-         * @type {function(number,number,import("../Style").Stat|undefined,number):number} */
-        this.size = opts.size
+         * @type {function(import('../core/Dataset.js').Cell, number, number, object):number} */
+        this.size = opts.size || ((cell, resolution) => resolution) //(c,r,z,vs) => {}
 
         /** 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
+         * @type {function(import("../core/Dataset.js").Cell,number, number,object):import("../core/Style.js").Shape} */
+        this.shape = opts.shape || (() => "square") //(c,r,z,vs) => {}
     }
 
     /**
-     * Draw cells as squares, with various colors and size.
-     *
-     * @param {Array.<import("../Dataset").Cell>} cells
-     * @param {number} r
-     * @param {import("../GeoCanvas").GeoCanvas} cg
+     * Draw cells as squares, with various colors and sizes.
+     * 
+     * @param {Array.<import("../core/Dataset.js").Cell>} cells
+     * @param {import("../core/GeoCanvas.js").GeoCanvas} geoCanvas
+     * @param {number} resolution
+     * @override
      */
-    draw(cells, r, cg) {
+    draw(cells, geoCanvas, resolution) {
+
         //filter
         if (this.filter) cells = cells.filter(this.filter)
 
-        //zoom factor
-        const zf = cg.getZf()
-
-        let statSize
-        if (this.sizeCol) {
-            //if size is used, sort cells by size so that the biggest are drawn first
-            cells.sort((c1, c2) => c2[this.sizeCol] - c1[this.sizeCol])
-            //and compute size variable statistics
-            statSize = Style.getStatistics(cells, (c) => c[this.sizeCol], true)
-        }
+        //zoom
+        const z = geoCanvas.view.z
 
-        let statColor
-        if (this.colorCol) {
-            //compute color variable statistics
-            statColor = Style.getStatistics(cells, (c) => c[this.colorCol], true)
-        }
+        //get view scale
+        const viewScale = this.viewScale ? this.viewScale(cells, resolution, z) : undefined
 
-        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()
-
-        const r2 = r * 0.5
-        for (let cell of cells) {
+        const r2 = resolution * 0.5
+        for (let c of cells) {
             //color
-            let col = this.color ? this.color(cell[this.colorCol], r, statColor, zf) : undefined
+            let col = this.color ? this.color(c, resolution, z, viewScale) : "black"
             if (!col || col === 'none') continue
 
-            //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")
-            }
+            //size
+            const size = this.size ? this.size(c, resolution, z, viewScale) : resolution
+            if (!size) continue
 
             //shape
-            const shape = this.shape ? this.shape(cell) : 'square'
+            const shape = this.shape ? this.shape(c, resolution, z, viewScale) : 'square'
             if (shape === 'none') continue
 
-            //size
-            /** @type {function(number,number,import("../Style").Stat|undefined,number):number} */
-            let s_ = this.size || (() => r)
-            //size - in geo unit
-            const sG = s_(cell[this.sizeCol], r, statSize, zf)
-
             //get offset
-            const offset = this.offset(cell, r, zf)
+            const offset = this.offset(c, resolution, z)
 
-            cg.ctx.fillStyle = col
+            geoCanvas.ctx.fillStyle = col
             if (shape === 'square') {
                 //draw square
-                const d = r * (1 - sG / r) * 0.5
-                cg.ctx.fillRect(cell.x + d + offset.dx, cell.y + d + offset.dy, sG, sG)
+                const d = resolution * (1 - size / resolution) * 0.5
+                geoCanvas.ctx.fillRect(c.x + d + offset.dx, c.y + d + offset.dy, size, size)
             } else if (shape === 'circle') {
                 //draw circle
-                cg.ctx.beginPath()
-                cg.ctx.arc(cell.x + r2 + offset.dx, cell.y + r2 + offset.dy, sG * 0.5, 0, 2 * Math.PI, false)
-                cg.ctx.fill()
+                geoCanvas.ctx.beginPath()
+                geoCanvas.ctx.arc(c.x + r2 + offset.dx, c.y + r2 + offset.dy, size * 0.5, 0, 2 * Math.PI, false)
+                geoCanvas.ctx.fill()
             } else if (shape === 'donut') {
                 //draw donut
-                const xc = cell.x + r2 + offset.dx,
-                    yc = cell.y + r2 + offset.dy
-                cg.ctx.beginPath()
-                cg.ctx.moveTo(xc, yc)
-                cg.ctx.arc(xc, yc, r2, 0, 2 * Math.PI)
-                cg.ctx.arc(xc, yc, (1 - sG / r) * r2, 0, 2 * Math.PI, true)
-                cg.ctx.closePath()
-                cg.ctx.fill()
+                const xc = c.x + r2 + offset.dx,
+                    yc = c.y + r2 + offset.dy
+                geoCanvas.ctx.beginPath()
+                geoCanvas.ctx.moveTo(xc, yc)
+                geoCanvas.ctx.arc(xc, yc, r2, 0, 2 * Math.PI)
+                geoCanvas.ctx.arc(xc, yc, (1 - size / resolution) * r2, 0, 2 * Math.PI, true)
+                geoCanvas.ctx.closePath()
+                geoCanvas.ctx.fill()
             } else if (shape === 'diamond') {
-                const s2 = sG * 0.5
-                cg.ctx.beginPath()
-                cg.ctx.moveTo(cell.x + r2 - s2, cell.y + r2)
-                cg.ctx.lineTo(cell.x + r2, cell.y + r2 + s2)
-                cg.ctx.lineTo(cell.x + r2 + s2, cell.y + r2)
-                cg.ctx.lineTo(cell.x + r2, cell.y + r2 - s2)
-                cg.ctx.fill()
+                const s2 = size * 0.5
+                geoCanvas.ctx.beginPath()
+                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.fill()
             } else {
                 throw new Error('Unexpected shape:' + shape)
             }
         }
 
         //update legends
-        this.updateLegends({ style: this, r: r, zf: zf, sSize: statSize, sColor: statColor, sAlpha: statAlpha })
+        this.updateLegends({ viewScale: viewScale, resolution: resolution, z: z, cells: cells })
     }
 }

package/src/style/SideCategoryStyle.js

@@ -0,0 +1,112 @@
+//@ts-check
+'use strict'
+
+import { SideStyle } from './SideStyle.js'
+
+/**
+ * A style to show the sides of grid cells based on their different categories.
+ *
+ * @author Julien Gaffuri
+ */
+export class SideCategoryStyle extends SideStyle {
+    /** @param {object} opts */
+    constructor(opts) {
+        super(opts)
+        opts = opts || {}
+
+        /** A function returning the category code of a cell.
+         * @type {function(import('../core/Dataset.js').Cell, number, number):string} */
+        this.code = opts.code
+
+        /**
+         * The dictionary (string -> color) which give the color of each category.
+         * @type {object} */
+        this.color = opts.color
+
+    }
+
+    /**
+     * @param {Array.<import("../core/Dataset.js").Cell>} cells
+     * @param {import("../core/GeoCanvas.js").GeoCanvas} geoCanvas
+     * @param {number} resolution
+     */
+    draw(cells, geoCanvas, resolution) {
+
+        //filter
+        if (this.filter) cells = cells.filter(this.filter)
+
+        //
+        const z = geoCanvas.view.z
+
+        //build sides
+
+        /**  @type {Array.<import('./SideStyle.js').Side>} */
+        const sides = SideStyle.buildSides(cells, resolution)
+        if (sides.length == 0) return
+
+        //get side view scale
+        const viewScale = this.viewScale ? this.viewScale(sides, resolution, z) : undefined
+
+        //draw sides
+
+        geoCanvas.ctx.lineCap = 'butt'
+        for (let side of sides) {
+
+            //get category codes for both cells
+            const code1 = side.c1 ? this.code(side.c1, resolution, z) : undefined
+            const code2 = side.c2 ? this.code(side.c2, resolution, z) : undefined
+            if (code1 == code2) continue
+
+            //width
+            /** @type {number|undefined} */
+            const wG = this.width ? this.width(side, resolution, z, viewScale) : undefined
+            if (!wG || wG <= 0) continue
+            const w2 = wG * 0.5
+
+            //set width
+            geoCanvas.ctx.lineWidth = wG
+
+            //draw segment with correct orientation
+            if (side.or === 'h') {
+                //top line
+                if (code2) {
+                    geoCanvas.ctx.beginPath()
+                    geoCanvas.ctx.strokeStyle = this.color[code2]
+                    geoCanvas.ctx.moveTo(side.x, side.y + w2)
+                    geoCanvas.ctx.lineTo(side.x + resolution, side.y + w2)
+                    geoCanvas.ctx.stroke()
+                }
+
+                //bottom line
+                if (code1) {
+                    geoCanvas.ctx.beginPath()
+                    geoCanvas.ctx.strokeStyle = this.color[code1]
+                    geoCanvas.ctx.moveTo(side.x, side.y - w2)
+                    geoCanvas.ctx.lineTo(side.x + resolution, side.y - w2)
+                    geoCanvas.ctx.stroke()
+                }
+            } else {
+                //right line
+                if (code2) {
+                    geoCanvas.ctx.beginPath()
+                    geoCanvas.ctx.strokeStyle = this.color[code2]
+                    geoCanvas.ctx.moveTo(side.x + w2, side.y)
+                    geoCanvas.ctx.lineTo(side.x + w2, side.y + resolution)
+                    geoCanvas.ctx.stroke()
+                }
+
+                //left line
+                if (code1) {
+                    geoCanvas.ctx.beginPath()
+                    geoCanvas.ctx.strokeStyle = this.color[code1]
+                    geoCanvas.ctx.moveTo(side.x - w2, side.y)
+                    geoCanvas.ctx.lineTo(side.x - w2, side.y + resolution)
+                    geoCanvas.ctx.stroke()
+                }
+            }
+        }
+
+        //update legends
+        this.updateLegends({ style: this, resolution: resolution, z: z, viewScale: viewScale })
+    }
+}