gridviz 3.0.0 → 3.0.2

package/README.md

@@ -9,13 +9,12 @@
 </p>
 
 
-[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 using a large variety of [cartographic styles and techniques](https://eurostat.github.io/gridviz/docs/reference). Unlike traditional raster-based web mapping tools, Gridviz renders everything client-side, on the fly.
+[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 using a large variety of [cartographic styles and techniques](https://github.com/eurostat/gridviz/blob/master/docs/gallery.md). Unlike traditional raster-based web mapping tools, Gridviz renders everything client-side, on the fly.
 
 ## Styles
 
 [Visit the style gallery](https://github.com/eurostat/gridviz/blob/master/docs/gallery.md) to see the different customisable styles available for visualizing gridded data with gridviz.
 
-
 [<img src="docs/img/overviews/ov_accessibility.png" width="70" height="70">](https://eurostat.github.io/gridviz/docs/reference#shapecolorsize-style)
 [<img src="docs/img/overviews/ov_side_cat.png" width="70" height="70">](https://eurostat.github.io/gridviz/docs/reference#side-category-style)
 [<img src="docs/img/overviews/ov_age_balance.png" width="70" height="70">](https://eurostat.github.io/gridviz/docs/reference#shapecolorsize-style)
@@ -31,11 +30,11 @@
 
 ## Live Demos
 
--   [Europe - 1km resolution - GEOSTAT/GISCO](https://eurostat.github.io/gridviz/examples/EUR.html)
--   [Germany - 100m resolution - Zensus 2011](https://eurostat.github.io/gridviz/examples/DE.html)
--   [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).
--   [Norway - 250m resolution - SSB](https://eurostat.github.io/gridviz/examples/NO.html)
--   [Croatia - 1km resolution - DZS 2015 grid](https://eurostat.github.io/gridviz/examples/HR.html)
+-   [Europe - 1km resolution - GEOSTAT/GISCO](https://eurostat.github.io/gridviz/examples/demos/EUR.html)
+-   [Germany - 100m resolution - Zensus 2011](https://eurostat.github.io/gridviz/examples/demos/DE.html)
+-   [France - 200m resolution - INSEE Filosofi](https://eurostat.github.io/gridviz/examples/demos/FR.html). Focus on [total population](https://eurostat.github.io/gridviz/examples/demos/FR_pop.html) and [income](https://eurostat.github.io/gridviz/examples/demos/FR_income.html).
+-   [Norway - 250m resolution - SSB](https://eurostat.github.io/gridviz/examples/demos/NO.html)
+-   [Croatia - 1km resolution - DZS 2015 grid](https://eurostat.github.io/gridviz/examples/demos/HR.html)
 -   [France population, dark style](https://eurostat.github.io/gridviz/examples/styles/squarecolorwgl_dark.html)
 -   [Europe population as a mosaic](https://eurostat.github.io/gridviz/examples/styles/mosaic_full.html)
 
@@ -56,7 +55,7 @@ import * as gridviz from 'gridviz'
 Or you can cherry-pick only the modules that you need, for example:
 
 ```javascript
-import { App, SquareColorWGLStyle } from 'gridviz'
+import { Map, SquareColorWebGLStyle } from 'gridviz'
 ```
 
 ### Basic example
@@ -64,25 +63,27 @@ import { App, SquareColorWGLStyle } from 'gridviz'
 Here’s a basic example that loads a CSV file of a European population grid (5km resolution):
 
 ```javascript
-let map = new gridviz.Map(containerDiv)
-    //set position and zoom
-    .setView(4500000, 2900000, 3000)
-    //add CSV layer
-    .addCSVGridLayer(
-        //data URL
-        'https://raw.githubusercontent.com/eurostat/gridviz/master/assets/csv/Europe/pop_2018_5km.csv',
-        //resolution, in CRS unit (m)
-        5000,
-        //the style
-        [
-            new gridviz.SquareColorWGLStyle({
-                //the CSV column to show
-                colorCol: 'Population',
-                //value to [0,1] mapping function
-                tFun: (value) => gridviz.sExp(Math.min(value / 100000, 1), -15),
-            }),
-        ]
-    )
+//define map with initial view
+const map = new gridviz.Map(document.getElementById('map'), { x: 4500000, y: 2900000, z: 3000 })
+
+//define dataset
+const dataset = new gridviz.CSVGrid(map, "https://raw.githubusercontent.com/eurostat/gridviz/master/assets/csv/Europe/pop_2018_10km.csv", 10000)
+
+//define color for each cell
+const colorFunction = (cell) => {
+    if (cell.population > 150000) return "#993404"
+    else if (cell.population > 60000) return "#d95f0e"
+    else if (cell.population > 20000) return "#fe9929"
+    else if (cell.population > 6000) return "#fec44f"
+    else if (cell.population > 1500) return "#fee391"
+    else return "#ffffd4"
+}
+
+//define style
+const style = new gridviz.ShapeColorSizeStyle({ color: colorFunction })
+
+//add layer to map
+map.layers = [new gridviz.GridLayer(dataset, [style])]
 ```
 
 See the **[documentation page](https://eurostat.github.io/gridviz/docs/reference)** for more information.
@@ -95,7 +96,9 @@ See the **[documentation page](https://eurostat.github.io/gridviz/docs/reference
 
 ## Documentation
 
-See the **[gridviz documentation page](https://github.com/eurostat/gridviz/blob/master/docs/reference.md)**.
+See the **[gridviz documentation page](./docs/reference.md)**.
+
+The document of [the previous version 2](./docs/reference_v2.md).
 
 ## Grid tiling
 
@@ -103,12 +106,12 @@ In order to visualize large grids efficiently, you can produce tiled grids in a
 
 ## About
 
-|                |                                                                                                                                                                                       |
-| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+|                |        |
+| -------------- | ----------- |
 | _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) |
-| _version_      | See [npm](https://www.npmjs.com/package/gridviz?activeTab=versions)                                                                                                                   |
-| _status_       | Since 2020                                                                                                                                                                            |
-| _license_      | [EUPL 1.2](LICENSE)                                                                                                                                                                   |
+| _version_      | See [npm](https://www.npmjs.com/package/gridviz?activeTab=versions)            |
+| _status_       | Since 2020         |
+| _license_      | [EUPL 1.2](LICENSE)            |
 
 ### Support and contribution