gridviz 3.0.1 → 3.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "gridviz",
-    "version": "3.0.1",
+    "version": "3.0.3",
     "description": "Visualization tool for gridded statistics",
     "keywords": [
         "statistics",
@@ -40,7 +40,7 @@
         "start": "export NODE_OPTIONS=--openssl-legacy-provider && webpack --config webpack.config.dev.cjs",
         "start-dev": "webpack --config webpack.config.dev.cjs",
         "server": "webpack serve -c webpack.config.dev.cjs",
-        "doc": "./node_modules/.bin/jsdoc src/ src/dataset src/legend src/style -d docs/jsdoc",
+        "doc": "./node_modules/.bin/jsdoc -c docs/jsdoc/jsdoc.conf.json",
         "bp": "webpack --config webpack.config.prod.cjs",
         "test": "jest"
     },
@@ -55,7 +55,8 @@
         "d3-random": "^3.0.1",
         "d3-scale": "^4.0.2",
         "d3-selection": "^3.0.0",
-        "d3-zoom": "^3.0.0"
+        "d3-zoom": "^3.0.0",
+        "jsdoc": "^4.0.2"
     },
     "devDependencies": {
         "@babel/core": "^7.9.0",

package/src/button/Button.js

@@ -3,6 +3,7 @@ import { select } from 'd3-selection'
 /**
  * Parent class for button elements used to interact with the gridviz viewer.
  *
+ * @module button
  * @author Joseph Davies, Julien Gaffuri
  */
 export class Button {

package/src/button/FullscreenButton.js

@@ -3,6 +3,7 @@ import { Button } from './Button.js'
 /**
  * Button for toggling fullscreen mode
  *
+ * @module button
  * @author Joseph Davies, Julien Gaffuri
  */
 export class FullscreenButton extends Button {

package/src/button/ZoomButtons.js

@@ -3,6 +3,7 @@ import { Button } from './Button.js'
 /**
  * Button for toggling fullscreen mode
  *
+ * @module button
  * @author Joseph Davies, Julien Gaffuri
  */
 export class ZoomButtons extends Button {

package/src/core/Dataset.js

@@ -9,6 +9,7 @@
  * A dataset component, of grid cells.
  * @abstract
  *
+ * @module core
  * @author Joseph Davies, Julien Gaffuri
  */
 export class Dataset {

package/src/core/Drawable.js

@@ -5,6 +5,7 @@
  * This is an abstract class used to group elements shared between Layer and Style classes.
  * 
  * @abstract
+ * @module core
  * @author Joseph Davies, Julien Gaffuri
  */
 export class Drawable {

package/src/core/GeoCanvas.js

@@ -13,6 +13,7 @@ import { zoom as d3zoom, zoomIdentity } from 'd3-zoom'
 /**
  * A HTML canvas for geo data display, enhanced with zoom and pan capabilities.
  *
+ * @module core
  * @author Joseph Davies, Julien Gaffuri
  */
 export class GeoCanvas {

package/src/core/Layer.js

@@ -4,6 +4,7 @@
 import { Drawable } from "./Drawable.js"
 
 /**
+ * @module core
  * @abstract
  * @author Joseph Davies, Julien Gaffuri
  */

package/src/core/Legend.js

@@ -6,6 +6,7 @@ import { select } from 'd3-selection'
 /**
  * A legend container.
  *
+ * @module core
  * @author Joseph Davies, Julien Gaffuri
  */
 export class Legend {

package/src/core/Map.js

@@ -13,6 +13,7 @@ import { select } from 'd3-selection'
 /**
  * A gridviz application.
  *
+ * @module core
  * @author Joseph Davies, Julien Gaffuri
  */
 export class Map {

package/src/core/MultiResolutionDataset.js

@@ -7,6 +7,7 @@
  *
  * @abstract
  *
+ * @module core
  * @author Joseph Davies, Julien Gaffuri
  */
 export class MultiResolutionDataset {

package/src/core/Style.js

@@ -3,7 +3,7 @@
 
 import { Drawable } from "./Drawable.js"
 
-/** @typedef {"square"|"circle"|"diamond"|"donut"|"none"} Shape */
+/** @typedef {"square"|"circle"|"diamond"|"donut"|"triangle_up"|"triangle_down"|"triangle_left"|"triangle_right"|"none"} Shape */
 
 /**
  * viewScale type
@@ -13,6 +13,7 @@ import { Drawable } from "./Drawable.js"
 /**
  * A style, to show a grid dataset.
  *
+ * @module core
  * @author Joseph Davies, Julien Gaffuri
  */
 export class Style extends Drawable {
@@ -73,7 +74,7 @@ export class Style extends Drawable {
         return this
     }
 
-    /** Hide all legend elements of the style, if any
+    /** Update legends of the style, if any
      * @param {object} opts
      * @returns {this} */
     updateLegends(opts) {
@@ -81,4 +82,12 @@ export class Style extends Drawable {
         return this
     }
 
+    /**
+     * @param {Array.<import("./Legend").Legend>} legends
+     * @returns {this} */
+    addLegends(legends) {
+        for (let legend of legends)
+            this.legends.push(legend)
+        return this
+    }
 }

package/src/core/Tooltip.js

@@ -7,6 +7,7 @@ import { select } from 'd3-selection'
 /**
  * A generic class to make a tooltip.
  * It is a div element, which can be moved under the mouse pointer and filled with some information in html.
+ * @module core
  */
 export class Tooltip {
     /**

package/src/dataset/COGeo.js

@@ -8,6 +8,7 @@ import { Dataset } from '../core/Dataset.js'
  * A dataset composed of a COGeo file.
  * @see https://www.cogeo.org/
  *
+ * @module dataset
  * @author Joseph Davies, Julien Gaffuri
  */
 export class COGeo extends Dataset {

package/src/dataset/CSVGrid.js

@@ -9,6 +9,7 @@ import { Dataset } from '../core/Dataset.js'
 /**
  * A dataset composed of a single CSV file (not tiled).
  *
+ * @module dataset
  * @author Joseph Davies, Julien Gaffuri
  */
 export class CSVGrid extends Dataset {

package/src/dataset/GeoTIFF.js

@@ -8,6 +8,7 @@ import { Dataset } from '../core/Dataset.js'
  * @todo
  * A dataset composed of a single GeoTiff file.
  *
+ * @module dataset
  * @author Joseph Davies, Julien Gaffuri
  */
 export class GeoTIFF extends Dataset {

package/src/dataset/JSGrid.js

@@ -6,6 +6,7 @@ import { Dataset } from '../core/Dataset.js'
 /**
  * A dataset composed of cells defined in javascript, or loaded outside of gridviz map.
  *
+ * @module dataset
  * @author Joseph Davies, Julien Gaffuri
  */
 export class JSGrid extends Dataset {

package/src/dataset/TiledGrid.js

@@ -13,6 +13,7 @@ import { json, csv } from 'd3-fetch'
 /**
  * A tiled dataset, composed of CSV tiles.
  *
+ * @module dataset
  * @author Joseph Davies, Julien Gaffuri
  */
 export class TiledGrid extends Dataset {

package/src/index.js

@@ -25,14 +25,15 @@ export { SideStyle } from './style/SideStyle.js'
 //export { ContourStyle } from './style/ContourStyle.js'
 export { SideCategoryStyle } from './style/SideCategoryStyle.js'
 export { DotDensityStyle } from './style/DotDensityStyle.js'
-//export { TanakaStyle } from './style/TanakaStyle.js'
-//export { LegoStyle } from './style/LegoStyle.js'
+export { TanakaStyle } from './style/TanakaStyle.js'
+export { LegoStyle } from './style/LegoStyle.js'
 export { SquareColorWebGLStyle } from './style/SquareColorWebGLStyle.js'
 export { SquareColorCategoryWebGLStyle } from './style/SquareColorCategoryWebGLStyle.js'
 export { MosaicStyle } from './style/MosaicStyle.js'
 export { NinjaStarStyle } from './style/NinjaStarStyle.js'
 export { TimeSeriesStyle } from './style/TimeSeriesStyle.js'
 export { IsoFenceStyle } from './style/IsoFenceStyle.js'
+export { ImageStyle } from './style/ImageStyle.js'
 
 // export additional layers
 export { GridLayer } from './layer/GridLayer.js'
@@ -47,11 +48,14 @@ export { ColorDiscreteLegend } from './legend/ColorDiscreteLegend.js'
 export { ColorCategoryLegend } from './legend/ColorCategoryLegend.js'
 export { SizeLegend, sizeLegend, sizeLegendViewScale, sizeDiscreteLegend, sizeDiscreteViewScaleLegend } from './legend/SizeLegend.js'
 export { OrientationLegend, orientationLegend } from './legend/OrientationLegend.js'
+export { TrivariateLegend } from './legend/TrivariateLegend.js'
 
 // export { goToStraight, zoomTo } from "./utils/zoomUtils"
 export * from './utils/stretching.js'
 export * from './utils/scale.js'
-export { nice } from './utils/utils.js'
+export * from './utils/trivariate.js'
+export * from './utils/chernoff.js'
+export { nice, loadImage } from './utils/utils.js'
 
 import { GeoCanvas } from './core/GeoCanvas.js'
 export const getParameterByName = GeoCanvas.getParameterByName

package/src/layer/BackgroundLayer.js

@@ -9,6 +9,7 @@ import { Layer } from '../core/Layer.js'
  * See https://wiki.openstreetmap.org/wiki/Slippy_map_tilenames
  * https://www.maptiler.com/google-maps-coordinates-tile-bounds-projection/#6/27.88/44.48
  * 
+ * @module layer
  * @author Julien Gaffuri
  */
 export class BackgroundLayer extends Layer {

package/src/layer/BackgroundLayerWMS.js

@@ -7,6 +7,7 @@ import { Layer } from '../core/Layer.js'
  *
  * A map WMS background layer.
  * 
+ * @module layer
  * @author Julien Gaffuri
  */
 export class BackgroundLayerWMS extends Layer {

package/src/layer/GeoJSONLayer.js

@@ -5,6 +5,7 @@ import { Layer } from '../core/Layer.js'
 import { json } from 'd3-fetch'
 
 /**
+ * @module layer
  * @author Joseph Davies, Julien Gaffuri
  */
 export class GeoJSONLayer extends Layer {

package/src/layer/GridLayer.js

@@ -6,6 +6,7 @@ import { Layer } from '../core/Layer.js'
 /**
  * A layer, which specifies a dataset to be shown with specified styles.
  *
+ * @module layer
  * @author Joseph Davies, Julien Gaffuri
  */
 export class GridLayer extends Layer {

package/src/layer/LabelLayer.js

@@ -13,6 +13,7 @@ import { csv } from 'd3-fetch'
  * If the label data is not in the expected format or in the same CRS as the grid, it can be corrected with the "preprocess" function.
  * The selection of the label, their style (font, weight, etc.) and color can be specified depending on their importance and the zoom level.
  *
+ * @module layer
  * @author Joseph Davies, Julien Gaffuri
  */
 export class LabelLayer extends Layer {

package/src/legend/ColorCategoryLegend.js

@@ -6,6 +6,7 @@ import { Legend } from '../core/Legend.js'
 /**
  * A legend element for color categrories.
  *
+ * @module legend
  * @author Joseph Davies, Julien Gaffuri
  */
 export class ColorCategoryLegend extends Legend {

package/src/legend/ColorDiscreteLegend.js

@@ -7,6 +7,7 @@ import { Legend } from '../core/Legend.js'
  * A legend element for discrete color style.
  * Inspiration: https://observablehq.com/@d3/color-legend
  *
+ * @module legend
  * @author Julien Gaffuri
  */
 export class ColorDiscreteLegend extends Legend {
@@ -43,6 +44,7 @@ export class ColorDiscreteLegend extends Legend {
         //get colors and breaks
         const colors = this.colors(opts.viewScale)
         const breaks = this.breaks(opts.viewScale)
+        if (!breaks) return
 
         //classes
         const nb = colors.length

package/src/legend/ColorLegend.js

@@ -7,6 +7,7 @@ import { Legend } from '../core/Legend.js'
  * A legend element for continuous color style.
  * Inspiration: https://observablehq.com/@d3/color-legend
  *
+ * @module legend
  * @author Joseph Davies, Julien Gaffuri
  */
 export class ColorLegend extends Legend {

package/src/legend/OrientationLegend.js

@@ -6,6 +6,7 @@ import { Legend } from '../core/Legend.js'
 /**
  * A legend element for segment orientation.
  *
+ * @module legend
  * @author Joseph Davies, Julien Gaffuri
  */
 export class OrientationLegend extends Legend {

package/src/legend/SizeLegend.js

@@ -8,6 +8,7 @@ import { max } from 'd3-array'
 /**
  * A legend element for proportional symbols.
  *
+ * @module legend
  * @author Joseph Davies, Julien Gaffuri
  */
 export class SizeLegend extends Legend {
@@ -198,10 +199,11 @@ export function sizeDiscreteViewScaleLegend(classNumber, opts = {}) {
     const f = opts.labelFormat || (x => x)
     const labelText = opts.labelText || defaultLabelText(f)
     const legends = []
+    const viewScaleFun = opts.viewScaleFun || (t => t) //TODO do it differently? At sizelegend level !
     for (let i = classNumber - 1; i >= 0; i--) {
         opts.title = i == classNumber - 1 ? opts.title : undefined
-        opts.size = (viewScale) => viewScale.values[i]
-        opts.label = (viewScale) => labelText(viewScale.breaks[i - 1], viewScale.breaks[i])
+        opts.size = (viewScale) => viewScaleFun(viewScale).values[i]
+        opts.label = (viewScale) => labelText(viewScaleFun(viewScale).breaks[i - 1], viewScaleFun(viewScale).breaks[i])
         legends.push(new SizeLegend(opts))
     }
     return legends

package/src/legend/TrivariateLegend.js

@@ -0,0 +1,210 @@
+//@ts-check
+'use strict'
+
+import { select } from 'd3-selection'
+import { Legend } from '../core/Legend.js'
+
+/**
+ *
+ * @module legend
+ * @author Julien Gaffuri
+ */
+export class TrivariateLegend extends Legend {
+    /** @param {Object} opts */
+    constructor(opts) {
+        super(opts)
+        opts = opts || {}
+
+        //classifier
+        this.classifier = opts.classifier
+
+        this.width = opts.width || 150
+        this.selectionColor = this.selectionColor || "red"
+        this.tooltip = opts.tooltip
+        this.texts = opts.texts
+
+        this.leftText = opts.leftText || "Category 0"
+        this.topText = opts.topText || "Category 1"
+        this.rightText = opts.rightText || "Category 2"
+
+        this.centerCoefficient = opts.centerCoefficient || this.classifier.centerCoefficient
+    }
+
+    /**
+     * @param {{} } opts
+     */
+    update(opts) {
+
+        //clear
+        this.div.selectAll('*').remove()
+
+        //title
+        this.makeTitle()
+
+        const sqrt3over2 = 0.866025
+        const w = this.width, h = w * sqrt3over2
+        const classifier = this.classifier
+        const selectionColor = this.selectionColor
+        const selectionStrokeWidth = 0
+        const tt = this.tooltip
+        const texts = this.texts || {}
+
+        const padding = 2
+        const fontSize = 12
+
+        //make svg element
+        const svg = this.div
+            .append('svg')
+            .attr('width', w + selectionStrokeWidth)
+            .attr('height', h + 4 * padding + 2 * fontSize)
+
+        //top label
+        svg.append("text").attr("x", w / 2).attr("y", padding + fontSize).text(this.topText).attr("font-size", fontSize)
+            .attr("text-anchor", "middle")
+        //left label
+        svg.append("text").attr("x", 0).attr("y", 3 * padding + 2 * fontSize + h).text(this.leftText).attr("font-size", fontSize)
+            .attr("text-anchor", "start")
+        //right label
+        svg.append("text").attr("x", w).attr("y", 3 * padding + 2 * fontSize + h).text(this.rightText).attr("font-size", fontSize)
+            .attr("text-anchor", "end")
+
+
+
+        //triangle group
+        const g = svg.append("g").attr("transform", "translate(" + (selectionStrokeWidth / 2) + " " + (selectionStrokeWidth / 2 + (2 * padding + fontSize)) + ")")
+
+        //common function for triangle patches
+        const setAttributes = (elt, color, text) => {
+            //elt.raise();
+            elt.attr('fill', color)
+                //.attr("stroke", colorOver)
+                //.attr("stroke-width", 0)
+                //.attr("stroke-linejoin", "round")
+                .on("mouseover", function (e) {
+                    /*this.parentNode.appendChild(this); select(this).attr("stroke-width", selectionStrokeWidth);*/
+                    select(this).attr('fill', selectionColor);
+                    if (!tt || !text) return;
+                    tt.html(text);
+                    tt.setPosition(e);
+                    tt.show()
+                })
+                .on("mouseout", function () {
+                    /*select(this).attr("stroke-width", 0);*/
+                    select(this).attr('fill', color);
+                    if (tt) tt.hide()
+                })
+            if (tt && text) elt.on("mousemove", function (e) { tt.setPosition(e) })
+        }
+
+        //const [c0, c1, c2] = classifier.center
+
+        //trapezium s0
+        const t0 = g.append('polygon')
+            .attr('points', "0," + h + " " + w / 3 + "," + h + " " + w / 2 + "," + h * 2 / 3 + " " + w / 6 + "," + h * 2 / 3)
+        setAttributes(t0, classifier.colors[0], texts["0"])
+        //trapezium s1
+        const t1 = g.append('polygon')
+            .attr('points', w / 2 + ",0 " + w * 2 / 3 + "," + h / 3 + " " + w / 2 + "," + h * 2 / 3 + " " + w / 3 + "," + h / 3)
+        setAttributes(t1, classifier.colors[1], texts["1"])
+        //trapezium s2
+        const t2 = g.append('polygon')
+            .attr('points', w + "," + h + " " + w * 5 / 6 + "," + 2 * h / 3 + " " + w / 2 + "," + h * 2 / 3 + " " + w * 2 / 3 + "," + h)
+        setAttributes(t2, classifier.colors[2], texts["2"])
+        //triangle s0
+        const t0_ = g.append('polygon')
+            .attr('points', w / 2 + "," + h * 2 / 3 + " " + w * 5 / 6 + "," + h * 2 / 3 + " " + w * 2 / 3 + "," + h / 3)
+        setAttributes(t0_, classifier.mixColors[0], texts["12"])
+        //triangle s1
+        const t1_ = g.append('polygon')
+            .attr('points', w / 2 + "," + h * 2 / 3 + " " + w / 3 + "," + h + " " + w * 2 / 3 + "," + h)
+        setAttributes(t1_, classifier.mixColors[1], texts["02"])
+        //triangle s2
+        const t2_ = g.append('polygon')
+            .attr('points', w / 2 + "," + h * 2 / 3 + " " + w / 6 + "," + h * 2 / 3 + " " + w / 3 + "," + h / 3)
+        setAttributes(t2_, classifier.mixColors[2], texts["01"])
+
+        //center
+        if (this.centerCoefficient) {
+            //TODO make it an hexagon !
+            const center = g.append('circle')
+                .attr('cx', w / 2).attr('cy', h * 2 / 3)
+                .attr('r', this.centerCoefficient * h / 3)
+            setAttributes(center, classifier.centerColor, texts["center"])
+        }
+
+
+        /*
+        let middle, left, top, right, left_, bottom_, right_
+        if (!this.real) {
+
+            //0 left triangle
+            left = g.append('polygon')
+                .attr('points', "0," + h + " " + (w / 3) + "," + h + " " + (w / 6) + "," + (2 * h / 3))
+            //1 top triangle
+            top = g.append('polygon')
+                .attr('points', (w / 3) + "," + (h / 3) + " " + (w * 2 / 3) + "," + (h / 3) + " " + (w / 2) + ",0")
+            //2 right triangle
+            right = g.append('polygon')
+                .attr('points', (w * 2 / 3) + "," + h + " " + w + "," + h + " " + (w * 5 / 6) + "," + (2 * h / 3))
+            //middle triangle
+            middle = g.append('polygon')
+                .attr('points', (w / 2) + "," + (h / 3) + " " + (w / 4) + "," + (h * 5 / 6) + " " + (3 * w / 4) + "," + (h * 5 / 6))
+            //01 left trapezium
+            left_ = g.append('polygon')
+                .attr('points', (w / 6) + "," + (h * 2 / 3) + " " + (w / 4) + "," + (h * 5 / 6) + " " + (w / 2) + "," + (h / 3) + " " + (w / 3) + "," + (h / 3))
+            //02 bottom trapezium
+            bottom_ = g.append('polygon')
+                .attr('points', (w / 3) + "," + (h) + " " + (2 * w / 3) + "," + (h) + " " + (w * 3 / 4) + "," + (h * 5 / 6) + " " + (w / 4) + "," + (h * 5 / 6))
+            //12 right trapezium
+            right_ = g.append('polygon')
+                .attr('points', (w / 2) + "," + (h / 3) + " " + (w * 3 / 4) + "," + (h * 5 / 6) + " " + (w * 5 / 6) + "," + (h * 2 / 3) + " " + (w * 2 / 3) + "," + (h / 3))
+
+        } else {
+
+            //middle triangle
+            middle = g.append('polygon')
+                .attr('points', (w / 2) + ",0 0," + h + " " + w + "," + h)
+
+            //draw trapezium
+            //draw large trapezium first
+            for (let i_ = 2; i_ >= 0; i_--) {
+                const i = this.classifier.lowIndex[i_]
+                const r = this.classifier.lowThreshold[i]
+                if (i == 2)
+                    //01 left trapezium
+                    left_ = g.append('polygon')
+                        .attr('points', w / 2 + ",0 0," + h + " " + w * r + "," + h + " " + w * (1 + r) / 2 + "," + r * h)
+                else if (i == 1)
+                    //02 bottom trapezium
+                    bottom_ = g.append('polygon')
+                        .attr('points', "0," + h + " " + w + "," + h + " " + w * (1 - r / 2) + "," + h * (1 - r) + " " + r * w / 2 + "," + h * (1 - r))
+                else
+                    //12 right trapezium
+                    right_ = g.append('polygon')
+                        .attr('points', w + "," + h + " " + w / 2 + ",0 " + w * (1 - r) / 2 + "," + h * r + " " + w * (1 - r) + "," + h)
+            }
+
+            //draw triangles
+            //draw large triangles first
+            for (let i_ = 2; i_ >= 0; i_--) {
+                const i = this.classifier.highIndex[i_]
+                const r = this.classifier.highThreshold[i]
+
+                if (i == 2)
+                    //2 right triangle
+                    right = g.append('polygon')
+                        .attr('points', w + "," + h + " " + w * r + "," + h + " " + w * (1 + r) / 2 + "," + h * r)
+                else if (i == 1)
+                    //1 top triangle
+                    top = g.append('polygon')
+                        .attr('points', (w / 2) + ",0 " + w * r / 2 + "," + h * (1 - r) + " " + w * (1 - r / 2) + "," + h * (1 - r))
+                else
+                    //0 left triangle
+                    left = g.append('polygon')
+                        .attr('points', "0," + h + " " + w * (1 - r) + "," + h + " " + w * (1 - r) / 2 + "," + h * r)
+            }
+
+        }*/
+
+    }
+}

package/src/style/CompositionStyle.js

@@ -11,6 +11,7 @@ import { Style } from '../core/Style.js'
  * For a list of supported symbols, @see CompositionType
  * The symbol can be scaled depending on the cell importance.
  *
+ * @module style
  * @author Julien Gaffuri
  */
 export class CompositionStyle extends Style {

package/src/style/ContourStyle.js

@@ -7,6 +7,7 @@ import { SideStyle } from './SideStyle.js'
 
 /**
  *
+ * @module style
  * @author Julien Gaffuri
  */
 export class ContourStyle extends SideStyle {

package/src/style/DotDensityStyle.js

@@ -9,6 +9,7 @@ import { color } from 'd3-color'
 
 /**
  *
+ * @module style
  * @author Julien Gaffuri
  */
 export class DotDensityStyle extends Style {