gridviz 2.1.12 → 2.1.14
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 +32 -33
- package/dist/gridviz.js +369 -27
- package/dist/gridviz.min.js +1 -1
- package/package.json +5 -5
- package/src/App.js +58 -5
- package/src/Style.js +7 -5
- package/src/button/Button.js +54 -0
- package/src/button/FullscreenButton.js +98 -0
- package/src/button/ZoomButtons.js +72 -0
- package/src/legend/ColorLegend.js +6 -2
- package/src/legend/SegmentWidthLegend.js +11 -7
- package/src/style/SegmentStyle.js +2 -2
- package/src/style/ShapeColorSizeStyle.js +1 -1
- package/src/style/TimeSeriesStyle.js +10 -1
package/README.md
CHANGED
|
@@ -4,41 +4,36 @@
|
|
|
4
4
|
|
|
5
5
|
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
[
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
[
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
[
|
|
20
|
-
[
|
|
21
|
-
[
|
|
22
|
-
[
|
|
23
|
-
[
|
|
24
|
-
[
|
|
25
|
-
[
|
|
26
|
-
[
|
|
27
|
-
[
|
|
28
|
-
[
|
|
29
|
-
[
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
[](https://eurostat.github.io/gridviz/docs/reference#dot-density-style)
|
|
34
|
-
[](https://eurostat.github.io/gridviz/docs/reference#joyplot-style)
|
|
35
|
-
[](https://eurostat.github.io/gridviz/docs/reference#stroke-style)
|
|
36
|
-
|
|
37
|
-
## Examples
|
|
7
|
+
<p align="center" style="height: 350px;">
|
|
8
|
+
<img src="docs/img/banner.png">
|
|
9
|
+
</p>
|
|
10
|
+
|
|
11
|
+
|
|
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://eurostat.github.io/gridviz/docs/reference). Unlike traditional raster-based web mapping tools, Gridviz renders everything client-side, on the fly.
|
|
13
|
+
|
|
14
|
+
## Styles
|
|
15
|
+
|
|
16
|
+
[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.
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
[<img src="docs/img/overviews/ov_accessibility.png" width="70" height="70">](https://eurostat.github.io/gridviz/docs/reference#shapecolorsize-style)
|
|
20
|
+
[<img src="docs/img/overviews/ov_side_cat.png" width="70" height="70">](https://eurostat.github.io/gridviz/docs/reference#side-category-style)
|
|
21
|
+
[<img src="docs/img/overviews/ov_age_balance.png" width="70" height="70">](https://eurostat.github.io/gridviz/docs/reference#shapecolorsize-style)
|
|
22
|
+
[<img src="docs/img/overviews/ov_dark.png" width="70" height="70">](https://eurostat.github.io/gridviz/docs/reference#square-color-webgl-style)
|
|
23
|
+
[<img src="docs/img/overviews/ov_kersmoo.png" width="70" height="70">](https://eurostat.github.io/gridviz/docs/reference#kernel-smoothing)
|
|
24
|
+
[<img src="docs/img/overviews/ov_tanaka_dark.png" width="70" height="70">](https://eurostat.github.io/gridviz/docs/reference#tanaka-style)
|
|
25
|
+
[<img src="docs/img/overviews/ov_joyplot_shade.png" width="70" height="70">](https://eurostat.github.io/gridviz/docs/reference#joyplot-style)
|
|
26
|
+
[<img src="docs/img/overviews/ov_lego.png" width="70" height="70">](https://eurostat.github.io/gridviz/docs/reference#lego-style)
|
|
27
|
+
[<img src="docs/img/overviews/ov_text_elevation.png" width="70" height="70">](https://eurostat.github.io/gridviz/docs/reference#text-style)
|
|
28
|
+
[<img src="docs/img/overviews/ov_dotdensity.png" width="70" height="70">](https://eurostat.github.io/gridviz/docs/reference#dot-density-style)
|
|
29
|
+
[<img src="docs/img/overviews/ov_joyplot.png" width="70" height="70">](https://eurostat.github.io/gridviz/docs/reference#joyplot-style)
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
## Live Demos
|
|
38
33
|
|
|
39
34
|
- [Europe - 1km resolution - GEOSTAT/GISCO](https://eurostat.github.io/gridviz/examples/EUR.html)
|
|
40
35
|
- [Germany - 100m resolution - Zensus 2011](https://eurostat.github.io/gridviz/examples/DE.html)
|
|
41
|
-
- [France - 200m resolution - INSEE Filosofi](https://eurostat.github.io/gridviz/examples/FR.html)
|
|
36
|
+
- [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).
|
|
42
37
|
- [Norway - 250m resolution - SSB](https://eurostat.github.io/gridviz/examples/NO.html)
|
|
43
38
|
- [Croatia - 1km resolution - DZS 2015 grid](https://eurostat.github.io/gridviz/examples/HR.html)
|
|
44
39
|
- [France population, dark style](https://eurostat.github.io/gridviz/examples/styles/squarecolorwgl_dark.html)
|
|
@@ -101,7 +96,11 @@ See the **[documentation page](https://eurostat.github.io/gridviz/docs/reference
|
|
|
101
96
|
|
|
102
97
|
## Documentation
|
|
103
98
|
|
|
104
|
-
See the **[
|
|
99
|
+
See the **[gridviz documentation page](https://github.com/eurostat/gridviz/blob/master/docs/reference.md)**.
|
|
100
|
+
|
|
101
|
+
## Grid tiling
|
|
102
|
+
|
|
103
|
+
In order to visualize large grids efficiently, you can produce tiled grids in a [tiled grid format](https://eurostat.github.io/gridviz/docs/tiledformat) with **[GridTiler](https://github.com/eurostat/gridtiler)**.
|
|
105
104
|
|
|
106
105
|
## About
|
|
107
106
|
|