gridviz 2.0.28 → 2.0.29

package/src/index.js

@@ -0,0 +1,176 @@
+//@ts-check
+'use strict'
+
+//the application
+export { App } from './App'
+export { GeoCanvas } from './GeoCanvas'
+export { Style } from './Style'
+export { Layer } from './Layer'
+export { Dataset } from './Dataset'
+export { DatasetComponent } from './DatasetComponent'
+
+//export dataset types
+export { TiledGrid } from './dataset/TiledGrid'
+export { CSVGrid } from './dataset/CSVGrid'
+//export { ParquetGrid } from "./dataset/ParquetGrid"
+//export { GeoTIFF } from "./dataset/GeoTIFF"
+
+//export styles
+export { ShapeColorSizeStyle } from './style/ShapeColorSizeStyle'
+export { StrokeStyle } from './style/StrokeStyle'
+export { JoyPlotStyle } from './style/JoyPlotStyle'
+export { CompositionStyle } from './style/CompositionStyle'
+export { SegmentStyle } from './style/SegmentStyle'
+export { TextStyle } from './style/TextStyle'
+export { KernelSmoothingStyle } from './style/KernelSmoothingStyle'
+//export { KernelSmoothingOldStyle } from "./style/KernelSmoothingStyle"
+//export { KernelSmoothingWGLStyle } from "./style/KernelSmoothingStyle"
+export { PillarStyle } from './style/PillarStyle'
+export { SideStyle } from './style/SideStyle'
+export { ContourStyle } from './style/ContourStyle'
+export { SideCatStyle } from './style/SideCatStyle'
+export { DotDensityStyle } from './style/DotDensityStyle'
+export { TanakaStyle } from './style/TanakaStyle'
+export { LegoStyle } from './style/LegoStyle'
+export { SquareColorWGLStyle } from './style/SquareColorWGLStyle'
+export { SquareColorCatWGLStyle } from './style/SquareColorCatWGLStyle'
+export { MosaicStyle } from './style/MosaicStyle'
+export { NinjaStarStyle } from './style/NinjaStarStyle'
+
+//export additional layers
+export { BackgroundLayer } from './BackgroundLayer'
+export { BackgroundLayerWMS } from './BackgroundLayerWMS'
+export { LabelLayer } from './LabelLayer'
+export { LineLayer as BoundaryLayer } from './LineLayer'
+
+export { ColorLegend } from './legend/ColorLegend'
+export { ColorDiscreteLegend } from './legend/ColorDiscreteLegend'
+export { ColorCategoryLegend } from './legend/ColorCategoryLegend'
+export { SizeLegend } from './legend/SizeLegend'
+export { SegmentWidthLegend } from './legend/SegmentWidthLegend'
+export { SegmentOrientationLegend } from './legend/SegmentOrientationLegend'
+
+//export { goToStraight, zoomTo } from "./utils/zoomUtils"
+export * from './utils/stretching.js'
+
+export { getClass } from './utils/Utils'
+
+import { geoAzimuthalEqualArea } from 'd3-geo'
+import { GeoCanvas } from './GeoCanvas'
+
+/**
+ * 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
+import { formatDefaultLocale } from 'd3-format'
+formatDefaultLocale({
+    decimal: '.',
+    thousands: ' ',
+    grouping: [3],
+    currency: ['', '€'],
+})

package/src/legend/ColorCategoryLegend.js

@@ -0,0 +1,124 @@
+//@ts-check
+'use strict'
+
+import { Legend } from '../Legend'
+
+/**
+ * A legend element for color categrories.
+ *
+ * @author Joseph Davies, Julien Gaffuri
+ */
+export class ColorCategoryLegend extends Legend {
+    /** @param {Object} opts */
+    constructor(opts) {
+        super(opts)
+        opts = opts || {}
+
+        //col/categories array, in display order
+        /**
+         * @private
+         * @type {Array.<Array.<string>>} */
+        this.colCat = opts.colCat || [['gray', '-']]
+
+        /**
+         * @private
+         * @type {import("../Style").Shape} */
+        this.shape = opts.shape || 'circle'
+        this.dimension = opts.dimension || { r: 8 }
+        this.strokeColor = opts.strokeColor || 'gray'
+        this.strokeWidth = opts.strokeWidth || 1
+
+        this.title = opts.title
+        this.titleFontSize = opts.titleFontSize || '0.8em'
+        this.titleFontWeight = opts.titleFontWeight || 'bold'
+
+        //label
+        this.labelFontSize = opts.labelFontSize || '0.8em'
+    }
+
+    /**
+     * @param {{ style: import("../Style").Style, r: number, zf: number, sSize: import("../Style").Stat, sColor: import("../Style").Stat }} opts
+     */
+    update(opts) {
+        //clear
+        this.div.selectAll('*').remove()
+
+        //build
+
+        //title
+        if (this.title)
+            this.div
+                .append('div')
+                .style('font-size', this.titleFontSize)
+                .style('font-weight', this.titleFontWeight)
+                .style('margin-bottom', '7px')
+                .text(this.title)
+
+        //categories
+        const nb = this.colCat.length
+        if (nb == 0) return
+
+        for (let i = 0; i < nb; i++) {
+            const cat = this.colCat[i]
+
+            //make div for category
+            const d = this.div.append('div')
+            //to enable vertical centering
+            //.style("position", "relative")
+
+            const sw = this.strokeWidth
+
+            //draw graphic element: box / circle
+            if (this.shape === 'square') {
+                const h = this.dimension.h || 15
+                const w = this.dimension.w || 20
+                d.append('div')
+                    .style('display', 'inline')
+
+                    .append('svg')
+                    .attr('width', w + 2 * sw)
+                    .attr('height', h + 2 * sw)
+
+                    .append('rect')
+                    .attr('x', sw)
+                    .attr('y', sw)
+                    .attr('width', w)
+                    .attr('height', h)
+                    .style('fill', cat[0])
+                    .style('stroke', this.strokeColor)
+                    .style('stroke-width', this.strokeWidth)
+            } else if (this.shape === 'circle') {
+                const r = this.dimension.r || 8
+                const h = 2 * r + 2 * sw
+                d.append('div')
+                    .style('display', 'inline')
+
+                    .append('svg')
+                    .attr('width', h)
+                    .attr('height', h)
+
+                    .append('circle')
+                    .attr('cx', r + sw)
+                    .attr('cy', r + sw)
+                    .attr('r', r)
+                    .style('fill', cat[0])
+                    .style('stroke', this.strokeColor)
+                    .style('stroke-width', this.strokeWidth)
+            } else {
+                throw new Error('Unexpected shape:' + this.shape)
+            }
+
+            //write label text
+            d.append('div')
+                //show on right of graphic
+                .style('display', 'inline')
+
+                //center vertically
+                //.style("position", "absolute").style("top", "0").style("bottom", "0")
+
+                .style('padding-left', '5px')
+                .style('font-size', this.labelFontSize)
+                .text(cat[1])
+        }
+    }
+}

package/src/legend/ColorDiscreteLegend.js

@@ -0,0 +1,105 @@
+//@ts-check
+'use strict'
+
+//import { select } from "d3-selection";
+import { Legend } from '../Legend'
+//import { format } from "d3-format";
+
+/**
+ * A legend element for discrete color style.
+ * Inspiration: https://observablehq.com/@d3/color-legend
+ *
+ * @author Julien Gaffuri
+ */
+export class ColorDiscreteLegend extends Legend {
+    /** @param {Object} opts */
+    constructor(opts) {
+        super(opts)
+        opts = opts || {}
+
+        /** @private @type {Array.<Array.<string>>} */
+        this.colors = opts.colors
+        /** @private @type {Array.<Array.<string>>} */
+        this.breaksText = opts.breaksText
+
+        this.width = opts.width || 300
+        this.height = opts.height || 15
+
+        this.title = opts.title
+        this.titleFontSize = opts.titleFontSize || '0.8em'
+        this.titleFontWeight = opts.titleFontWeight || 'bold'
+
+        this.tickSize = opts.tickSize || 3
+
+        //label
+        this.labelFontSize = opts.labelFontSize || '0.8em'
+        this.invert = opts.invert
+    }
+
+    /**
+     * @param {{ style: import("../Style").Style, r: number, zf: number, sSize: import("../Style").Stat, sColor: import("../Style").Stat }} opts
+     */
+    update(opts) {
+        //clear
+        this.div.selectAll('*').remove()
+
+        //build
+
+        //title
+        if (this.title)
+            this.div
+                .append('div')
+                .style('font-size', this.titleFontSize)
+                .style('font-weight', this.titleFontWeight)
+                .style('margin-bottom', '7px')
+                .text(this.title)
+
+        //classes
+        const nb = this.colors.length
+        if (nb == 0) return
+        const w = this.width / nb
+
+        //make svg element
+        const svg = this.div
+            .append('svg')
+            .attr('width', this.width)
+            .attr('height', this.height + this.tickSize + 2 + 10)
+
+        //draw graphic elements
+        for (let i = 0; i < nb; i++) {
+            svg.append('rect')
+                .attr('x', i * w)
+                .attr('y', 0)
+                .attr('width', w)
+                .attr('height', this.height)
+                .style('fill', this.colors[i])
+        }
+
+        //tick line
+        for (let i = 1; i < nb; i++) {
+            svg.append('line')
+                .attr('x1', w * i)
+                .attr('y1', 0)
+                .attr('x2', w * i)
+                .attr('y2', this.height + this.tickSize)
+                .style('stroke', 'black')
+        }
+
+        //labels
+        for (let i = 1; i < nb; i++) {
+            //prepare label
+            svg.append('text')
+                .attr('id', 'ticklabel_' + i)
+                .attr('x', w * i)
+                .attr('y', this.height + this.tickSize + 2)
+                .style('font-size', this.labelFontSize)
+                //.style("font-weight", "bold")
+                //.style("font-family", "Arial")
+                .style('text-anchor', i == 0 ? 'start' : i == this.ticks - 1 ? 'end' : 'middle')
+                .style('alignment-baseline', 'top')
+                .style('dominant-baseline', 'hanging')
+                .style('pointer-events', 'none')
+                .text(this.breaksText[i - 1])
+        }
+    }
+}

package/src/legend/ColorLegend.js

@@ -0,0 +1,125 @@
+//@ts-check
+'use strict'
+
+//import { select } from "d3-selection";
+import { Legend } from '../Legend'
+import { format } from 'd3-format'
+
+/**
+ * A legend element for continuous color style.
+ * Inspiration: https://observablehq.com/@d3/color-legend
+ *
+ * @author Joseph Davies, Julien Gaffuri
+ */
+export class ColorLegend extends Legend {
+    /** @param {Object} opts */
+    constructor(opts) {
+        super(opts)
+        opts = opts || {}
+
+        this.colorRamp = opts.colorRamp
+
+        //function (t[0,1], r, s) -> v (for label text)
+        this.fun = opts.fun
+
+        this.title = opts.title
+        this.tickSize = opts.tickSize || 6
+        this.width = opts.width || 300
+        this.height = opts.height || 15
+        this.margin = opts.margin || 5
+        this.ticks = opts.ticks || Math.floor(this.width / 50)
+        this.tickFormat = opts.tickFormat || ',.0f'
+        this.tickUnit = opts.tickUnit
+
+        this.fontSize = opts.fontSize || '0.8em'
+        this.invert = opts.invert
+    }
+
+    /**
+     * @param {{ style: import("../Style").Style, r: number, zf: number, sSize: import("../Style").Stat, sColor: import("../Style").Stat }} opts
+     */
+    update(opts) {
+        //could happen when data is still loading
+        if (!opts.sColor) return
+
+        //clear
+        this.div.selectAll('*').remove()
+
+        const titleHeight = 12
+
+        const svgW = this.width + 2 * this.margin
+        const svgH = this.height + 3 * this.margin + titleHeight + this.tickSize + 10
+        const svg = this.div.append('svg').attr('width', svgW).attr('height', svgH)
+        //  <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
+
+        //title
+        svg.append('text')
+            .attr('x', this.margin)
+            .attr('y', this.margin)
+            .style('font-size', '0.8em')
+            .style('font-weight', 'bold')
+            .style('alignment-baseline', 'top')
+            .style('dominant-baseline', 'hanging')
+            .style('pointer-events', 'none')
+            .text(this.title)
+
+        const g = svg
+            .append('g')
+            .attr('transform', 'translate(' + this.margin + ' ' + (2 * this.margin + titleHeight) + ')')
+
+        //draw color bar
+        const w = this.width,
+            h = this.height
+        const step = 5
+        for (let i = 0; i < w; i += step) {
+            let t = i / (w - 1)
+            if (this.invert) t = 1 - t
+            g.append('rect')
+                .attr('x', i)
+                .attr('y', 0)
+                .attr('width', step)
+                .attr('height', h)
+                .style('fill', this.colorRamp(t))
+        }
+
+        for (let i = 0; i < this.ticks; i++) {
+            let t = i / (this.ticks - 1)
+
+            //tick line
+            g.append('line')
+                .attr('x1', w * t)
+                .attr('y1', 0)
+                .attr('x2', w * t)
+                .attr('y2', h + this.tickSize)
+                .style('stroke', 'black')
+
+            //prepare tick label
+            g.append('text')
+                .attr('id', 'ticklabel_' + i)
+                .attr('x', w * t)
+                .attr('y', h + this.tickSize + 2)
+                .style('font-size', this.fontSize)
+                //.style("font-weight", "bold")
+                //.style("font-family", "Arial")
+                .style('text-anchor', i == 0 ? 'start' : i == this.ticks - 1 ? 'end' : 'middle')
+                .style('alignment-baseline', 'top')
+                .style('dominant-baseline', 'hanging')
+                .style('pointer-events', 'none')
+            //.text("-")
+        }
+
+        //update tick labels
+
+        //label text format
+        const f = this.tickFormat && this.tickFormat != 'text' ? format(this.tickFormat) : (v) => v
+        for (let i = 0; i < this.ticks; i++) {
+            let t = i / (this.ticks - 1)
+
+            const v = this.fun(t, opts.r, opts.sColor)
+            const text = (v ? f(v) : '0') + (this.tickUnit ? this.tickUnit : '')
+
+            //tick label
+            this.div.select('#' + 'ticklabel_' + i).text(text)
+        }
+    }
+}

package/src/legend/SegmentOrientationLegend.js

@@ -0,0 +1,87 @@
+//@ts-check
+'use strict'
+
+import { Legend } from '../Legend'
+
+/**
+ * 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)
+    }
+}