World Map Example
A configurable map of world countries. Explore the results of applying different map projections and parameter settings! This example loads TopoJSON data and applies the Vega geoshape and graticule transforms.
Vega JSON Specification <>
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"description": "A configurable map of countries of the world.",
"width": 900,
"height": 500,
"autosize": "none",
"signals": [
{
"name": "type",
"value": "mercator",
"bind": {
"input": "select",
"options": [
"albers",
"albersUsa",
"azimuthalEqualArea",
"azimuthalEquidistant",
"conicConformal",
"conicEqualArea",
"conicEquidistant",
"equalEarth",
"equirectangular",
"gnomonic",
"mercator",
"naturalEarth1",
"orthographic",
"stereographic",
"transverseMercator"
]
}
},
{ "name": "scale", "value": 150,
"bind": {"input": "range", "min": 50, "max": 2000, "step": 1} },
{ "name": "rotate0", "value": 0,
"bind": {"input": "range", "min": -180, "max": 180, "step": 1} },
{ "name": "rotate1", "value": 0,
"bind": {"input": "range", "min": -90, "max": 90, "step": 1} },
{ "name": "rotate2", "value": 0,
"bind": {"input": "range", "min": -180, "max": 180, "step": 1} },
{ "name": "center0", "value": 0,
"bind": {"input": "range", "min": -180, "max": 180, "step": 1} },
{ "name": "center1", "value": 0,
"bind": {"input": "range", "min": -90, "max": 90, "step": 1} },
{ "name": "translate0", "update": "width / 2" },
{ "name": "translate1", "update": "height / 2" },
{ "name": "graticuleDash", "value": 0,
"bind": {"input": "radio", "options": [0, 3, 5, 10]} },
{ "name": "borderWidth", "value": 1,
"bind": {"input": "text"} },
{ "name": "background", "value": "#ffffff",
"bind": {"input": "color"} },
{ "name": "invert", "value": false,
"bind": {"input": "checkbox"} }
],
"projections": [
{
"name": "projection",
"type": {"signal": "type"},
"scale": {"signal": "scale"},
"rotate": [
{"signal": "rotate0"},
{"signal": "rotate1"},
{"signal": "rotate2"}
],
"center": [
{"signal": "center0"},
{"signal": "center1"}
],
"translate": [
{"signal": "translate0"},
{"signal": "translate1"}
]
}
],
"data": [
{
"name": "world",
"url": "data/world-110m.json",
"format": {
"type": "topojson",
"feature": "countries"
}
},
{
"name": "graticule",
"transform": [
{ "type": "graticule" }
]
}
],
"marks": [
{
"type": "shape",
"from": {"data": "graticule"},
"encode": {
"update": {
"strokeWidth": {"value": 1},
"strokeDash": {"signal": "[+graticuleDash, +graticuleDash]"},
"stroke": {"signal": "invert ? '#444' : '#ddd'"},
"fill": {"value": null}
}
},
"transform": [
{ "type": "geoshape", "projection": "projection" }
]
},
{
"type": "shape",
"from": {"data": "world"},
"encode": {
"update": {
"strokeWidth": {"signal": "+borderWidth"},
"stroke": {"signal": "invert ? '#777' : '#bbb'"},
"fill": {"signal": "invert ? '#fff' : '#000'"},
"zindex": {"value": 0}
},
"hover": {
"strokeWidth": {"signal": "+borderWidth + 1"},
"stroke": {"value": "firebrick"},
"zindex": {"value": 1}
}
},
"transform": [
{ "type": "geoshape", "projection": "projection" }
]
}
]
}