{
"$schema": "https://vega.github.io/schema/vega/v4.json",
"width": 900,
"height": 560,
"padding": 10,
"autosize": "none",
"signals": [
{
"name": "precip",
"update": "data('p-180:180')[0]"
},
{
"name": "gtf",
"value": {
"xStart": -180.02,
"xStep": 1,
"yStart": 87.58,
"yStep": -1
}
}
],
"data": [
{
"name": "world",
"url": "data/world-110m.json",
"format": {"type": "topojson", "feature": "countries"},
"transform": [
{
"type": "geopath",
"projection": "proj"
}
]
},
{
"name": "p-180:180",
"url": "https://raw.githubusercontent.com/mattijn/datasets/master/annual-precip_-180-180.json"
},
{
"name": "coords",
"transform": [
{
"type": "sequence",
"start": 0,
"stop": {"signal": "precip.width * precip.height"},
"step": 1
},
{
"type": "formula", "as": "lon",
"expr": "(gtf.xStart + gtf.xStep / 2) + gtf.xStep * (datum.data % precip.width)"
},
{
"type": "formula", "as": "lat",
"expr": "(gtf.yStart + gtf.yStep / 2) + gtf.yStep * floor(datum.data / precip.width)"
},
{
"type": "formula", "as": "value",
"expr": "precip.values[datum.data]"
},
{
"type": "geopoint",
"projection": "proj",
"fields": ["lon", "lat"],
"as": ["x", "y"]
}
]
}
],
"projections": [
{
"name": "proj",
"type": "albers",
"scale": 150,
"translate": [{"signal": "width / 2"}, {"signal": "height / 2"}]
}
],
"marks": [
{
"type": "path",
"from": {"data": "world"},
"encode": {
"enter": {
"fill": {"value": "#dedede"},
"stroke": {"value": "white"}
},
"update": {
"path": {"field": "path"}
}
}
},
{
"type": "group",
"clip": {"sphere": "proj"},
"data": [
{
"name": "contours",
"source": "coords",
"transform": [
{
"type": "contour",
"x": "x",
"y": "y",
"size": [{"signal": "width"}, {"signal": "height"}],
"count": 10
}
]
}
],
"scales": [
{
"name": "color",
"type": "sequential",
"domain": {"data": "contours", "field": "value"},
"range": {"scheme": "viridis"}
}
],
"marks": [
{
"type": "shape",
"from": {"data": "contours"},
"encode": {
"enter": {
"stroke": {"value": "firebrick"},
"fill": {"scale": "color", "field": "value"},
"fillOpacity": {"value": 0.3}
},
"update": {
"strokeWidth": {"value": 1}
},
"hover": {
"strokeWidth": {"value": 3}
}
},
"transform": [
{ "type": "geoshape", "field": "datum" }
]
}
]
}
]
}