gridviz 2.0.28 → 2.0.29

package/src/legend/SegmentWidthLegend.js

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

package/src/legend/SizeLegend.js

@@ -0,0 +1,141 @@
+//@ts-check
+'use strict'
+
+import { Legend } from '../Legend'
+import { format } from 'd3-format'
+
+/**
+ * A legend element for proportional symbols.
+ *
+ * @author Joseph Davies, Julien Gaffuri
+ */
+export class SizeLegend extends Legend {
+    /** @param {Object} opts */
+    constructor(opts) {
+        super(opts)
+        opts = opts || {}
+
+        //exageration
+        this.exaggerationFactor = opts.exaggerationFactor || 0.8
+
+        //if value is to be forced
+        this.value = opts.value || undefined
+
+        //title
+        this.title = opts.title
+        this.titleFontSize = opts.titleFontSize || '0.8em'
+        this.titleFontWeight = opts.titleFontWeight || 'bold'
+
+        //symbol
+        /**
+         * @private
+         * @type {import("../Style").Shape} */
+        this.shape = opts.shape || 'circle'
+        this.fillColor = opts.fillColor || 'none'
+        this.strokeColor = opts.strokeColor || 'gray'
+        this.strokeWidth = opts.strokeWidth || 1
+
+        //label
+        this.labelFontSize = opts.labelFontSize || '0.8em'
+        this.labelUnitText = opts.labelUnitText || ''
+        this.labelFormat = opts.labelFormat || ',.2r'
+
+        //
+        //this.div.style("text-align", "center")
+    }
+
+    /**
+     * @param {{ style: import("../style/ShapeColorSizeStyle").ShapeColorSizeStyle, r: number, zf: number, sSize: import("../Style").Stat, sColor: import("../Style").Stat }} opts
+     */
+    update(opts) {
+        //could happen when data is still loading
+        if (!opts.sSize) return
+
+        //clear
+        this.div.selectAll('*').remove()
+
+        //get value
+        let value = this.value
+        if (value == undefined) {
+            //compute 'nice value
+
+            //get max value
+            const value_ = opts.sSize.max * this.exaggerationFactor
+
+            //take 'nice' value (power of ten, or multiple)
+            let pow10 = Math.log10(value_)
+            pow10 = Math.floor(pow10)
+            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
+        }
+
+        if (!value) return
+
+        const d = this.div.append('div')
+        //to enable vertical centering
+        //.style("position", "relative")
+
+        //title
+        if (this.title) {
+            d.append('div')
+                .attr('class', 'title')
+                .style('font-size', this.titleFontSize)
+                .style('font-weight', this.titleFontWeight)
+                .text(this.title)
+        }
+
+        //compute size of symbol, in pix
+        const size = opts.style.size(value, opts.r, opts.sSize, opts.zf) / opts.zf
+
+        const svg = d
+            .append('svg')
+            .attr('width', size + this.strokeWidth + 2)
+            .attr('height', size + this.strokeWidth + 2)
+            .style('', 'inline-block')
+
+        if (this.shape === 'square') {
+            svg.append('rect')
+                .attr('x', 0)
+                .attr('y', 0)
+                .attr('width', size)
+                .attr('height', size)
+                .style('fill', this.fillColor)
+                .style('stroke', this.strokeColor)
+                .style('stroke-width', this.strokeWidth)
+            //TODO test
+        } else if (this.shape === 'circle') {
+            // <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
+            const r = (size + this.strokeWidth) * 0.5
+            svg.append('circle')
+                .attr('cx', r + 1)
+                .attr('cy', r + 1)
+                .attr('r', r)
+                .style('fill', this.fillColor)
+                .style('stroke', this.strokeColor)
+                .style('stroke-width', this.strokeWidth)
+        } else if (this.shape === 'donut') {
+            //TODO
+        } else if (this.shape === 'diamond') {
+            //TODO
+        } else {
+            throw new Error('Unexpected shape:' + this.shape)
+        }
+
+        const valueT = format(this.labelFormat)(value)
+        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(valueT + (this.labelUnitText ? ' ' : '') + this.labelUnitText)
+    }
+}

package/src/style/CompositionStyle.js

@@ -0,0 +1,294 @@
+//@ts-check
+'use strict'
+
+import { Style } from '../Style'
+
+/** @typedef {"flag"|"piechart"|"ring"|"segment"|"radar"|"agepyramid"|"halftone"} CompositionType */
+
+/**
+ * A style showing the composition of a total in different categories, with different color hues.
+ * It consists of a symbol with different parts, whose size reflect the proportion of the corresponding category.
+ * For a list of supported symbols, @see CompositionType
+ * The symbol can be scaled depending on the cell importance.
+ *
+ * @author Julien Gaffuri
+ */
+export class CompositionStyle extends Style {
+    /** @param {object} opts */
+    constructor(opts) {
+        super(opts)
+        opts = opts || {}
+
+        /**
+         * The dictionary (string -> color) which give the color of each category.
+         * @type {object} */
+        this.color = opts.color
+
+        /**
+         * A function returning the type of decomposition symbol of a cell, @see CompositionType
+         * @type {function(import("../Dataset").Cell):CompositionType} */
+        this.type = opts.type
+
+        /** The column where to get the size values.
+         * @type {string} */
+        this.sizeCol = opts.sizeCol
+
+        /** A function returning the size of a cell.
+         * @type {function(number,number,import("../Style").Stat|undefined,number):number} */
+        this.size = opts.size || ((v, r, s, zf) => r)
+
+        /** For style types with stripes (flag, segment), the orientation of the stripes (0 for horizontal, other for vertical).
+         * @type {function(import("../Dataset").Cell,number,number):number} */
+        this.stripesOrientation = opts.stripesOrientation || (() => 0) //(c,r,zf) => ...
+
+        /** The function specifying an offset angle for a radar, halftone or pie chart style.
+         * The angle is specified in degree. The rotation is anti-clockwise.
+         * @type {function(import("../Dataset").Cell,number,number):number} */
+        this.offsetAngle = opts.offsetAngle || (() => 0) //(cell,r,zf) => ...
+
+        /** The function specifying the height of the age pyramid, in geo unit.
+         * @type {function(import("../Dataset").Cell,number,number):number} */
+        this.agePyramidHeight = opts.agePyramidHeight || ((c, r, zf) => r) //(cell,r,zf) => ...
+
+        /** For pie chart, this is parameter for internal radius, so that the pie chart looks like a donut.
+         * 0 for normal pie charts, 0.5 to empty half of the radius.
+         * @type {number} */
+        this.pieChartInternalRadiusFactor = opts.pieChartInternalRadiusFactor || 0
+    }
+
+    /**
+     * Draw cells as squares depending on their value.
+     *
+     * @param {Array.<import("../Dataset").Cell>} cells
+     * @param {number} r
+     * @param {import("../GeoCanvas").GeoCanvas} cg
+     */
+    draw(cells, r, cg) {
+        //filter
+        if (this.filter) cells = cells.filter(this.filter)
+
+        //zoom factor
+        const zf = cg.getZf()
+
+        let stat
+        if (this.sizeCol) {
+            //if size is used, sort cells by size so that the biggest are drawn first
+            cells.sort((c1, c2) => c2[this.sizeCol] - c1[this.sizeCol])
+            //and compute statistics
+            stat = Style.getStatistics(cells, (c) => c[this.sizeCol], true)
+        }
+
+        //nb categories - used for radar and agepyramid
+        const nbCat = Object.entries(this.color).length
+
+        //draw in geo coordinates
+        cg.setCanvasTransform()
+
+        //draw calls
+        for (let cell of cells) {
+            //size
+            /** @type {function(number,number,import("../Style").Stat|undefined,number):number} */
+            let s_ = this.size || (() => r)
+            //size - in geo
+            /** @type {number} */
+            const sG = s_(cell[this.sizeCol], r, stat, zf)
+
+            //get offset
+            const offset = this.offset(cell, r, zf)
+
+            //get symbol type
+            const type_ = this.type ? this.type(cell) : 'flag'
+
+            //compute center position
+            const xc = cell.x + offset.dx + (type_ === 'agepyramid' ? 0 : r * 0.5)
+            const yc = cell.y + offset.dy + (type_ === 'agepyramid' ? 0 : r * 0.5)
+
+            //compute offset angle, when relevant
+            const offAng =  this.offsetAngle ? (this.offsetAngle(cell, r, zf) * Math.PI) / 180 : 0
+
+            if (type_ === 'agepyramid' || type_ === 'radar' || type_ === 'halftone') {
+                //get cell category max value
+                let maxVal = -Infinity
+                for (let key of Object.keys(this.color)) {
+                    const v = +cell[key]
+                    if (v > maxVal) maxVal = v
+                }
+
+                //cumul
+                let cumul = 0
+                if (type_ === 'agepyramid' && this.agePyramidHeight)
+                    cumul = (r - this.agePyramidHeight(cell, r, zf)) / 2
+                if (type_ === 'radar' || type_ === 'halftone')
+                    cumul = Math.PI / 2 + offAng
+
+                //compute the increment, which is the value to increment the cumul for each category
+                const incr =
+                    type_ === 'agepyramid'
+                        ? (this.agePyramidHeight ? this.agePyramidHeight(cell, r, zf) : r) / nbCat
+                        : type_ === 'radar' || type_ === 'halftone'
+                        ? (2 * Math.PI) / nbCat
+                        : undefined
+                if (incr === undefined) throw new Error('Unexpected symbol type:' + type_)
+
+                for (let [column, color] of Object.entries(this.color)) {
+                    if (type_ === 'agepyramid') {
+                        //set category color
+                        cg.ctx.fillStyle = color
+
+                        //get category value
+                        const val = cell[column]
+
+                        //compute category length - in geo
+                        /** @type {number} */
+                        const wG = (sG * val) / maxVal
+
+                        //draw bar
+                        cg.ctx.fillRect(xc + (r - wG) / 2, yc + cumul, wG, incr)
+
+                        //next height
+                        cumul += incr
+                    } else if (type_ === 'radar') {
+                        //set category color
+                        cg.ctx.fillStyle = color
+
+                        //get categroy value
+                        const val = cell[column]
+
+                        //compute category radius - in geo
+                        /** @type {number} */
+                        //const rG = this.radius(val, r, stat, cellStat, zf)
+                        const rG = (sG / 2) * Math.sqrt(val / maxVal)
+
+                        //draw angular sector
+                        cg.ctx.beginPath()
+                        cg.ctx.moveTo(xc, yc)
+                        cg.ctx.arc(xc, yc, rG, cumul - incr, cumul)
+                        cg.ctx.lineTo(xc, yc)
+                        cg.ctx.fill()
+
+                        //next angular sector
+                        cumul += incr
+                    } else if (type_ === 'halftone') {
+                        //set category color
+                        cg.ctx.fillStyle = color
+
+                        //get categroy value
+                        const val = cell[column]
+
+                        //compute category radius - in geo
+                        /** @type {number} */
+                        const rG = sG * 0.333 * Math.sqrt(val / maxVal)
+
+                        //draw circle
+                        cg.ctx.beginPath()
+                        cg.ctx.arc(
+                            xc + r * 0.25 * Math.cos(cumul),
+                            yc + r * 0.25 * Math.sin(cumul),
+                            rG,
+                            0,
+                            2 * Math.PI
+                        )
+                        cg.ctx.fill()
+
+                        //next angular sector
+                        cumul += incr
+                    } else {
+                        throw new Error('Unexpected symbol type:' + type_)
+                    }
+                }
+            } else {
+                //compute total
+                let total = 0
+                for (let column of Object.keys(this.color)) {
+                    const v = +cell[column]
+                    if (!v) continue
+                    total += v
+                }
+                if (!total || isNaN(total)) continue
+
+                //draw decomposition symbol
+                let cumul = 0
+                const d = r * (1 - sG / r) * 0.5
+                const ori = this.stripesOrientation(cell, r, zf)
+
+                for (let [column, color] of Object.entries(this.color)) {
+                    //get share
+                    const share = cell[column] / total
+                    if (!share || isNaN(share)) continue
+
+                    //set color
+                    cg.ctx.fillStyle = color
+
+                    //draw symbol part
+                    if (type_ === 'flag') {
+                        //draw flag stripe
+                        if (ori == 0) {
+                            //horizontal
+                            cg.ctx.fillRect(
+                                cell.x + d + offset.dx,
+                                cell.y + d + cumul * sG + offset.dy,
+                                sG,
+                                share * sG
+                            )
+                        } else {
+                            //vertical
+                            cg.ctx.fillRect(
+                                cell.x + d + cumul * sG + offset.dx,
+                                cell.y + d + offset.dy,
+                                share * sG,
+                                sG
+                            )
+                        }
+                    } else if (type_ === 'piechart') {
+                        //draw pie chart angular sector
+
+                        //compute angles
+                        const a1 = cumul * 2 * Math.PI
+                        const a2 = (cumul + share) * 2 * Math.PI
+
+                        //draw
+                        cg.ctx.beginPath()
+                        cg.ctx.moveTo(xc, yc)
+                        cg.ctx.arc(xc, yc, sG * 0.5, a1+offAng, a2+offAng)
+                        if (this.pieChartInternalRadiusFactor)
+                            cg.ctx.arc(xc, yc, sG * 0.5 * this.pieChartInternalRadiusFactor, a1+offAng, a2+offAng, true)
+                        cg.ctx.closePath()
+                        cg.ctx.fill()
+                    } else if (type_ === 'ring') {
+                        //draw ring
+                        cg.ctx.beginPath()
+                        cg.ctx.arc(xc, yc, Math.sqrt(1 - cumul) * sG * 0.5, 0, 2 * Math.PI)
+                        cg.ctx.fill()
+                    } else if (type_ === 'segment') {
+                        //draw segment sections
+                        const wG = (sG * sG) / r
+                        if (ori == 0) {
+                            //horizontal
+                            cg.ctx.fillRect(
+                                cell.x + offset.dx,
+                                cell.y + (r - wG) / 2 + cumul * wG + offset.dy,
+                                r,
+                                share * wG
+                            )
+                        } else {
+                            //vertical
+                            cg.ctx.fillRect(
+                                cell.x + cumul * r + offset.dx,
+                                cell.y + (r - wG) / 2 + offset.dy,
+                                share * r,
+                                wG
+                            )
+                        }
+                    } else {
+                        throw new Error('Unexpected symbol type:' + type_)
+                    }
+
+                    cumul += share
+                }
+            }
+        }
+
+        //update legends
+        this.updateLegends({ style: this, r: r, zf: zf, sSize: stat })
+    }
+}

package/src/style/ContourStyle.js

@@ -0,0 +1,54 @@
+//@ts-check
+'use strict'
+
+import { SideStyle } from './SideStyle'
+
+/** @typedef {{x:number,y:number,or:"v"|"h",value:number}} Side */
+
+/**
+ *
+ * @author Julien Gaffuri
+ */
+export class ContourStyle extends SideStyle {
+    /** @param {object} opts */
+    constructor(opts) {
+        super(opts)
+        opts = opts || {}
+
+        /** @type {number} */
+        //opts.interval = opts.interval || 100
+
+        /** @type {Array.<number>} */
+        opts.breaks = opts.breaks || [100, 1000, 10000, 100000, 1000000]
+
+        /** @type {function(Side,number,number):string} */
+        opts.width = opts.width || (() => 1) //(s, r, zf) => ...
+
+        /** @type {function(Side,number,number):string} */
+        opts.color = opts.color || (() => '#E7A935') //(s, r, zf) => ...
+
+        //override method for contour drawing
+
+        const getClass = function (v) {
+            if (v == undefined) return 0
+            for (let i = 0; i < opts.breaks.length; i++) if (v < opts.breaks[i]) return i
+            return opts.breaks.length
+        }
+
+        this.value = (v1, v2, r, s, zf) => {
+            //if (!v1 || !v2) return 0
+            return Math.abs(getClass(v2) - getClass(v1))
+
+            //check if v1 - v2 cross a contour line
+            //const r1 = Math.floor(v1 / opts.interval);
+            //const r2 = Math.floor(v2 / opts.interval);
+            //return Math.abs(r2 - r1);
+        }
+
+        //same color for all
+        this.color = (side, r, s, zf) => (side.value ? opts.color(side, r, zf) : undefined)
+
+        //width: multiple of
+        this.width = (side, r, s, zf) => side.value * zf * opts.width(side, r, zf)
+    }
+}