Flights Hexbin
Hexagonal bins show the density of over 200,000 flights by departure time and arrival delay. Select regions in the marginal histograms to filter the density display.
Loading Example... ⏳
Specification
js
import * as vg from "@uwdata/vgplot";
await vg.coordinator().exec([
vg.loadParquet("flights", "data/flights-200k.parquet")
]);
const $scale = vg.Param.value("log");
const $query = vg.Selection.intersect();
export default vg.vconcat(
vg.hconcat(
vg.menu({label: "Color Scale", as: $scale, options: ["log", "linear", "sqrt"]}),
vg.hspace(10),
vg.colorLegend({for: "hexbins"})
),
vg.hconcat(
vg.plot(
vg.rectY(
vg.from("flights"),
{x: vg.bin("time"), y: vg.count(), fill: "steelblue", inset: 0.5}
),
vg.intervalX({as: $query}),
vg.margins({left: 5, right: 5, top: 30, bottom: 0}),
vg.xDomain(vg.Fixed),
vg.xAxis("top"),
vg.yAxis(null),
vg.xLabelAnchor("center"),
vg.width(605),
vg.height(70)
),
vg.hspace(80)
),
vg.hconcat(
vg.plot(
vg.hexbin(
vg.from("flights", {filterBy: $query}),
{x: "time", y: "delay", fill: vg.count(), binWidth: 10}
),
vg.hexgrid({binWidth: 10}),
vg.name("hexbins"),
vg.colorScheme("ylgnbu"),
vg.colorScale($scale),
vg.margins({left: 5, right: 0, top: 0, bottom: 5}),
vg.xAxis(null),
vg.yAxis(null),
vg.xyDomain(vg.Fixed),
vg.width(600),
vg.height(455)
),
vg.plot(
vg.rectX(
vg.from("flights"),
{x: vg.count(), y: vg.bin("delay"), fill: "steelblue", inset: 0.5}
),
vg.intervalY({as: $query}),
vg.margins({left: 0, right: 50, top: 4, bottom: 5}),
vg.yDomain([-60, 180]),
vg.xAxis(null),
vg.yAxis("right"),
vg.yLabelAnchor("center"),
vg.width(80),
vg.height(455)
)
)
);yaml
meta:
title: Flights Hexbin
description: >
Hexagonal bins show the density of over 200,000 flights by departure time and arrival delay.
Select regions in the marginal histograms to filter the density display.
data:
flights: { file: data/flights-200k.parquet }
params:
scale: { value: log }
query: { select: intersect }
vconcat:
- hconcat:
- input: menu
label: Color Scale
as: $scale
options: [log, linear, sqrt]
- hspace: 10
- legend: color
for: hexbins
- hconcat:
- plot:
- mark: rectY
data: { from: flights }
x: { bin: time }
y: { count: }
fill: steelblue
inset: 0.5
- select: intervalX
as: $query
margins: { left: 5, right: 5, top: 30, bottom: 0 }
xDomain: Fixed
xAxis: top
yAxis: null
xLabelAnchor: center
width: 605
height: 70
- hspace: 80
- hconcat:
- name: hexbins
plot:
- mark: hexbin
data: { from: flights, filterBy: $query }
x: time
y: delay
fill: { count: }
binWidth: 10
- mark: hexgrid
binWidth: 10
colorScheme: ylgnbu
colorScale: $scale
margins: { left: 5, right: 0, top: 0, bottom: 5 }
xAxis: null
yAxis: null
xyDomain: Fixed
width: 600
height: 455
- plot:
- mark: rectX
data: { from: flights }
x: { count: }
y: { bin: delay }
fill: steelblue
inset: 0.5
- select: intervalY
as: $query
margins: { left: 0, right: 50, top: 4, bottom: 5 }
yDomain: [-60, 180]
xAxis: null
yAxis: right
yLabelAnchor: center
width: 80
height: 455json
{
"meta": {
"title": "Flights Hexbin",
"description": "Hexagonal bins show the density of over 200,000 flights by departure time and arrival delay. Select regions in the marginal histograms to filter the density display.\n"
},
"data": {
"flights": {
"file": "data/flights-200k.parquet"
}
},
"params": {
"scale": {
"value": "log"
},
"query": {
"select": "intersect"
}
},
"vconcat": [
{
"hconcat": [
{
"input": "menu",
"label": "Color Scale",
"as": "$scale",
"options": [
"log",
"linear",
"sqrt"
]
},
{
"hspace": 10
},
{
"legend": "color",
"for": "hexbins"
}
]
},
{
"hconcat": [
{
"plot": [
{
"mark": "rectY",
"data": {
"from": "flights"
},
"x": {
"bin": "time"
},
"y": {
"count": null
},
"fill": "steelblue",
"inset": 0.5
},
{
"select": "intervalX",
"as": "$query"
}
],
"margins": {
"left": 5,
"right": 5,
"top": 30,
"bottom": 0
},
"xDomain": "Fixed",
"xAxis": "top",
"yAxis": null,
"xLabelAnchor": "center",
"width": 605,
"height": 70
},
{
"hspace": 80
}
]
},
{
"hconcat": [
{
"name": "hexbins",
"plot": [
{
"mark": "hexbin",
"data": {
"from": "flights",
"filterBy": "$query"
},
"x": "time",
"y": "delay",
"fill": {
"count": null
},
"binWidth": 10
},
{
"mark": "hexgrid",
"binWidth": 10
}
],
"colorScheme": "ylgnbu",
"colorScale": "$scale",
"margins": {
"left": 5,
"right": 0,
"top": 0,
"bottom": 5
},
"xAxis": null,
"yAxis": null,
"xyDomain": "Fixed",
"width": 600,
"height": 455
},
{
"plot": [
{
"mark": "rectX",
"data": {
"from": "flights"
},
"x": {
"count": null
},
"y": {
"bin": "delay"
},
"fill": "steelblue",
"inset": 0.5
},
{
"select": "intervalY",
"as": "$query"
}
],
"margins": {
"left": 0,
"right": 50,
"top": 4,
"bottom": 5
},
"yDomain": [
-60,
180
],
"xAxis": null,
"yAxis": "right",
"yLabelAnchor": "center",
"width": 80,
"height": 455
}
]
}
]
}py
import vgplot as vg
flights = vg.parquet("data/flights-200k.parquet")
scale = vg.param("log")
query = vg.selection.intersect()
view = vg.vconcat(
vg.hconcat(
vg.menu(label="Color Scale", bind=scale, options=["log", "linear", "sqrt"]),
vg.hspace(10),
vg.color_legend(plot="hexbins"),
),
vg.hconcat(
vg.plot(
vg.rect_y(
flights, x=vg.bin("time"), y=vg.count(), fill="steelblue", inset=0.5
),
vg.interval_x(bind=query),
vg.margins(left=5, right=5, top=30, bottom=0),
vg.x_domain("Fixed"),
vg.x_axis("top"),
vg.y_axis(None),
vg.x_label_anchor("center"),
vg.width(605),
vg.height(70),
),
vg.hspace(80),
),
vg.hconcat(
vg.plot(
vg.hexbin(
data=flights,
filter_by=query,
x="time",
y="delay",
fill=vg.count(),
bin_width=10,
),
vg.hexgrid(bin_width=10),
vg.name("hexbins"),
vg.color_scheme("ylgnbu"),
vg.color_scale(scale),
vg.margins(left=5, right=0, top=0, bottom=5),
vg.x_axis(None),
vg.y_axis(None),
vg.xy_domain("Fixed"),
vg.width(600),
vg.height(455),
),
vg.plot(
vg.rect_x(
flights, x=vg.count(), y=vg.bin("delay"), fill="steelblue", inset=0.5
),
vg.interval_y(bind=query),
vg.margins(left=0, right=50, top=4, bottom=5),
vg.y_domain([-60, 180]),
vg.x_axis(None),
vg.y_axis("right"),
vg.y_label_anchor("center"),
vg.width(80),
vg.height(455),
),
),
)