gridviz 1.2.4 → 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/LICENSE +190 -204
- package/README.md +528 -0
- package/build/gridviz.min.js +1 -1
- package/package.json +71 -65
- package/readme.md +0 -310
package/package.json
CHANGED
|
@@ -1,65 +1,71 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "gridviz",
|
|
3
|
-
"version": "
|
|
4
|
-
"description": "Visualization tool for gridded statistics",
|
|
5
|
-
"keywords": [
|
|
6
|
-
"statistics",
|
|
7
|
-
"grid",
|
|
8
|
-
"gridded",
|
|
9
|
-
"grids",
|
|
10
|
-
"gridded statistics",
|
|
11
|
-
"dataviz",
|
|
12
|
-
"csv",
|
|
13
|
-
"GIS",
|
|
14
|
-
"WebGL",
|
|
15
|
-
"d3"
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
"
|
|
19
|
-
"
|
|
20
|
-
|
|
21
|
-
"
|
|
22
|
-
"
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
"
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
"
|
|
35
|
-
"
|
|
36
|
-
},
|
|
37
|
-
"
|
|
38
|
-
"
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
"
|
|
43
|
-
"
|
|
44
|
-
"
|
|
45
|
-
"
|
|
46
|
-
"
|
|
47
|
-
"
|
|
48
|
-
"
|
|
49
|
-
"
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
"
|
|
53
|
-
"
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
"
|
|
57
|
-
"
|
|
58
|
-
"
|
|
59
|
-
"
|
|
60
|
-
"
|
|
61
|
-
"
|
|
62
|
-
"
|
|
63
|
-
"
|
|
64
|
-
|
|
65
|
-
|
|
1
|
+
{
|
|
2
|
+
"name": "gridviz",
|
|
3
|
+
"version": "2.0.1",
|
|
4
|
+
"description": "Visualization tool for gridded statistics",
|
|
5
|
+
"keywords": [
|
|
6
|
+
"statistics",
|
|
7
|
+
"grid",
|
|
8
|
+
"gridded",
|
|
9
|
+
"grids",
|
|
10
|
+
"gridded statistics",
|
|
11
|
+
"dataviz",
|
|
12
|
+
"csv",
|
|
13
|
+
"GIS",
|
|
14
|
+
"WebGL",
|
|
15
|
+
"d3"
|
|
16
|
+
],
|
|
17
|
+
"homepage": "https://github.com/eurostat/gridviz",
|
|
18
|
+
"author": "Joseph Davies, Julien Gaffuri",
|
|
19
|
+
"license": "EUPL-1.2",
|
|
20
|
+
"repository": {
|
|
21
|
+
"type": "git",
|
|
22
|
+
"url": "https://github.com/eurostat/gridviz.git"
|
|
23
|
+
},
|
|
24
|
+
"bugs": {
|
|
25
|
+
"url": "https://github.com/eurostat/gridviz/issues",
|
|
26
|
+
"email": "Joseph.DAVIES@ext.ec.europa.eu"
|
|
27
|
+
},
|
|
28
|
+
"main": "build/gridviz.min.js",
|
|
29
|
+
"scripts": {
|
|
30
|
+
"test": "echo \"Error: no test specified\" && exit 1",
|
|
31
|
+
"start": "npm run build-dev",
|
|
32
|
+
"build": "npm run build-prod",
|
|
33
|
+
"doc": "./node_modules/.bin/jsdoc src/js/ src/js/dataset src/js/legend src/js/style -d docs/jsdoc",
|
|
34
|
+
"build-dev": "webpack --config webpack.config.dev.js",
|
|
35
|
+
"build-prod": "webpack --config webpack.config.prod.js"
|
|
36
|
+
},
|
|
37
|
+
"files": [
|
|
38
|
+
"build/gridviz.min.js"
|
|
39
|
+
],
|
|
40
|
+
"dependencies": {
|
|
41
|
+
"@babel/runtime": "^7.12.1",
|
|
42
|
+
"d3-color": "^3.1.0",
|
|
43
|
+
"d3-fetch": "^3.0.1",
|
|
44
|
+
"d3-format": "^3.1.0",
|
|
45
|
+
"d3-random": "^3.0.1",
|
|
46
|
+
"d3-geo": "^3.0.1",
|
|
47
|
+
"d3-scale-chromatic": "^3.0.0",
|
|
48
|
+
"d3-selection": "^3.0.0",
|
|
49
|
+
"d3-zoom": "^3.0.0",
|
|
50
|
+
"geotiff": "^2.0.5",
|
|
51
|
+
"publish": "^0.6.0",
|
|
52
|
+
"puppeteer": "^1.13.0",
|
|
53
|
+
"rbush": "^3.0.1"
|
|
54
|
+
},
|
|
55
|
+
"devDependencies": {
|
|
56
|
+
"@babel/core": "^7.9.0",
|
|
57
|
+
"@babel/plugin-transform-runtime": "^7.12.1",
|
|
58
|
+
"@babel/preset-env": "^7.9.0",
|
|
59
|
+
"babel-loader": "^8.1.0",
|
|
60
|
+
"css-loader": "^3.4.2",
|
|
61
|
+
"file-loader": "^6.2.0",
|
|
62
|
+
"jsdoc": "^3.6.3",
|
|
63
|
+
"style-loader": "^1.1.3",
|
|
64
|
+
"url-loader": "^4.1.1",
|
|
65
|
+
"jest": "^26.6.1",
|
|
66
|
+
"jshint": "^2.12.0",
|
|
67
|
+
"webpack": "^4.41.2",
|
|
68
|
+
"webpack-cli": "^3.3.10",
|
|
69
|
+
"webpack-livereload-plugin": "^2.3.0"
|
|
70
|
+
}
|
|
71
|
+
}
|
package/readme.md
DELETED
|
@@ -1,310 +0,0 @@
|
|
|
1
|
-
<meta name="google-site-verification" content="CF-f4tTHtmjHmKOBZXcJHfeioXOJnGPmnVvxFzKGMlA" />
|
|
2
|
-
|
|
3
|
-
# gridviz
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
A JavaScript library for visualizing large amounts of gridded data client-side, through the power of WebGL.
|
|
9
|
-
|
|
10
|
-
<div>
|
|
11
|
-
<!-- <img src="https://raw.githubusercontent.com/eurostat/gridviz/master/assets/images/previews/preview.gif" alt="preview" width="98%" height="10%"/> -->
|
|
12
|
-
<a href="https://eurostat.github.io/gridviz/examples/europe/2km/index.html" target="_blank"><img src="https://raw.githubusercontent.com/eurostat/gridviz/master/docs/screenshots/cropped/2km.png" alt="preview" width="200px" height="200px"/></a>
|
|
13
|
-
<a href="https://eurostat.github.io/gridviz/examples/europe/2km/index.html" target="_blank"><img src="https://raw.githubusercontent.com/eurostat/gridviz/master/docs/screenshots/cropped/berlin.png" alt="preview" width="200px" height="200px"/></a>
|
|
14
|
-
<a href="https://eurostat.github.io/gridviz/examples/netherlands/index.html" target="_blank"><img src="https://raw.githubusercontent.com/eurostat/gridviz/master/docs/screenshots/cropped/nl.png" alt="preview" width="200px" height="200px"/></a>
|
|
15
|
-
<a href="https://eurostat.github.io/gridviz/examples/europe/1km/index.html" target="_blank"><img src="https://raw.githubusercontent.com/eurostat/gridviz/master/docs/screenshots/cropped/paris.png" alt="preview" width="200px" height="200px"/></a>
|
|
16
|
-
</div>
|
|
17
|
-
|
|
18
|
-
# Table of contents
|
|
19
|
-
|
|
20
|
-
- [Introduction](#introduction)
|
|
21
|
-
- [Examples](#examples)
|
|
22
|
-
- [Installation](#installation)
|
|
23
|
-
- [Node.js](#nodejs)
|
|
24
|
-
- [standalone](#standalone)
|
|
25
|
-
- [Usage](#usage)
|
|
26
|
-
- [Preparing csv data](#preparing-csv-data)
|
|
27
|
-
- [API reference](#api-reference)
|
|
28
|
-
- [Styling](#styling)
|
|
29
|
-
- [Defining the data](#defining-the-data)
|
|
30
|
-
- [Cell colouring](#cell-colouring)
|
|
31
|
-
- [Cell sizing](#cell-sizing)
|
|
32
|
-
- [Legend](#legend)
|
|
33
|
-
- [Tooltip](#tooltip)
|
|
34
|
-
- [About](#about)
|
|
35
|
-
- [Contribute](#support-and-contribution)
|
|
36
|
-
- [Copyright](#copyright)
|
|
37
|
-
- [Disclaimer](#disclaimer)
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
## Introduction
|
|
42
|
-
|
|
43
|
-
Gridviz is a JavaScript library which allows you to visualize large gridded datasets (or any csv file with x/y data) in the browser. Unlike traditional raster-based GIS approaches, this tool utilizes WebGL through [three.js](https://github.com/mrdoob/three.js/) in order to render eveything client-side.
|
|
44
|
-
|
|
45
|
-
From a CSV file with x and y columns, gridviz will build a viewer capable of visualizing millions of grid cells on the fly.
|
|
46
|
-
|
|
47
|
-
For data-driven colouring and sizing, you can use [d3-scale](https://github.com/d3/d3-scale) and [d3-scale-chromatic](https://github.com/d3/d3-scale-chromatic), or simply set your own colours and thresholds.
|
|
48
|
-
|
|
49
|
-
## Examples
|
|
50
|
-
|
|
51
|
-
| Link to example | Data source | Link to code |
|
|
52
|
-
| :---------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- |
|
|
53
|
-
| [Europe - 5x5km Population Grid](https://eurostat.github.io/gridviz/examples/europe/5km/index.html) | [data source](https://ec.europa.eu/eurostat/web/gisco) | [See code](https://github.com/eurostat/gridviz/blob/master/examples/europe/5km/index.html) |
|
|
54
|
-
| [Europe - 2x2km Population Grid](https://eurostat.github.io/gridviz/examples/europe/2km/index.html) | [data source](https://ec.europa.eu/eurostat/web/gisco) | [See code](https://github.com/eurostat/gridviz/blob/master/examples/europe/2km/index.html) |
|
|
55
|
-
| [Europe - 1x1km Population Grid](https://eurostat.github.io/gridviz/examples/europe/1km/index.html) | [data source](https://ec.europa.eu/eurostat/web/gisco) | [See code](https://github.com/eurostat/gridviz/blob/master/examples/europe/1km/index.html) |
|
|
56
|
-
| [Netherlands - 100x100m Census data](https://eurostat.github.io/gridviz/examples/netherlands/index.html) | [data source](https://www.cbs.nl/nl-nl/dossier/nederland-regionaal/geografische-data/kaart-van-100-meter-bij-100-meter-met-statistieken) | [See code](https://github.com/eurostat/gridviz/blob/master/examples/netherlands/index.html) |
|
|
57
|
-
| [France - 1x1km Population Grid](https://eurostat.github.io/gridviz/examples/france/index.html) | [data source](https://insee.fr/fr/statistiques/4176290?sommaire=4176305) | [See code](https://github.com/eurostat/gridviz/blob/master/examples/france/1km/index.html) |
|
|
58
|
-
| [SE France - Building area by type per km²](https://eurostat.github.io/gridviz/examples/france/building_area/index.html) | [data source](https://insee.fr/fr/statistiques/4176290?sommaire=4176305) | [See code](https://github.com/eurostat/gridviz/blob/master/examples/france/building_area/index.html) |
|
|
59
|
-
| [France - Inhabitants over 80 years of age per 1km²](https://eurostat.github.io/gridviz/examples/france/population-over-80.html) | [data source](https://insee.fr/fr/statistiques/4176290?sommaire=4176305) | [See code](https://github.com/eurostat/gridviz/blob/master/examples/france/population-over-80.html) |
|
|
60
|
-
| [Portugal census data](https://eurostat.github.io/gridviz/examples/portugal/index.html) | [data source](https://www.efgs.info/data/national/) | [See code](https://github.com/eurostat/gridviz/blob/master/examples/portugal/index.html) |
|
|
61
|
-
| [Average internet speed 2020 (ookla open data, 400x400m grid)](https://eurostat.github.io/gridviz/examples/europe/ookla/index.html) | [data source](https://github.com/teamookla/ookla-open-data) | [See code](https://github.com/eurostat/gridviz/blob/master/examples/europe/ookla/index.html) |
|
|
62
|
-
|
|
63
|
-
## Installation
|
|
64
|
-
|
|
65
|
-
### Node.js
|
|
66
|
-
|
|
67
|
-
```Shell
|
|
68
|
-
npm install gridviz
|
|
69
|
-
```
|
|
70
|
-
|
|
71
|
-
then
|
|
72
|
-
```javascript
|
|
73
|
-
gridviz = require("gridviz")
|
|
74
|
-
```
|
|
75
|
-
|
|
76
|
-
### standalone
|
|
77
|
-
|
|
78
|
-
```javascript
|
|
79
|
-
<script src="https://unpkg.com/gridviz/build/gridviz.min.js"></script>
|
|
80
|
-
```
|
|
81
|
-
|
|
82
|
-
## Usage
|
|
83
|
-
|
|
84
|
-
Create a viewer using ```let viewer = gridviz.viewer();``` and customise it with the methods below.
|
|
85
|
-
|
|
86
|
-
Most of these methods follow the pattern viewer.myMethod([value]): If a value is specified, the method sets the parameter value and returns the viewer object itself. If no value is specified, then the method returns the current value of the parameter.
|
|
87
|
-
|
|
88
|
-
Here's a barebones example that loads a CSV containing population data for a 5 km² grid of europe:
|
|
89
|
-
|
|
90
|
-
```javascript
|
|
91
|
-
let viz = gridviz.viewer()
|
|
92
|
-
.container(containerDiv)
|
|
93
|
-
.gridData(
|
|
94
|
-
{
|
|
95
|
-
url: "https://raw.githubusercontent.com/eurostat/gridviz/master/assets/csv/Europe/5km/3035/pop_5km_zeros_removed.csv",
|
|
96
|
-
cellSize: 5
|
|
97
|
-
}
|
|
98
|
-
)
|
|
99
|
-
.colorField("population") // The csv column that will determine cell colour
|
|
100
|
-
.build()
|
|
101
|
-
```
|
|
102
|
-
|
|
103
|
-
For an explanation of all the available functionality, see the developer docs below.
|
|
104
|
-
|
|
105
|
-
## Preparing csv data
|
|
106
|
-
|
|
107
|
-
If you have exported your grid data as points to a csv file, then it is likely that you can reduce the file size significantly by removing redundant data. We have prepared a small node.js package exactly for this, which you will find in the [csv-prep folder](https://github.com/eurostat/gridviz/tree/master/csv-prep) of this repository.
|
|
108
|
-
|
|
109
|
-
Here is an example of removing unnecessary information:
|
|
110
|
-
|
|
111
|
-
Turning each row from this...
|
|
112
|
-
|
|
113
|
-
```
|
|
114
|
-
OBJECTID;ID;Cnt_ID;Ave_Total_Trav
|
|
115
|
-
1;CRS3035RES1000mN1000000E1967000;3;49,121209420200000
|
|
116
|
-
```
|
|
117
|
-
|
|
118
|
-
into this...
|
|
119
|
-
|
|
120
|
-
```
|
|
121
|
-
x,y,time
|
|
122
|
-
1967,1000,49
|
|
123
|
-
```
|
|
124
|
-
|
|
125
|
-
## API reference
|
|
126
|
-
|
|
127
|
-
Here you will find information on how to use the functions available for configuring a gridviz viewer. Like D3, gridviz uses a method chaining syntax (as shown in the barebones example above).
|
|
128
|
-
|
|
129
|
-
First create a viewer with ``let viewer = gridviz.viewer() ``.
|
|
130
|
-
|
|
131
|
-
Then configure it using the methods in the table below. The methods follow the pattern: ``viewer.method([value])``.
|
|
132
|
-
|
|
133
|
-
Once you have configured the viewer, you can build it using `` viewer.build() ``.
|
|
134
|
-
|
|
135
|
-
### Contents
|
|
136
|
-
- [Styling](#styling)
|
|
137
|
-
- [Defining the data](#defining-the-data)
|
|
138
|
-
- [Cell colouring](#cell-colouring)
|
|
139
|
-
- [Cell sizing](#cell-sizing)
|
|
140
|
-
- [Legend](#legend)
|
|
141
|
-
- [Tooltip](#tooltip)
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
### Styling
|
|
145
|
-
|
|
146
|
-
These are the methods available for styling the viewer.
|
|
147
|
-
|
|
148
|
-
| Method | Type | Default | Description |
|
|
149
|
-
| ------------------------------------- | ----------- | ------------------ | ------------------------------------------------------------------------------------------------ |
|
|
150
|
-
| *viewer*.**container**([value]) | HTMLElement | document.body | The DOM element passed to the THREE.js renderer. |
|
|
151
|
-
| *viewer*.**height**([value]) | int | window.innerHeight | The height value used for the threejs scene, camera, zoom, labels. |
|
|
152
|
-
| *viewer*.**width**([value]) | int | window.innerWidth | The width value used for the threejs scene, camera, zoom, labels. |
|
|
153
|
-
| *viewer*.**backgroundColor**([value]) | String | "#b7b7b7" | Viewer background colour |
|
|
154
|
-
| *viewer*.**lineColor**([value]) | String | "#ffffff" | Colour used for line geometries |
|
|
155
|
-
| *viewer*.**highlightColor**([value]) | String | "#37f2d6" | Colour used when highlighting a cell |
|
|
156
|
-
| *viewer*.**loadingIcon**([value]) | String | "ring" | CSS animation used for the loading icon, other options are: ripple \| ring \| ellipsis \|roller. |
|
|
157
|
-
| *viewer*.**title**([value]) | String | null | The viewer's title |
|
|
158
|
-
| *viewer*.**subtitle**([value]) | String | null | The viewer's subtitle |
|
|
159
|
-
| *viewer*.**cellCount**([value]) | Boolean | false | Shows a count below the title of the total number of cells displayed in the viewer. |
|
|
160
|
-
| *viewer*.**sourceHTML**([value]) | HTML | null | Defines the innerHTML of the link to the data source shown in the bottom-right corner |
|
|
161
|
-
|
|
162
|
-
</br>
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
### Defining the data
|
|
166
|
-
|
|
167
|
-
These methods allow you to define the data that is added to the viewer and how it is presented.
|
|
168
|
-
|
|
169
|
-
| Method | Type | Default | Description |
|
|
170
|
-
| ------------------------------------------ | ---------------------------------- | ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
171
|
-
| *viewer*.**gridData**([value]) | Object {url:string, cellSize: int} | null | Object containing the URL of the grid's CSV file and its cellSize (this will determine the point size in three.js). A 1 km² grid in EPSG:3035 will have a cellSize of 1000. |
|
|
172
|
-
| *viewer*.**center**([value]) | Array | null | [x,y] coordinates with which the viewer will center the camera. |
|
|
173
|
-
| *viewer*.**zoom**([value]) | Number | (cellSize * 50000) / 2 | The initial Z position of the camera. |
|
|
174
|
-
| *viewer*.**addGeoJson**([value]) | String | null | Loads a geojson file from the specified URL and adds it's geometries to the viewer. Currently only accepts "polygon" or "multipolygon" geometries |
|
|
175
|
-
| *viewer*.**nuts**([value]) | Boolean | false | Show NUTS boundaries using [nuts2json](https://github.com/eurostat/nuts2json) |
|
|
176
|
-
| *viewer*.**EPSG**([value]) | int | 3035 | EPSG code of the projection to use for the geometries, placename labels and NUTS boundaries. (NUTS and Placenames only available in 3035, 3857, 4258 or 4326) |
|
|
177
|
-
| *viewer*.**nutsLevel**([value]) | int | 0 | Nuts2json NUTS level |
|
|
178
|
-
| *viewer*.**nutsSimplification**([value]) | String | "20M" | The level of generalisation applied to the Nuts2json geometries |
|
|
179
|
-
| *viewer*.**nutsCountry**([value]) | String | null | Filters nuts2json geometries by country code. Used in order to only load boundaries for a single country. | |
|
|
180
|
-
| *viewer*.**showPlacenames**([value]) | Boolean | false | Adds placenames to the viewer. Placename-scale thresholds currently defined by the user. |
|
|
181
|
-
| *viewer*.**placenamesCountry**([value]) | String | null | Filters placenames by country code |
|
|
182
|
-
| *viewer*.**placenamesThresholds**([value]) | Object | null | Defines population query parameter at certain scale thresholds e.g. {"100000":500} will show placenames with populations of over 5000 at scales up to 100 000 |
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
<br>
|
|
187
|
-
|
|
188
|
-
### Cell colouring
|
|
189
|
-
|
|
190
|
-
The methods that can be used to determine the colour of the grid cells.
|
|
191
|
-
|
|
192
|
-
| Method | Type | Default | Description |
|
|
193
|
-
| ----------------------------------------- | -------- | -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
194
|
-
| *viewer*.**colorField**([value]) | String | null | CSV field used to determine cell colour |
|
|
195
|
-
| *viewer*.**colorScaleName**([value]) | String | "scaleSequential" | The name of d3.scale function name to use for scaling cell colours. If you would like to define your own scale you can use colorScaleFunction() |
|
|
196
|
-
| *viewer*.**colorScaleMidpoint**([value]) | Number | 0 | The midpoint value when using a diverging scale (when viewer.colorScaleName is set to 'scaleDiverging') |
|
|
197
|
-
| *viewer*.**colorScaleFunction**([value]) | Function | d3.[viewer.colorScaleName] | Define a scale function to be used for color scaling. If unspecified it will build a d3 scale using viewer.colorScaleName and the d3.extent() of the values loaded from viewer.colorField. |
|
|
198
|
-
| *viewer*.**reverseColorScheme**([value]) | Boolean | false | Flips the current color scheme. Applies .reverse() method to the 'domain' array of the scale. |
|
|
199
|
-
| *viewer*.**colorSchemeName**([value]) | String | "interpolateTurbo" | Name of d3.scaleChromatic function to use for scaling cell colours |
|
|
200
|
-
| *viewer*.**colors**([value]) | Array | null | Array of hex strings to be used in combination with viewer.thresholds for colouring. |
|
|
201
|
-
| *viewer*.**thresholds**([value]) | Array | null | Array of threshold values that are applied to the colour scaling function. |
|
|
202
|
-
| *viewer*.**colorFieldSelector**([value]) | boolean | false | Generates a simple HTML select input showing the available fields in the csv file that can be used to drive cell colour. |
|
|
203
|
-
| *viewer*.**colorSchemeSelector**([value]) | boolean | false | Generates an HTML Select element for the different D3 Scale-Chromatic functions |
|
|
204
|
-
|
|
205
|
-
<br>
|
|
206
|
-
|
|
207
|
-
### Cell sizing
|
|
208
|
-
|
|
209
|
-
The methods that can be used to determine the size of the grid cells.
|
|
210
|
-
|
|
211
|
-
| Method | Type | Default | Description |
|
|
212
|
-
| --------------------------------------- | -------- | ------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
213
|
-
| *viewer*.**sizeField**([value]) | String | null | CSV field used to determine cell size |
|
|
214
|
-
| *viewer*.**sizeScaleName**([value]) | String | "scaleSqrt | Name of d3.scale function name to use for scaling cell sizes |
|
|
215
|
-
| *viewer*.**sizeScaleFunction**([value]) | Function | d3.[viewer.sizeScaleName] | Define a scale function to be used for scaling cell sizes. If unspecified it will build a d3 scale using viewer.colorScaleName, the d3.extent() of the values loaded from viewer.sizeField and a range of [viewer *viewer*.**resolution / 3, viewer.resolution / 1.5] |
|
|
216
|
-
| *viewer*.**sizeFieldSelector**([value]) | boolean | false | Generates a simple HTML select input showing the available fields in the csv file that can be used to drive cell size. |
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
<br>
|
|
220
|
-
|
|
221
|
-
### Legend
|
|
222
|
-
|
|
223
|
-
The possible configurations for the legend of the grid data.
|
|
224
|
-
|
|
225
|
-
Default:
|
|
226
|
-
```javascript
|
|
227
|
-
{
|
|
228
|
-
type: "continuous", //cells vs continuous
|
|
229
|
-
width: 300,
|
|
230
|
-
height: null,
|
|
231
|
-
orientation: "horizontal",
|
|
232
|
-
title: null, //if null, will default to the current colorField
|
|
233
|
-
titleWidth: 50,
|
|
234
|
-
format: ".0s",
|
|
235
|
-
cells: 5,
|
|
236
|
-
shapeWidth: 30
|
|
237
|
-
}
|
|
238
|
-
```
|
|
239
|
-
|
|
240
|
-
| Method / Object | Type | Default | Description |
|
|
241
|
-
| ------------------------------------- | ------- | --------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
242
|
-
| showLegend([value]) | boolean | true | Build d3 colour legend. |
|
|
243
|
-
| *viewer*.**legend**([*legendConfig*]) | Object | See legendConfig default values below. |
|
|
244
|
-
| **legendConfig**.type | String | "continuous" | Type of legend to build. Accepted values are "cells" or "continuous". Cells uses [d3-svg-legend](https://d3-legend.susielu.com/) and continuous uses an implementation of Mike Bostock's [color legend](https://observablehq.com/@d3/color-legend) |
|
|
245
|
-
| **legendConfig**.width | int | 140 | width of the legend in pixels |
|
|
246
|
-
| **legendConfig**.height | int | 320 for "cells" and 50 for "continuous" | height of the legend in pixels |
|
|
247
|
-
| **legendConfig**.orientation | int | For cells legends only | "vertical" or "horizontal" |
|
|
248
|
-
| **legendConfig**.title | String | "Legend" | Title text of the legend. |
|
|
249
|
-
| **legendConfig**.titleWidth | int | 50 | Width of the title text of the legend. |
|
|
250
|
-
| **legendConfig**.format | string | ".0s" | d3.format string used to format the legend values |
|
|
251
|
-
| **legendConfig**.cells | int | 5 | Number of cells (for cell legends only) |
|
|
252
|
-
| **legendConfig**.shapeWidth | int | 30 | width in pixels of legend cell (for cell legends only) |
|
|
253
|
-
|
|
254
|
-
<br>
|
|
255
|
-
|
|
256
|
-
### Tooltip
|
|
257
|
-
|
|
258
|
-
The possible configurations for the viewer's tooltip.
|
|
259
|
-
|
|
260
|
-
Default:
|
|
261
|
-
```javascript
|
|
262
|
-
{
|
|
263
|
-
eventType: "click", // click vs mouseover
|
|
264
|
-
showLAU: true,
|
|
265
|
-
showEPSG: true,
|
|
266
|
-
showNUTS: true,
|
|
267
|
-
showCoordinates: true,
|
|
268
|
-
xOffset: 15,
|
|
269
|
-
yOffset: 15
|
|
270
|
-
}
|
|
271
|
-
```
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
| Method / Object | Type | Default | Description |
|
|
275
|
-
| --------------------------------------- | ------- | --------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
276
|
-
| *viewer*.**tooltip**([*tooltipConfig*]) | Object | See tooltipConfig default values below. |
|
|
277
|
-
| **tooltipConfig**.eventType | String | "click" | The mouse event that will trigger the tooltip ("click" or "mousemove" being the most common, depending on the dataset). You might want to set showLAU and showNUTS to false when using mousemove. |
|
|
278
|
-
| **tooltipConfig**.showLAU | boolean | true | Whether or not to show the LAU code in the tooltip (only available for EPSG 4326, 4258 or 3035) |
|
|
279
|
-
| **tooltipConfig**.showNUTS | boolean | true | Whether or not to show the LAU code in the tooltip (only available for EPSG 4326, 4258 or 3035) |
|
|
280
|
-
| **tooltipConfig**.showCoordinates | boolean | true | Whether or not to show the LAU code in the tooltip (only available for EPSG 4326, 4258 or 3035) |
|
|
281
|
-
| **tooltipConfig**.showEPSG | boolean | true | Whether or not to show the LAU code in the tooltip (only available for EPSG 4326, 4258 or 3035) |
|
|
282
|
-
| **tooltipConfig**.xOffset | int | 15 | X offset in pixels from the mouse position |
|
|
283
|
-
| **legendConfig**.yOffset | int | 15 | Y offset in pixels from the mouse position |
|
|
284
|
-
|
|
285
|
-
<br>
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
## About
|
|
289
|
-
|
|
290
|
-
| | |
|
|
291
|
-
| ------ | -------- |
|
|
292
|
-
| *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) |
|
|
293
|
-
| *version* | See [npm](https://www.npmjs.com/package/gridviz?activeTab=versions) |
|
|
294
|
-
| *status* | Since 2020 |
|
|
295
|
-
| *license* | [EUPL 1.2](https://github.com/eurostat/Nuts2json/blob/master/LICENSE) |
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
## Support and contribution
|
|
299
|
-
|
|
300
|
-
Feel free to [ask support](https://github.com/eurostat/eurostat.js/issues/new), fork the project or simply star it (it's always a pleasure).
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
## Copyright
|
|
304
|
-
|
|
305
|
-
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
|
-
|
|
307
|
-
|
|
308
|
-
## Disclaimer
|
|
309
|
-
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.
|
|
310
|
-
|