gridviz 2.1.11 → 2.1.13

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 (60) hide show
  1. package/README.md +125 -125
  2. package/dist/gridviz.js +8254 -7887
  3. package/dist/gridviz.min.js +1 -1
  4. package/package.json +77 -77
  5. package/src/App.js +758 -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 +113 -113
  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 -180
  17. package/src/button/Button.js +54 -0
  18. package/src/button/FullscreenButton.js +98 -0
  19. package/src/button/ZoomButtons.js +72 -0
  20. package/src/dataset/COGeo.js +24 -24
  21. package/src/dataset/CSVGrid.js +104 -104
  22. package/src/dataset/GeoTIFF.js +127 -127
  23. package/src/dataset/GridTile.js +41 -41
  24. package/src/dataset/LGrid.js +54 -54
  25. package/src/dataset/TiledGrid.js +264 -264
  26. package/src/index.js +71 -71
  27. package/src/legend/ColorCategoryLegend.js +124 -124
  28. package/src/legend/ColorDiscreteLegend.js +103 -103
  29. package/src/legend/ColorLegend.js +128 -124
  30. package/src/legend/SegmentOrientationLegend.js +87 -87
  31. package/src/legend/SegmentWidthLegend.js +101 -97
  32. package/src/legend/SizeLegend.js +141 -141
  33. package/src/style/CompositionStyle.js +300 -300
  34. package/src/style/ContourStyle.js +54 -54
  35. package/src/style/DotDensityStyle.js +156 -156
  36. package/src/style/IsoFenceStyle.js +262 -262
  37. package/src/style/JoyPlotStyle.js +135 -135
  38. package/src/style/LegoStyle.js +112 -112
  39. package/src/style/MosaicStyle.js +107 -107
  40. package/src/style/NinjaStarStyle.js +125 -125
  41. package/src/style/PillarStyle.js +230 -230
  42. package/src/style/SegmentStyle.js +142 -142
  43. package/src/style/ShapeColorSizeStyle.js +152 -126
  44. package/src/style/SideCatStyle.js +172 -172
  45. package/src/style/SideStyle.js +216 -216
  46. package/src/style/SquareColorCatWGLStyle.js +120 -120
  47. package/src/style/SquareColorWGLStyle.js +146 -146
  48. package/src/style/StrokeStyle.js +131 -131
  49. package/src/style/TanakaStyle.js +160 -160
  50. package/src/style/TextStyle.js +132 -132
  51. package/src/style/TimeSeriesStyle.js +259 -250
  52. package/src/utils/Utils.js +35 -35
  53. package/src/utils/WebGLRectangleColoring.js +106 -106
  54. package/src/utils/WebGLSquareColoring.js +118 -118
  55. package/src/utils/WebGLSquareColoringAdvanced.js +230 -230
  56. package/src/utils/WebGLSquareColoringCatAdvanced.js +133 -133
  57. package/src/utils/WebGLSquareColoringKS.js +153 -153
  58. package/src/utils/stretching.js +131 -131
  59. package/src/utils/webGLUtils.js +71 -71
  60. 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](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.
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 for visualizing gridded data (or any tabular dataset with x/y coordinates for that matter) in the browser in a large variety of [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). Focus on [total population](https://eurostat.github.io/gridviz/examples/FR_pop.html) and [income](https://eurostat.github.io/gridviz/examples/FR_income.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://github.com/eurostat/gridviz/blob/master/docs/reference.md)**.
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.