docs: Add 4 new examples

docs/_data/examples.json

@@ -92,7 +92,8 @@
         {"name": "u-district-cuisine"},
         {"name": "clock"},
         {"name": "watch"},
-        {"name": "warming-stripes"},
+        {"name": "warming-stripes"},        
+        {"name": "earthquakes-globe"},
         {"name": "serpentine-timeline"}
     ],
     "Interaction Techniques": [
@@ -106,6 +107,9 @@
         {"name": "stock-index-chart"},
         {"name": "pi-monte-carlo"},
         {"name": "zoomable-circle-packing"},
+        {"name": "table-scrollbar"},
+        {"name": "bar-line-toggle"},
+        {"name": "map-with-tooltip"},
         {"name": "pacman"},
         {"name": "platformer"}
     ]

docs/data/global-temp.csv

@@ -1,7 +1,7 @@
 year,temp
-1880,-0.16
-1881,-0.07
-1882,-0.1
+1880,-0.17
+1881,-0.09
+1882,-0.11
 1883,-0.17
 1884,-0.28
 1885,-0.33
@@ -13,32 +13,32 @@ year,temp
 1891,-0.22
 1892,-0.27
 1893,-0.31
-1894,-0.3
-1895,-0.22
+1894,-0.31
+1895,-0.23
 1896,-0.11
 1897,-0.11
 1898,-0.27
 1899,-0.17
 1900,-0.08
 1901,-0.15
-1902,-0.27
-1903,-0.36
-1904,-0.46
+1902,-0.28
+1903,-0.37
+1904,-0.47
 1905,-0.26
 1906,-0.22
-1907,-0.38
-1908,-0.42
+1907,-0.39
+1908,-0.43
 1909,-0.48
-1910,-0.43
+1910,-0.44
 1911,-0.44
-1912,-0.36
+1912,-0.37
 1913,-0.34
 1914,-0.15
 1915,-0.14
 1916,-0.36
 1917,-0.46
 1918,-0.29
-1919,-0.28
+1919,-0.27
 1920,-0.27
 1921,-0.19
 1922,-0.28
@@ -52,21 +52,21 @@ year,temp
 1930,-0.16
 1931,-0.09
 1932,-0.16
-1933,-0.28
+1933,-0.29
 1934,-0.12
 1935,-0.2
 1936,-0.15
 1937,-0.03
 1938,0
 1939,-0.02
-1940,0.13
-1941,0.19
-1942,0.07
+1940,0.12
+1941,0.18
+1942,0.06
 1943,0.09
-1944,0.21
+1944,0.2
 1945,0.09
 1946,-0.07
-1947,-0.02
+1947,-0.03
 1948,-0.11
 1949,-0.11
 1950,-0.17
@@ -110,34 +110,36 @@ year,temp
 1988,0.39
 1989,0.27
 1990,0.45
-1991,0.4
+1991,0.41
 1992,0.22
 1993,0.23
-1994,0.32
+1994,0.31
 1995,0.45
 1996,0.33
 1997,0.46
 1998,0.61
 1999,0.38
 2000,0.39
-2001,0.53
+2001,0.54
 2002,0.63
 2003,0.62
 2004,0.53
-2005,0.67
-2006,0.63
+2005,0.68
+2006,0.64
 2007,0.66
 2008,0.54
-2009,0.65
+2009,0.66
 2010,0.72
 2011,0.61
 2012,0.65
-2013,0.67
+2013,0.68
 2014,0.74
 2015,0.9
 2016,1.01
 2017,0.92
 2018,0.85
 2019,0.98
-2020,1.02
-2021,0.84
+2020,1.01
+2021,0.85
+2022,0.89
+2023,1.17

docs/examples/bar-line-toggle.md

@@ -0,0 +1,15 @@
+---
+layout: example
+title: Bar and Line Chart
+permalink: /examples/bar-line-toggle/index.html
+spec: bar-line-toggle
+image: /examples/img/bar-line-toggle.png
+---
+
+An example of a Vega visualization that automatically switches between a bar chart and a line chart depending on the number of data points.
+
+Use the slider to change the number of data points displayed on the chart. For more than 50 data points, the chart type will be changed from a bar chart to a line chart (with interpolation).
+
+This Vega example made by Andrzej Leszkiewicz [@avatorl](https://github.com/avatorl).
+
+{% include example spec=page.spec %}

docs/examples/bar-line-toggle.vg.json

@@ -0,0 +1,152 @@
+{
+  "$schema": "https://vega.github.io/schema/vega/v5.json",
+  "description": "An example of Vega visualization that automatically switches between a column chart and a line chart depending on the number of data points",
+  "width": 800,
+  "height": 400,
+  "padding": 35,
+  "autosize": "pad",
+  "config": {
+    "title": {"font": "Tahoma", "fontSize": 18},
+    "text": {"font": "Tahoma", "fontSize": 14},
+    "axis": {"labelFont": "Tahoma", "labelFontSize": "12", "labelColor": "gray"}
+  },
+  "signals": [
+    {
+      "name": "DataPoints",
+      "description": "Number of data point to display on the chart",
+      "value": 25,
+      "bind": {"input": "range", "min": 25, "max": 200, "step": 5}
+    },
+    {"name": "colorColumn", "value": "#4682b4"},
+    {"name": "colorLine", "value": "#4682b4"},
+    {"name": "colorText", "value": "#000000"},
+    {"name": "interpolation", "value": "basis"}
+  ],
+  "data": [
+    {
+      "name": "dataset-raw",
+      "transform": [
+        {"type": "sequence", "start": 1, "stop": 201, "step": 1, "as": "id"}
+      ]
+    },
+    {
+      "name": "dataset",
+      "source": "dataset-raw",
+      "transform": [
+        {"type": "filter", "expr": "datum.id<=DataPoints"},
+        {"type": "formula", "expr": "ceil(random()*100)", "as": "value"}
+      ]
+    },
+    {
+      "name": "dataset-rect",
+      "source": "dataset",
+      "transform": [
+        {"type": "filter", "expr": "DataPoints<=50"},
+        {"type": "collect", "sort": {"field": "id", "order": "ascending"}}
+      ]
+    },
+    {
+      "name": "dataset-line",
+      "source": "dataset",
+      "transform": [
+        {"type": "filter", "expr": "DataPoints>50"},
+        {"type": "collect", "sort": {"field": "id", "order": "ascending"}}
+      ]
+    }
+  ],
+  "scales": [
+    {
+      "name": "scaleXRect",
+      "type": "band",
+      "domain": {"data": "dataset-rect", "field": "id", "sort": true},
+      "range": [10, {"signal": "width-10"}],
+      "padding": 0.05
+    },
+    {
+      "name": "scaleXLine",
+      "type": "linear",
+      "domain": {"data": "dataset-line", "field": "id", "sort": true},
+      "range": [10, {"signal": "width-10"}],
+      "zero": false
+    },
+    {
+      "name": "scaleYRect",
+      "domain": {"data": "dataset-rect", "field": "value"},
+      "domainMax": 100,
+      "range": [{"signal": "height"}, 0]
+    },
+    {
+      "name": "scaleYLine",
+      "domain": {"data": "dataset-line", "field": "value"},
+      "domainMax": 100,
+      "range": [{"signal": "height"}, 0]
+    }
+  ],
+  "axes": [
+    {
+      "orient": "bottom",
+      "scale": "scaleXRect",
+      "domain": false,
+      "tickCount": 50
+    },
+    {
+      "orient": "bottom",
+      "scale": "scaleXLine",
+      "domain": false,
+      "tickCount": 10
+    },
+    {
+      "orient": "left",
+      "scale": "scaleYLine",
+      "domain": false,
+      "grid": true,
+      "ticks": true,
+      "labels": true
+    }
+  ],
+  "marks": [
+    {
+      "name": "rect-columns",
+      "type": "rect",
+      "from": {"data": "dataset-rect"},
+      "encode": {
+        "update": {
+          "x": {"scale": "scaleXRect", "field": "id"},
+          "width": {"scale": "scaleXRect", "band": 1},
+          "y": {"scale": "scaleYRect", "field": "value"},
+          "y2": {"scale": "scaleYRect", "value": 0},
+          "fill": {"signal": "colorColumn"},
+          "strokeWidth": {"value": 0}
+        }
+      }
+    },
+    {
+      "type": "text",
+      "from": {"data": "rect-columns"},
+      "encode": {
+        "update": {
+          "x": {"signal": "datum.x+datum.width/2"},
+          "y": {"field": "y", "offset": -8},
+          "align": {"value": "center"},
+          "baseline": {"value": "middle"},
+          "fill": {"signal": "colorText"},
+          "text": {"field": "datum.value"}
+        }
+      }
+    },
+    {
+      "type": "line",
+      "from": {"data": "dataset-line"},
+      "encode": {
+        "update": {
+          "xc": {"scale": "scaleXLine", "field": "id"},
+          "y": {"scale": "scaleYLine", "field": "value"},
+          "stroke": {"signal": "colorLine"},
+          "strokeWidth": {"value": 2},
+          "interpolate": {"signal": "interpolation"},
+          "strokeOpacity": {"value": 1}
+        }
+      }
+    }
+  ]
+}

docs/examples/earthquakes-globe.md

@@ -0,0 +1,15 @@
+---
+layout: example
+title: Rotating Globe
+permalink: /examples/earthquakes-globe/index.html
+spec: earthquakes-globe
+image: /examples/img/earthquakes-globe.png
+---
+
+A globe visualization of earthquakes. Enhanced and animated version of [Earthquakes](https://vega.github.io/vega/examples/earthquakes/) example.
+
+Background: randomly generated "stars".
+
+This Vega example made by Andrzej Leszkiewicz [@avatorl](https://github.com/avatorl)
+
+{% include example spec=page.spec %}