gridviz 2.1.16 → 3.0.0

package/src/style/CompositionStyle_.js

@@ -1,293 +0,0 @@
-//@ts-check
-'use strict'
-
-import { Style } from '../Style.js'
-
-/** @typedef {"flag"|"piechart"|"ring"|"segment"|"radar"|"agepyramid"|"halftone"} CompositionType */
-
-/**
- * A style showing the composition of a total in different categories, with different color hues.
- * It consists of a symbol with different parts, whose size reflect the proportion of the corresponding category.
- * For a list of supported symbols, @see CompositionType
- * The symbol can be scaled depending on the cell importance.
- *
- * @author Julien Gaffuri
- */
-export class CompositionStyle_ extends Style {
-    /** @param {object} opts */
-    constructor(opts) {
-        super(opts)
-        opts = opts || {}
-
-        /** A function returning the view scale.
-         * @type {function(Array.<import('../Dataset.js').Cell>,number, number):object} */
-        this.viewScale = opts.viewScale
-
-        /**
-         * The dictionary (string -> color) which give the color of each category.
-         * @type {object} */
-        this.color = opts.color
-
-        /**
-         * A function returning the type of decomposition symbol of a cell, @see CompositionType
-         * @type {function(import("../Dataset.js").Cell,number, number,object):CompositionType} */
-        this.type = opts.type
-
-        /** A function returning the size of a cell in geographical unit.
-         * @type {function(import('../Dataset.js').Cell,number, number,object):number} */
-        this.size = opts.size
-
-        /** For style types with stripes (flag, segment), the orientation of the stripes (0 for horizontal, other for vertical).
-         * @type {function(import("../Dataset.js").Cell,number,number,object):number} */
-        this.stripesOrientation = opts.stripesOrientation || (() => 0) //(c,r,zf,vc) => ...
-
-        /** The function specifying an offset angle for a radar, halftone or pie chart style.
-         * The angle is specified in degree. The rotation is anti-clockwise.
-         * @type {function(import("../Dataset.js").Cell,number,number,object):number} */
-        this.offsetAngle = opts.offsetAngle || (() => 0) //(cell,r,zf,vc) => ...
-
-        /** The function specifying the height of the age pyramid, in geo unit.
-         * @type {function(import("../Dataset.js").Cell,number,number,object):number} */
-        this.agePyramidHeight = opts.agePyramidHeight || ((c, r, zf) => r) //(cell,r,zf,vc) => ...
-
-        /** For pie chart, this is parameter for internal radius, so that the pie chart looks like a donut.
-         * 0 for normal pie charts, 0.5 to empty half of the radius.
-         * @type {number} */
-        this.pieChartInternalRadiusFactor = opts.pieChartInternalRadiusFactor || 0
-    }
-
-    /**
-     * Draw cells as squares depending on their value.
-     *
-     * @param {Array.<import("../Dataset.js").Cell>} cells
-     * @param {number} r
-     * @param {import("../GeoCanvas.js").GeoCanvas} cg
-     */
-    draw(cells, r, cg) {
-        //filter
-        if (this.filter) cells = cells.filter(this.filter)
-
-        //zoom factor
-        const zf = cg.getZf()
-
-        //get view scale
-        const vc = this.viewScale ? this.viewScale(cells, r, zf) : undefined
-
-        //nb categories - used for radar and agepyramid
-        const nbCat = Object.entries(this.color).length
-
-        //draw in geo coordinates
-        cg.setCanvasTransform()
-
-        //draw calls
-        for (let cell of cells) {
-
-            //size
-            const sG = this.size ? this.size(cell, r, zf, vc) : r
-            if (!sG) continue
-
-            //get offset
-            const offset = this.offset(cell, r, zf)
-
-            //get symbol type
-            const type_ = this.type ? this.type(cell, r, zf, vc) : 'flag'
-
-            //compute center position
-            const xc = cell.x + offset.dx + (type_ === 'agepyramid' ? 0 : r * 0.5)
-            const yc = cell.y + offset.dy + (type_ === 'agepyramid' ? 0 : r * 0.5)
-
-            //compute offset angle, when relevant
-            const offAng = this.offsetAngle ? (this.offsetAngle(cell, r, zf, vc) * Math.PI) / 180 : 0
-
-            if (type_ === 'agepyramid' || type_ === 'radar' || type_ === 'halftone') {
-                //get cell category max value
-                let maxVal = -Infinity
-                for (let key of Object.keys(this.color)) {
-                    const v = +cell[key]
-                    if (v > maxVal) maxVal = v
-                }
-
-                //cumul
-                let cumul = 0
-                if (type_ === 'agepyramid' && this.agePyramidHeight)
-                    cumul = (r - this.agePyramidHeight(cell, r, zf, vc)) / 2
-                if (type_ === 'radar' || type_ === 'halftone') cumul = Math.PI / 2 + offAng
-
-                //compute the increment, which is the value to increment the cumul for each category
-                const incr =
-                    type_ === 'agepyramid'
-                        ? (this.agePyramidHeight ? this.agePyramidHeight(cell, r, zf, vc) : r) / nbCat
-                        : type_ === 'radar' || type_ === 'halftone'
-                            ? (2 * Math.PI) / nbCat
-                            : undefined
-                if (incr === undefined) throw new Error('Unexpected symbol type:' + type_)
-
-                for (let [column, color] of Object.entries(this.color)) {
-                    if (type_ === 'agepyramid') {
-                        //set category color
-                        cg.ctx.fillStyle = color
-
-                        //get category value
-                        const val = cell[column]
-
-                        //compute category length - in geo
-                        /** @type {number} */
-                        const wG = (sG * val) / maxVal
-
-                        //draw bar
-                        cg.ctx.fillRect(xc + (r - wG) / 2, yc + cumul, wG, incr)
-
-                        //next height
-                        cumul += incr
-                    } else if (type_ === 'radar') {
-                        //set category color
-                        cg.ctx.fillStyle = color
-
-                        //get categroy value
-                        const val = cell[column]
-
-                        //compute category radius - in geo
-                        /** @type {number} */
-                        //const rG = this.radius(val, r, stat, cellStat, zf)
-                        const rG = (sG / 2) * Math.sqrt(val / maxVal)
-
-                        //draw angular sector
-                        cg.ctx.beginPath()
-                        cg.ctx.moveTo(xc, yc)
-                        cg.ctx.arc(xc, yc, rG, cumul - incr, cumul)
-                        cg.ctx.lineTo(xc, yc)
-                        cg.ctx.fill()
-
-                        //next angular sector
-                        cumul += incr
-                    } else if (type_ === 'halftone') {
-                        //set category color
-                        cg.ctx.fillStyle = color
-
-                        //get categroy value
-                        const val = cell[column]
-
-                        //compute category radius - in geo
-                        /** @type {number} */
-                        const rG = sG * 0.333 * Math.sqrt(val / maxVal)
-
-                        //draw circle
-                        cg.ctx.beginPath()
-                        cg.ctx.arc(
-                            xc + r * 0.25 * Math.cos(cumul),
-                            yc + r * 0.25 * Math.sin(cumul),
-                            rG,
-                            0,
-                            2 * Math.PI
-                        )
-                        cg.ctx.fill()
-
-                        //next angular sector
-                        cumul += incr
-                    } else {
-                        throw new Error('Unexpected symbol type:' + type_)
-                    }
-                }
-            } else {
-                //compute total
-                let total = 0
-                for (let column of Object.keys(this.color)) {
-                    const v = +cell[column]
-                    if (!v) continue
-                    total += v
-                }
-                if (!total || isNaN(total)) continue
-
-                //draw decomposition symbol
-                let cumul = 0
-                const d = r * (1 - sG / r) * 0.5
-                const ori = this.stripesOrientation(cell, r, zf, vc)
-
-                for (let [column, color] of Object.entries(this.color)) {
-                    //get share
-                    const share = cell[column] / total
-                    if (!share || isNaN(share)) continue
-
-                    //set color
-                    cg.ctx.fillStyle = color
-
-                    //draw symbol part
-                    if (type_ === 'flag') {
-                        //draw flag stripe
-                        if (ori == 0) {
-                            //horizontal
-                            cg.ctx.fillRect(
-                                cell.x + d + offset.dx,
-                                cell.y + d + cumul * sG + offset.dy,
-                                sG,
-                                share * sG
-                            )
-                        } else {
-                            //vertical
-                            cg.ctx.fillRect(
-                                cell.x + d + cumul * sG + offset.dx,
-                                cell.y + d + offset.dy,
-                                share * sG,
-                                sG
-                            )
-                        }
-                    } else if (type_ === 'piechart') {
-                        //draw pie chart angular sector
-
-                        //compute angles
-                        const a1 = cumul * 2 * Math.PI
-                        const a2 = (cumul + share) * 2 * Math.PI
-
-                        //draw
-                        cg.ctx.beginPath()
-                        cg.ctx.moveTo(xc, yc)
-                        cg.ctx.arc(xc, yc, sG * 0.5, a1 + offAng, a2 + offAng)
-                        if (this.pieChartInternalRadiusFactor)
-                            cg.ctx.arc(
-                                xc,
-                                yc,
-                                sG * 0.5 * this.pieChartInternalRadiusFactor,
-                                a1 + offAng,
-                                a2 + offAng,
-                                true
-                            )
-                        cg.ctx.closePath()
-                        cg.ctx.fill()
-                    } else if (type_ === 'ring') {
-                        //draw ring
-                        cg.ctx.beginPath()
-                        cg.ctx.arc(xc, yc, Math.sqrt(1 - cumul) * sG * 0.5, 0, 2 * Math.PI)
-                        cg.ctx.fill()
-                    } else if (type_ === 'segment') {
-                        //draw segment sections
-                        const wG = (sG * sG) / r
-                        if (ori == 0) {
-                            //horizontal
-                            cg.ctx.fillRect(
-                                cell.x + offset.dx,
-                                cell.y + (r - wG) / 2 + cumul * wG + offset.dy,
-                                r,
-                                share * wG
-                            )
-                        } else {
-                            //vertical
-                            cg.ctx.fillRect(
-                                cell.x + cumul * r + offset.dx,
-                                cell.y + (r - wG) / 2 + offset.dy,
-                                share * r,
-                                wG
-                            )
-                        }
-                    } else {
-                        throw new Error('Unexpected symbol type:' + type_)
-                    }
-
-                    cumul += share
-                }
-            }
-        }
-
-        //update legends
-        this.updateLegends({ style: this, r: r, zf: zf, viewScale: vc })
-    }
-}

package/src/style/ShapeColorSizeStyle_.js

@@ -1,108 +0,0 @@
-//@ts-check
-'use strict'
-
-import { Style } from '../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.
- *
- * @author Joseph Davies, Julien Gaffuri
- */
-export class ShapeColorSizeStyle_ extends Style {
-    /** @param {object} opts */
-    constructor(opts) {
-        super(opts)
-        opts = opts || {}
-
-        /** A function returning the view scale.
-         * @type {function(Array.<import('../Dataset.js').Cell>,number, number):object} */
-        this.viewScale = opts.viewScale //(cells,r,z) => {}
-
-        /** A function returning the color of the cell.
-         * @type {function(import('../Dataset.js').Cell,number, number,object):string} */
-        this.color = opts.color //(c,r,z,o) => {}
-
-        /** A function returning the size of a cell in geographical unit.
-         * @type {function(import('../Dataset.js').Cell,number, number,object):number} */
-        this.size = opts.size //(c,r,z,o) => {}
-
-        /** A function returning the shape of a cell.
-         * @type {function(import("../Dataset.js").Cell,number, number,object):import("../Style.js").Shape} */
-        this.shape = opts.shape //(c,r,z,o) => {}
-    }
-
-    /**
-     * Draw cells as squares, with various colors and sizes.
-     *
-     * @param {Array.<import("../Dataset.js").Cell>} cells
-     * @param {number} r
-     * @param {import("../GeoCanvas.js").GeoCanvas} cg
-     */
-    draw(cells, r, cg) {
-        //filter
-        if (this.filter) cells = cells.filter(this.filter)
-
-        //zoom factor
-        const zf = cg.getZf()
-
-        //get view scale
-        const vc = this.viewScale ? this.viewScale(cells, r, zf) : undefined
-
-        //draw with HTML canvas in geo coordinates
-        cg.setCanvasTransform()
-
-        const r2 = r * 0.5
-        for (let c of cells) {
-            //color
-            let col = this.color ? this.color(c, r, zf, vc) : "black"
-            if (!col || col === 'none') continue
-
-            //size
-            const size = this.size ? this.size(c, r, zf, vc) : r
-            if (!size) continue
-
-            //shape
-            const shape = this.shape ? this.shape(c, r, zf, vc) : 'square'
-            if (shape === 'none') continue
-
-            //get offset
-            const offset = this.offset(c, r, zf)
-
-            cg.ctx.fillStyle = col
-            if (shape === 'square') {
-                //draw square
-                const d = r * (1 - size / r) * 0.5
-                cg.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(c.x + r2 + offset.dx, c.y + r2 + offset.dy, size * 0.5, 0, 2 * Math.PI, false)
-                cg.ctx.fill()
-            } else if (shape === 'donut') {
-                //draw donut
-                const xc = c.x + r2 + offset.dx,
-                    yc = c.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 - size / r) * r2, 0, 2 * Math.PI, true)
-                cg.ctx.closePath()
-                cg.ctx.fill()
-            } else if (shape === 'diamond') {
-                const s2 = size * 0.5
-                cg.ctx.beginPath()
-                cg.ctx.moveTo(c.x + r2 - s2, c.y + r2)
-                cg.ctx.lineTo(c.x + r2, c.y + r2 + s2)
-                cg.ctx.lineTo(c.x + r2 + s2, c.y + r2)
-                cg.ctx.lineTo(c.x + r2, c.y + r2 - s2)
-                cg.ctx.fill()
-            } else {
-                throw new Error('Unexpected shape:' + shape)
-            }
-        }
-
-        //update legends
-        this.updateLegends({ style: this, r: r, zf: zf, viewScale: vc })
-    }
-}

package/src/style/SideCatStyle.js

@@ -1,172 +0,0 @@
-//@ts-check
-'use strict'
-
-import { Style } from '../Style.js'
-
-/** @typedef {{x:number,y:number,or:"v"|"h",v1:string|undefined,v2:string|undefined}} Side */
-
-/**
- * A style to show the sides of grid cells based on their different categories.
- *
- * @author Julien Gaffuri
- */
-export class SideCatStyle 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 categorical value.
-         * @type {string} */
-        this.col = opts.col
-
-        /**
-         * The dictionary (string -> color) which give the color of each category.
-         * @type {object} */
-        this.color = opts.color
-
-        /** A function returning the width of a cell side line, in geo unit
-         * @type {function(Side,number,number):number} */
-        this.width = opts.width || ((side, r, z) => r * 0.2)
-
-        /** A fill color for the cells.
-         * @type {function(import("../Dataset").Cell):string} */
-        this.fillColor = opts.fillColor
-    }
-
-    /**
-     * @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)
-
-        if (!cells || cells.length == 0) return
-
-        //zoom factor
-        const zf = cg.getZf()
-
-        /**  @type {Array.<Side>} */
-        const sides = []
-
-        //make horizontal sides
-        //sort cells by x and y
-        cells.sort((c1, c2) => (c2.x == c1.x ? c1.y - c2.y : c1.x - c2.x))
-        let c1 = cells[0]
-        let v1 = c1[this.col]
-        for (let i = 1; i < cells.length; i++) {
-            let c2 = cells[i]
-            let v2 = c2[this.col]
-
-            if (c1.y + r == c2.y && c1.x == c2.x) {
-                //cells in same column and touch along horizontal side
-                //make shared side
-                if (v1 != v2) sides.push({ x: c1.x, y: c2.y, or: 'h', v1: v1, v2: v2 })
-            } else {
-                //cells do not touch along horizontal side
-                //make two sides: top one for c1, bottom for c2
-                sides.push({ x: c1.x, y: c1.y + r, or: 'h', v1: v1, v2: undefined })
-                sides.push({ x: c2.x, y: c2.y, or: 'h', v1: undefined, v2: v2 })
-            }
-
-            c1 = c2
-            v1 = v2
-        }
-
-        //make vertical sides
-        //sort cells by y and x
-        cells.sort((c1, c2) => (c2.y == c1.y ? c1.x - c2.x : c1.y - c2.y))
-        c1 = cells[0]
-        v1 = c1[this.col]
-        for (let i = 1; i < cells.length; i++) {
-            let c2 = cells[i]
-            let v2 = c2[this.col]
-
-            if (c1.x + r == c2.x && c1.y == c2.y) {
-                //cells in same row and touch along vertical side
-                //make shared side
-                if (v1 != v2) sides.push({ x: c1.x + r, y: c1.y, or: 'v', v1: v1, v2: v2 })
-            } else {
-                //cells do not touch along vertical side
-                //make two sides: right one for c1, left for c2
-                sides.push({ x: c1.x + r, y: c1.y, or: 'v', v1: v1, v2: undefined })
-                sides.push({ x: c2.x, y: c2.y, or: 'v', v1: undefined, v2: v2 })
-            }
-
-            c1 = c2
-            v1 = v2
-        }
-
-        //
-        if (sides.length == 0) return
-
-        //draw in geo coordinates
-        cg.setCanvasTransform()
-
-        //draw cells, if fillColor specified
-        if (this.fillColor)
-            for (let c of cells) {
-                const fc = this.fillColor(c)
-                if (!fc || fc == 'none') continue
-                cg.ctx.fillStyle = fc
-                cg.ctx.fillRect(c.x, c.y, r, r)
-            }
-
-        //draw sides
-        cg.ctx.lineCap = 'butt'
-        for (let s of sides) {
-            //width
-            /** @type {number|undefined} */
-            const wG = this.width ? this.width(s, r, zf) : undefined
-            if (!wG || wG <= 0) continue
-            const w2 = wG * 0.5
-
-            //set color and width
-            cg.ctx.lineWidth = wG
-
-            //draw segment with correct orientation
-            if (s.or === 'h') {
-                //top line
-                if (s.v2) {
-                    cg.ctx.beginPath()
-                    cg.ctx.strokeStyle = this.color[s.v2]
-                    cg.ctx.moveTo(s.x, s.y + w2)
-                    cg.ctx.lineTo(s.x + r, s.y + w2)
-                    cg.ctx.stroke()
-                }
-
-                //bottom line
-                if (s.v1) {
-                    cg.ctx.beginPath()
-                    cg.ctx.strokeStyle = this.color[s.v1]
-                    cg.ctx.moveTo(s.x, s.y - w2)
-                    cg.ctx.lineTo(s.x + r, s.y - w2)
-                    cg.ctx.stroke()
-                }
-            } else {
-                //right line
-                if (s.v2) {
-                    cg.ctx.beginPath()
-                    cg.ctx.strokeStyle = this.color[s.v2]
-                    cg.ctx.moveTo(s.x + w2, s.y)
-                    cg.ctx.lineTo(s.x + w2, s.y + r)
-                    cg.ctx.stroke()
-                }
-
-                //left line
-                if (s.v1) {
-                    cg.ctx.beginPath()
-                    cg.ctx.strokeStyle = this.color[s.v1]
-                    cg.ctx.moveTo(s.x - w2, s.y)
-                    cg.ctx.lineTo(s.x - w2, s.y + r)
-                    cg.ctx.stroke()
-                }
-            }
-        }
-
-        //update legends
-        this.updateLegends({ style: this, r: r, zf: zf })
-    }
-}