render({
layer: [
{
mark: { type: 'geoshape', fill: '#ddd', stroke: '#fff', strokeWidth: 1 },
data: {
values: usa,
format: { type: 'topojson', feature: 'states' }
}
},
{
mark: { type: 'circle' },
data: { url: flights },
transform: [
{ aggregate: [{ op: 'count', as: 'routes' }], groupby: ['origin'] },
{
lookup: 'origin',
from: {
data: { url: airports },
key: 'iata',
fields: ['state', 'latitude', 'longitude']
}
},
{ filter: 'datum.state !== "PR" && datum.state !== "VI"' }
],
encoding: {
latitude: { field: 'latitude', type: 'Q' },
longitude: { field: 'longitude', type: 'Q' },
tooltip: [
{ field: 'origin', type: 'N' },
{ field: 'routes', type: 'Q' }
],
size: {
field: 'routes', type: 'Q',
scale: { range: [0, 1000] },
legend: null
},
order: { field: 'routes', type: 'Q', sort: 'descending' }
}
},
],
projection: { type: 'albersUsa' },
width: 900,
height: 500,
config: { view: { stroke: null } }
})