examples: add interactive earthquakes map

examples/specs/interactive_geo_earthquakes.vl.json

@@ -0,0 +1,72 @@
+{
+  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
+  "width": 300,
+  "height": 300,
+  "projection": {
+    "type": "orthographic",
+    "rotate": [{"signal": "rotate0"}, {"signal": "rotate1"}, 0]
+  },
+  "params": [
+    {
+      "name": "rotate0",
+      "value": 0,
+      "bind": {"input": "range", "min": -90, "max": 90, "step": 1}
+    },
+    {
+      "name": "rotate1",
+      "value": 0,
+      "bind": {"input": "range", "min": -90, "max": 90, "step": 1}
+    },
+    {
+      "name": "earthquakeSize",
+      "value": 6,
+      "bind": {"input": "range", "min": 0, "max": 12, "step": 0.1}
+    }
+  ],
+  "layer": [
+    {
+      "data": {"sphere": true},
+      "mark": {"type": "geoshape", "fill": "aliceblue"}
+    },
+    {
+      "data": {
+        "name": "world",
+        "url": "data/world-110m.json",
+        "format": {"type": "topojson", "feature": "countries"}
+      },
+      "mark": {"type": "geoshape", "fill": "mintcream", "stroke": "black"}
+    },
+    {
+      "data": {
+        "name": "earthquakes",
+        "url": "data/earthquakes.json",
+        "format": {"type": "json", "property": "features"}
+      },
+      "transform": [
+        {"calculate": "datum.geometry.coordinates[0]", "as": "longitude"},
+        {"calculate": "datum.geometry.coordinates[1]", "as": "latitude"},
+        {
+          "filter": "(rotate0 * -1) - 90 < datum.longitude && datum.longitude < (rotate0 * -1) + 90 && (rotate1 * -1) - 90 < datum.latitude && datum.latitude < (rotate1 * -1) + 90"
+        },
+        {"calculate": "datum.properties.mag", "as": "magnitude"}
+      ],
+      "mark": {"type": "circle", "color": "red", "opacity": 0.25},
+      "encoding": {
+        "longitude": {"field": "longitude", "type": "quantitative"},
+        "latitude": {"field": "latitude", "type": "quantitative"},
+        "size": {
+          "legend": null,
+          "field": "magnitude",
+          "type": "quantitative",
+          "scale": {
+            "type": "sqrt",
+            "domain": [0, 100],
+            "range": [0, {"expr": "pow(earthquakeSize, 3)"}]
+          }
+        },
+        "tooltip": [{"field": "magnitude"}]
+      }
+    }
+  ],
+  "config": {}
+}

site/_data/examples.json

@@ -772,6 +772,12 @@
         "title": "Projection explorer",
         "description": "Compare different projections.",
         "png": true
+      },
+      {
+	"name": "interactive_geo_earthquakes",
+	"title": "Earthquakes Example",
+	"description": "Interactive globe visualization of earthquakes",
+	"png": true
       }
     ]
   },