gridviz 2.0.44 → 2.0.46

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 (54) hide show
  1. package/README.md +119 -119
  2. package/dist/gridviz.js +6938 -6912
  3. package/dist/gridviz.min.js +1 -1
  4. package/package.json +76 -76
  5. package/src/App.js +668 -642
  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 +101 -101
  10. package/src/GeoCanvas.js +420 -420
  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 +172 -172
  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/TiledGrid.js +264 -264
  22. package/src/index.js +177 -176
  23. package/src/legend/ColorCategoryLegend.js +124 -124
  24. package/src/legend/ColorDiscreteLegend.js +103 -103
  25. package/src/legend/ColorLegend.js +124 -124
  26. package/src/legend/SegmentOrientationLegend.js +87 -87
  27. package/src/legend/SegmentWidthLegend.js +97 -97
  28. package/src/legend/SizeLegend.js +141 -141
  29. package/src/style/CompositionStyle.js +300 -300
  30. package/src/style/ContourStyle.js +54 -54
  31. package/src/style/DotDensityStyle.js +156 -156
  32. package/src/style/JoyPlotStyle.js +135 -135
  33. package/src/style/LegoStyle.js +112 -112
  34. package/src/style/MosaicStyle.js +107 -107
  35. package/src/style/NinjaStarStyle.js +124 -124
  36. package/src/style/PillarStyle.js +230 -230
  37. package/src/style/SegmentStyle.js +142 -142
  38. package/src/style/ShapeColorSizeStyle.js +126 -126
  39. package/src/style/SideCatStyle.js +172 -172
  40. package/src/style/SideStyle.js +218 -218
  41. package/src/style/SquareColorCatWGLStyle.js +120 -120
  42. package/src/style/SquareColorWGLStyle.js +146 -146
  43. package/src/style/StrokeStyle.js +131 -131
  44. package/src/style/TanakaStyle.js +160 -160
  45. package/src/style/TextStyle.js +132 -132
  46. package/src/utils/Utils.js +35 -35
  47. package/src/utils/WebGLRectangleColoring.js +106 -106
  48. package/src/utils/WebGLSquareColoring.js +118 -118
  49. package/src/utils/WebGLSquareColoringAdvanced.js +230 -230
  50. package/src/utils/WebGLSquareColoringCatAdvanced.js +133 -133
  51. package/src/utils/WebGLSquareColoringKS.js +153 -153
  52. package/src/utils/stretching.js +131 -131
  53. package/src/utils/webGLUtils.js +71 -71
  54. 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.