gridviz 2.0.2 → 2.0.4

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 (3) hide show
  1. package/README.md +20 -471
  2. package/build/gridviz.min.js +1 -1
  3. package/package.json +1 -1
package/README.md CHANGED
@@ -1,4 +1,4 @@
1
- # gridviz
1
+ # Gridviz
2
2
 
3
3
  ![npm bundle size](https://img.shields.io/bundlephobia/minzip/gridviz)
4
4
  ![npm](https://img.shields.io/npm/v/gridviz)
@@ -6,71 +6,29 @@
6
6
 
7
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
8
 
9
- [![](/docs/img/overviews/ov_accessibility.png)](#shapecolorsize-style)
10
- [![](/docs/img/overviews/ov_age_balance.png)](#shapecolorsize-style)
11
- [![](/docs/img/overviews/ov_choco.png)](#side-style)
12
- [![](/docs/img/overviews/ov_dark.png)](#square-color-webgl-style)
13
- [![](/docs/img/overviews/ov_donut.png)](#shapecolorsize-style)
14
- [![](/docs/img/overviews/ov_flag.png)](#composition-style)
15
- [![](/docs/img/overviews/ov_joyplot.png)](#joyplot-style)
16
- [![](/docs/img/overviews/ov_lego.png)](#lego-style)
17
- [![](/docs/img/overviews/ov_mosaic.png)](#mosaic-style)
18
- [![](/docs/img/overviews/ov_piechart.png)](#composition-style)
19
- [![](/docs/img/overviews/ov_pillar.png)](#pillars-style)
20
- [![](/docs/img/overviews/ov_popchange.png)](#shapecolorsize-style)
21
- [![](/docs/img/overviews/ov_ring.png)](#composition-style)
22
- [![](/docs/img/overviews/ov_segment.png)](#segment-style)
23
- [![](/docs/img/overviews/ov_tanaka.png)](#tanaka-style)
9
+ [![](/docs/img/overviews/ov_accessibility.png)](docs/reference.md#shapecolorsize-style)
10
+ [![](/docs/img/overviews/ov_age_balance.png)](docs/reference.md#shapecolorsize-style)
11
+ [![](/docs/img/overviews/ov_choco.png)](docs/reference.md#side-style)
12
+ [![](/docs/img/overviews/ov_dark.png)](docs/reference.md#square-color-webgl-style)
13
+ [![](/docs/img/overviews/ov_donut.png)](docs/reference.md#shapecolorsize-style)
14
+ [![](/docs/img/overviews/ov_flag.png)](docs/reference.md#composition-style)
15
+ [![](/docs/img/overviews/ov_joyplot.png)](docs/reference.md#joyplot-style)
16
+ [![](/docs/img/overviews/ov_lego.png)](docs/reference.md#lego-style)
17
+ [![](/docs/img/overviews/ov_mosaic.png)](docs/reference.md#mosaic-style)
18
+ [![](/docs/img/overviews/ov_piechart.png)](docs/reference.md#composition-style)
19
+ [![](/docs/img/overviews/ov_pillar.png)](docs/reference.md#pillars-style)
20
+ [![](/docs/img/overviews/ov_popchange.png)](docs/reference.md#shapecolorsize-style)
21
+ [![](/docs/img/overviews/ov_ring.png)](docs/reference.md#composition-style)
22
+ [![](/docs/img/overviews/ov_segment.png)](docs/reference.md#segment-style)
23
+ [![](/docs/img/overviews/ov_tanaka.png)](docs/reference.md#tanaka-style)
24
24
 
25
25
  ## Examples
26
26
 
27
27
  - [Europe - 1km resolution - GEOSTAT/GISCO](https://eurostat.github.io/gridviz/examples/EUR.html)
28
28
  - [France - 200m resolution - INSEE Filosofi](https://eurostat.github.io/gridviz/examples/FR.html)
29
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
-
30
+ - [France population, dark style](https://eurostat.github.io/gridviz/examples/styles/squarecolorwgl_dark.html)
31
+ - [Europe population as a mosaic](https://eurostat.github.io/gridviz/examples/styles/mosaic_full.html)
74
32
 
75
33
  ## Installation
76
34
 
@@ -92,418 +50,9 @@ gridviz = require("gridviz");
92
50
  <script src="https://unpkg.com/gridviz/build/gridviz.min.js"></script>
93
51
  ```
94
52
 
95
- ## Usage
96
-
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.
98
-
99
- Here's a basic example that loads a CSV file on Europe population (5km resolution):
100
-
101
- ```javascript
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
- )
121
- ```
122
- (see [online](https://eurostat.github.io/gridviz/examples/basic_CSV.html), see [code](examples/basic_CSV.html))
123
-
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).
125
-
126
-
127
- ## App Configuration
128
-
129
- The following methods allow further configuration of a [Gridviz](https://github.com/eurostat/gridviz/) application:
130
-
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_. |
140
-
141
-
142
-
143
- ## Adding data
144
-
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).
150
-
151
- Are are several examples:
152
-
153
- ### Single CSV file
154
-
155
- This is the simplest case, when a unique CSV file is loaded. See the [basic example above](#usage).
156
-
157
- ### Multi scale CSV data
158
-
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))
182
-
183
- ### Tiled CSV data
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
-
187
- ```javascript
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
- )
203
- ```
204
- (see [online](https://eurostat.github.io/gridviz/examples/basic_tiled_CSV.html), see [code](examples/basic_tiled_CSV.html))
205
-
206
- ### Multi scale tiled CSV data
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
-
210
- ```javascript
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
- )
232
- ```
233
- (see [online](https://eurostat.github.io/gridviz/examples/basic_multiscale_tiled_CSV.html), see [code](examples/basic_multiscale_tiled_CSV.html))
234
-
235
-
236
- | Method | Arguments | Description |
237
- | ------------------------------------------------ | ------------------------------------------ | ------------------------------------------------------ |
238
- | _app_.**addCSVGridLayer**([args]) | See [example](#single-csv-file) | Add a layer from a CSV grid dataset. |
239
- | _app_.**addMultiScaleCSVGridLayer**([args]) | See [example](#multi-scale-csv-data) | Add a layer from a multi scale CSV grid dataset. |
240
- | _app_.**addTiledCSVGridLayer**([args]) | See [example](#tiled-csv-data) | Add a layer from a tiled CSV grid dataset. |
241
- | _app_.**addMultiScaleTiledCSVGridLayer**([args]) | See [example](#multi-scale-tiled-csv-data) | Add a layer from a multi scale tiled CSV grid dataset. |
242
-
243
- To manage creation of datasets and their possible reuse accross different layers (so that the data is loaded and stored once), the following methods are also available:
244
-
245
- | Method | Arguments | Description |
246
- | --------------------------------------------------- | --------- | ------------------------------------------ |
247
- | _app_.**addLayerFromDataset**([args]) | - | Add a layer to the app. |
248
- | _app_.**makeCSVGridDataset**([args]) | - | Make a CSV grid dataset. |
249
- | _app_.**makeTiledCSVGridDataset**([args]) | - | Make a tiled CSV grid dataset. |
250
- | _app_.**makeMultiScaleCSVGridDataset**([args]) | - | Make a multi scale CSV grid dataset. |
251
- | _app_.**makeMultiScaleTiledCSVGridDataset**([args]) | - | Make a multi scale tiled CSV grid dataset. |
252
-
253
-
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.
264
-
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.
292
-
293
- ## Styles
294
-
295
- TODO: explain general principles, with (v,r,zf,s) functions. + use several styles by layer + define zoom extent for each style
296
-
297
- ### Shape/Color/Size Style
298
-
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"}__ |
315
-
316
-
317
- ### Square color WebGL Style
318
-
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.
320
-
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. |
330
-
331
- ### Composition style
332
-
333
- This style shows a composition at cell level in various different ways: Flags, pie charts, rings, segments, radar, age pyramid and halftone.
334
-
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
- | **.** | | | |
340
-
341
-
342
- ### Segment style
343
-
344
- This style displays each cell as a segment with a changeable color, length, width and orientation.
345
-
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
- | **.** | | | |
353
-
354
-
355
- ### Dot density style
356
-
357
- This style displays each cell as randomly located points, with changeable density and color.
358
-
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
- | **.** | | | |
364
-
365
- ### Stroke style
366
-
367
- This style shows the stroke of each cell with different colors, widths, shapes and sizes.
368
-
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
- | **.** | | | |
374
-
375
-
376
- ### Side style
377
-
378
- This style extract the sides of the cells and show each of them depending on the values of the 2 cells around.
379
-
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
- | **.** | | | |
385
-
386
-
387
- ### JoyPlot Style
388
-
389
- This style shows cell rows in the form of a 'joyplot' - named after Joy Division's "Unknown Pleasures" album cover.
390
-
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
- | **.** | | | |
396
-
397
- ### Mosaic style
398
-
399
- This style is a usual cell coloring style with a slight random deformation of the squares giving a 'mosaic' like effect.
400
-
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
- | **.** | | | |
406
-
407
-
408
- ### Tanaka style
409
-
410
- This style shows the grid cells in a Tanaka-like style, that is with discrete colors and shadow effect.
411
-
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
- | **.** | | | |
417
-
418
- ### Lego style
419
-
420
- This style shows the grid cells as lego bricks with changeable colors and height.
421
-
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
- | **.** | | | |
427
-
428
- ### Pillars style
429
-
430
- This style shows the grid cells as 3D pillars, with changeable heigths and colors.
431
-
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
- | **.** | | | |
437
-
438
- ### Text style
439
-
440
- This style shows the grid cells as text characters with different colors.
441
-
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
- | **.** | | | |
447
-
448
- ### Kernel smoothing style
449
-
450
- This style allows applying gaussian kernel smoothing to the grid.
451
-
452
- See [this example](https://eurostat.github.io/gridviz/examples/styles/kernelsmoothing.html) ([code](examples/styles/kernelsmoothing.html)).
453
-
454
- | Property | Type | Default | Description |
455
- | ----------- | -------- | ------- | ------------ |
456
- | **.** | | | |
457
-
458
-
459
- ## Legends
460
-
461
- TODO
462
-
463
-
464
- ## Stretching
465
-
466
- TODO - link to observable page
467
-
468
-
469
- ## Foreground information
470
-
471
-
472
- ### Showing labels
473
-
474
- TODO
475
-
476
- Example based on https://github.com/eurostat/euronym
477
-
478
- ### Showing boundaries
479
-
480
- TODO
481
-
482
- Example based on https://github.com/eurostat/Nuts2json
483
-
484
-
485
- ## Tooltip
486
-
487
- ![gridviz tooltip](/docs/img/tooltip.png)
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))
53
+ ## Documentation
505
54
 
506
- TODO: change tooltip style
55
+ See the **[API reference](docs/reference.md)**.
507
56
 
508
57
  ## About
509
58