gridviz 3.0.35 → 3.0.37

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (67) hide show
  1. package/README.md +129 -129
  2. package/dist/gridviz.js +21056 -17487
  3. package/dist/gridviz.min.js +2 -2
  4. package/package.json +74 -74
  5. package/src/button/Button.js +67 -67
  6. package/src/button/FullscreenButton.js +121 -121
  7. package/src/button/ZoomButtons.js +103 -103
  8. package/src/core/Dataset.js +232 -154
  9. package/src/core/Drawable.js +78 -78
  10. package/src/core/GeoCanvas.js +443 -443
  11. package/src/core/Layer.js +23 -23
  12. package/src/core/Legend.js +108 -108
  13. package/src/core/Map.js +650 -568
  14. package/src/core/MultiResolutionDataset.js +93 -93
  15. package/src/core/Style.js +98 -98
  16. package/src/core/Tooltip.js +182 -182
  17. package/src/dataset/COGeo.js +25 -25
  18. package/src/dataset/CSVGrid.js +112 -112
  19. package/src/dataset/GeoTIFF.js +122 -122
  20. package/src/dataset/JSGrid.js +55 -55
  21. package/src/dataset/TiledGrid.js +311 -302
  22. package/src/dataset/worker.js +18 -18
  23. package/src/index.js +79 -79
  24. package/src/layer/BackgroundLayer.js +173 -173
  25. package/src/layer/BackgroundLayerImage.js +81 -81
  26. package/src/layer/BackgroundLayerWMS.js +104 -104
  27. package/src/layer/GeoJSONLayer.js +276 -276
  28. package/src/layer/GridLayer.js +166 -166
  29. package/src/layer/LabelLayer.js +194 -194
  30. package/src/legend/ColorCategoryLegend.js +109 -109
  31. package/src/legend/ColorDiscreteLegend.js +100 -100
  32. package/src/legend/ColorLegend.js +115 -115
  33. package/src/legend/OrientationLegend.js +89 -89
  34. package/src/legend/SizeLegend.js +224 -224
  35. package/src/legend/TernaryLegend.js +302 -302
  36. package/src/style/CompositionStyle.js +291 -291
  37. package/src/style/DotDensityStyle.js +133 -133
  38. package/src/style/ImageStyle.js +100 -100
  39. package/src/style/Interpolator.js +258 -258
  40. package/src/style/IsoFenceStyle.js +217 -217
  41. package/src/style/JoyPlotStyle.js +180 -180
  42. package/src/style/LegoStyle.js +132 -132
  43. package/src/style/MosaicStyle.js +99 -99
  44. package/src/style/NinjaStarStyle.js +102 -102
  45. package/src/style/PillarStyle.js +207 -207
  46. package/src/style/SegmentStyle.js +105 -105
  47. package/src/style/ShadingRayStyle.js +280 -280
  48. package/src/style/ShadingStyle.js +72 -72
  49. package/src/style/ShapeColorSizeStyle.js +147 -147
  50. package/src/style/SideCategoryStyle.js +112 -112
  51. package/src/style/SideStyle.js +217 -217
  52. package/src/style/SideTanakaStyle.js +154 -154
  53. package/src/style/SquareColorCategoryWebGLStyle.js +311 -294
  54. package/src/style/SquareColorWebGLStyle.js +126 -126
  55. package/src/style/StrokeStyle.js +135 -135
  56. package/src/style/TextStyle.js +110 -110
  57. package/src/style/TimeSeriesStyle.js +222 -222
  58. package/src/utils/WebGLRectangleColoring.js +106 -106
  59. package/src/utils/WebGLSquareColoring.js +114 -118
  60. package/src/utils/WebGLSquareColoringAdvanced.js +223 -227
  61. package/src/utils/WebGLSquareColoringKS.js +153 -153
  62. package/src/utils/scale.js +255 -255
  63. package/src/utils/stretching.js +120 -120
  64. package/src/utils/ternary.js +208 -208
  65. package/src/utils/utils.js +125 -125
  66. package/src/utils/webGLUtils.js +178 -73
  67. package/src/utils/zoomUtils.js +142 -142
@@ -1,255 +1,255 @@
1
- //@ts-check
2
- 'use strict'
3
-
4
- import { extent, max } from 'd3-array'
5
- import { scaleQuantile } from 'd3-scale'
6
-
7
- /**
8
- * A scale is simply a function that map a domain to a range.
9
- * @typedef {function(number):number} Scale */
10
-
11
- /**
12
- * A scale whose range is a color (string).
13
- * @typedef {function(number):string} ColorScale */
14
-
15
- /**
16
- * @module utils
17
- */
18
-
19
- /**
20
- * Generic function for view scale - continuous or discrete
21
- *
22
- * @param {{ valueFunction:function(import("../core/Dataset").Cell):number, minValue?:number, minSizePix?:number, maxSizeFactor?:number, range?:[number, number], domain?:[number, number], stretching?:function(number):number, classNumber?:number}} opts
23
- * @returns {function(Array.<import("../core/Dataset").Cell>):Scale}
24
- */
25
- export const viewScale = (opts) => {
26
- const valueFunction = opts.valueFunction
27
- const minValue = opts.minValue || 0
28
- const minSizePix = opts.minSizePix || 0
29
- const maxSizeFactor = opts.maxSizeFactor || 1
30
- const stretching = opts.stretching
31
- const range_ = opts.range
32
- const domain_ = opts.domain
33
- const classNumber = opts.classNumber
34
- return (cells, resolution, z) => {
35
- const domain = domain_ || [minValue, max(cells, valueFunction)]
36
- const range = range_ || [minSizePix * z, resolution * maxSizeFactor]
37
- const domainSize = domain[1] - domain[0],
38
- domainMin = domain[0]
39
- const rangeSize = range[1] - range[0],
40
- rangeMin = range[0]
41
- return (t) => {
42
- //scale to [0,1]
43
- t = (t - domainMin) / domainSize
44
- //stretch
45
- if (stretching) t = stretching(t)
46
- //classify
47
- if (classNumber) t = t == 1 ? 1 : Math.floor(t * classNumber) / (classNumber - 1)
48
- //scale to range
49
- return rangeMin + t * rangeSize
50
- }
51
- }
52
- }
53
-
54
- /**
55
- * Generic function for view scale - quantile
56
- *
57
- * @param {{ valueFunction:function(import("../core/Dataset").Cell):number, classNumber?:number, minSizePix?:number, maxSizeFactor?:number }} opts
58
- * @returns {function(Array.<import("../core/Dataset").Cell>):Scale}
59
- */
60
- export const viewScaleQuantile = (opts) => {
61
- const valueFunction = opts.valueFunction
62
- const classNumber = opts.classNumber || 12
63
- const minSizePix = opts.minSizePix || 1
64
- const maxSizeFactor = opts.maxSizeFactor || 1
65
- const scale = scaleQuantile()
66
- return (cells, resolution, z) => {
67
- scale.domain(cells.map(valueFunction))
68
- const minSizeGeo = minSizePix * z,
69
- maxSizeGeo = resolution * maxSizeFactor
70
- scale.range(
71
- Array.from(
72
- { length: classNumber },
73
- (_, i) => minSizeGeo + (i * (maxSizeGeo - minSizeGeo)) / (classNumber - 1)
74
- )
75
- )
76
- scale.breaks = scale.quantiles()
77
- scale.values = scale.range()
78
- return scale
79
- }
80
- }
81
-
82
- /**
83
- * Generic function for color view scale - continuous or discrete
84
- *
85
- * @param {{ valueFunction:function(import("../core/Dataset").Cell):number, colorScale?:function(number):string, colors?:Array.<string>, stretching?:function(number):number }} opts
86
- * @returns {function(Array.<import("../core/Dataset").Cell>):ColorScale}
87
- */
88
- export const viewScaleColor = (opts) => {
89
- const valueFunction = opts.valueFunction
90
- const stretching = opts.stretching
91
- let colorScale = opts.colorScale || (() => 'purple')
92
-
93
- //discrete colors case: build continuous color scale from discrete ones.
94
- const nbClass = opts.colors?.length
95
- if (opts.colors && nbClass)
96
- colorScale = (t) => opts.colors[t == 1 ? nbClass - 1 : Math.floor(t * nbClass)]
97
-
98
- return (cells) => {
99
- if (cells.length == 0 || !cells) return
100
- /** @type {[undefined, undefined] | [number, number]} */
101
- const domain = extent(cells, valueFunction)
102
- if (domain[0] == undefined) return
103
- const domainSize = domain[1] - domain[0]
104
- const scale = (t) => {
105
- //scale to [0,1]
106
- t = (t - domain[0]) / domainSize
107
- //stretch
108
- if (stretching) t = stretching(t)
109
- return colorScale(t)
110
- }
111
- //function that return the domain value from the [0,1] range.
112
- scale.invert = (t) => {
113
- if (stretching) t = stretching.invert(t)
114
- return domain[0] + t * domainSize
115
- }
116
- //discrete colors: return the breaks
117
- if (opts.colors && nbClass) {
118
- scale.breaks = []
119
- for (let i = 1; i < nbClass; i++) scale.breaks.push(scale.invert(i / nbClass))
120
- }
121
-
122
- return scale
123
- }
124
- }
125
-
126
- /**
127
- * Generic function for color view scale - quantile
128
- *
129
- * @param {{ valueFunction:function(import("../core/Dataset").Cell):number, classNumber?:number, colors?:Array.<string>, colorScale?:function(number):string }} opts
130
- * @returns {function(Array.<import("../core/Dataset").Cell>):ColorScale}
131
- */
132
- export const viewScaleColorQuantile = (opts) => {
133
- const valueFunction = opts.valueFunction
134
- const classNumber = opts.classNumber || 12
135
-
136
- let colors = opts.colors
137
- if (opts.colorScale) colors = discreteColors(opts.colorScale, classNumber)
138
- colors =
139
- colors ||
140
- Array.from(
141
- { length: classNumber },
142
- (_, i) => 'rgb(' + Math.floor((255 * i) / (classNumber - 1)) + ',150,150)'
143
- )
144
-
145
- const scale = scaleQuantile().range(colors)
146
- return (cells) => {
147
- scale.domain(cells.map(valueFunction))
148
- scale.breaks = scale.quantiles()
149
- scale.colors = colors
150
- return scale
151
- }
152
- }
153
-
154
-
155
- /**
156
- * Generic function for view scale quantile classifier
157
- *
158
- * @param {{ valueFunction:function(import("../core/Dataset").Cell):number, classNumber?:number }} opts
159
- * @returns {function(Array.<import("../core/Dataset").Cell>):ColorScale}
160
- */
161
- export const viewScaleQuantileClassifer = (opts) => {
162
- const valueFunction = opts.valueFunction // the function that return the cell value from a cell
163
- const classNumber = opts.classNumber || 12 // the class number
164
-
165
- const scale = scaleQuantile().range(Array.from( { length: classNumber }, (_, i) => i ))
166
- return (cells) => {
167
- scale.domain(cells.map(valueFunction))
168
- scale.breaks = scale.quantiles()
169
- return scale
170
- }
171
- }
172
-
173
-
174
-
175
-
176
- /**
177
- * Combine view scale functions
178
- *
179
- * @param {*} obj
180
- * @returns {function}
181
- */
182
- export const viewScaleCombination = (obj) => {
183
- //obj: prop and a function to call
184
- return (cells, resolution, z) => {
185
- const out = {}
186
- for (const p in obj) {
187
- out[p] = obj[p](cells, resolution, z)
188
- }
189
- return out
190
- }
191
- }
192
-
193
-
194
- /**
195
- * Return a classifier function from break values.
196
- * The classifier function returns the class id (from 0 to breaks.length) from a value to classifiy.
197
- * @param {Array.<number>} breaks the breaks
198
- */
199
- export function classifier(breaks) {
200
- const bl = breaks.length
201
- const classifier = (value) => {
202
- let i = 0
203
- while (i < bl) {
204
- const break_ = breaks[i]
205
- if (value <= break_) return i
206
- i++
207
- }
208
- return i
209
- }
210
- classifier.breaks = breaks
211
- return classifier
212
- }
213
-
214
- /**
215
- * @param {number} min
216
- * @param {number} max
217
- * @param {number} nbClass
218
- */
219
- export function classifierMinMax(min, max, nbClass) {
220
- const breaks = []
221
- const step = (max - min) / nbClass
222
- for (let i = 1; i < nbClass; i++) breaks.push(min + i * step)
223
- return classifier(breaks)
224
- }
225
-
226
-
227
-
228
- /**
229
- * Return a color classifier function from break values.
230
- * The classifier function returns the color from a value to classifiy.
231
- * There should be one color more than break values.
232
- * @param {Array.<number>} breaks the breaks
233
- * @param {Array.<string>} colors the colors
234
- */
235
- export function colorClassifier(breaks, colors) {
236
- const classifier_ = classifier(breaks)
237
- const colorClassifier = (value) => colors[classifier_(value)]
238
- colorClassifier.breaks = breaks
239
- colorClassifier.colors = colors
240
- return colorClassifier
241
- }
242
-
243
- /**
244
- * Make array of colors from a colorScale.
245
- * It is a kind of sampling, or un-interpolation
246
- *
247
- * @param {function(number):string} colorScale
248
- * @param {number} nb
249
- */
250
- export function discreteColors(colorScale, nb) {
251
- if (nb == 1) return [colorScale(0.5)]
252
- const out = []
253
- for (let i = 0; i < nb; i++) out.push(colorScale(i / (nb - 1)))
254
- return out
255
- }
1
+ //@ts-check
2
+ 'use strict'
3
+
4
+ import { extent, max } from 'd3-array'
5
+ import { scaleQuantile } from 'd3-scale'
6
+
7
+ /**
8
+ * A scale is simply a function that map a domain to a range.
9
+ * @typedef {function(number):number} Scale */
10
+
11
+ /**
12
+ * A scale whose range is a color (string).
13
+ * @typedef {function(number):string} ColorScale */
14
+
15
+ /**
16
+ * @module utils
17
+ */
18
+
19
+ /**
20
+ * Generic function for view scale - continuous or discrete
21
+ *
22
+ * @param {{ valueFunction:function(import("../core/Dataset").Cell):number, minValue?:number, minSizePix?:number, maxSizeFactor?:number, range?:[number, number], domain?:[number, number], stretching?:function(number):number, classNumber?:number}} opts
23
+ * @returns {function(Array.<import("../core/Dataset").Cell>):Scale}
24
+ */
25
+ export const viewScale = (opts) => {
26
+ const valueFunction = opts.valueFunction
27
+ const minValue = opts.minValue || 0
28
+ const minSizePix = opts.minSizePix || 0
29
+ const maxSizeFactor = opts.maxSizeFactor || 1
30
+ const stretching = opts.stretching
31
+ const range_ = opts.range
32
+ const domain_ = opts.domain
33
+ const classNumber = opts.classNumber
34
+ return (cells, resolution, z) => {
35
+ const domain = domain_ || [minValue, max(cells, valueFunction)]
36
+ const range = range_ || [minSizePix * z, resolution * maxSizeFactor]
37
+ const domainSize = domain[1] - domain[0],
38
+ domainMin = domain[0]
39
+ const rangeSize = range[1] - range[0],
40
+ rangeMin = range[0]
41
+ return (t) => {
42
+ //scale to [0,1]
43
+ t = (t - domainMin) / domainSize
44
+ //stretch
45
+ if (stretching) t = stretching(t)
46
+ //classify
47
+ if (classNumber) t = t == 1 ? 1 : Math.floor(t * classNumber) / (classNumber - 1)
48
+ //scale to range
49
+ return rangeMin + t * rangeSize
50
+ }
51
+ }
52
+ }
53
+
54
+ /**
55
+ * Generic function for view scale - quantile
56
+ *
57
+ * @param {{ valueFunction:function(import("../core/Dataset").Cell):number, classNumber?:number, minSizePix?:number, maxSizeFactor?:number }} opts
58
+ * @returns {function(Array.<import("../core/Dataset").Cell>):Scale}
59
+ */
60
+ export const viewScaleQuantile = (opts) => {
61
+ const valueFunction = opts.valueFunction
62
+ const classNumber = opts.classNumber || 12
63
+ const minSizePix = opts.minSizePix || 1
64
+ const maxSizeFactor = opts.maxSizeFactor || 1
65
+ const scale = scaleQuantile()
66
+ return (cells, resolution, z) => {
67
+ scale.domain(cells.map(valueFunction))
68
+ const minSizeGeo = minSizePix * z,
69
+ maxSizeGeo = resolution * maxSizeFactor
70
+ scale.range(
71
+ Array.from(
72
+ { length: classNumber },
73
+ (_, i) => minSizeGeo + (i * (maxSizeGeo - minSizeGeo)) / (classNumber - 1)
74
+ )
75
+ )
76
+ scale.breaks = scale.quantiles()
77
+ scale.values = scale.range()
78
+ return scale
79
+ }
80
+ }
81
+
82
+ /**
83
+ * Generic function for color view scale - continuous or discrete
84
+ *
85
+ * @param {{ valueFunction:function(import("../core/Dataset").Cell):number, colorScale?:function(number):string, colors?:Array.<string>, stretching?:function(number):number }} opts
86
+ * @returns {function(Array.<import("../core/Dataset").Cell>):ColorScale}
87
+ */
88
+ export const viewScaleColor = (opts) => {
89
+ const valueFunction = opts.valueFunction
90
+ const stretching = opts.stretching
91
+ let colorScale = opts.colorScale || (() => 'purple')
92
+
93
+ //discrete colors case: build continuous color scale from discrete ones.
94
+ const nbClass = opts.colors?.length
95
+ if (opts.colors && nbClass)
96
+ colorScale = (t) => opts.colors[t == 1 ? nbClass - 1 : Math.floor(t * nbClass)]
97
+
98
+ return (cells) => {
99
+ if (cells.length == 0 || !cells) return
100
+ /** @type {[undefined, undefined] | [number, number]} */
101
+ const domain = extent(cells, valueFunction)
102
+ if (domain[0] == undefined) return
103
+ const domainSize = domain[1] - domain[0]
104
+ const scale = (t) => {
105
+ //scale to [0,1]
106
+ t = (t - domain[0]) / domainSize
107
+ //stretch
108
+ if (stretching) t = stretching(t)
109
+ return colorScale(t)
110
+ }
111
+ //function that return the domain value from the [0,1] range.
112
+ scale.invert = (t) => {
113
+ if (stretching) t = stretching.invert(t)
114
+ return domain[0] + t * domainSize
115
+ }
116
+ //discrete colors: return the breaks
117
+ if (opts.colors && nbClass) {
118
+ scale.breaks = []
119
+ for (let i = 1; i < nbClass; i++) scale.breaks.push(scale.invert(i / nbClass))
120
+ }
121
+
122
+ return scale
123
+ }
124
+ }
125
+
126
+ /**
127
+ * Generic function for color view scale - quantile
128
+ *
129
+ * @param {{ valueFunction:function(import("../core/Dataset").Cell):number, classNumber?:number, colors?:Array.<string>, colorScale?:function(number):string }} opts
130
+ * @returns {function(Array.<import("../core/Dataset").Cell>):ColorScale}
131
+ */
132
+ export const viewScaleColorQuantile = (opts) => {
133
+ const valueFunction = opts.valueFunction
134
+ const classNumber = opts.classNumber || 12
135
+
136
+ let colors = opts.colors
137
+ if (opts.colorScale) colors = discreteColors(opts.colorScale, classNumber)
138
+ colors =
139
+ colors ||
140
+ Array.from(
141
+ { length: classNumber },
142
+ (_, i) => 'rgb(' + Math.floor((255 * i) / (classNumber - 1)) + ',150,150)'
143
+ )
144
+
145
+ const scale = scaleQuantile().range(colors)
146
+ return (cells) => {
147
+ scale.domain(cells.map(valueFunction))
148
+ scale.breaks = scale.quantiles()
149
+ scale.colors = colors
150
+ return scale
151
+ }
152
+ }
153
+
154
+
155
+ /**
156
+ * Generic function for view scale quantile classifier
157
+ *
158
+ * @param {{ valueFunction:function(import("../core/Dataset").Cell):number, classNumber?:number }} opts
159
+ * @returns {function(Array.<import("../core/Dataset").Cell>):ColorScale}
160
+ */
161
+ export const viewScaleQuantileClassifer = (opts) => {
162
+ const valueFunction = opts.valueFunction // the function that return the cell value from a cell
163
+ const classNumber = opts.classNumber || 12 // the class number
164
+
165
+ const scale = scaleQuantile().range(Array.from( { length: classNumber }, (_, i) => i ))
166
+ return (cells) => {
167
+ scale.domain(cells.map(valueFunction))
168
+ scale.breaks = scale.quantiles()
169
+ return scale
170
+ }
171
+ }
172
+
173
+
174
+
175
+
176
+ /**
177
+ * Combine view scale functions
178
+ *
179
+ * @param {*} obj
180
+ * @returns {function}
181
+ */
182
+ export const viewScaleCombination = (obj) => {
183
+ //obj: prop and a function to call
184
+ return (cells, resolution, z) => {
185
+ const out = {}
186
+ for (const p in obj) {
187
+ out[p] = obj[p](cells, resolution, z)
188
+ }
189
+ return out
190
+ }
191
+ }
192
+
193
+
194
+ /**
195
+ * Return a classifier function from break values.
196
+ * The classifier function returns the class id (from 0 to breaks.length) from a value to classifiy.
197
+ * @param {Array.<number>} breaks the breaks
198
+ */
199
+ export function classifier(breaks) {
200
+ const bl = breaks.length
201
+ const classifier = (value) => {
202
+ let i = 0
203
+ while (i < bl) {
204
+ const break_ = breaks[i]
205
+ if (value <= break_) return i
206
+ i++
207
+ }
208
+ return i
209
+ }
210
+ classifier.breaks = breaks
211
+ return classifier
212
+ }
213
+
214
+ /**
215
+ * @param {number} min
216
+ * @param {number} max
217
+ * @param {number} nbClass
218
+ */
219
+ export function classifierMinMax(min, max, nbClass) {
220
+ const breaks = []
221
+ const step = (max - min) / nbClass
222
+ for (let i = 1; i < nbClass; i++) breaks.push(min + i * step)
223
+ return classifier(breaks)
224
+ }
225
+
226
+
227
+
228
+ /**
229
+ * Return a color classifier function from break values.
230
+ * The classifier function returns the color from a value to classifiy.
231
+ * There should be one color more than break values.
232
+ * @param {Array.<number>} breaks the breaks
233
+ * @param {Array.<string>} colors the colors
234
+ */
235
+ export function colorClassifier(breaks, colors) {
236
+ const classifier_ = classifier(breaks)
237
+ const colorClassifier = (value) => colors[classifier_(value)]
238
+ colorClassifier.breaks = breaks
239
+ colorClassifier.colors = colors
240
+ return colorClassifier
241
+ }
242
+
243
+ /**
244
+ * Make array of colors from a colorScale.
245
+ * It is a kind of sampling, or un-interpolation
246
+ *
247
+ * @param {function(number):string} colorScale
248
+ * @param {number} nb
249
+ */
250
+ export function discreteColors(colorScale, nb) {
251
+ if (nb == 1) return [colorScale(0.5)]
252
+ const out = []
253
+ for (let i = 0; i < nb; i++) out.push(colorScale(i / (nb - 1)))
254
+ return out
255
+ }