gridviz 2.1.8 → 2.1.9

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 (57) hide show
  1. package/README.md +125 -125
  2. package/dist/gridviz.js +8021 -8013
  3. package/dist/gridviz.min.js +1 -1
  4. package/package.json +77 -77
  5. package/src/App.js +705 -705
  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 +103 -103
  13. package/src/Legend.js +86 -86
  14. package/src/LineLayer.js +150 -150
  15. package/src/Style.js +129 -129
  16. package/src/Tooltip.js +180 -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/LGrid.js +54 -54
  22. package/src/dataset/TiledGrid.js +264 -264
  23. package/src/index.js +71 -71
  24. package/src/legend/ColorCategoryLegend.js +124 -124
  25. package/src/legend/ColorDiscreteLegend.js +103 -103
  26. package/src/legend/ColorLegend.js +124 -124
  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/IsoFenceStyle.js +262 -262
  34. package/src/style/JoyPlotStyle.js +135 -135
  35. package/src/style/LegoStyle.js +112 -112
  36. package/src/style/MosaicStyle.js +107 -107
  37. package/src/style/NinjaStarStyle.js +125 -125
  38. package/src/style/PillarStyle.js +230 -230
  39. package/src/style/SegmentStyle.js +142 -142
  40. package/src/style/ShapeColorSizeStyle.js +126 -126
  41. package/src/style/SideCatStyle.js +172 -172
  42. package/src/style/SideStyle.js +216 -216
  43. package/src/style/SquareColorCatWGLStyle.js +120 -120
  44. package/src/style/SquareColorWGLStyle.js +146 -146
  45. package/src/style/StrokeStyle.js +131 -131
  46. package/src/style/TanakaStyle.js +160 -160
  47. package/src/style/TextStyle.js +132 -132
  48. package/src/style/TimeSeriesStyle.js +250 -250
  49. package/src/utils/Utils.js +35 -35
  50. package/src/utils/WebGLRectangleColoring.js +106 -106
  51. package/src/utils/WebGLSquareColoring.js +118 -118
  52. package/src/utils/WebGLSquareColoringAdvanced.js +230 -230
  53. package/src/utils/WebGLSquareColoringCatAdvanced.js +133 -133
  54. package/src/utils/WebGLSquareColoringKS.js +153 -153
  55. package/src/utils/stretching.js +131 -131
  56. package/src/utils/webGLUtils.js +71 -71
  57. package/src/utils/zoomUtils.js +142 -142
package/README.md CHANGED
@@ -1,125 +1,125 @@
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
- [![ninja star map](/docs/img/overviews/ov_ninja.png)](https://eurostat.github.io/gridviz/docs/reference#ninja-star-style)
13
- [![shadow effect map](/docs/img/overviews/ov_choco.png)](https://eurostat.github.io/gridviz/docs/reference#side-style)
14
- [![](/docs/img/overviews/ov_dark.png)](https://eurostat.github.io/gridviz/docs/reference#square-color-webgl-style)
15
- [![](/docs/img/overviews/ov_kersmoo.png)](https://eurostat.github.io/gridviz/docs/reference#kernel-smoothing)
16
- [![](/docs/img/overviews/ov_pillar_simple.png)](https://eurostat.github.io/gridviz/docs/reference#pillars-style)
17
- [![](/docs/img/overviews/ov_donut.png)](https://eurostat.github.io/gridviz/docs/reference#shapecolorsize-style)
18
- [![tanaka style map](/docs/img/overviews/ov_tanaka_dark.png)](https://eurostat.github.io/gridviz/docs/reference#tanaka-style)
19
- [![](/docs/img/overviews/ov_flag.png)](https://eurostat.github.io/gridviz/docs/reference#composition-style)
20
- [![joyplot map](/docs/img/overviews/ov_joyplot_shade.png)](https://eurostat.github.io/gridviz/docs/reference#joyplot-style)
21
- [![lego map](/docs/img/overviews/ov_lego.png)](https://eurostat.github.io/gridviz/docs/reference#lego-style)
22
- [![timeseries map](/docs/img/overviews/ov_timeseries.png)](https://eurostat.github.io/gridviz/docs/reference#time-series-style)
23
- [![isometric fence map](/docs/img/overviews/ov_isofence.png)](https://eurostat.github.io/gridviz/docs/reference#isometric-fence-style)
24
- [![mosaic map](/docs/img/overviews/ov_mosaic.png)](https://eurostat.github.io/gridviz/docs/reference#mosaic-style)
25
- [![](/docs/img/overviews/ov_piechart.png)](https://eurostat.github.io/gridviz/docs/reference#composition-style)
26
- [![](/docs/img/overviews/ov_pillar.png)](https://eurostat.github.io/gridviz/docs/reference#pillars-style)
27
- [![](/docs/img/overviews/ov_text_elevation.png)](https://eurostat.github.io/gridviz/docs/reference#text-style)
28
- [![dot density map](/docs/img/overviews/ov_dotdensity_random.png)](https://eurostat.github.io/gridviz/docs/reference#dot-density-style)
29
- [![](/docs/img/overviews/ov_popchange.png)](https://eurostat.github.io/gridviz/docs/reference#shapecolorsize-style)
30
- [![](/docs/img/overviews/ov_ring.png)](https://eurostat.github.io/gridviz/docs/reference#composition-style)
31
- [![](/docs/img/overviews/ov_segment.png)](https://eurostat.github.io/gridviz/docs/reference#segment-style)
32
- [![tanaka style map](/docs/img/overviews/ov_tanaka.png)](https://eurostat.github.io/gridviz/docs/reference#tanaka-style)
33
- [![dot density map](/docs/img/overviews/ov_dotdensity.png)](https://eurostat.github.io/gridviz/docs/reference#dot-density-style)
34
- [![joyplot map](/docs/img/overviews/ov_joyplot.png)](https://eurostat.github.io/gridviz/docs/reference#joyplot-style)
35
- [![](/docs/img/overviews/ov_stroke.png)](https://eurostat.github.io/gridviz/docs/reference#stroke-style)
36
-
37
- ## Examples
38
-
39
- - [Europe - 1km resolution - GEOSTAT/GISCO](https://eurostat.github.io/gridviz/examples/EUR.html)
40
- - [Germany - 100m resolution - Zensus 2011](https://eurostat.github.io/gridviz/examples/DE.html)
41
- - [France - 200m resolution - INSEE Filosofi](https://eurostat.github.io/gridviz/examples/FR.html)
42
- - [Norway - 250m resolution - SSB](https://eurostat.github.io/gridviz/examples/NO.html)
43
- - [Croatia - 1km resolution - DZS 2015 grid](https://eurostat.github.io/gridviz/examples/HR.html)
44
- - [France population, dark style](https://eurostat.github.io/gridviz/examples/styles/squarecolorwgl_dark.html)
45
- - [Europe population as a mosaic](https://eurostat.github.io/gridviz/examples/styles/mosaic_full.html)
46
-
47
- ## Installation
48
-
49
- ### Node.js
50
-
51
- ```Shell
52
- npm install gridviz
53
- ```
54
-
55
- then
56
-
57
- ```javascript
58
- import * as gridviz from 'gridviz'
59
- ```
60
-
61
- Or you can cherry-pick only the modules that you need, for example:
62
-
63
- ```javascript
64
- import { App, SquareColorWGLStyle } from 'gridviz'
65
- ```
66
-
67
- ### Basic example
68
-
69
- Here’s a basic example that loads a CSV file of a European population grid (5km resolution):
70
-
71
- ```javascript
72
- let myApp = new gridviz.App(containerDiv)
73
- //set position and zoom
74
- .setGeoCenter({ x: 4500000, y: 2900000 })
75
- .setZoomFactor(3000)
76
- //add CSV layer
77
- .addCSVGridLayer(
78
- //data URL
79
- 'https://raw.githubusercontent.com/eurostat/gridviz/master/assets/csv/Europe/pop_2018_5km.csv',
80
- //resolution, in CRS unit (m)
81
- 5000,
82
- //the style
83
- [
84
- new gridviz.SquareColorWGLStyle({
85
- //the CSV column to show
86
- colorCol: 'Population',
87
- //value to [0,1] mapping function
88
- tFun: (value) => gridviz.sExp(Math.min(value / 100000, 1), -15),
89
- }),
90
- ]
91
- )
92
- ```
93
-
94
- See the **[documentation page](https://eurostat.github.io/gridviz/docs/reference)** for more information.
95
-
96
- ### standalone
97
-
98
- ```javascript
99
- <script src="https://unpkg.com/gridviz/dist/gridviz.min.js"></script>
100
- ```
101
-
102
- ## Documentation
103
-
104
- See the **[API reference](https://eurostat.github.io/gridviz/docs/reference)**.
105
-
106
- ## About
107
-
108
- | | |
109
- | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
110
- | _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) |
111
- | _version_ | See [npm](https://www.npmjs.com/package/gridviz?activeTab=versions) |
112
- | _status_ | Since 2020 |
113
- | _license_ | [EUPL 1.2](LICENSE) |
114
-
115
- ### Support and contribution
116
-
117
- Feel free to [ask support](https://github.com/eurostat/gridviz/issues/new), fork the project or simply star it (it's always a pleasure).
118
-
119
- ### Copyright
120
-
121
- 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.
122
-
123
- ### Disclaimer
124
-
125
- 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](https://eurostat.github.io/gridviz/docs/reference). 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
+ [![ninja star map](/docs/img/overviews/ov_ninja.png)](https://eurostat.github.io/gridviz/docs/reference#ninja-star-style)
13
+ [![shadow effect map](/docs/img/overviews/ov_choco.png)](https://eurostat.github.io/gridviz/docs/reference#side-style)
14
+ [![](/docs/img/overviews/ov_dark.png)](https://eurostat.github.io/gridviz/docs/reference#square-color-webgl-style)
15
+ [![](/docs/img/overviews/ov_kersmoo.png)](https://eurostat.github.io/gridviz/docs/reference#kernel-smoothing)
16
+ [![](/docs/img/overviews/ov_pillar_simple.png)](https://eurostat.github.io/gridviz/docs/reference#pillars-style)
17
+ [![](/docs/img/overviews/ov_donut.png)](https://eurostat.github.io/gridviz/docs/reference#shapecolorsize-style)
18
+ [![tanaka style map](/docs/img/overviews/ov_tanaka_dark.png)](https://eurostat.github.io/gridviz/docs/reference#tanaka-style)
19
+ [![](/docs/img/overviews/ov_flag.png)](https://eurostat.github.io/gridviz/docs/reference#composition-style)
20
+ [![joyplot map](/docs/img/overviews/ov_joyplot_shade.png)](https://eurostat.github.io/gridviz/docs/reference#joyplot-style)
21
+ [![lego map](/docs/img/overviews/ov_lego.png)](https://eurostat.github.io/gridviz/docs/reference#lego-style)
22
+ [![timeseries map](/docs/img/overviews/ov_timeseries.png)](https://eurostat.github.io/gridviz/docs/reference#time-series-style)
23
+ [![isometric fence map](/docs/img/overviews/ov_isofence.png)](https://eurostat.github.io/gridviz/docs/reference#isometric-fence-style)
24
+ [![mosaic map](/docs/img/overviews/ov_mosaic.png)](https://eurostat.github.io/gridviz/docs/reference#mosaic-style)
25
+ [![](/docs/img/overviews/ov_piechart.png)](https://eurostat.github.io/gridviz/docs/reference#composition-style)
26
+ [![](/docs/img/overviews/ov_pillar.png)](https://eurostat.github.io/gridviz/docs/reference#pillars-style)
27
+ [![](/docs/img/overviews/ov_text_elevation.png)](https://eurostat.github.io/gridviz/docs/reference#text-style)
28
+ [![dot density map](/docs/img/overviews/ov_dotdensity_random.png)](https://eurostat.github.io/gridviz/docs/reference#dot-density-style)
29
+ [![](/docs/img/overviews/ov_popchange.png)](https://eurostat.github.io/gridviz/docs/reference#shapecolorsize-style)
30
+ [![](/docs/img/overviews/ov_ring.png)](https://eurostat.github.io/gridviz/docs/reference#composition-style)
31
+ [![](/docs/img/overviews/ov_segment.png)](https://eurostat.github.io/gridviz/docs/reference#segment-style)
32
+ [![tanaka style map](/docs/img/overviews/ov_tanaka.png)](https://eurostat.github.io/gridviz/docs/reference#tanaka-style)
33
+ [![dot density map](/docs/img/overviews/ov_dotdensity.png)](https://eurostat.github.io/gridviz/docs/reference#dot-density-style)
34
+ [![joyplot map](/docs/img/overviews/ov_joyplot.png)](https://eurostat.github.io/gridviz/docs/reference#joyplot-style)
35
+ [![](/docs/img/overviews/ov_stroke.png)](https://eurostat.github.io/gridviz/docs/reference#stroke-style)
36
+
37
+ ## Examples
38
+
39
+ - [Europe - 1km resolution - GEOSTAT/GISCO](https://eurostat.github.io/gridviz/examples/EUR.html)
40
+ - [Germany - 100m resolution - Zensus 2011](https://eurostat.github.io/gridviz/examples/DE.html)
41
+ - [France - 200m resolution - INSEE Filosofi](https://eurostat.github.io/gridviz/examples/FR.html)
42
+ - [Norway - 250m resolution - SSB](https://eurostat.github.io/gridviz/examples/NO.html)
43
+ - [Croatia - 1km resolution - DZS 2015 grid](https://eurostat.github.io/gridviz/examples/HR.html)
44
+ - [France population, dark style](https://eurostat.github.io/gridviz/examples/styles/squarecolorwgl_dark.html)
45
+ - [Europe population as a mosaic](https://eurostat.github.io/gridviz/examples/styles/mosaic_full.html)
46
+
47
+ ## Installation
48
+
49
+ ### Node.js
50
+
51
+ ```Shell
52
+ npm install gridviz
53
+ ```
54
+
55
+ then
56
+
57
+ ```javascript
58
+ import * as gridviz from 'gridviz'
59
+ ```
60
+
61
+ Or you can cherry-pick only the modules that you need, for example:
62
+
63
+ ```javascript
64
+ import { App, SquareColorWGLStyle } from 'gridviz'
65
+ ```
66
+
67
+ ### Basic example
68
+
69
+ Here’s a basic example that loads a CSV file of a European population grid (5km resolution):
70
+
71
+ ```javascript
72
+ let myApp = new gridviz.App(containerDiv)
73
+ //set position and zoom
74
+ .setGeoCenter({ x: 4500000, y: 2900000 })
75
+ .setZoomFactor(3000)
76
+ //add CSV layer
77
+ .addCSVGridLayer(
78
+ //data URL
79
+ 'https://raw.githubusercontent.com/eurostat/gridviz/master/assets/csv/Europe/pop_2018_5km.csv',
80
+ //resolution, in CRS unit (m)
81
+ 5000,
82
+ //the style
83
+ [
84
+ new gridviz.SquareColorWGLStyle({
85
+ //the CSV column to show
86
+ colorCol: 'Population',
87
+ //value to [0,1] mapping function
88
+ tFun: (value) => gridviz.sExp(Math.min(value / 100000, 1), -15),
89
+ }),
90
+ ]
91
+ )
92
+ ```
93
+
94
+ See the **[documentation page](https://eurostat.github.io/gridviz/docs/reference)** for more information.
95
+
96
+ ### standalone
97
+
98
+ ```javascript
99
+ <script src="https://unpkg.com/gridviz/dist/gridviz.min.js"></script>
100
+ ```
101
+
102
+ ## Documentation
103
+
104
+ See the **[API reference](https://eurostat.github.io/gridviz/docs/reference)**.
105
+
106
+ ## About
107
+
108
+ | | |
109
+ | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
110
+ | _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) |
111
+ | _version_ | See [npm](https://www.npmjs.com/package/gridviz?activeTab=versions) |
112
+ | _status_ | Since 2020 |
113
+ | _license_ | [EUPL 1.2](LICENSE) |
114
+
115
+ ### Support and contribution
116
+
117
+ Feel free to [ask support](https://github.com/eurostat/gridviz/issues/new), fork the project or simply star it (it's always a pleasure).
118
+
119
+ ### Copyright
120
+
121
+ 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.
122
+
123
+ ### Disclaimer
124
+
125
+ 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.