gridviz 3.0.41 → 3.1.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 +18 -15
- package/dist/gridviz.js +3227 -1941
- package/dist/gridviz.min.js +1 -1
- package/package.json +6 -4
- package/src/button/Button.js +77 -68
- package/src/button/FullscreenButton.js +123 -123
- package/src/button/ZoomButtons.js +109 -104
- package/src/core/Drawable.js +25 -3
- package/src/core/GeoCanvas.js +15 -0
- package/src/core/Legend.js +267 -245
- package/src/core/Map.js +180 -30
- package/src/core/Tooltip.js +191 -185
- package/src/dataset/TiledGrid.js +74 -24
- package/src/index.js +82 -79
- package/src/layer/GridLayer.js +196 -194
- package/src/layer/LabelLayer.js +7 -4
- package/src/legend/ColorCategoryLegend.js +127 -125
- package/src/legend/ColorDiscreteLegend.js +116 -114
- package/src/legend/ColorLegend.js +33 -11
- package/src/legend/OrientationLegend.js +94 -92
- package/src/legend/SizeLegend.js +8 -1
- package/src/legend/TernaryLegend.js +317 -314
- package/src/legend/VennLegend.js +202 -0
- package/src/style/CircleColorSizeWebGLStyle.js +249 -0
- package/src/style/CompositionStyle.js +1 -1
- package/src/style/DotDensityStyle.js +8 -4
- package/src/style/ImageStyle.js +1 -1
- package/src/style/Interpolator.js +31 -6
- package/src/style/IsoFenceStyle.js +1 -1
- package/src/style/LegoStyle.js +6 -5
- package/src/style/MosaicStyle.js +1 -1
- package/src/style/NinjaStarStyle.js +1 -1
- package/src/style/PillarStyle.js +1 -1
- package/src/style/RandomWalkInterpolator.js +213 -0
- package/src/style/ShadingRayStyle.js +16 -2
- package/src/style/ShadingStyle.js +80 -72
- package/src/style/ShapeColorSizeStyle.js +18 -2
- package/src/style/SideCategoryStyle.js +1 -1
- package/src/style/SideStyle.js +1 -1
- package/src/style/SideTanakaStyle.js +1 -1
- package/src/style/SquareColorCategoryWebGLStyle.js +71 -20
- package/src/style/SquareColorWebGLStyle.js +7 -4
- package/src/style/StrokeStyle.js +1 -1
- package/src/style/TextStyle.js +1 -1
- package/src/style/TimeSeriesStyle.js +14 -7
- package/src/utils/WebGLSquareColoringAdvanced.js +47 -9
- package/src/utils/scale.js +20 -0
- package/src/utils/webGLUtils.js +52 -0
package/README.md
CHANGED
|
@@ -1,34 +1,36 @@
|
|
|
1
1
|
# Gridviz
|
|
2
2
|
|
|
3
|
-
|
|
4
4
|
|
|
5
5
|
|
|
6
6
|
[](http://www.awesomeofficialstatistics.org)
|
|
7
7
|
|
|
8
8
|
<p align="center" style="height: 350px;">
|
|
9
|
-
<img src="docs/img/gif/gridviz-annotated.gif">
|
|
9
|
+
<img src="docs/img/gif/gridviz-annotated.gif" width="640" alt="Gridviz styles and features: backgrounds, boundaries, labels, tooltips, smoothing, multi-resolution zoom, hillshading, interpolation">
|
|
10
10
|
</p>
|
|
11
11
|
|
|
12
12
|
[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.
|
|
13
13
|
|
|
14
14
|
## Styles
|
|
15
15
|
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
[<img src="docs/img/overviews/ov_accessibility.png" width="
|
|
19
|
-
[<img src="docs/img/overviews/ov_side_cat.png" width="
|
|
20
|
-
[<img src="docs/img/overviews/ov_age_balance.png" width="
|
|
21
|
-
[<img src="docs/img/overviews/ov_dark.png" width="
|
|
22
|
-
[<img src="docs/img/overviews/ov_kersmoo.png" width="
|
|
23
|
-
[<img src="docs/img/overviews/ov_tanaka_dark.png" width="
|
|
24
|
-
[<img src="docs/img/overviews/ov_joyplot_shade.png" width="
|
|
25
|
-
[<img src="docs/img/overviews/ov_lego.png" width="
|
|
26
|
-
[<img src="docs/img/overviews/ov_text_elevation.png" width="
|
|
27
|
-
[<img src="docs/img/overviews/ov_dotdensity.png" width="
|
|
28
|
-
[<img src="docs/img/overviews/
|
|
16
|
+
Browse the [examples gallery](https://eurostat.github.io/gridviz/examples/) to see the different customisable styles available for visualizing gridded data with gridviz, with live examples and their source code.
|
|
17
|
+
|
|
18
|
+
[<img src="docs/img/overviews/ov_accessibility.png" width="60" height="60">](https://eurostat.github.io/gridviz/docs/reference#shapecolorsize-style)
|
|
19
|
+
[<img src="docs/img/overviews/ov_side_cat.png" width="60" height="60">](https://eurostat.github.io/gridviz/docs/reference#side-category-style)
|
|
20
|
+
[<img src="docs/img/overviews/ov_age_balance.png" width="60" height="60">](https://eurostat.github.io/gridviz/docs/reference#shapecolorsize-style)
|
|
21
|
+
[<img src="docs/img/overviews/ov_dark.png" width="60" height="60">](https://eurostat.github.io/gridviz/docs/reference#square-color-webgl-style)
|
|
22
|
+
[<img src="docs/img/overviews/ov_kersmoo.png" width="60" height="60">](https://eurostat.github.io/gridviz/docs/reference#kernel-smoothing)
|
|
23
|
+
[<img src="docs/img/overviews/ov_tanaka_dark.png" width="60" height="60">](https://eurostat.github.io/gridviz/docs/reference#tanaka-style)
|
|
24
|
+
[<img src="docs/img/overviews/ov_joyplot_shade.png" width="60" height="60">](https://eurostat.github.io/gridviz/docs/reference#joyplot-style)
|
|
25
|
+
[<img src="docs/img/overviews/ov_lego.png" width="60" height="60">](https://eurostat.github.io/gridviz/docs/reference#lego-style)
|
|
26
|
+
[<img src="docs/img/overviews/ov_text_elevation.png" width="60" height="60">](https://eurostat.github.io/gridviz/docs/reference#text-style)
|
|
27
|
+
[<img src="docs/img/overviews/ov_dotdensity.png" width="60" height="60">](https://eurostat.github.io/gridviz/docs/reference#dot-density-style)
|
|
28
|
+
[<img src="docs/img/overviews/ov_circle_webgl.png" width="60" height="60">](https://eurostat.github.io/gridviz/docs/reference#circle-color-size-webgl-style)
|
|
29
|
+
[<img src="docs/img/overviews/ov_joyplot.png" width="60" height="60">](https://eurostat.github.io/gridviz/docs/reference#joyplot-style)
|
|
29
30
|
|
|
30
31
|
## Live Demos
|
|
31
32
|
|
|
33
|
+
- [**Examples gallery**](https://eurostat.github.io/gridviz/examples/) - all the examples of the repository, with thumbnails.
|
|
32
34
|
- [**Europe** - 1km resolution - Census total population](https://ec.europa.eu/assets/estat/E/E4/gisco/website/grid_map/index.html)
|
|
33
35
|
- [**Europe** - 1km resolution - Census population composition](https://ec.europa.eu/assets/estat/E/E4/gisco/website/census_2021_grid_map/index.html)
|
|
34
36
|
- [**Europe** - 100m resolution - Accessibility to basic services](https://ec.europa.eu/assets/estat/E/E4/gisco/accessibility_maps/healthcare_education/index.html)
|
|
@@ -36,6 +38,7 @@
|
|
|
36
38
|
- [**Germany** - 100m resolution - Zensus 2011](https://eurostat.github.io/gridviz/examples/demos/DE.html)
|
|
37
39
|
- [**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).
|
|
38
40
|
- [**Norway** - 250m resolution - SSB](https://eurostat.github.io/gridviz/examples/demos/NO.html)
|
|
41
|
+
- [**Norway** - 20 years of population - SSB](https://eurostat.github.io/gridviz/examples/demos/NO_timeseries.html): by year, change between two years, time series, year of the maximum.
|
|
39
42
|
- [**Croatia** - 1km resolution - DZS 2015 grid](https://eurostat.github.io/gridviz/examples/demos/HR.html)
|
|
40
43
|
- [**Belgium** population](https://eurostat.github.io/gridviz/examples/basics/mixed_resolution_BE.html), as mixed resolution layer.
|
|
41
44
|
|