Published
Edited
Nov 15, 2019
2 forks
1 star
viewof view = plot({
"$schema": "https://vega.github.io/schema/vega/v4.json",
"width": 900,
"height": 560,
"padding": 10,
"autosize": "none",
"signals": [
{
"name": "projection",
"value": "mercator",
"bind": {
"input": "select",
"options": [
"mercator",
"orthographic",
"equirectangular",
"hill",
"azimuthalEqualArea"
]
}
},
{
"name": "angles",
"value": [0, 0],
"on": [{
"events": "mousedown",
"update": "[rotate0, rotate1]"
}]
},
{
"name": "cloned",
"value": null,
"on": [{
"events": "mousedown",
"update": "copy('proj')"
}]
},
{
"name": "start",
"value": null,
"on": [{
"events": "mousedown",
"update": "invert(cloned, xy())"
}]
},
{
"name": "drag", "value": null,
"on": [{
"events": "[mousedown, window:mouseup] > window:mousemove",
"update": "invert(cloned, xy())"
}]
},
{
"name": "delta", "value": null,
"on": [{
"events": {"signal": "drag"},
"update": "[drag[0] - start[0], drag[1] - start[1]]"
}]
},
{
"name": "rotate0", "value": 0,
"on": [
{
"events": {"signal": "delta"},
"update": "angles[0] + delta[0]"
}
]
},
{
"name": "rotate1", "value": 0,
"on": [
{
"events": {"signal": "delta"},
"update": "angles[1] + delta[1]"
}
]
},
{
"name": "precip",
"update": "data('p-180:180')[0]"
},
{
"name": "gtf",
"value": {
"xStart": -180.02,
"xStep": 5,
"yStart": 87.58,
"yStep": -5
}
}
],
"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_5deg.json"
},
{
"name": "coords",
"transform": [
{
"type": "sequence",
"start": 0,
"stop": {
"signal": "precip.width * precip.height"
},
"step": 1
},
{
"type": "formula",
"expr": "(gtf.xStart + gtf.xStep / 2) + gtf.xStep * (datum.data % precip.width)",
"as": "lon"
},
{
"type": "formula",
"expr": "(gtf.yStart + gtf.yStep / 2) + gtf.yStep * floor(datum.data / precip.width)",
"as": "lat"
},
{
"type": "formula",
"expr": "precip.values[datum.data]",
"as": "value"
},
{
"type": "geopoint",
"projection": "proj",
"fields": [
"lon",
"lat"
],
"as": [
"x",
"y"
]
}
]
}
],
"projections": [
{
"name": "proj",
"type": {"signal":"projection"},
"rotate": [
{"signal": "rotate0"},
{"signal": "rotate1"},
0
],
"translate": [
{
"signal": "width / 2"
},
{
"signal": "height / 2"
}
]
}
],
"scales": [
{
"name": "colorr",
"type": "linear",
"domain": [0,3000],
"range": {
"scheme": "bluepurple"
}
}
],
"marks": [
{
"type": "group",
"clip": {
"sphere": "proj"
},
"data": [
{
"name": "contours",
"source": "coords",
"transform": [
{
"type": "contour",
"x": "x",
"y": "y",
"weight": "value",
"size": [
{
"signal": "width"
},
{
"signal": "height"
}
],
"count": 10
}
]
}
],
"scales": [
{
"name": "color",
"type": "sequential",
"domain": [
0,
16
],
"range": {
"scheme": "bluepurple"
}
}
],
"marks": [
{
"type": "shape",
"from": {
"data": "contours"
},
"encode": {
"enter": {
"stroke": {
"value": "transparent"
},
"strokeWidth": {
"value": 1
},
"fill": {
"scale": "color", "field":"value"
}
}
},
"transform": [
{
"type": "geoshape",
"field": "datum"
}
]
}
]
},
{
"type": "path",
"from": {
"data": "world"
},
"clip": {"sphere": "proj"},
"encode": {
"enter": {
"stroke": {
"value": "gray"
}
},
"update": {
"path": {
"field": "path"
}
}
}
}
]
})
import {plot} from '@vega/vega-plot'
`
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
