Earthquakes Example
A globe visualization of earthquakes reported by the USGS for the week of February 6, 2018. The earthquakes are formatted as GeoJSON data, and the geoshape transform’s pointRadius parameter is used to visualize earthquake magnitude as a circular area. This example is based on Jeremy Ashkenas’ USGS World Earthquake Map.
Vega JSON Specification <>
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"description": "An interactive globe depicting earthquake locations and magnitudes.",
"padding": 10,
"width": 450,
"height": 450,
"autosize": "none",
"signals": [
{
"name": "quakeSize", "value": 6,
"bind": {"input": "range", "min": 0, "max": 12}
},
{
"name": "rotate0", "value": 90,
"bind": {"input": "range", "min": -180, "max": 180}
},
{
"name": "rotate1", "value": -5,
"bind": {"input": "range", "min": -180, "max": 180}
}
],
"data": [
{
"name": "sphere",
"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"
}
}
],
"projections": [
{
"name": "projection",
"scale": 225,
"type": "orthographic",
"translate": {"signal": "[width/2, height/2]"},
"rotate": [{"signal": "rotate0"}, {"signal": "rotate1"}, 0]
}
],
"scales": [
{
"name": "size",
"type": "sqrt",
"domain": [0, 100],
"range": [0, {"signal": "quakeSize"}]
}
],
"marks": [
{
"type": "shape",
"from": {"data": "sphere"},
"encode": {
"update": {
"fill": {"value": "aliceblue"},
"stroke": {"value": "black"},
"strokeWidth": {"value": 1.5}
}
},
"transform": [
{
"type": "geoshape",
"projection": "projection"
}
]
},
{
"type": "shape",
"from": {"data": "world"},
"encode": {
"update": {
"fill": {"value": "mintcream"},
"stroke": {"value": "black"},
"strokeWidth": {"value": 0.35}
}
},
"transform": [
{
"type": "geoshape",
"projection": "projection"
}
]
},
{
"type": "shape",
"from": {"data": "earthquakes"},
"encode": {
"update": {
"opacity": {"value": 0.25},
"fill": {"value": "red"}
}
},
"transform": [
{
"type": "geoshape",
"projection": "projection",
"pointRadius": {"expr": "scale('size', exp(datum.properties.mag))"}
}
]
}
]
}