gridviz 2.1.17 → 3.0.0

package/src/Dataset.js

@@ -1,76 +0,0 @@
-//@ts-check
-'use strict'
-
-/**
- * A grid cell.
- * @typedef {{x: number, y: number}} Cell */
-/**
- * An envelope.
- * @typedef { {xMin: number, xMax: number, yMin: number, yMax: number} } Envelope */
-
-/**
- * A multi resolution dataset of grid cells.
- * It consists of different {@link DatasetComponent}s for each resolution.
- *
- * @abstract
- *
- * @author Joseph Davies, Julien Gaffuri
- */
-export class Dataset {
-    /**
-     * @param {Array.<import("./DatasetComponent").DatasetComponent>} datasetComponents The dataset components
-     * @param {Array.<number>} resolutions The resolutions of the dataset components, in CRS geographical unit
-     * @param { {preprocess?:function(Cell):boolean} } opts Options. preprocess: A function to apply on each dataset cell to prepare its values. Can be used also to select cells to keep.
-     */
-    constructor(datasetComponents, resolutions, opts = {}) {
-        opts = opts || {}
-
-        /** The dataset components.
-         * @type {Array.<import("./DatasetComponent").DatasetComponent>} */
-        this.datasetComponents = datasetComponents
-
-        /** The resolutions of the dataset components, in CRS geographical unit.
-         * @type {Array.<number>} */
-        this.resolutions = resolutions
-
-        //there must be as many dataset components as resolutions
-        if (this.datasetComponents.length > 1 && this.datasetComponents.length != this.resolutions.length)
-            throw new Error(
-                'Uncompatible number of datasets and resolutions: ' +
-                    this.datasetComponents.length +
-                    ' ' +
-                    this.resolutions.length
-            )
-
-        //set dataset preprocesses if specified
-        if (opts.preprocess) this.setPrepocesses(opts.preprocess)
-    }
-
-    /**
-     * Set a preprocess function for all dataset components.
-     * This is a function applied on each cell after it has been loaded.
-     *
-     * @param {function(Cell):boolean} preprocess
-     * @returns {this}
-     */
-    setPrepocesses(preprocess) {
-        for (let ds of this.datasetComponents) ds.preprocess = preprocess
-        return this
-    }
-
-    /**
-     * A function to ease the creation of datasets from their components.
-     *
-     * @param {Array.<number>} resolutions The resolutions of the dataset components, in CRS geographical unit
-     * @param {function(number):import("./DatasetComponent").DatasetComponent} resToDatasetComponent Function returning a dataset component from a resolution
-     * @param { {preprocess?:function(Cell):boolean} } opts Options. preprocess: A function to apply on each dataset cell to prepare its values
-     * @returns {Dataset}
-     */
-    static make(resolutions, resToDatasetComponent, opts) {
-        //make dataset components
-        const dsc = []
-        for (const res of resolutions) dsc.push(resToDatasetComponent(res))
-        //make dataset
-        return new Dataset(dsc, resolutions, opts)
-    }
-}

package/src/Layer.js

@@ -1,103 +0,0 @@
-//@ts-check
-'use strict'
-
-/**
- * A layer, which specifies a dataset to be shown with specified styles.
- *
- * @author Joseph Davies, Julien Gaffuri
- */
-export class Layer {
-    /**
-     * @param {import("./Dataset").Dataset} dataset The multi resolution dataset to show.
-     * @param {Array.<import("./Style").Style>} styles The styles, ordered in drawing order.
-     * @param {{visible?:boolean,alpha?:number,blendOperation?:GlobalCompositeOperation,minZoom?:number,maxZoom?:number,pixNb?:number,cellInfoHTML?:function(import("./Dataset").Cell):string}} opts
-     *      minZoom: The minimum zoom level when to show the layer. maxZoom: The maximum zoom level when to show the layer
-     */
-    constructor(dataset, styles, opts = {}) {
-        opts = opts || {}
-
-        /** @type {import("./Dataset").Dataset} */
-        this.dataset = dataset
-        /** @type {Array.<import("./Style").Style>} */
-        this.styles = styles
-
-        /** An attribute to specify if a layer should be drawn or not
-         * @type {boolean} */
-        this.visible = opts.visible === false ? false : true
-
-        /** A function returning the alpha (transparency/opacity), between 0.0 (fully transparent) and 1.0 (fully opaque).
-         *  The function parameter is the zoom factor.
-         * (see CanvasRenderingContext2D: globalAlpha property)
-         * @type {function(number):number|undefined} */
-        this.alpha = opts.alpha
-
-        /** A function returning the blend operation. The function parameter is the zoom factor.
-         * (see CanvasRenderingContext2D: globalCompositeOperation property)
-         * @type {GlobalCompositeOperation} */
-        this.blendOperation = opts.blendOperation || (zf => "source-over")
-
-        /** The minimum zoom factor: Below this level, the layer is not shown.
-         * @type {number} */
-        this.minZoom = opts.minZoom || 0
-
-        /** The maximum zoom factor: Above this level, the layer is not shown.
-         * @type {number} */
-        this.maxZoom = opts.maxZoom || Infinity
-
-        //ensure acceptable values for the zoom limits.
-        if (this.minZoom >= this.maxZoom)
-            throw new Error('Unexpected zoom limits for layer. Zoom min should be smaller than zoom max.')
-
-        /** Unit: number of pixels
-         * @type {number} */
-        this.pixNb = opts.pixNb || 3
-
-        /**
-         * The function returning cell information as HTML.
-         * This is typically used for tooltip information.
-         * @type {function(import("./Dataset").Cell, number):string} */
-        this.cellInfoHTML = opts.cellInfoHTML || Layer.defaultCellInfoHTML
-    }
-
-    /**
-     * Return the relevant dataset component for a specified zoom factor.
-     *
-     * @param {number} zf
-     * @returns {import("./DatasetComponent").DatasetComponent|undefined}
-     * */
-    getDatasetComponent(zf) {
-        if (zf < this.minZoom || zf > this.maxZoom) return
-
-        //special case whith single component dataset
-        if (this.dataset.datasetComponents.length == 1) return this.dataset.datasetComponents[0]
-
-        const rs = this.dataset.resolutions
-        let i = 0
-        let z = rs[i] / this.pixNb
-        while (z < zf && i < rs.length) {
-            i++
-            z = rs[i] / this.pixNb
-        }
-        //if (i == 0) return this.dataset.datasetComponents[0];
-        //return this.dataset.datasetComponents[i - 1];
-        if (i == rs.length) return this.dataset.datasetComponents[rs.length - 1]
-        return this.dataset.datasetComponents[i]
-    }
-
-    /**
-     * The default function returning cell information as HTML.
-     * This is typically used for tooltip information.
-     *
-     * @param {import("./Dataset").Cell} cell
-     * @returns {string}
-     */
-    static defaultCellInfoHTML(cell) {
-        const buf = []
-        for (const key of Object.keys(cell)) {
-            if (key === 'x') continue
-            if (key === 'y') continue
-            buf.push('<b>', key, '</b>', ' : ', cell[key], '<br>')
-        }
-        return buf.join('')
-    }
-}

package/src/Style.js

@@ -1,131 +0,0 @@
-//@ts-check
-'use strict'
-
-/**
- * Statistics of a set of values
- * @typedef {{min:number,max:number}} Stat */
-
-/** @typedef {"square"|"circle"|"diamond"|"donut"|"none"} Shape */
-
-/**
- * A style, to show a grid dataset.
- *
- * @author Joseph Davies, Julien Gaffuri
- */
-export class Style {
-    /**
-     * @abstract
-     * @param {{filter?:function(import('./Dataset').Cell):boolean,offset?:function(import('./Dataset').Cell,number,number):{dx:number,dy:number},visible?:boolean,alpha?:function(number):number,blendOperation?:function(number):GlobalCompositeOperation,minZoom?:number,maxZoom?:number,drawFun?:function}} opts
-     */
-    constructor(opts) {
-        opts = opts || {}
-
-        /** A filter function to apply to the cell list, to filter out some cells not to be drawn (such as for example the cells with value=0).
-         * @protected
-         * @type {function(import('./Dataset').Cell):boolean} */
-        this.filter = opts.filter || (() => true)
-
-        /** An offset. This is to alter the position of all symbols in a given direction. In geographical unit.
-         * @protected
-         * @type {function(import('./Dataset').Cell,number,number):{dx:number,dy:number}} */
-        this.offset = opts.offset || ((c, r, zf) => ({ dx: 0, dy: 0 }))
-
-        /** An attribute to specify if a style should be drawn or not
-         * @type {boolean} */
-        this.visible = opts.visible === false ? false : true
-
-        /** A function returning the alpha (transparency/opacity), between 0.0 (fully transparent) and 1.0 (fully opaque).
-         *  The function parameter is the zoom factor.
-         * (see CanvasRenderingContext2D: globalAlpha property)
-         * @type {function(number):number|undefined} */
-        this.alpha = opts.alpha
-
-        /** A function returning the blend operation. The function parameter is the zoom factor.
-         * (see CanvasRenderingContext2D: globalCompositeOperation property)
-         * @type {function(number):GlobalCompositeOperation} */
-        this.blendOperation = opts.blendOperation || (zf => "source-over")
-
-        /** The minimum zoom factor: Below this level, the layer is not shown.
-         * @type {number}
-         * */
-        this.minZoom = opts.minZoom || 0
-
-        /** The maximum zoom factor: Above this level, the layer is not shown.
-         * @type {number}
-         * */
-        this.maxZoom = opts.maxZoom || Infinity
-
-        /** A draw function for the style.
-         * @type {function} */
-        this.drawFun = opts.drawFun
-
-        //ensure acceptable values for the zoom limits.
-        if (this.minZoom >= this.maxZoom)
-            throw new Error('Unexpected zoom limits for layer. Zoom min should be smaller than zoom max.')
-
-        /**
-         * @public
-         * @type {Array.<import("./Legend").Legend>} */
-        this.legends = []
-    }
-
-    /**
-     * Draw cells.
-     *
-     * @param {Array.<import('./Dataset').Cell>} cells The cells to draw.
-     * @param {number} resolution Their resolution (in geographic unit)
-     * @param {import("./GeoCanvas").GeoCanvas} cg The canvas where to draw them.
-     * @abstract
-     */
-    draw(cells, resolution, cg) {
-        if (this.drawFun) this.drawFun(cells, resolution, cg)
-        else throw new Error('Method draw not implemented.')
-    }
-
-    //getters and setters
-
-    /** @returns {function(import('./Dataset').Cell,number,number):{dx:number,dy:number}} */
-    getOffset() {
-        return this.offset
-    }
-    /** @param {function(import('./Dataset').Cell,number,number):{dx:number,dy:number}} val @returns {this} */
-    setOffset(val) {
-        this.offset = val
-        return this
-    }
-
-    /** Hide all legend elements of the style, if any
-     * @param {object} opts
-     * @returns {this} */
-    updateLegends(opts) {
-        for (const lg of this.legends) lg.update(opts)
-        return this
-    }
-
-    /**
-     * Compute some statistics on a value of some cells.
-     * This is used to define how to draw specifically the cells within the view.
-     * TODO: compute median ?
-     *
-     * @param {Array.<import('./Dataset').Cell>} cells
-     * @param {function(import('./Dataset').Cell):number} valFun
-     * @param {boolean} ignoreZeros
-     * @returns {Stat | undefined}
-     */
-    static getStatistics(cells, valFun, ignoreZeros) {
-        if (!cells || cells.length == 0) return undefined
-        let min = Infinity
-        let max = -Infinity
-        //let sum = 0
-        //let nb = 0
-        for (const cell of cells) {
-            const v = +valFun(cell)
-            if (ignoreZeros && !v) continue
-            if (v < min) min = v
-            if (v > max) max = v
-            //sum += v
-            //nb++
-        }
-        return { min: min, max: max }
-    }
-}

package/src/dataset/GridTile.js

@@ -1,41 +0,0 @@
-//@ts-check
-'use strict'
-
-/**
- * A grid tile.
- *
- * @author Joseph Davies, Julien Gaffuri
- */
-export class GridTile {
-    /**
-     * @param {Array.<import("../Dataset").Cell>} cells The tile cells.
-     * @param {number} xT The X position of the tile.
-     * @param {number} yT The Y position of the tile.
-     * @param {import("./CSVGrid").GridInfo} gridInfo The grid info object.
-     */
-    constructor(cells, xT, yT, gridInfo) {
-        /** @type {Array.<import("../Dataset").Cell>} */
-        this.cells = cells
-        /** @type {number} */
-        this.x = xT
-        /** @type {number} */
-        this.y = yT
-
-        const r = gridInfo.resolutionGeo
-        const s = gridInfo.tileSizeCell
-
-        /** @type {import("../Dataset").Envelope} */
-        this.extGeo = {
-            xMin: gridInfo.originPoint.x + r * s * this.x,
-            xMax: gridInfo.originPoint.x + r * s * (this.x + 1),
-            yMin: gridInfo.originPoint.y + r * s * this.y,
-            yMax: gridInfo.originPoint.y + r * s * (this.y + 1),
-        }
-
-        //convert cell coordinates into geographical coordinates
-        for (let cell of this.cells) {
-            cell.x = this.extGeo.xMin + cell.x * r
-            cell.y = this.extGeo.yMin + cell.y * r
-        }
-    }
-}

package/src/legend/SegmentOrientationLegend.js

@@ -1,87 +0,0 @@
-//@ts-check
-'use strict'
-
-import { Legend } from '../Legend.js'
-
-/**
- * A legend element for segment orientation.
- *
- * @author Joseph Davies, Julien Gaffuri
- */
-export class SegmentOrientationLegend extends Legend {
-    /** @param {Object} opts */
-    constructor(opts) {
-        super(opts)
-        opts = opts || {}
-
-        //title
-        this.title = opts.title
-        this.titleFontSize = opts.titleFontSize || '0.8em'
-        this.titleFontWeight = opts.titleFontWeight || 'bold'
-
-        //exageration
-        this.exaggerationFactor = opts.exaggerationFactor || 0.5
-
-        //color
-        this.color = opts.color || 'gray'
-        //orientation
-        this.orientation = opts.orientation || 0
-        //width
-        this.widthPix = opts.widthPix || 3
-
-        //label
-        this.labelFontSize = opts.labelFontSize || '0.8em'
-        this.labelUnitText = opts.labelUnitText || ''
-    }
-
-    /**
-     * @param {{ style: import("../style/SegmentStyle").SegmentStyle, r: number, zf: number, sColor: import("../Style").Stat, sLength: import("../Style").Stat, sWidth: import("../Style").Stat }} opts
-     */
-    update(opts) {
-        //could happen when data is still loading
-        if (!opts.sWidth) return
-
-        //clear
-        this.div.selectAll('*').remove()
-
-        const d = this.div.append('div')
-
-        //title
-        if (this.title) {
-            d.append('div')
-                .attr('class', 'title')
-                .style('font-size', this.titleFontSize)
-                .style('font-weight', this.titleFontWeight)
-                .text(this.title)
-        }
-
-        //compute segment width and length, in pix
-        const sWidth = this.widthPix
-        const sLength = (1 * opts.r) / opts.zf
-
-        //draw SVG segment
-        const svgS = Math.max(sLength, sWidth)
-        const svg = d.append('svg').attr('width', svgS).attr('height', svgS).style('', 'inline-block')
-
-        const cos = Math.cos((-this.orientation * Math.PI) / 180)
-        const sin = Math.sin((-this.orientation * Math.PI) / 180)
-        const dc = svgS * 0.5,
-            l2 = sLength * 0.5
-        svg.append('line')
-            .attr('x1', dc - cos * l2)
-            .attr('y1', dc - sin * l2)
-            .attr('x2', dc + cos * l2)
-            .attr('y2', dc + sin * l2)
-            .style('stroke', this.color)
-            .style('stroke-width', sWidth)
-
-        //text label
-        d.append('div')
-            //show on right of svg
-            .style('display', 'inline')
-            .style('padding-left', '5px')
-            .style('font-size', this.labelFontSize)
-            //.style("font-weight", "bold")
-            .text(this.labelUnitText)
-    }
-}

package/src/legend/SegmentWidthLegend.js

@@ -1,101 +0,0 @@
-//@ts-check
-'use strict'
-
-import { Legend } from '../Legend.js'
-import { format } from 'd3-format'
-
-/**
- * A legend element for segment width.
- *
- * @author Joseph Davies, Julien Gaffuri
- */
-export class SegmentWidthLegend extends Legend {
-    /** @param {Object} opts */
-    constructor(opts) {
-        super(opts)
-        opts = opts || {}
-
-        //title
-        this.title = opts.title
-        this.titleFontSize = opts.titleFontSize || '0.8em'
-        this.titleFontWeight = opts.titleFontWeight || 'bold'
-
-        //exageration
-        //if set to 1, the segment width in the legend will be the one of the maximum width on the map
-        this.exaggerationFactor = opts.exaggerationFactor || 0.5
-
-        //color of the segment in the legend
-        this.color = opts.color || 'gray'
-        //orientation of the segment in the legend
-        this.orientation = opts.orientation || 0
-
-        //label
-        this.labelFontSize = opts.labelFontSize || '0.8em'
-        this.labelUnitText = opts.labelUnitText || ''
-
-        //segment length in geo unit - a function of the resolution r and zoom level zf
-        this.lengthFun = opts.lengthExaggerationFactor || ((r, zf) => r)
-    }
-
-    /**
-     * @param {{ style: import("../style/SegmentStyle").SegmentStyle, r: number, zf: number, sColor: import("../Style").Stat, sLength: import("../Style").Stat, sWidth: import("../Style").Stat }} opts
-     */
-    update(opts) {
-        //could happen when data is still loading
-        if (!opts.sWidth) return
-
-        //clear
-        this.div.selectAll('*').remove()
-
-        const d = this.div.append('div')
-
-        //title
-        if (this.title) {
-            d.append('div')
-                .attr('class', 'title')
-                .style('font-size', this.titleFontSize)
-                .style('font-weight', this.titleFontWeight)
-                .text(this.title)
-        }
-
-        //get segment max value
-        const value_ = opts.sWidth.max * this.exaggerationFactor
-        //make 'nice' value (power of ten, or multiple)
-        let pow10 = Math.log10(value_)
-        pow10 = Math.floor(pow10)
-        let value = Math.pow(10, pow10)
-        if (value * 8 <= value_) value *= 8
-        else if (value * 6 <= value_) value *= 6
-        else if (value * 5 <= value_) value *= 5
-        else if (value * 4 <= value_) value *= 4
-        else if (value * 2.5 <= value_) value *= 2.5
-        else if (value * 2 <= value_) value *= 2
-        else if (value * 1.5 <= value_) value *= 1.5
-
-        //compute segment width and length, in pix
-        const sWidth = opts.widthFun(value, opts.r, opts.sWidth, opts.zf) / opts.zf
-        const sLength = this.lengthFun(opts.r, opts.zf) / opts.zf
-
-        //TODO use orientation
-
-        const svg = d.append('svg').attr('width', sLength).attr('height', sWidth).style('', 'inline-block')
-
-        //<line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" />
-        svg.append('line')
-            .attr('x1', 0)
-            .attr('y1', sWidth / 2)
-            .attr('x2', sLength)
-            .attr('y2', sWidth / 2)
-            .style('stroke', this.color)
-            .style('stroke-width', sWidth)
-
-        const valueT = format(',.2r')(value)
-        d.append('div')
-            //show on right of graphic
-            .style('display', 'inline')
-            .style('padding-left', '5px')
-            .style('font-size', this.labelFontSize)
-            //.style("font-weight", "bold")
-            .text(valueT + (this.labelUnitText ? ' ' : '') + this.labelUnitText)
-    }
-}