London Tube Lines
This example was created by Jo Wood
View this example in the online editor
Vega-Lite JSON Specification
{
"$schema": "https://vega.github.io/schema/vega-lite/v2.json",
"width": 700,
"height": 500,
"config": {
"view": {
"stroke": "transparent"
}
},
"layer": [
{
"data": {
"url": "data/londonBoroughs.json",
"format": {
"type": "topojson",
"feature": "boroughs"
}
},
"mark": {
"type": "geoshape",
"stroke": "white",
"strokeWidth": 2
},
"encoding": {
"color": {
"value": "#eee"
}
}
},
{
"data": {
"url": "data/londonCentroids.json",
"format": {
"type": "json"
}
},
"transform": [
{
"calculate": "indexof (datum.name,' ') > 0 ? substring(datum.name,0,indexof(datum.name, ' ')) : datum.name",
"as": "bLabel"
}
],
"mark": "text",
"encoding": {
"longitude": {
"field": "cx",
"type": "quantitative"
},
"latitude": {
"field": "cy",
"type": "quantitative"
},
"text": {
"field": "bLabel",
"type": "nominal"
},
"size": {
"value": 8
},
"opacity": {
"value": 0.6
}
}
},
{
"data": {
"url": "data/londonTubeLines.json",
"format": {
"type": "topojson",
"feature": "line"
}
},
"mark": {
"type": "geoshape",
"filled": false,
"strokeWidth": 2
},
"encoding": {
"color": {
"field": "id",
"type": "nominal",
"legend": {
"title": null,
"orient": "bottom-right",
"offset": 0
},
"scale": {
"domain": [
"Bakerloo",
"Central",
"Circle",
"District",
"DLR",
"Hammersmith & City",
"Jubilee",
"Metropolitan",
"Northern",
"Piccadilly",
"Victoria",
"Waterloo & City"
],
"range": [
"rgb(137,78,36)",
"rgb(220,36,30)",
"rgb(255,206,0)",
"rgb(1,114,41)",
"rgb(0,175,173)",
"rgb(215,153,175)",
"rgb(106,114,120)",
"rgb(114,17,84)",
"rgb(0,0,0)",
"rgb(0,24,168)",
"rgb(0,160,226)",
"rgb(106,187,170)"
]
}
}
}
}
]
}