Let’s Make a Map in Vega-Lite*

Map with default styles
{
"$schema": "https://vega.github.io/schema/vega-lite/v3.json",
"width": 500,
"height": 300,
"data": {
"url": "https://opendata.arcgis.com/datasets/686603e943f948acaa13fb5d2b0f1275_3.geojson",
"format": {"property": "features"}
},
"transform": [
{
"filter": {
"field": "properties.lad16nm",
"oneOf": [
"Bolton",
"Bury",
"Manchester",
"Oldham",
"Rochdale",
"Salford",
"Stockport",
"Tameside",
"Trafford",
"Wigan"
]
}
}
],
"projection": {"type": "mercator"},
"mark": "geoshape"
}
"mark": {
"type": "geoshape",
"fill": "#eee",
"stroke": "#757575",
"strokeWidth": 0.5
}
Map with stroke and fill
"layer": [
{
"mark": {
"type": "geoshape",
"fill": "#eee",
"stroke": "#757575",
"strokeWidth": 0.5
}
},
{
"mark": "text",
"encoding": {
"text": {"field": "properties.lad16nm", "type": "nominal"},
"longitude": {"field": "properties.long", "type": "quantitative"},
"latitude": {"field": "properties.lat", "type": "quantitative"},
"size": {"value": 10},
"opacity": {"value": 0.6}
}
}
]
Map with labels
"mark": {
"type": "geoshape",
"fill": "#eee",
"stroke": "#757575",
"strokeWidth": 0.5
},
"encoding": {
"color": {"value": "#eee"},
"tooltip": [
{"field": "properties.lad16nm", "type": "nominal", "title": "Name"}
]
}
Map with tooltips
{
"lookup": "properties.lad17nm",
"from": {
"data": {"values": [
{"lad17nm": "Bolton", "percent": 0.34},
{"lad17nm": "Bury", "percent": 0.27},
{"lad17nm": "Manchester", "percent": 0.44},
{"lad17nm": "Oldham", "percent": 0.41},
{"lad17nm": "Rochdale", "percent": 0.36},
{"lad17nm": "Salford", "percent": 0.32},
{"lad17nm": "Stockport", "percent": 0.21},
{"lad17nm": "Tameside", "percent": 0.3},
{"lad17nm": "Trafford", "percent": 0.22},
{"lad17nm": "Wigan", "percent": 0.25}
]},
"key": "lad17nm",
"fields": ["lad17nm", "percent"]
}
}
"encoding": {
"color": {
"field": "percent",
"type": "quantitative",
"scale": {"scheme": "Oranges"},
"legend": {
"title": null,
"format": "%"
}
}
}
"tooltip": [
{
"field": "properties.lad17nm",
"type": "nominal",
"title": "Name"
},
{
"field": "percent",
"type": "quantitative",
"format": ".1%",
"title": "Child poverty"
}
]
Choropleth map

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store