gridviz 2.0.0 → 2.0.1
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.
- package/README.md +332 -113
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -4,23 +4,73 @@
|
|
|
4
4
|
|
|
5
5
|
|
|
6
6
|
|
|
7
|
-
[Gridviz](
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
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
|
+
[](#shapecolorsize-style)
|
|
10
|
+
[](#shapecolorsize-style)
|
|
11
|
+
[](#side-style)
|
|
12
|
+
[](#square-color-webgl-style)
|
|
13
|
+
[](#shapecolorsize-style)
|
|
14
|
+
[](#composition-style)
|
|
15
|
+
[](#joyplot-style)
|
|
16
|
+
[](#lego-style)
|
|
17
|
+
[](#mosaic-style)
|
|
18
|
+
[](#composition-style)
|
|
19
|
+
[](#pillars-style)
|
|
20
|
+
[](#shapecolorsize-style)
|
|
21
|
+
[](#composition-style)
|
|
22
|
+
[](#segment-style)
|
|
23
|
+
[](#tanaka-style)
|
|
17
24
|
|
|
18
25
|
## Examples
|
|
19
26
|
|
|
20
|
-
- [Europe](examples/EUR.html)
|
|
21
|
-
- [France](examples/FR.html)
|
|
22
|
-
- [Croatia](examples/HR.html)
|
|
23
|
-
- [Dark](examples/FR_dark.html)
|
|
27
|
+
- [Europe - 1km resolution - GEOSTAT/GISCO](https://eurostat.github.io/gridviz/examples/EUR.html)
|
|
28
|
+
- [France - 200m resolution - INSEE Filosofi](https://eurostat.github.io/gridviz/examples/FR.html)
|
|
29
|
+
- [Croatia - 1km resolution - DZS 2015 grid](https://eurostat.github.io/gridviz/examples/HR.html)
|
|
30
|
+
- [Dark style](https://eurostat.github.io/gridviz/examples/FR_dark.html)
|
|
31
|
+
|
|
32
|
+
## Table of contents
|
|
33
|
+
|
|
34
|
+
- [gridviz](#gridviz)
|
|
35
|
+
- [Examples](#examples)
|
|
36
|
+
- [Table of contents](#table-of-contents)
|
|
37
|
+
- [Installation](#installation)
|
|
38
|
+
- [Node.js](#nodejs)
|
|
39
|
+
- [standalone](#standalone)
|
|
40
|
+
- [Usage](#usage)
|
|
41
|
+
- [App Configuration](#app-configuration)
|
|
42
|
+
- [Adding data](#adding-data)
|
|
43
|
+
- [Single CSV file](#single-csv-file)
|
|
44
|
+
- [Multi scale CSV data](#multi-scale-csv-data)
|
|
45
|
+
- [Tiled CSV data](#tiled-csv-data)
|
|
46
|
+
- [Multi scale tiled CSV data](#multi-scale-tiled-csv-data)
|
|
47
|
+
- [Data pre-processing](#data-pre-processing)
|
|
48
|
+
- [Styles](#styles)
|
|
49
|
+
- [Shape/Color/Size Style](#shapecolorsize-style)
|
|
50
|
+
- [Square color WebGL Style](#square-color-webgl-style)
|
|
51
|
+
- [Composition style](#composition-style)
|
|
52
|
+
- [Segment style](#segment-style)
|
|
53
|
+
- [Dot density style](#dot-density-style)
|
|
54
|
+
- [Stroke style](#stroke-style)
|
|
55
|
+
- [Side style](#side-style)
|
|
56
|
+
- [JoyPlot Style](#joyplot-style)
|
|
57
|
+
- [Mosaic style](#mosaic-style)
|
|
58
|
+
- [Tanaka style](#tanaka-style)
|
|
59
|
+
- [Lego style](#lego-style)
|
|
60
|
+
- [Pillars style](#pillars-style)
|
|
61
|
+
- [Text style](#text-style)
|
|
62
|
+
- [Kernel smoothing style](#kernel-smoothing-style)
|
|
63
|
+
- [Legends](#legends)
|
|
64
|
+
- [Stretching](#stretching)
|
|
65
|
+
- [Foreground information](#foreground-information)
|
|
66
|
+
- [Showing labels](#showing-labels)
|
|
67
|
+
- [Showing boundaries](#showing-boundaries)
|
|
68
|
+
- [Tooltip](#tooltip)
|
|
69
|
+
- [About](#about)
|
|
70
|
+
- [Support and contribution](#support-and-contribution)
|
|
71
|
+
- [Copyright](#copyright)
|
|
72
|
+
- [Disclaimer](#disclaimer)
|
|
73
|
+
|
|
24
74
|
|
|
25
75
|
## Installation
|
|
26
76
|
|
|
@@ -44,111 +94,143 @@ gridviz = require("gridviz");
|
|
|
44
94
|
|
|
45
95
|
## Usage
|
|
46
96
|
|
|
47
|
-
Create a [Gridviz](
|
|
97
|
+
Create a [Gridviz](https://github.com/eurostat/gridviz/) application using `let app = new gviz.App();` and customise it with the methods described in the documentation below.
|
|
48
98
|
|
|
49
|
-
Here's a basic example that loads a CSV file on Europe population
|
|
99
|
+
Here's a basic example that loads a CSV file on Europe population (5km resolution):
|
|
50
100
|
|
|
51
101
|
```javascript
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
)
|
|
102
|
+
new gviz.App(containerDiv)
|
|
103
|
+
//set position and zoom
|
|
104
|
+
.setGeoCenter({ x: 4500000, y: 2900000 }).setZoomFactor(3000)
|
|
105
|
+
//add CSV layer
|
|
106
|
+
.addCSVGridLayer(
|
|
107
|
+
//data URL
|
|
108
|
+
"https://raw.githubusercontent.com/eurostat/gridviz/master/assets/csv/Europe/pop_2018_5km.csv",
|
|
109
|
+
//resolution, in CRS unit (m)
|
|
110
|
+
5000,
|
|
111
|
+
//the style
|
|
112
|
+
[
|
|
113
|
+
new gviz.SquareColorWGLStyle({
|
|
114
|
+
//the CSV column to show
|
|
115
|
+
colorCol: "Population",
|
|
116
|
+
//value to [0,1] mapping function
|
|
117
|
+
tFun: (value) => gviz.sExp(Math.min(value / 100000, 1), -15)
|
|
118
|
+
})
|
|
119
|
+
]
|
|
120
|
+
)
|
|
69
121
|
```
|
|
70
|
-
(see [online](examples/basic_CSV.html))
|
|
122
|
+
(see [online](https://eurostat.github.io/gridviz/examples/basic_CSV.html), see [code](examples/basic_CSV.html))
|
|
71
123
|
|
|
72
|
-
[Gridviz](
|
|
124
|
+
[Gridviz](https://github.com/eurostat/gridviz/) can display several layers on top of each others. Each layer is based on a single [multi-resolution dataset](#adding-data), which can be displayed with several [cartographic styles](#styles). For more information, see the [examples](#examples).
|
|
73
125
|
|
|
74
126
|
|
|
75
127
|
## App Configuration
|
|
76
128
|
|
|
129
|
+
The following methods allow further configuration of a [Gridviz](https://github.com/eurostat/gridviz/) application:
|
|
77
130
|
|
|
78
|
-
|
|
79
|
-
|
|
|
80
|
-
|
|
|
81
|
-
| _app_.**
|
|
82
|
-
| _app_.**
|
|
83
|
-
| _app_.**
|
|
84
|
-
| _app_.**
|
|
85
|
-
| _app_.**
|
|
86
|
-
| _app_.**
|
|
87
|
-
| _app_.**setViewFromURL**() | | | Set view geo center and zoom from URL parameters _x_, _y_ and _z_. For example, using the URL _myPage.html?x=1000&y=2000&z=45_ will force the viex to center to geographical coordinates _(1000, 2000)_ and zoom _45_. |
|
|
131
|
+
| Method | Type | Default | Description |
|
|
132
|
+
| --------------------------------------------------------------------------- | ---------------------- | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
133
|
+
| _app_.**getGeoCenter**()<br />_app_.**setGeoCenter**([value]) | { x:number, y:number } | { x:0, y:0 } | Get/set the geographical coordinates of the view center. |
|
|
134
|
+
| _app_.**getZoomFactor**()<br />_app_.**setZoomFactor**([value]) | number | 1 | Get/set the view zoom. This zoom factor is expressed as the size of a pixel in ground distance. |
|
|
135
|
+
| _app_.**getZoomFactorExtent**()<br />_app_.**setZoomFactorExtent**([value]) | Array.<number> | [0, Infinity] | Get/set the view zoom extent, in order to prevent the user to zoom in/out beyond some zoom levels. |
|
|
136
|
+
| _app_.**getBackgroundColor**()<br />_app_.**setBackgroundColor**([value]) | string | "white" | Get/set the map background color. |
|
|
137
|
+
| _app_.**getBoundaryLayer**()<br />_app_.**setBoundaryLayer**([value]) | LineLayer | undefined | A layer for boundary lines, see [here](#showing-boundaries). |
|
|
138
|
+
| _app_.**getLabelLayer**()<br />_app_.**setLabelLayer**([value]) | LabelLayer | undefined | A layer for labels (such as placenames), see [here](#showing-labels). |
|
|
139
|
+
| _app_.**setViewFromURL**() | | | Set view geo center and zoom from URL parameters _x_, _y_ and _z_. For example, using the URL _myPage.html?x=1000&y=2000&z=45_ will force the viex to center to geographical coordinates _(1000, 2000)_ and zoom _45_. |
|
|
88
140
|
|
|
89
141
|
|
|
90
142
|
|
|
91
143
|
## Adding data
|
|
92
144
|
|
|
93
|
-
Input data are tabular data, in CSV format.
|
|
145
|
+
Input data are tabular data, in CSV format.
|
|
146
|
+
|
|
147
|
+
For the position of the cell, two columns **x** and **y** must be specified, with the geographical coordinates of the lower left corner of the cell, expressed in the grid Coordinate Reference System. If this information is not explicitelly provided in the input data, it is however possible to compute it on-the-fly as explained [here](#data-pre-processing).
|
|
148
|
+
|
|
149
|
+
It is possible to specify different data sources for different zoom levels, so that the level of detail of the data can adapt to the zoom level. Tiled CSV data can also be specified following the [tiled CSV format](docs/tiledCSVformat.md).
|
|
94
150
|
|
|
95
151
|
Are are several examples:
|
|
96
152
|
|
|
97
153
|
### Single CSV file
|
|
98
154
|
|
|
99
|
-
See the [basic example above](#usage).
|
|
155
|
+
This is the simplest case, when a unique CSV file is loaded. See the [basic example above](#usage).
|
|
100
156
|
|
|
101
157
|
### Multi scale CSV data
|
|
102
158
|
|
|
103
|
-
|
|
159
|
+
When several CSV files contain the data with different resolutions, it is possible to define a multi-scale dataset from those files. The change of dataset depending on the zoom level is controled with the **pixNb** parameter:
|
|
160
|
+
|
|
161
|
+
```javascript
|
|
162
|
+
new gviz.App(containerDiv)
|
|
163
|
+
//set position and zoom
|
|
164
|
+
.setGeoCenter({ x: 4500000, y: 2900000 }).setZoomFactor(3000)
|
|
165
|
+
//add multiscale CSV layer
|
|
166
|
+
.addMultiScaleCSVGridLayer(
|
|
167
|
+
[5000, 10000, 20000, 50000, 100000],
|
|
168
|
+
r => "https://raw.githubusercontent.com/eurostat/gridviz/master/assets/csv/Europe/pop_2018_" + Math.round(r / 1000) + "km.csv",
|
|
169
|
+
[
|
|
170
|
+
new gviz.SquareColorWGLStyle({
|
|
171
|
+
colorCol: "population",
|
|
172
|
+
tFun: (value, resolution, stats) => gviz.sExp(value / stats.max, -50)
|
|
173
|
+
})
|
|
174
|
+
],
|
|
175
|
+
{
|
|
176
|
+
//the maximum pixel size before jumping to a lower resolution
|
|
177
|
+
pixNb: 3
|
|
178
|
+
}
|
|
179
|
+
)
|
|
180
|
+
```
|
|
181
|
+
(see [online](https://eurostat.github.io/gridviz/examples/basic_multiscale_CSV.html), see [code](examples/basic_multiscale_CSV.html))
|
|
104
182
|
|
|
105
183
|
### Tiled CSV data
|
|
106
184
|
|
|
185
|
+
For large dataset, it is adviced to decompose them into different data chunks and index those by geographical location, as specified in the [tiled CSV format](docs/tiledCSVformat.md). The [Gridviz](https://github.com/eurostat/gridviz/) application can then automatically retrieve only the usefull data that fall into the view geographical extent. This is an example of how to load such data:
|
|
186
|
+
|
|
107
187
|
```javascript
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
)
|
|
188
|
+
new gviz.App(containerDiv)
|
|
189
|
+
//set position and zoom
|
|
190
|
+
.setGeoCenter({ x: 4500000, y: 2900000 }).setZoomFactor(3000)
|
|
191
|
+
//add multi scale tiled CSV layer
|
|
192
|
+
.addTiledCSVGridLayer(
|
|
193
|
+
//data URL
|
|
194
|
+
"https://raw.githubusercontent.com/eurostat/gridviz/master/assets/csv/Europe/grid_pop_tiled/5km/",
|
|
195
|
+
//the styles
|
|
196
|
+
[
|
|
197
|
+
new gviz.SquareColorWGLStyle({
|
|
198
|
+
colorCol: "2018",
|
|
199
|
+
tFun: (value) => gviz.sExp(Math.min(value / 100000, 1), -15)
|
|
200
|
+
})
|
|
201
|
+
]
|
|
202
|
+
)
|
|
124
203
|
```
|
|
125
|
-
(see [online](examples/basic_tiled_CSV.html))
|
|
204
|
+
(see [online](https://eurostat.github.io/gridviz/examples/basic_tiled_CSV.html), see [code](examples/basic_tiled_CSV.html))
|
|
126
205
|
|
|
127
206
|
### Multi scale tiled CSV data
|
|
128
207
|
|
|
208
|
+
Multi scale tiled CSV data based on the [tiled CSV format](docs/tiledCSVformat.md) can also be simply loaded with the example below. Here again, the change of dataset depending on the zoom level is controled with the **pixNb** parameter:
|
|
209
|
+
|
|
129
210
|
```javascript
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
211
|
+
new gviz.App(containerDiv)
|
|
212
|
+
//set position and zoom
|
|
213
|
+
.setGeoCenter({ x: 4500000, y: 2900000 }).setZoomFactor(3000)
|
|
214
|
+
//add multi scale tiled CSV layer
|
|
215
|
+
.addMultiScaleTiledCSVGridLayer(
|
|
216
|
+
//the resolution values, ordered
|
|
217
|
+
[1000, 2000, 5000, 10000, 20000, 50000, 100000],
|
|
218
|
+
//the URL, from the resolution
|
|
219
|
+
r => "https://raw.githubusercontent.com/eurostat/gridviz/master/assets/csv/Europe/grid_pop_tiled/" + Math.round(r / 1000) + "km/",
|
|
220
|
+
//the styles
|
|
221
|
+
[
|
|
222
|
+
new gviz.SquareColorWGLStyle({
|
|
223
|
+
colorCol: "2018",
|
|
224
|
+
tFun: (value, resolution, stats) => gviz.sExp(value / stats.max, -50)
|
|
225
|
+
})
|
|
226
|
+
],
|
|
227
|
+
{
|
|
228
|
+
//the maximum pixel size before jumping to a lower resolution
|
|
229
|
+
pixNb: 3
|
|
230
|
+
}
|
|
231
|
+
)
|
|
150
232
|
```
|
|
151
|
-
(see [online](examples/basic_multiscale_tiled_CSV.html))
|
|
233
|
+
(see [online](https://eurostat.github.io/gridviz/examples/basic_multiscale_tiled_CSV.html), see [code](examples/basic_multiscale_tiled_CSV.html))
|
|
152
234
|
|
|
153
235
|
|
|
154
236
|
| Method | Arguments | Description |
|
|
@@ -169,123 +251,259 @@ To manage creation of datasets and their possible reuse accross different layers
|
|
|
169
251
|
| _app_.**makeMultiScaleTiledCSVGridDataset**([args]) | - | Make a multi scale tiled CSV grid dataset. |
|
|
170
252
|
|
|
171
253
|
|
|
172
|
-
|
|
254
|
+
### Data pre-processing
|
|
255
|
+
|
|
256
|
+
Loaded data can be processed/transformed before it is being used by the [Gridviz](https://github.com/eurostat/gridviz/) application in order to, for example:
|
|
257
|
+
- Filter/simplify the data to keep only the necessary one. This can save client memory,
|
|
258
|
+
- Extract/compute each cell coordinates into the **x** and **y** columns, in case the input data does not contain such columns explicitelly,
|
|
259
|
+
- Compute a new column from the combination of existing ones, such as the ratio between two columns, or the aggregation of several columns,
|
|
260
|
+
- Run some data conversions,
|
|
261
|
+
- Etc.
|
|
262
|
+
|
|
263
|
+
This process is run on each cell individually, only once, after the data has been downloaded.
|
|
173
264
|
|
|
174
|
-
|
|
265
|
+
Here is an example showing how to compute a new column on population change, as the difference between two columns _2011_ and _2018_. This new column is then used directly to be represented:
|
|
266
|
+
|
|
267
|
+
|
|
268
|
+
```javascript
|
|
269
|
+
new gviz.App(containerDiv)
|
|
270
|
+
.setGeoCenter({ x: 4500000, y: 2900000 }).setZoomFactor(3000)
|
|
271
|
+
.addMultiScaleTiledCSVGridLayer(
|
|
272
|
+
[1000, 2000, 5000, 10000, 20000, 50000, 100000],
|
|
273
|
+
r => "https://raw.githubusercontent.com/eurostat/gridviz/master/assets/csv/Europe/grid_pop_tiled/" + Math.round(r / 1000) + "km/",
|
|
274
|
+
[ new gviz.ShapeColorSizeStyle({ /* style construction */}) ],
|
|
275
|
+
{
|
|
276
|
+
preprocess: c => {
|
|
277
|
+
//for each cell, compute 2011 -> 2018 change and store it in a new "change" column
|
|
278
|
+
if (!c["2011"] && !c["2018"]) c.change = 0
|
|
279
|
+
else if (!c["2011"] && c["2018"]) c.change = + c["2018"]
|
|
280
|
+
else if (c["2011"] && !c["2018"]) c.change = - c["2011"]
|
|
281
|
+
else c.change = c["2018"] - c["2011"]
|
|
282
|
+
//remove unused information
|
|
283
|
+
delete c["2006"]; delete c["2011"]; delete c["2018"]
|
|
284
|
+
},
|
|
285
|
+
pixNb: 3,
|
|
286
|
+
}
|
|
287
|
+
)
|
|
288
|
+
```
|
|
289
|
+
(see [online](https://eurostat.github.io/gridviz/examples/preprocess.html), see [code](examples/preprocess.html))
|
|
290
|
+
|
|
291
|
+
Note that it is unfortunatelly currently not possible to compute new columns from the combination of two different datasets.
|
|
175
292
|
|
|
176
293
|
## Styles
|
|
177
294
|
|
|
295
|
+
TODO: explain general principles, with (v,r,zf,s) functions. + use several styles by layer + define zoom extent for each style
|
|
178
296
|
|
|
179
297
|
### Shape/Color/Size Style
|
|
180
298
|
|
|
181
|
-
This style allows to define the **shape**, **color** and **size** of each grid cell
|
|
299
|
+
This style is a generic style which allows to define the **shape**, **color** and **size** of each grid cell, independantly according to 3 different variables. Three shapes are currently available: square, circle and donut (a disk with a hole of changing size). To show grid cells as small squares with only changing color, the style based on web GL [here](#square-color-webgl-style) should rather be used, for efficiency reasons.
|
|
300
|
+
|
|
301
|
+
TODO: screenshots
|
|
302
|
+
|
|
303
|
+
See [this example with changing size](https://eurostat.github.io/gridviz/examples/styles/shapecolorsize.html) ([code](examples/styles/shapecolorsize.html)).
|
|
304
|
+
|
|
305
|
+
See [this example with random shape, color and size](https://eurostat.github.io/gridviz/examples/styles/shapecolorsize_random.html) ([code](examples/styles/shapecolorsize_random.html)).
|
|
306
|
+
|
|
307
|
+
|
|
308
|
+
| Property | Type | Default | Description |
|
|
309
|
+
| -------------- | -------- | ------- | -------------- |
|
|
310
|
+
| **colorCol** | string | undefined | The name of the column used for the color. |
|
|
311
|
+
| **color** | function(v,r,s):string | () => "#EA6BAC" | A function computing the cell color from its __colorCol__ value **v**, the resolution **r**, and statistics **s**. |
|
|
312
|
+
| **sizeCol** | string | undefined | The name of the column used for the size. |
|
|
313
|
+
| **size** | function(v,r,s,zf) | (v,r,s,zf) => r | A function computing the cell size from its __sizeCol__ value **v**, the resolution **r**, and statistics **s**. |
|
|
314
|
+
| **shape** | function(c):string | () => "square" | A function computing the shape of cell **c**. Expected values are within __{"square", "circle", "donut", "none"}__ |
|
|
182
315
|
|
|
183
|
-
See [this example](examples/styles/shapecolorsize.html).
|
|
184
316
|
|
|
185
317
|
### Square color WebGL Style
|
|
186
318
|
|
|
187
|
-
This style displays each cell as a square, with a changing color. This style uses webGL and should thus be used to display at detailled resolutions.
|
|
319
|
+
This style displays each cell as a square, with a changing color. This style uses webGL and should thus be used to display grid cells at detailled resolutions.
|
|
188
320
|
|
|
189
|
-
See [this example](examples/styles/squarecolorwgl.html).
|
|
321
|
+
See [this example](https://eurostat.github.io/gridviz/examples/styles/squarecolorwgl.html) ([code](examples/styles/squarecolorwgl.html)).
|
|
322
|
+
|
|
323
|
+
| Property | Type | Default | Description |
|
|
324
|
+
| ----------- | -------- | ------- | ------------ |
|
|
325
|
+
| **colorCol** | string | undefined | The name of the column used for the color. |
|
|
326
|
+
| **tFun** | function(number,number,Stat):number | (v, r, s) => v / s.max | A function computing the cell color parameter **t** (whithin [0,1]) from its __colorCol__ value **v**, the resolution **r**, and statistics **s**. This **t** value is then used to determine the cell color from the color sampling. |
|
|
327
|
+
| **deformationFactor** | number | 1 | A parameter within [0,Inf] to deform the distribution. 1: no deformation. <1: better show small values. >1: better show large values. |
|
|
328
|
+
| **colors** | Array.<string> | Colors based on [interpolateSpectral](https://github.com/d3/d3-scale-chromatic#interpolateSpectral) | The sample of the color ramp. |
|
|
329
|
+
| **size** | function(r,zf):number | (r,zf) => r + 0.2 * zf | A function returning the size of the cells from the resolution **r** and zoom factor **zf**, in geographical unit. All cells have the same size. |
|
|
190
330
|
|
|
191
331
|
### Composition style
|
|
192
332
|
|
|
193
333
|
This style shows a composition at cell level in various different ways: Flags, pie charts, rings, segments, radar, age pyramid and halftone.
|
|
194
334
|
|
|
195
|
-
See [this example](examples/styles/composition.html).
|
|
335
|
+
See [this example](https://eurostat.github.io/gridviz/examples/styles/composition.html) ([code](examples/styles/composition.html)).
|
|
336
|
+
|
|
337
|
+
| Property | Type | Default | Description |
|
|
338
|
+
| ----------- | -------- | ------- | ------------ |
|
|
339
|
+
| **.** | | | |
|
|
196
340
|
|
|
197
341
|
|
|
198
342
|
### Segment style
|
|
199
343
|
|
|
200
344
|
This style displays each cell as a segment with a changeable color, length, width and orientation.
|
|
201
345
|
|
|
202
|
-
See [this example](examples/styles/segment.html).
|
|
346
|
+
See [this example](https://eurostat.github.io/gridviz/examples/styles/segment.html) ([code](examples/styles/segment.html)).
|
|
347
|
+
|
|
348
|
+
See [this example with random orientation, color, length and width](https://eurostat.github.io/gridviz/examples/styles/segment_random.html) ([code](examples/styles/segment_random.html)).
|
|
349
|
+
|
|
350
|
+
| Property | Type | Default | Description |
|
|
351
|
+
| ----------- | -------- | ------- | ------------ |
|
|
352
|
+
| **.** | | | |
|
|
203
353
|
|
|
204
354
|
|
|
205
355
|
### Dot density style
|
|
206
356
|
|
|
207
357
|
This style displays each cell as randomly located points, with changeable density and color.
|
|
208
358
|
|
|
209
|
-
See [this example](examples/styles/dotdensity.html).
|
|
359
|
+
See [this example](https://eurostat.github.io/gridviz/examples/styles/dotdensity.html) ([code](examples/styles/dotdensity.html)).
|
|
360
|
+
|
|
361
|
+
| Property | Type | Default | Description |
|
|
362
|
+
| ----------- | -------- | ------- | ------------ |
|
|
363
|
+
| **.** | | | |
|
|
210
364
|
|
|
211
365
|
### Stroke style
|
|
212
366
|
|
|
213
367
|
This style shows the stroke of each cell with different colors, widths, shapes and sizes.
|
|
214
368
|
|
|
215
|
-
See [this example](examples/styles/stroke.html).
|
|
369
|
+
See [this example](https://eurostat.github.io/gridviz/examples/styles/stroke.html) ([code](examples/styles/stroke.html)).
|
|
370
|
+
|
|
371
|
+
| Property | Type | Default | Description |
|
|
372
|
+
| ----------- | -------- | ------- | ------------ |
|
|
373
|
+
| **.** | | | |
|
|
216
374
|
|
|
217
375
|
|
|
218
376
|
### Side style
|
|
219
377
|
|
|
220
378
|
This style extract the sides of the cells and show each of them depending on the values of the 2 cells around.
|
|
221
379
|
|
|
222
|
-
See [this example](examples/styles/side.html).
|
|
380
|
+
See [this example](https://eurostat.github.io/gridviz/examples/styles/side.html) ([code](examples/styles/side.html)).
|
|
381
|
+
|
|
382
|
+
| Property | Type | Default | Description |
|
|
383
|
+
| ----------- | -------- | ------- | ------------ |
|
|
384
|
+
| **.** | | | |
|
|
223
385
|
|
|
224
386
|
|
|
225
387
|
### JoyPlot Style
|
|
226
388
|
|
|
227
389
|
This style shows cell rows in the form of a 'joyplot' - named after Joy Division's "Unknown Pleasures" album cover.
|
|
228
390
|
|
|
229
|
-
See [this example](examples/styles/joyplot.html).
|
|
391
|
+
See [this example](https://eurostat.github.io/gridviz/examples/styles/joyplot.html) ([code](examples/styles/joyplot.html)).
|
|
392
|
+
|
|
393
|
+
| Property | Type | Default | Description |
|
|
394
|
+
| ----------- | -------- | ------- | ------------ |
|
|
395
|
+
| **.** | | | |
|
|
230
396
|
|
|
231
397
|
### Mosaic style
|
|
232
398
|
|
|
233
399
|
This style is a usual cell coloring style with a slight random deformation of the squares giving a 'mosaic' like effect.
|
|
234
400
|
|
|
235
|
-
See [this example](examples/styles/mosaic.html).
|
|
401
|
+
See [this example](https://eurostat.github.io/gridviz/examples/styles/mosaic.html) ([code](examples/styles/mosaic.html)).
|
|
402
|
+
|
|
403
|
+
| Property | Type | Default | Description |
|
|
404
|
+
| ----------- | -------- | ------- | ------------ |
|
|
405
|
+
| **.** | | | |
|
|
236
406
|
|
|
237
407
|
|
|
238
408
|
### Tanaka style
|
|
239
409
|
|
|
240
410
|
This style shows the grid cells in a Tanaka-like style, that is with discrete colors and shadow effect.
|
|
241
411
|
|
|
242
|
-
See [this example](examples/styles/tanaka.html).
|
|
412
|
+
See [this example](https://eurostat.github.io/gridviz/examples/styles/tanaka.html) ([code](examples/styles/tanaka.html)).
|
|
413
|
+
|
|
414
|
+
| Property | Type | Default | Description |
|
|
415
|
+
| ----------- | -------- | ------- | ------------ |
|
|
416
|
+
| **.** | | | |
|
|
243
417
|
|
|
244
418
|
### Lego style
|
|
245
419
|
|
|
246
420
|
This style shows the grid cells as lego bricks with changeable colors and height.
|
|
247
421
|
|
|
248
|
-
See [this example](examples/styles/lego.html).
|
|
422
|
+
See [this example](https://eurostat.github.io/gridviz/examples/styles/lego.html) ([code](examples/styles/lego.html)).
|
|
423
|
+
|
|
424
|
+
| Property | Type | Default | Description |
|
|
425
|
+
| ----------- | -------- | ------- | ------------ |
|
|
426
|
+
| **.** | | | |
|
|
249
427
|
|
|
250
428
|
### Pillars style
|
|
251
429
|
|
|
252
430
|
This style shows the grid cells as 3D pillars, with changeable heigths and colors.
|
|
253
431
|
|
|
254
|
-
See [this example](examples/styles/pillar.html).
|
|
432
|
+
See [this example](https://eurostat.github.io/gridviz/examples/styles/pillar.html) ([code](examples/styles/pillar.html)).
|
|
433
|
+
|
|
434
|
+
| Property | Type | Default | Description |
|
|
435
|
+
| ----------- | -------- | ------- | ------------ |
|
|
436
|
+
| **.** | | | |
|
|
255
437
|
|
|
256
438
|
### Text style
|
|
257
439
|
|
|
258
440
|
This style shows the grid cells as text characters with different colors.
|
|
259
441
|
|
|
260
|
-
See [this example](examples/styles/text.html).
|
|
442
|
+
See [this example](https://eurostat.github.io/gridviz/examples/styles/text.html) ([code](examples/styles/text.html)).
|
|
443
|
+
|
|
444
|
+
| Property | Type | Default | Description |
|
|
445
|
+
| ----------- | -------- | ------- | ------------ |
|
|
446
|
+
| **.** | | | |
|
|
261
447
|
|
|
262
448
|
### Kernel smoothing style
|
|
263
449
|
|
|
264
450
|
This style allows applying gaussian kernel smoothing to the grid.
|
|
265
451
|
|
|
266
|
-
See [this example](examples/styles/kernelsmoothing.html).
|
|
452
|
+
See [this example](https://eurostat.github.io/gridviz/examples/styles/kernelsmoothing.html) ([code](examples/styles/kernelsmoothing.html)).
|
|
267
453
|
|
|
268
|
-
|
|
454
|
+
| Property | Type | Default | Description |
|
|
455
|
+
| ----------- | -------- | ------- | ------------ |
|
|
456
|
+
| **.** | | | |
|
|
269
457
|
|
|
270
|
-
TODO
|
|
271
458
|
|
|
272
459
|
## Legends
|
|
273
460
|
|
|
274
461
|
TODO
|
|
275
462
|
|
|
276
463
|
|
|
464
|
+
## Stretching
|
|
465
|
+
|
|
466
|
+
TODO - link to observable page
|
|
467
|
+
|
|
468
|
+
|
|
277
469
|
## Foreground information
|
|
278
470
|
|
|
279
471
|
|
|
280
472
|
### Showing labels
|
|
281
473
|
|
|
282
474
|
TODO
|
|
283
|
-
|
|
475
|
+
|
|
476
|
+
Example based on https://github.com/eurostat/euronym
|
|
284
477
|
|
|
285
478
|
### Showing boundaries
|
|
286
479
|
|
|
287
480
|
TODO
|
|
288
|
-
|
|
481
|
+
|
|
482
|
+
Example based on https://github.com/eurostat/Nuts2json
|
|
483
|
+
|
|
484
|
+
|
|
485
|
+
## Tooltip
|
|
486
|
+
|
|
487
|
+
|
|
488
|
+
|
|
489
|
+
A 'tooltip' shows information related to the selected grid cell. The information shown for each selected cell can be specified at dataset level using the **cellInfoHTML** parameter. See for example:
|
|
490
|
+
|
|
491
|
+
```javascript
|
|
492
|
+
new gviz.App(containerDiv)
|
|
493
|
+
.setGeoCenter({ x: 4500000, y: 2900000 }).setZoomFactor(500)
|
|
494
|
+
.addCSVGridLayer(
|
|
495
|
+
"https://raw.githubusercontent.com/eurostat/gridviz/master/assets/csv/Europe/pop_2018_5km.csv",
|
|
496
|
+
5000,
|
|
497
|
+
[new gviz.SquareColorWGLStyle({ colorCol: "population", tFun: (value) => Math.min(value / 50000, 1) })],
|
|
498
|
+
{
|
|
499
|
+
//tooltip content configuration
|
|
500
|
+
cellInfoHTML: c => "The population of this cell is: <b>" + c.population + "</b> !",
|
|
501
|
+
}
|
|
502
|
+
)
|
|
503
|
+
```
|
|
504
|
+
(see [online](https://eurostat.github.io/gridviz/examples/tooltip.html), see [code](examples/tooltip.html))
|
|
505
|
+
|
|
506
|
+
TODO: change tooltip style
|
|
289
507
|
|
|
290
508
|
## About
|
|
291
509
|
|
|
@@ -294,16 +512,17 @@ From https://github.com/eurostat/Nuts2json
|
|
|
294
512
|
| _contributors_ | [<img src="https://github.com/JoeWDavies.png" height="40" />](https://github.com/JoeWDavies) [<img src="https://github.com/jgaffuri.png" height="40" />](https://github.com/jgaffuri) |
|
|
295
513
|
| _version_ | See [npm](https://www.npmjs.com/package/gridviz?activeTab=versions) |
|
|
296
514
|
| _status_ | Since 2020 |
|
|
297
|
-
| _license_ | [EUPL 1.2](
|
|
515
|
+
| _license_ | [EUPL 1.2](LICENSE) |
|
|
298
516
|
|
|
299
|
-
|
|
517
|
+
### Support and contribution
|
|
300
518
|
|
|
301
|
-
Feel free to [ask support](https://github.com/eurostat/
|
|
519
|
+
Feel free to [ask support](https://github.com/eurostat/gridviz/issues/new), fork the project or simply star it (it's always a pleasure).
|
|
302
520
|
|
|
303
|
-
|
|
521
|
+
### Copyright
|
|
304
522
|
|
|
305
523
|
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.
|
|
306
524
|
|
|
307
|
-
|
|
525
|
+
### Disclaimer
|
|
308
526
|
|
|
309
527
|
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.
|
|
528
|
+
*
|