gridviz 2.1.13 → 2.1.15

package/src/style/SegmentStyle.js

@@ -1,142 +1,142 @@
-//@ts-check
-'use strict'
-
-import { Style } from '../Style.js'
-
-/**
- * A style where each cell is represented by a segment whose length, width, color and orientation can vary according to statistical values.
- *
- * @author Julien Gaffuri
- */
-export class SegmentStyle extends Style {
-    /** @param {object} opts */
-    constructor(opts) {
-        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 {string} */
-        this.lengthCol = opts.lengthCol
-
-        /** 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 {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
-    }
-
-    /**
-     * Draw cells as segments.
-     *
-     * @param {Array.<import("../Dataset").Cell>} cells
-     * @param {number} r
-     * @param {import("../GeoCanvas").GeoCanvas} cg
-     */
-    draw(cells, r, cg) {
-        //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)
-        }
-
-        let statWidth
-        if (this.widthCol) {
-            //and compute size variable statistics
-            statWidth = Style.getStatistics(cells, (c) => c[this.widthCol], true)
-        }
-
-        //
-        cg.ctx.lineCap = 'butt'
-
-        //conversion factor degree -> radian
-        const f = Math.PI / 180
-
-        //draw in geo coordinates
-        cg.setCanvasTransform()
-
-        for (let c of cells) {
-            //color
-            /** @type {string|undefined} */
-            const col = this.color ? this.color(c[this.colorCol], r, statColor) : undefined
-            if (!col) continue
-
-            //width
-            /** @type {number|undefined} */
-            const wG = this.width ? this.width(c[this.widthCol], r, statWidth, zf) : undefined
-            if (!wG || wG < 0) continue
-
-            //length
-            /** @type {number|undefined} */
-            const lG = this.length ? this.length(c[this.lengthCol], r, statLength, zf) : undefined
-            if (!lG || lG < 0) continue
-
-            //orientation (in radian)
-            /** @type {number} */
-            const or = this.orientation(c) * f
-            if (or === undefined || isNaN(or)) continue
-
-            //get offset
-            const offset = this.offset(c, r, zf)
-
-            //set color and width
-            cg.ctx.strokeStyle = col
-            cg.ctx.lineWidth = wG
-
-            //compute segment centre postition
-            const cx = c.x + r / 2 + offset.dx
-            const cy = c.y + r / 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()
-        }
-
-        //update legend, if any
-        this.updateLegends({
-            widthFun: this.width,
-            r: r,
-            zf: zf,
-            sColor: statColor,
-            //sLength: statLength,
-            sWidth: statWidth,
-        })
-    }
-}
+//@ts-check
+'use strict'
+
+import { Style } from '../Style.js'
+
+/**
+ * A style where each cell is represented by a segment whose length, width, color and orientation can vary according to statistical values.
+ *
+ * @author Julien Gaffuri
+ */
+export class SegmentStyle extends Style {
+    /** @param {object} opts */
+    constructor(opts) {
+        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 {string} */
+        this.lengthCol = opts.lengthCol
+
+        /** 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 {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
+    }
+
+    /**
+     * Draw cells as segments.
+     *
+     * @param {Array.<import("../Dataset").Cell>} cells
+     * @param {number} r
+     * @param {import("../GeoCanvas").GeoCanvas} cg
+     */
+    draw(cells, r, cg) {
+        //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)
+        }
+
+        let statWidth
+        if (this.widthCol) {
+            //and compute size variable statistics
+            statWidth = Style.getStatistics(cells, (c) => c[this.widthCol], true)
+        }
+
+        //
+        cg.ctx.lineCap = 'butt'
+
+        //conversion factor degree -> radian
+        const f = Math.PI / 180
+
+        //draw in geo coordinates
+        cg.setCanvasTransform()
+
+        for (let c of cells) {
+            //color
+            /** @type {string|undefined} */
+            const col = this.color ? this.color(c[this.colorCol], r, statColor) : undefined
+            if (!col) continue
+
+            //width
+            /** @type {number|undefined} */
+            const wG = this.width ? this.width(c[this.widthCol], r, statWidth, zf) : undefined
+            if (!wG || wG < 0) continue
+
+            //length
+            /** @type {number|undefined} */
+            const lG = this.length ? this.length(c[this.lengthCol], r, statLength, zf) : undefined
+            if (!lG || lG < 0) continue
+
+            //orientation (in radian)
+            /** @type {number} */
+            const or = this.orientation(c) * f
+            if (or === undefined || isNaN(or)) continue
+
+            //get offset
+            const offset = this.offset(c, r, zf)
+
+            //set color and width
+            cg.ctx.strokeStyle = col
+            cg.ctx.lineWidth = wG
+
+            //compute segment centre postition
+            const cx = c.x + r / 2 + offset.dx
+            const cy = c.y + r / 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()
+        }
+
+        //update legend, if any
+        this.updateLegends({
+            widthFun: this.width,
+            r: r,
+            zf: zf,
+            sColor: statColor,
+            //sLength: statLength,
+            sWidth: statWidth,
+        })
+    }
+}

package/src/style/ShapeColorSizeStyle.js

@@ -1,152 +1,152 @@
-//@ts-check
-'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.
- * It can be used to show variables as cell colors, cell size, cell shape, or any combination of the three visual variables.
- *
- * @author Joseph Davies, Julien Gaffuri
- */
-export class ShapeColorSizeStyle extends Style {
-    /** @param {object} opts */
-    constructor(opts) {
-        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
-
-        /** 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
-
-        /** 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
-    }
-
-    /**
-     * 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, r, cg) {
-        //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)
-        }
-
-        let statColor
-        if (this.colorCol) {
-            //compute color variable statistics
-            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()
-
-        const r2 = r * 0.5
-        for (let cell of cells) {
-            //color
-            let col = this.color ? this.color(cell[this.colorCol], r, statColor, zf) : undefined
-            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")
-            }
-
-            //shape
-            const shape = this.shape ? this.shape(cell) : '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)
-
-            cg.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)
-            } 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()
-            } 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()
-            } 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()
-            } else {
-                throw new Error('Unexpected shape:' + shape)
-            }
-        }
-
-        //update legends
-        this.updateLegends({ style: this, r: r, zf: zf, sSize: statSize, sColor: statColor, sAlpha: statAlpha })
-    }
-}
+//@ts-check
+'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.
+ * It can be used to show variables as cell colors, cell size, cell shape, or any combination of the three visual variables.
+ *
+ * @author Joseph Davies, Julien Gaffuri
+ */
+export class ShapeColorSizeStyle extends Style {
+    /** @param {object} opts */
+    constructor(opts) {
+        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
+
+        /** 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
+
+        /** 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
+    }
+
+    /**
+     * 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, r, cg) {
+        //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)
+        }
+
+        let statColor
+        if (this.colorCol) {
+            //compute color variable statistics
+            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()
+
+        const r2 = r * 0.5
+        for (let cell of cells) {
+            //color
+            let col = this.color ? this.color(cell[this.colorCol], r, statColor, zf) : undefined
+            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")
+            }
+
+            //shape
+            const shape = this.shape ? this.shape(cell) : '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)
+
+            cg.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)
+            } 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()
+            } 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()
+            } 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()
+            } else {
+                throw new Error('Unexpected shape:' + shape)
+            }
+        }
+
+        //update legends
+        this.updateLegends({ style: this, r: r, zf: zf, sSize: statSize, sColor: statColor, sAlpha: statAlpha })
+    }
+}