gridviz 2.0.51 → 2.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "gridviz",
-    "version": "2.0.51",
+    "version": "2.1.0",
     "description": "Visualization tool for gridded statistics",
     "keywords": [
         "statistics",
@@ -52,7 +52,6 @@
         "d3-color": "^3.1.0",
         "d3-fetch": "^3.0.1",
         "d3-format": "^3.1.0",
-        "d3-geo": "^3.0.1",
         "d3-random": "^3.0.1",
         "d3-selection": "^3.0.0",
         "d3-zoom": "^3.0.0"

package/src/App.js

@@ -7,6 +7,7 @@ import { Layer } from './Layer.js'
 import { Dataset } from './Dataset.js'
 import { Tooltip } from './Tooltip.js'
 import { CSVGrid } from './dataset/CSVGrid.js'
+import { LGrid } from './dataset/LGrid.js'
 import { TiledGrid } from './dataset/TiledGrid.js'
 import { BackgroundLayer } from './BackgroundLayer.js'
 import { BackgroundLayerWMS } from './BackgroundLayerWMS.js'
@@ -448,6 +449,21 @@ export class App {
 
     //dataset creation
 
+    /**
+     * Make a local grid dataset.
+     *
+     * @param {number} resolution The dataset resolution in geographical unit.
+     * @param {Array} cells The cells.
+     * @param {object=} opts The parameters of the dataset.
+     * @returns {Dataset}
+     */
+    makeLGridDataset(resolution, cells, opts) {
+        return new Dataset([new LGrid(resolution, cells),],
+            [],
+            opts
+        )
+    }
+
     /**
      * Make a CSV grid dataset.
      *

package/src/dataset/LGrid.js

@@ -0,0 +1,54 @@
+//@ts-check
+'use strict'
+
+/** @typedef {{ dims: object, crs: string, tileSizeCell: number, originPoint: {x:number,y:number}, resolutionGeo: number, tilingBounds:import("../Dataset.js").Envelope }} GridInfo */
+
+import { DatasetComponent } from '../DatasetComponent.js'
+
+/**
+ * A dataset composed of a single CSV file (not tiled).
+ *
+ * @author Joseph Davies, Julien Gaffuri
+ */
+export class LGrid extends DatasetComponent {
+    /**
+     * @param {number} resolution The dataset resolution in geographical unit.
+     * @param {Array.<Object>} cells The cells.
+     */
+    constructor(resolution, cells) {
+        super("", resolution)
+
+        /**
+         * @private
+         * @type {Array.<import("../Dataset.js").Cell>} */
+        this.cells = cells || []
+    }
+
+    /**
+     * Request data within a geographic envelope.
+     *
+     * @param {import("../Dataset.js").Envelope|undefined} e
+     * @param {function():void} redraw
+     */
+    getData(e, redraw) { return this }
+
+    /**
+     * Fill the view cache with all cells which are within a geographical envelope.
+     *
+     * @param {import("../Dataset.js").Envelope} extGeo
+     * @returns {void}
+     */
+    updateViewCache(extGeo) {
+        //data not loaded yet
+        if (!this.cells) return
+
+        this.cellsViewCache = []
+        for (const cell of this.cells) {
+            if (+cell.x + this.resolution < extGeo.xMin) continue
+            if (+cell.x - this.resolution > extGeo.xMax) continue
+            if (+cell.y + this.resolution < extGeo.yMin) continue
+            if (+cell.y - this.resolution > extGeo.yMax) continue
+            this.cellsViewCache.push(cell)
+        }
+    }
+}

package/src/index.js

@@ -13,6 +13,7 @@ export { DatasetComponent } from './DatasetComponent.js'
 export { TiledGrid } from './dataset/TiledGrid.js'
 export { GridTile } from './dataset/GridTile.js'
 export { CSVGrid } from './dataset/CSVGrid.js'
+export { LGrid } from './dataset/LGrid.js'
 //export { GeoTIFF } from "./dataset/GeoTIFF"
 
 // export styles
@@ -56,116 +57,7 @@ export { getClass } from './utils/Utils.js'
 
 
 
-
 import { GeoCanvas } from './GeoCanvas.js'
-import { geoAzimuthalEqualArea } from 'd3-geo'
-
-/**
- * Returns label layer from Eurostat, for ETRS89-LAEA grids.
- * From Euronym data: https://github.com/eurostat/euronym
- *
- * @returns {object}
- */
-export const getEuronymeLabelLayer = function (cc = 'EUR', res = 50, opts) {
-    opts = opts || {}
-    const ex = opts.ex || 1.2
-    const fontFamily = opts.fontFamily || 'Arial'
-    const exSize = opts.exSize || 1
-    opts.style =
-        opts.style ||
-        ((lb, zf) => {
-            if (lb.rs < ex * zf) return
-            if (lb.r1 < ex * zf) return exSize + 'em ' + fontFamily
-            return exSize * 1.5 + 'em ' + fontFamily
-        })
-    //ETRS89-LAEA projection
-    opts.proj =
-        opts.proj ||
-        geoAzimuthalEqualArea()
-            .rotate([-10, -52])
-            .reflectX(false)
-            .reflectY(true)
-            .scale(6378137)
-            .translate([4321000, 3210000])
-    opts.preprocess = (lb) => {
-        //exclude countries
-        //if(opts.ccOut && lb.cc && opts.ccOut.includes(lb.cc)) return false;
-        if (opts.ccIn && lb.cc && !(opts.ccIn.indexOf(lb.cc) >= 0)) return false
-
-        //project from geo coordinates to ETRS89-LAEA
-        const p = opts.proj([lb.lon, lb.lat])
-        lb.x = p[0]
-        lb.y = p[1]
-        delete lb.lon
-        delete lb.lat
-    }
-    opts.baseURL = opts.baseURL || 'https://raw.githubusercontent.com/eurostat/euronym/main/pub/v2/UTF/'
-    opts.url = opts.baseURL + res + '/' + cc + '.csv'
-    return opts
-}
-
-/**
- * @returns {object}
- */
-export const getEurostatBoundariesLayer = function (opts) {
-    opts = opts || {}
-    const nutsYear = opts.nutsYear || '2021'
-    const crs = opts.crs || '3035'
-    const scale = opts.scale || '03M'
-    const nutsLevel = opts.nutsLevel || '3'
-    const col = opts.col || '#888'
-    const colKosovo = opts.colKosovo || '#bcbcbc'
-    const showOth = opts.showOth == undefined ? true : opts.showOth
-
-    opts.color =
-        opts.color ||
-        ((f, zf) => {
-            const p = f.properties
-            if (!showOth /*&& p.co == "F"*/ && p.eu != 'T' && p.cc != 'T' && p.efta != 'T' && p.oth === 'T')
-                return
-            if (p.id >= 100000) return colKosovo
-            if (p.co === 'T') return col
-            if (zf < 400) return col
-            else if (zf < 1000) return p.lvl >= 3 ? '' : col
-            else if (zf < 2000) return p.lvl >= 2 ? '' : col
-            else return p.lvl >= 1 ? '' : col
-        })
-
-    opts.width =
-        opts.width ||
-        ((f, zf) => {
-            const p = f.properties
-            if (p.co === 'T') return 0.5
-            if (zf < 400) return p.lvl == 3 ? 2.2 : p.lvl == 2 ? 2.2 : p.lvl == 1 ? 2.2 : 4
-            else if (zf < 1000) return p.lvl == 2 ? 1.8 : p.lvl == 1 ? 1.8 : 2.5
-            else if (zf < 2000) return p.lvl == 1 ? 1.8 : 2.5
-            else return 1.2
-        })
-
-    opts.lineDash =
-        opts.lineDash ||
-        ((f, zf) => {
-            const p = f.properties
-            if (p.co === 'T') return []
-            if (zf < 400)
-                return p.lvl == 3
-                    ? [2 * zf, 2 * zf]
-                    : p.lvl == 2
-                    ? [5 * zf, 2 * zf]
-                    : p.lvl == 1
-                    ? [5 * zf, 2 * zf]
-                    : [10 * zf, 3 * zf]
-            else if (zf < 1000)
-                return p.lvl == 2 ? [5 * zf, 2 * zf] : p.lvl == 1 ? [5 * zf, 2 * zf] : [10 * zf, 3 * zf]
-            else if (zf < 2000) return p.lvl == 1 ? [5 * zf, 2 * zf] : [10 * zf, 3 * zf]
-            else return [10 * zf, 3 * zf]
-        })
-
-    opts.baseURL = opts.baseURL || 'https://raw.githubusercontent.com/eurostat/Nuts2json/master/pub/v2/'
-    opts.url = opts.baseURL + nutsYear + '/' + crs + '/' + scale + '/nutsbn_' + nutsLevel + '.json'
-    return opts
-}
-
 export const getParameterByName = GeoCanvas.getParameterByName
 
 // set default d3 locale

package/src/style/TimeSeriesStyle.js

@@ -21,6 +21,10 @@ export class TimeSeriesStyle extends Style {
          * @type {Array.<string>} */
         this.ts = opts.ts
 
+        /** A function specifying when a value should be considered as "no data" and thus not ignored. The line will have a break at these values.
+         * @type {function(string):boolean} */
+        this.noData = opts.noData || ((v) => v === undefined || v == "" || v === null || isNaN(+v))
+
         //x
         /** in geo unit
          * @type {function(import("../Dataset.js").Cell,number,number):number} */
@@ -112,7 +116,7 @@ export class TimeSeriesStyle extends Style {
         //in geo coordinates
         cg.setCanvasTransform()
 
-        cg.ctx.lineCap = 'butt'
+        cg.ctx.lineCap = "butt"
         for (let c of cells) {
 
             //line width
@@ -185,23 +189,62 @@ export class TimeSeriesStyle extends Style {
                 continue;
             }
 
+            /*/draw line
             if (val0 == undefined || isNaN(val0)) continue
-
-            //draw line
             cg.ctx.beginPath()
             const sX = w / (nb - 1)
             for (let i = 0; i < nb; i++) {
                 const val = c[this.ts[i]]
-                if (val == undefined) break
+                if (val == undefined || isNaN(val)) break
                 if (i == 0)
                     cg.ctx.moveTo(c.x + i * sX + offX, c.y + y0 + (val - val0) * h / ampMax + offY)
                 else
                     cg.ctx.lineTo(c.x + i * sX + offX, c.y + y0 + (val - val0) * h / ampMax + offY)
             }
+            cg.ctx.stroke()*/
+
+
+            //draw line, segment by segment
+            const sX = w / (nb - 1)
+
+            //handle first point
+            let v0 = c[this.ts[0]]
+            if (!this.noData(v0)) {
+                cg.ctx.beginPath()
+                cg.ctx.moveTo(c.x + offX, c.y + y0 + (v0 - val0) * h / ampMax + offY)
+            }
+            //console.log(v0, isNaN(v0))
+
+            let v1
+            for (let i = 1; i < nb; i++) {
+                v1 = c[this.ts[i]]
 
-            cg.ctx.stroke()
+                //draw segment from v0 to v1
+
+                //both points 'no data'
+                if (this.noData(v0) && this.noData(v1)) {
+
+                    //second point 'no data'
+                } else if (!this.noData(v0) && this.noData(v1)) {
+                    cg.ctx.stroke()
+
+                    //first point 'no data'
+                } else if (this.noData(v0) && !this.noData(v1)) {
+                    cg.ctx.beginPath()
+                    cg.ctx.moveTo(c.x + i * sX + offX, c.y + y0 + (v1 - val0) * h / ampMax + offY)
+
+                    //both points have data: trace line
+                } else {
+                    cg.ctx.lineTo(c.x + i * sX + offX, c.y + y0 + (v1 - val0) * h / ampMax + offY)
+                    //if it is the last point, stroke
+                    if (i == nb - 1) cg.ctx.stroke()
+                }
+                v0 = v1
+            }
 
         }
 
     }
+
 }
+