Connections among Major U.S. Airports.
An interactive visualization of connections among major U.S. airports in 2008. Based on a U.S. airports example by Mike Bostock.
View this example in the online editor
Vega-Lite JSON Specification
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"description": "An interactive visualization of connections among major U.S. airports in 2008. Based on a U.S. airports example by Mike Bostock.",
"layer": [
{
"mark": {
"type": "geoshape",
"fill": "#ddd",
"stroke": "#fff",
"strokeWidth": 1
},
"data": {
"url": "data/us-10m.json",
"format": {"type": "topojson", "feature": "states"}
}
},
{
"mark": {"type": "rule", "color": "#000", "opacity": 0.35},
"data": {"url": "data/flights-airport.csv"},
"transform": [
{"filter": {"selection": "single"}},
{
"lookup": "origin",
"from": {
"data": {"url": "data/airports.csv"},
"key": "iata",
"fields": ["latitude", "longitude"]
}
},
{
"lookup": "destination",
"from": {
"data": {"url": "data/airports.csv"},
"key": "iata",
"fields": ["latitude", "longitude"]
},
"as": ["lat2", "lon2"]
}
],
"encoding": {
"latitude": {"field": "latitude"},
"longitude": {"field": "longitude"},
"latitude2": {"field": "lat2"},
"longitude2": {"field": "lon2"}
}
},
{
"mark": {"type": "circle"},
"data": {"url": "data/flights-airport.csv"},
"transform": [
{"aggregate": [{"op": "count", "as": "routes"}], "groupby": ["origin"]},
{
"lookup": "origin",
"from": {
"data": {"url": "data/airports.csv"},
"key": "iata",
"fields": ["state", "latitude", "longitude"]
}
},
{"filter": "datum.state !== 'PR' && datum.state !== 'VI'"}
],
"selection": {
"single": {
"type": "single",
"on": "mouseover",
"nearest": true,
"fields": ["origin"],
"empty": "none"
}
},
"encoding": {
"latitude": {"field": "latitude"},
"longitude": {"field": "longitude"},
"size": {
"field": "routes",
"type": "quantitative",
"scale": {"rangeMax": 1000},
"legend": null
},
"order": {
"field": "routes",
"sort": "descending"
}
}
}
],
"projection": {"type": "albersUsa"},
"width": 900,
"height": 500,
"config": {"view": {"stroke": null}}
}