diff --git a/examples/compiled/interactive_geo_earthquakes.png b/examples/compiled/interactive_geo_earthquakes.png new file mode 100644 index 0000000000..edb2045950 Binary files /dev/null and b/examples/compiled/interactive_geo_earthquakes.png differ diff --git a/examples/compiled/interactive_geo_earthquakes.svg b/examples/compiled/interactive_geo_earthquakes.svg new file mode 100644 index 0000000000..398c3bca21 --- /dev/null +++ b/examples/compiled/interactive_geo_earthquakes.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/examples/compiled/interactive_geo_earthquakes.vg.json b/examples/compiled/interactive_geo_earthquakes.vg.json new file mode 100644 index 0000000000..24d9a2785a --- /dev/null +++ b/examples/compiled/interactive_geo_earthquakes.vg.json @@ -0,0 +1,139 @@ +{ + "$schema": "https://vega.github.io/schema/vega/v5.json", + "background": "white", + "padding": 5, + "width": 300, + "height": 300, + "data": [ + {"name": "source_0", "values": [{"type": "Sphere"}]}, + { + "name": "world", + "url": "data/world-110m.json", + "format": {"type": "topojson", "feature": "countries"} + }, + { + "name": "earthquakes", + "url": "data/earthquakes.json", + "format": {"type": "json", "property": "features"}, + "transform": [ + { + "type": "formula", + "expr": "datum.geometry.coordinates[0]", + "as": "longitude" + }, + { + "type": "formula", + "expr": "datum.geometry.coordinates[1]", + "as": "latitude" + }, + { + "type": "filter", + "expr": "(rotate0 * -1) - 90 < datum.longitude && datum.longitude < (rotate0 * -1) + 90 && (rotate1 * -1) - 90 < datum.latitude && datum.latitude < (rotate1 * -1) + 90" + }, + {"type": "formula", "expr": "datum.properties.mag", "as": "magnitude"}, + { + "type": "geojson", + "fields": ["longitude", "latitude"], + "signal": "layer_2_geojson_0" + }, + { + "type": "geopoint", + "projection": "projection", + "fields": ["longitude", "latitude"], + "as": ["layer_2_x", "layer_2_y"] + }, + { + "type": "filter", + "expr": "isValid(datum[\"magnitude\"]) && isFinite(+datum[\"magnitude\"])" + } + ] + } + ], + "projections": [ + { + "name": "projection", + "size": {"signal": "[width, height]"}, + "fit": {"signal": "[data('source_0'), data('world'), layer_2_geojson_0]"}, + "type": "orthographic", + "rotate": {"signal": "[rotate0, rotate1, 0]"} + } + ], + "signals": [ + { + "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} + } + ], + "marks": [ + { + "name": "layer_0_marks", + "type": "shape", + "style": ["geoshape"], + "from": {"data": "source_0"}, + "encode": { + "update": { + "fill": {"value": "aliceblue"}, + "ariaRoleDescription": {"value": "geoshape"} + } + }, + "transform": [{"type": "geoshape", "projection": "projection"}] + }, + { + "name": "layer_1_marks", + "type": "shape", + "style": ["geoshape"], + "from": {"data": "world"}, + "encode": { + "update": { + "fill": {"value": "mintcream"}, + "stroke": {"value": "black"}, + "ariaRoleDescription": {"value": "geoshape"} + } + }, + "transform": [{"type": "geoshape", "projection": "projection"}] + }, + { + "name": "layer_2_marks", + "type": "symbol", + "style": ["circle"], + "from": {"data": "earthquakes"}, + "encode": { + "update": { + "opacity": {"value": 0.25}, + "fill": {"value": "red"}, + "tooltip": { + "signal": "{\"magnitude\": isValid(datum[\"magnitude\"]) ? datum[\"magnitude\"] : \"\"+datum[\"magnitude\"]}" + }, + "ariaRoleDescription": {"value": "circle"}, + "description": { + "signal": "\"longitude: \" + (format(datum[\"longitude\"], \"\")) + \"; latitude: \" + (format(datum[\"latitude\"], \"\")) + \"; magnitude: \" + (format(datum[\"magnitude\"], \"\"))" + }, + "x": {"field": "layer_2_x"}, + "y": {"field": "layer_2_y"}, + "size": {"scale": "size", "field": "magnitude"}, + "shape": {"value": "circle"} + } + } + } + ], + "scales": [ + { + "name": "size", + "type": "sqrt", + "domain": [0, 100], + "range": [0, {"signal": "pow(earthquakeSize, 3)"}], + "zero": true + } + ] +} diff --git a/examples/specs/interactive_geo_earthquakes.vl.json b/examples/specs/interactive_geo_earthquakes.vl.json new file mode 100644 index 0000000000..353f0d333b --- /dev/null +++ b/examples/specs/interactive_geo_earthquakes.vl.json @@ -0,0 +1,71 @@ +{ + "$schema": "https://vega.github.io/schema/vega-lite/v5.json", + "width": 300, + "height": 300, + "projection": { + "type": "orthographic", + "rotate": {"expr": "[rotate0, 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"}] + } + } + ] +} \ No newline at end of file diff --git a/examples/specs/normalized/interactive_geo_earthquakes_normalized.vl.json b/examples/specs/normalized/interactive_geo_earthquakes_normalized.vl.json new file mode 100644 index 0000000000..c89a4f247b --- /dev/null +++ b/examples/specs/normalized/interactive_geo_earthquakes_normalized.vl.json @@ -0,0 +1,79 @@ +{ + "$schema": "https://vega.github.io/schema/vega-lite/v5.json", + "width": 300, + "height": 300, + "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"}, + "projection": { + "type": "orthographic", + "rotate": {"expr": "[rotate0, rotate1, 0]"} + } + }, + { + "data": { + "name": "world", + "url": "data/world-110m.json", + "format": {"type": "topojson", "feature": "countries"} + }, + "mark": {"type": "geoshape", "fill": "mintcream", "stroke": "black"}, + "projection": { + "type": "orthographic", + "rotate": {"expr": "[rotate0, rotate1, 0]"} + } + }, + { + "data": { + "name": "earthquakes", + "url": "data/earthquakes.json", + "format": {"type": "json", "property": "features"} + }, + "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"}] + }, + "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"} + ], + "projection": { + "type": "orthographic", + "rotate": {"expr": "[rotate0, rotate1, 0]"} + } + } + ] +} \ No newline at end of file diff --git a/site/_data/examples.json b/site/_data/examples.json index 4c79d6466e..07b90f5a39 100644 --- a/site/_data/examples.json +++ b/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 } ] },