gridviz 2.0.38 → 2.0.39

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 (58) hide show
  1. package/README.md +119 -119
  2. package/dist/gridviz.js +7488 -7530
  3. package/dist/gridviz.min.js +1 -1
  4. package/package.json +78 -78
  5. package/src/App.js +698 -698
  6. package/src/BackgroundLayer.js +182 -182
  7. package/src/BackgroundLayerWMS.js +131 -131
  8. package/src/Dataset.js +76 -76
  9. package/src/DatasetComponent.js +103 -103
  10. package/src/GeoCanvas.js +419 -419
  11. package/src/LabelLayer.js +190 -190
  12. package/src/Layer.js +92 -92
  13. package/src/Legend.js +86 -86
  14. package/src/LineLayer.js +150 -150
  15. package/src/Style.js +114 -114
  16. package/src/Tooltip.js +168 -168
  17. package/src/dataset/COGeo.js +24 -24
  18. package/src/dataset/CSVGrid.js +104 -104
  19. package/src/dataset/GeoTIFF.js +127 -127
  20. package/src/dataset/GridTile.js +41 -41
  21. package/src/dataset/ParquetGrid.js +122 -122
  22. package/src/dataset/TiledGrid.js +296 -296
  23. package/src/index.js +177 -177
  24. package/src/legend/ColorCategoryLegend.js +124 -124
  25. package/src/legend/ColorDiscreteLegend.js +105 -105
  26. package/src/legend/ColorLegend.js +125 -125
  27. package/src/legend/SegmentOrientationLegend.js +87 -87
  28. package/src/legend/SegmentWidthLegend.js +97 -97
  29. package/src/legend/SizeLegend.js +141 -141
  30. package/src/style/CompositionStyle.js +300 -300
  31. package/src/style/ContourStyle.js +54 -54
  32. package/src/style/DotDensityStyle.js +156 -156
  33. package/src/style/JoyPlotStyle.js +135 -135
  34. package/src/style/KernelSmoothingOldStyle.js +221 -221
  35. package/src/style/KernelSmoothingStyle.js +115 -115
  36. package/src/style/KernelSmoothingWGLStyle.js +130 -130
  37. package/src/style/LegoStyle.js +112 -112
  38. package/src/style/MosaicStyle.js +107 -107
  39. package/src/style/NinjaStarStyle.js +124 -124
  40. package/src/style/PillarStyle.js +230 -230
  41. package/src/style/SegmentStyle.js +142 -142
  42. package/src/style/ShapeColorSizeStyle.js +126 -126
  43. package/src/style/SideCatStyle.js +172 -172
  44. package/src/style/SideStyle.js +218 -218
  45. package/src/style/SquareColorCatWGLStyle.js +120 -120
  46. package/src/style/SquareColorWGLStyle.js +146 -146
  47. package/src/style/StrokeStyle.js +131 -131
  48. package/src/style/TanakaStyle.js +160 -160
  49. package/src/style/TextStyle.js +132 -132
  50. package/src/utils/Utils.js +35 -35
  51. package/src/utils/WebGLRectangleColoring.js +106 -106
  52. package/src/utils/WebGLSquareColoring.js +118 -118
  53. package/src/utils/WebGLSquareColoringAdvanced.js +230 -230
  54. package/src/utils/WebGLSquareColoringCatAdvanced.js +133 -133
  55. package/src/utils/WebGLSquareColoringKS.js +153 -153
  56. package/src/utils/stretching.js +131 -131
  57. package/src/utils/webGLUtils.js +71 -71
  58. package/src/utils/zoomUtils.js +142 -142
package/README.md CHANGED
@@ -1,119 +1,119 @@
1
- # Gridviz
2
-
3
- ![npm bundle size](https://img.shields.io/bundlephobia/minzip/gridviz)
4
- ![npm](https://img.shields.io/npm/v/gridviz)
5
- ![license](https://img.shields.io/badge/license-EUPL-success)
6
-
7
- [Gridviz](https://github.com/eurostat/gridviz/) is a JavaScript library to visualise gridded data (or any tabular dataset with x/y position) in the browser in a large variety of advanced cartographic styles. Unlike traditional raster-based web mapping tools, [Gridviz](https://github.com/eurostat/gridviz/) renders everything client-side, on the fly.
8
-
9
- [![](/docs/img/overviews/ov_accessibility.png)](https://eurostat.github.io/gridviz/docs/reference#shapecolorsize-style)
10
- [![](/docs/img/overviews/ov_side_cat.png)](https://eurostat.github.io/gridviz/docs/reference#side-category-style)
11
- [![](/docs/img/overviews/ov_age_balance.png)](https://eurostat.github.io/gridviz/docs/reference#shapecolorsize-style)
12
- [![shadow effect map](/docs/img/overviews/ov_choco.png)](https://eurostat.github.io/gridviz/docs/reference#side-style)
13
- [![](/docs/img/overviews/ov_dark.png)](https://eurostat.github.io/gridviz/docs/reference#square-color-webgl-style)
14
- [![](/docs/img/overviews/ov_kersmoo.png)](https://eurostat.github.io/gridviz/docs/reference#kernel-smoothing)
15
- [![](/docs/img/overviews/ov_pillar_simple.png)](https://eurostat.github.io/gridviz/docs/reference#pillars-style)
16
- [![](/docs/img/overviews/ov_donut.png)](https://eurostat.github.io/gridviz/docs/reference#shapecolorsize-style)
17
- [![tanaka style map](/docs/img/overviews/ov_tanaka_dark.png)](https://eurostat.github.io/gridviz/docs/reference#tanaka-style)
18
- [![](/docs/img/overviews/ov_flag.png)](https://eurostat.github.io/gridviz/docs/reference#composition-style)
19
- [![joyplot map](/docs/img/overviews/ov_joyplot_shade.png)](https://eurostat.github.io/gridviz/docs/reference#joyplot-style)
20
- [![lego map](/docs/img/overviews/ov_lego.png)](https://eurostat.github.io/gridviz/docs/reference#lego-style)
21
- [![mosaic map](/docs/img/overviews/ov_mosaic.png)](https://eurostat.github.io/gridviz/docs/reference#mosaic-style)
22
- [![](/docs/img/overviews/ov_piechart.png)](https://eurostat.github.io/gridviz/docs/reference#composition-style)
23
- [![](/docs/img/overviews/ov_pillar.png)](https://eurostat.github.io/gridviz/docs/reference#pillars-style)
24
- [![](/docs/img/overviews/ov_text_elevation.png)](https://eurostat.github.io/gridviz/docs/reference#text-style)
25
- [![dot density map](/docs/img/overviews/ov_dotdensity_random.png)](https://eurostat.github.io/gridviz/docs/reference#dot-density-style)
26
- [![](/docs/img/overviews/ov_popchange.png)](https://eurostat.github.io/gridviz/docs/reference#shapecolorsize-style)
27
- [![](/docs/img/overviews/ov_ring.png)](https://eurostat.github.io/gridviz/docs/reference#composition-style)
28
- [![](/docs/img/overviews/ov_segment.png)](https://eurostat.github.io/gridviz/docs/reference#segment-style)
29
- [![tanaka style map](/docs/img/overviews/ov_tanaka.png)](https://eurostat.github.io/gridviz/docs/reference#tanaka-style)
30
- [![dot density map](/docs/img/overviews/ov_dotdensity.png)](https://eurostat.github.io/gridviz/docs/reference#dot-density-style)
31
- [![joyplot map](/docs/img/overviews/ov_joyplot.png)](https://eurostat.github.io/gridviz/docs/reference#joyplot-style)
32
-
33
- ## Examples
34
-
35
- - [Europe - 1km resolution - GEOSTAT/GISCO](https://eurostat.github.io/gridviz/examples/EUR.html)
36
- - [France - 200m resolution - INSEE Filosofi](https://eurostat.github.io/gridviz/examples/FR.html)
37
- - [Croatia - 1km resolution - DZS 2015 grid](https://eurostat.github.io/gridviz/examples/HR.html)
38
- - [France population, dark style](https://eurostat.github.io/gridviz/examples/styles/squarecolorwgl_dark.html)
39
- - [Europe population as a mosaic](https://eurostat.github.io/gridviz/examples/styles/mosaic_full.html)
40
-
41
- ## Installation
42
-
43
- ### Node.js
44
-
45
- ```Shell
46
- npm install gridviz
47
- ```
48
-
49
- then
50
-
51
- ```javascript
52
- import * as gridviz from 'gridviz'
53
- ```
54
-
55
- Or you can cherry-pick only the modules that you need, for example:
56
-
57
- ```javascript
58
- import { App, SquareColorWGLStyle } from 'gridviz'
59
- ```
60
-
61
- ### Basic example
62
-
63
- Here’s a basic example that loads a CSV file of a European population grid (5km resolution):
64
-
65
- ```javascript
66
- let myApp = new gridviz.App(containerDiv)
67
- //set position and zoom
68
- .setGeoCenter({ x: 4500000, y: 2900000 })
69
- .setZoomFactor(3000)
70
- //add CSV layer
71
- .addCSVGridLayer(
72
- //data URL
73
- 'https://raw.githubusercontent.com/eurostat/gridviz/master/assets/csv/Europe/pop_2018_5km.csv',
74
- //resolution, in CRS unit (m)
75
- 5000,
76
- //the style
77
- [
78
- new gridviz.SquareColorWGLStyle({
79
- //the CSV column to show
80
- colorCol: 'Population',
81
- //value to [0,1] mapping function
82
- tFun: (value) => gridviz.sExp(Math.min(value / 100000, 1), -15),
83
- }),
84
- ]
85
- )
86
- ```
87
-
88
- See the **[documentation page](https://eurostat.github.io/gridviz/docs/reference)** for more information.
89
-
90
- ### standalone
91
-
92
- ```javascript
93
- <script src="https://unpkg.com/gridviz/dist/gridviz.min.js"></script>
94
- ```
95
-
96
- ## Documentation
97
-
98
- See the **[API reference](https://eurostat.github.io/gridviz/docs/reference)**.
99
-
100
- ## About
101
-
102
- | | |
103
- | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
104
- | _contributors_ | [<img src="https://github.com/jgaffuri.png" height="40" />](https://github.com/jgaffuri) [<img src="https://github.com/JoeWDavies.png" height="40" />](https://github.com/JoeWDavies) |
105
- | _version_ | See [npm](https://www.npmjs.com/package/gridviz?activeTab=versions) |
106
- | _status_ | Since 2020 |
107
- | _license_ | [EUPL 1.2](LICENSE) |
108
-
109
- ### Support and contribution
110
-
111
- Feel free to [ask support](https://github.com/eurostat/gridviz/issues/new), fork the project or simply star it (it's always a pleasure).
112
-
113
- ### Copyright
114
-
115
- The [Eurostat NUTS dataset](http://ec.europa.eu/eurostat/web/nuts/overview) is copyrighted. There are [specific provisions](https://ec.europa.eu/eurostat/web/gisco/geodata/reference-data/administrative-units-statistical-units) for the usage of this dataset which must be respected. The usage of these data is subject to their acceptance. See the [Eurostat-GISCO website](http://ec.europa.eu/eurostat/web/gisco/geodata/reference-data/administrative-units-statistical-units/nuts) for more information.
116
-
117
- ### Disclaimer
118
-
119
- The designations employed and the presentation of material on these maps do not imply the expression of any opinion whatsoever on the part of the European Union concerning the legal status of any country, territory, city or area or of its authorities, or concerning the delimitation of its frontiers or boundaries. Kosovo*: This designation is without prejudice to positions on status, and is in line with UNSCR 1244/1999 and the ICJ Opinion on the Kosovo declaration of independence. Palestine*: This designation shall not be construed as recognition of a State of Palestine and is without prejudice to the individual positions of the Member States on this issue.
1
+ # Gridviz
2
+
3
+ ![npm bundle size](https://img.shields.io/bundlephobia/minzip/gridviz)
4
+ ![npm](https://img.shields.io/npm/v/gridviz)
5
+ ![license](https://img.shields.io/badge/license-EUPL-success)
6
+
7
+ [Gridviz](https://github.com/eurostat/gridviz/) is a JavaScript library to visualise gridded data (or any tabular dataset with x/y position) in the browser in a large variety of advanced cartographic styles. Unlike traditional raster-based web mapping tools, [Gridviz](https://github.com/eurostat/gridviz/) renders everything client-side, on the fly.
8
+
9
+ [![](/docs/img/overviews/ov_accessibility.png)](https://eurostat.github.io/gridviz/docs/reference#shapecolorsize-style)
10
+ [![](/docs/img/overviews/ov_side_cat.png)](https://eurostat.github.io/gridviz/docs/reference#side-category-style)
11
+ [![](/docs/img/overviews/ov_age_balance.png)](https://eurostat.github.io/gridviz/docs/reference#shapecolorsize-style)
12
+ [![shadow effect map](/docs/img/overviews/ov_choco.png)](https://eurostat.github.io/gridviz/docs/reference#side-style)
13
+ [![](/docs/img/overviews/ov_dark.png)](https://eurostat.github.io/gridviz/docs/reference#square-color-webgl-style)
14
+ [![](/docs/img/overviews/ov_kersmoo.png)](https://eurostat.github.io/gridviz/docs/reference#kernel-smoothing)
15
+ [![](/docs/img/overviews/ov_pillar_simple.png)](https://eurostat.github.io/gridviz/docs/reference#pillars-style)
16
+ [![](/docs/img/overviews/ov_donut.png)](https://eurostat.github.io/gridviz/docs/reference#shapecolorsize-style)
17
+ [![tanaka style map](/docs/img/overviews/ov_tanaka_dark.png)](https://eurostat.github.io/gridviz/docs/reference#tanaka-style)
18
+ [![](/docs/img/overviews/ov_flag.png)](https://eurostat.github.io/gridviz/docs/reference#composition-style)
19
+ [![joyplot map](/docs/img/overviews/ov_joyplot_shade.png)](https://eurostat.github.io/gridviz/docs/reference#joyplot-style)
20
+ [![lego map](/docs/img/overviews/ov_lego.png)](https://eurostat.github.io/gridviz/docs/reference#lego-style)
21
+ [![mosaic map](/docs/img/overviews/ov_mosaic.png)](https://eurostat.github.io/gridviz/docs/reference#mosaic-style)
22
+ [![](/docs/img/overviews/ov_piechart.png)](https://eurostat.github.io/gridviz/docs/reference#composition-style)
23
+ [![](/docs/img/overviews/ov_pillar.png)](https://eurostat.github.io/gridviz/docs/reference#pillars-style)
24
+ [![](/docs/img/overviews/ov_text_elevation.png)](https://eurostat.github.io/gridviz/docs/reference#text-style)
25
+ [![dot density map](/docs/img/overviews/ov_dotdensity_random.png)](https://eurostat.github.io/gridviz/docs/reference#dot-density-style)
26
+ [![](/docs/img/overviews/ov_popchange.png)](https://eurostat.github.io/gridviz/docs/reference#shapecolorsize-style)
27
+ [![](/docs/img/overviews/ov_ring.png)](https://eurostat.github.io/gridviz/docs/reference#composition-style)
28
+ [![](/docs/img/overviews/ov_segment.png)](https://eurostat.github.io/gridviz/docs/reference#segment-style)
29
+ [![tanaka style map](/docs/img/overviews/ov_tanaka.png)](https://eurostat.github.io/gridviz/docs/reference#tanaka-style)
30
+ [![dot density map](/docs/img/overviews/ov_dotdensity.png)](https://eurostat.github.io/gridviz/docs/reference#dot-density-style)
31
+ [![joyplot map](/docs/img/overviews/ov_joyplot.png)](https://eurostat.github.io/gridviz/docs/reference#joyplot-style)
32
+
33
+ ## Examples
34
+
35
+ - [Europe - 1km resolution - GEOSTAT/GISCO](https://eurostat.github.io/gridviz/examples/EUR.html)
36
+ - [France - 200m resolution - INSEE Filosofi](https://eurostat.github.io/gridviz/examples/FR.html)
37
+ - [Croatia - 1km resolution - DZS 2015 grid](https://eurostat.github.io/gridviz/examples/HR.html)
38
+ - [France population, dark style](https://eurostat.github.io/gridviz/examples/styles/squarecolorwgl_dark.html)
39
+ - [Europe population as a mosaic](https://eurostat.github.io/gridviz/examples/styles/mosaic_full.html)
40
+
41
+ ## Installation
42
+
43
+ ### Node.js
44
+
45
+ ```Shell
46
+ npm install gridviz
47
+ ```
48
+
49
+ then
50
+
51
+ ```javascript
52
+ import * as gridviz from 'gridviz'
53
+ ```
54
+
55
+ Or you can cherry-pick only the modules that you need, for example:
56
+
57
+ ```javascript
58
+ import { App, SquareColorWGLStyle } from 'gridviz'
59
+ ```
60
+
61
+ ### Basic example
62
+
63
+ Here’s a basic example that loads a CSV file of a European population grid (5km resolution):
64
+
65
+ ```javascript
66
+ let myApp = new gridviz.App(containerDiv)
67
+ //set position and zoom
68
+ .setGeoCenter({ x: 4500000, y: 2900000 })
69
+ .setZoomFactor(3000)
70
+ //add CSV layer
71
+ .addCSVGridLayer(
72
+ //data URL
73
+ 'https://raw.githubusercontent.com/eurostat/gridviz/master/assets/csv/Europe/pop_2018_5km.csv',
74
+ //resolution, in CRS unit (m)
75
+ 5000,
76
+ //the style
77
+ [
78
+ new gridviz.SquareColorWGLStyle({
79
+ //the CSV column to show
80
+ colorCol: 'Population',
81
+ //value to [0,1] mapping function
82
+ tFun: (value) => gridviz.sExp(Math.min(value / 100000, 1), -15),
83
+ }),
84
+ ]
85
+ )
86
+ ```
87
+
88
+ See the **[documentation page](https://eurostat.github.io/gridviz/docs/reference)** for more information.
89
+
90
+ ### standalone
91
+
92
+ ```javascript
93
+ <script src="https://unpkg.com/gridviz/dist/gridviz.min.js"></script>
94
+ ```
95
+
96
+ ## Documentation
97
+
98
+ See the **[API reference](https://eurostat.github.io/gridviz/docs/reference)**.
99
+
100
+ ## About
101
+
102
+ | | |
103
+ | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
104
+ | _contributors_ | [<img src="https://github.com/jgaffuri.png" height="40" />](https://github.com/jgaffuri) [<img src="https://github.com/JoeWDavies.png" height="40" />](https://github.com/JoeWDavies) |
105
+ | _version_ | See [npm](https://www.npmjs.com/package/gridviz?activeTab=versions) |
106
+ | _status_ | Since 2020 |
107
+ | _license_ | [EUPL 1.2](LICENSE) |
108
+
109
+ ### Support and contribution
110
+
111
+ Feel free to [ask support](https://github.com/eurostat/gridviz/issues/new), fork the project or simply star it (it's always a pleasure).
112
+
113
+ ### Copyright
114
+
115
+ The [Eurostat NUTS dataset](http://ec.europa.eu/eurostat/web/nuts/overview) is copyrighted. There are [specific provisions](https://ec.europa.eu/eurostat/web/gisco/geodata/reference-data/administrative-units-statistical-units) for the usage of this dataset which must be respected. The usage of these data is subject to their acceptance. See the [Eurostat-GISCO website](http://ec.europa.eu/eurostat/web/gisco/geodata/reference-data/administrative-units-statistical-units/nuts) for more information.
116
+
117
+ ### Disclaimer
118
+
119
+ The designations employed and the presentation of material on these maps do not imply the expression of any opinion whatsoever on the part of the European Union concerning the legal status of any country, territory, city or area or of its authorities, or concerning the delimitation of its frontiers or boundaries. Kosovo*: This designation is without prejudice to positions on status, and is in line with UNSCR 1244/1999 and the ICJ Opinion on the Kosovo declaration of independence. Palestine*: This designation shall not be construed as recognition of a State of Palestine and is without prejudice to the individual positions of the Member States on this issue.