Skip to content

Instantly share code, notes, and snippets.

@ninjaPixel
Last active June 6, 2022 16:12
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ninjaPixel/4a0a5980a81acd49f4e6b7735bfd816d to your computer and use it in GitHub Desktop.
Save ninjaPixel/4a0a5980a81acd49f4e6b7735bfd816d to your computer and use it in GitHub Desktop.
going through the vega tutorial for re-creating the classic Mikey B viz on US airports
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"width": 900,
"height": 560,
"padding": {"top": 0, "left": 0, "right": 0, "bottom": 0},
"signals": [
{
"name": "hover",
"value": null,
"on": [
{"events": "@airportmark:mouseover", "update": "datum"},
{"events": "@airportmark:mouseout", "update": "null"}
]
},
{
"name": "title",
"value": "Flights 2008",
"update": "hover ? hover.name + ' ('+hover.iata+', '+hover.traffic.flights+' flights)':'Flights 2008'"
}
],
"data": [
{
"name": "states",
"url": "data/us-10m.json",
"format": {"type": "topojson", "feature": "states"},
"transform": [{"type": "geopath", "projection": "my_projection"}]
},
{
"name": "traffic",
"url": "data/flights-airport.csv",
"format": {"type": "csv", "parse": "auto"},
"transform": [
{
"type": "aggregate",
"groupby": ["origin"],
"fields": ["count"],
"ops": ["sum"],
"as": ["flights"]
}
]
},
{
"name": "traffic-raw",
"url": "data/flights-airport.csv",
"format": {"type": "csv", "parse": "auto"}
},
{
"name": "airports-raw",
"url": "data/airports.csv",
"format": {"type": "csv", "parse": "auto"}
},
{
"name": "airports",
"url": "data/airports.csv",
"format": {"type": "csv", "parse": "auto"},
"transform": [
{
"type": "lookup",
"from": "traffic",
"key": "origin",
"fields": ["iata"],
"as": ["traffic"]
},
{"type": "filter", "expr": "datum.traffic != null"},
{
"type": "geopoint",
"projection": "my_projection",
"fields": ["longitude", "latitude"]
},
{"type": "filter", "expr": "datum.x != null && datum.y != null"},
{
"type": "collect",
"sort": {"field": "traffic.flights", "order": "descending"}
}
]
},
{
"name": "routes",
"url": "data/flights-airport.csv",
"format": {"type": "csv", "parse": "auto"},
"transform": [
{"type": "filter", "expr": "hover && hover.iata==datum.origin"},
{
"type": "lookup",
"from": "airports",
"key": "iata",
"fields": ["origin", "destination"],
"as": ["source", "target"]
},
{"type": "filter", "expr": "datum.source && datum.target"},
{"type": "linkpath", "shape": "curve"}
]
}
],
"scales": [
{
"name": "size",
"type": "linear",
"domain": {"data": "traffic", "field": "flights"},
"range": [16, 2000]
}
],
"projections": [
{
"name": "my_projection",
"type": "albersUsa",
"scale": 1200,
"translate": [{"signal": "width / 2"}, {"signal": "height / 2"}]
}
],
"marks": [
{
"type": "path",
"from": {"data": "states"},
"encode": {
"enter": {"fill": {"value": "#dedede"}, "stroke": {"value": "white"}},
"update": {"path": {"field": "path"}}
}
},
{
"type": "path",
"interactive": false,
"from": {"data": "routes"},
"encode": {
"enter": {
"path": {"field": "path"},
"stroke": {"value": "black"},
"strokeOpacity": {"value": 0.5}
}
}
},
{
"type": "symbol",
"name": "airportmark",
"from": {"data": "airports"},
"encode": {
"enter": {
"shape": {"value": "square"},
"size": {"scale": "size", "field": "traffic.flights"},
"fill": {"value": "teal"},
"fillOpacity": {"value": 0.8},
"stroke": {"value": "white"},
"strokeWidth": {"value": 1.5}
},
"update": {"x": {"field": "x"}, "y": {"field": "y"}}
}
},
{
"type": "text",
"interactive": false,
"encode": {
"enter": {
"x": {"signal": "width", "offset": -5},
"y": {"value": 25},
"fill": {"value": "black"},
"align": {"value": "right"}
},
"update": {"text": {"signal": "title"}}
}
}
]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment