From 2908ae02b2bb71d2d02a014ee6f068341dea5158 Mon Sep 17 00:00:00 2001 From: jgaffuri Date: Tue, 11 Jul 2023 13:34:03 +0200 Subject: [PATCH] extract kernel smoothing as extension --- docs/reference.md | 108 +++++++++++---------- examples/styles/kernelsmoothing.html | 3 +- examples/styles/kernelsmoothing_small.html | 3 +- 3 files changed, 59 insertions(+), 55 deletions(-) diff --git a/docs/reference.md b/docs/reference.md index 6f22d8364..f8dfcbebd 100644 --- a/docs/reference.md +++ b/docs/reference.md @@ -2,52 +2,52 @@ ## Table of contents -- [Gridviz API reference](#gridviz-api-reference) - - [Table of contents](#table-of-contents) - - [Usage](#usage) - - [App Configuration](#app-configuration) - - [App options object](#app-options-object) - - [Multi layer, multi style and multi scale mapping](#multi-layer-multi-style-and-multi-scale-mapping) - - [Adding data](#adding-data) - - [Single CSV file](#single-csv-file) - - [Multi scale CSV data](#multi-scale-csv-data) - - [Tiled data](#tiled-data) - - [Multi scale tiled data](#multi-scale-tiled-data) - - [Data pre-processing and filtering](#data-pre-processing-and-filtering) - - [Basic styles](#basic-styles) - - [Shape/Color/Size Style](#shapecolorsize-style) - - [Square color WebGL Style](#square-color-webgl-style) - - [Square color category WebGL style](#square-color-category-webgl-style) - - [Composition style](#composition-style) - - [Segment style](#segment-style) - - [Stroke style](#stroke-style) - - [Advanced styles](#advanced-styles) - - [Tanaka style](#tanaka-style) - - [Dot density style](#dot-density-style) - - [Pillars style](#pillars-style) - - [Text style](#text-style) - - [Side styles](#side-styles) - - [Side style](#side-style) - - [Side category style](#side-category-style) - - [Contour style](#contour-style) - - [Esthetic styles](#esthetic-styles) - - [JoyPlot Style](#joyplot-style) - - [Mosaic style](#mosaic-style) - - [Ninja star style](#ninja-star-style) - - [Lego style](#lego-style) - - [Lego category style](#lego-category-style) - - [Kernel smoothing](#kernel-smoothing) - - [Others styles](#others-styles) - - [Legends](#legends) - - [Stretching](#stretching) - - [Background layer](#background-layer) - - [Tiled layer](#tiled-layer) - - [WMS](#wms) - - [Foreground information](#foreground-information) - - [Showing labels](#showing-labels) - - [Showing boundaries](#showing-boundaries) - - [Tooltip](#tooltip) - - [Alright?](#alright) +- [Gridviz API reference](#gridviz-api-reference) + - [Table of contents](#table-of-contents) + - [Usage](#usage) + - [App Configuration](#app-configuration) + - [App options object](#app-options-object) + - [Multi layer, multi style and multi scale mapping](#multi-layer-multi-style-and-multi-scale-mapping) + - [Adding data](#adding-data) + - [Single CSV file](#single-csv-file) + - [Multi scale CSV data](#multi-scale-csv-data) + - [Tiled data](#tiled-data) + - [Multi scale tiled data](#multi-scale-tiled-data) + - [Data pre-processing and filtering](#data-pre-processing-and-filtering) + - [Basic styles](#basic-styles) + - [Shape/Color/Size Style](#shapecolorsize-style) + - [Square color WebGL Style](#square-color-webgl-style) + - [Square color category WebGL style](#square-color-category-webgl-style) + - [Composition style](#composition-style) + - [Segment style](#segment-style) + - [Stroke style](#stroke-style) + - [Advanced styles](#advanced-styles) + - [Tanaka style](#tanaka-style) + - [Dot density style](#dot-density-style) + - [Pillars style](#pillars-style) + - [Text style](#text-style) + - [Side styles](#side-styles) + - [Side style](#side-style) + - [Side category style](#side-category-style) + - [Contour style](#contour-style) + - [Esthetic styles](#esthetic-styles) + - [JoyPlot Style](#joyplot-style) + - [Mosaic style](#mosaic-style) + - [Ninja star style](#ninja-star-style) + - [Lego style](#lego-style) + - [Lego category style](#lego-category-style) + - [Kernel smoothing](#kernel-smoothing) + - [Others styles](#others-styles) + - [Legends](#legends) + - [Stretching](#stretching) + - [Background layer](#background-layer) + - [Tiled layer](#tiled-layer) + - [WMS](#wms) + - [Foreground information](#foreground-information) + - [Showing labels](#showing-labels) + - [Showing boundaries](#showing-boundaries) + - [Tooltip](#tooltip) + - [Alright?](#alright) Anything unclear or missing? Feel free to [ask](https://github.com/eurostat/gridviz/issues/new) ! @@ -718,18 +718,20 @@ See [this other example](https://eurostat.github.io/gridviz/examples/styles/lego This style allows applying a gaussian kernel smoothing to the input grid. Other styles can then be used on the smoothed grid - this style is thus more a 'filter' than a proper style. +Note that this style is available within the [gridviz-smoothing](https://github.com/eurostat/gridviz-smoothing) extension which need to be added as: ``. + See [this elementary example](https://eurostat.github.io/gridviz/examples/styles/kernelsmoothing_small.html) ([code](https://github.com/eurostat/gridviz/blob/master/examples/styles/kernelsmoothing_small.html)). See [this example](https://eurostat.github.io/gridviz/examples/styles/kernelsmoothing.html) ([code](https://github.com/eurostat/gridviz/blob/master/examples/styles/kernelsmoothing.html)). -| Property | Type | Default | Description | -| ------------ | ---------------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **value** | function(cel):number | | A function returning the value to consider for each cell. This is the value to be smoothed. | -| **sigma** | function(r, zf):number | | The smoothing parameter (gaussian standard deviation), in geographical unit, computed from the resolution **r** and the zoom factor **zf**. The larger, the more smoothed. Note that for too small values, the approximation degrades significantly. | +| Property | Type | Default | Description | +| ------------ | ------------ | -------- | ------------- | +| **value** | function(cel):number | | A function returning the value to consider for each cell. This is the value to be smoothed. | +| **sigma** | function(r, zf):number | | The smoothing parameter (gaussian standard deviation), in geographical unit, computed from the resolution **r** and the zoom factor **zf**. The larger, the more smoothed. Note that for too small values, the approximation degrades significantly. | | **factor** | number | 2 | The smoothed grid may have a finer resolution than the input grid. This factor defines the smoothed grid resolution. When set to 1, the smoothed grid is exactly the screen resolution. Set to 2 to degrade the resolution to a factor 2. The higher, the more pixelised and the faster to compute. | -| **filterSm** | function(v):boolean | | A filter function to filter the smoothed cells based on their smoothed value **v**. Return true to keep the cell, false otherwise. | -| **sCol** | string | "ksmval" | The name of the attribute where the smoothed value is stored in the output smoothed grid. | -| **styles** | Array(Style) | | The styles to represent the smoothed grid. | +| **filterSm** | function(v):boolean | | A filter function to filter the smoothed cells based on their smoothed value **v**. Return true to keep the cell, false otherwise. | +| **sCol** | string | "ksmval" | The name of the attribute where the smoothed value is stored in the output smoothed grid. | +| **styles** | Array(Style) | | The styles to represent the smoothed grid. | The kernel smoothing computation relies on the [fast-kde](https://www.npmjs.com/package/fast-kde) library, which produces smoothing approximation very fast. Note that the approximation degrades significantly for weak smoothing (for low sigma values). diff --git a/examples/styles/kernelsmoothing.html b/examples/styles/kernelsmoothing.html index afa17e8d4..c9828ae4c 100644 --- a/examples/styles/kernelsmoothing.html +++ b/examples/styles/kernelsmoothing.html @@ -35,6 +35,7 @@ + @@ -55,7 +56,7 @@ r + 'm/', [ - new gviz.KernelSmoothingStyle({ + new gviz_sm.KernelSmoothingStyle({ value: (c) => +c['2018'], filterSm: (v) => v > 0.001, }), diff --git a/examples/styles/kernelsmoothing_small.html b/examples/styles/kernelsmoothing_small.html index 68ebfdb4a..22126cf93 100644 --- a/examples/styles/kernelsmoothing_small.html +++ b/examples/styles/kernelsmoothing_small.html @@ -35,6 +35,7 @@ + @@ -48,7 +49,7 @@ //"https://raw.githubusercontent.com/jgaffuri/tiledgrids/master/data/test/small.csv", 1, [ - new gviz.KernelSmoothingStyle({ + new gviz_sm.KernelSmoothingStyle({ value: (c) => +c.value, sigma: (r, zf) => (r * 10) / 10, factor: 30,