gridviz 2.1.12 → 2.1.13

package/src/legend/ColorLegend.js

@@ -1,124 +1,128 @@
-//@ts-check
-'use strict'
-
-import { Legend } from '../Legend.js'
-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)
-        }
-    }
-}
+//@ts-check
+'use strict'
+
+import { Legend } from '../Legend.js'
+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
+
+        //to be used as opts => opts.sAlpha to show legend on alpha channel
+        this.getStats = opts.getStats || (opts => opts.sColor)
+    }
+
+    /**
+     * @param {{ style: import("../Style").Style, r: number, zf: number, sSize: import("../Style").Stat, sColor: import("../Style").Stat, sAlpha: 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
+        const stat = this.getStats(opts)
+        for (let i = 0; i < this.ticks; i++) {
+            let t = i / (this.ticks - 1)
+
+            const v = this.fun(t, opts.r, stat)
+            const text = (v ? f(v) : '0') + (this.tickUnit ? this.tickUnit : '')
+
+            //tick label
+            this.div.select('#' + 'ticklabel_' + i).text(text)
+        }
+    }
+}

package/src/legend/SegmentOrientationLegend.js

@@ -1,87 +1,87 @@
-//@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)
-    }
-}
+//@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,97 +1,101 @@
-//@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
-        this.exaggerationFactor = opts.exaggerationFactor || 0.5
-
-        //color
-        this.color = opts.color || 'gray'
-        //orientation
-        this.orientation = opts.orientation || 0
-
-        //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)
-        }
-
-        //get max value
-        const value_ = opts.sWidth.max * this.exaggerationFactor
-
-        //take '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
-
-        //compute segment width and length, in pix
-        const sWidth = opts.style.width(value, opts.r, opts.sWidth, opts.zf) / opts.zf
-        const sLength = (1 * opts.r) / 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)
-    }
-}
+//@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)
+    }
+}