view = {
// interactive selection for origin airport
// select nearest airport to mouse cursor
const origin = vl.selectPoint().fields('origin')
.on('mouseover').nearest(true);
// base map of the United States
//const map = vl.markGeoshape({fill: '#ddd', stroke: '#fff', strokeWidth: 1})
// .data(vl.topojson("IMF_CountryPolys.json").feature('IMF Name'));
/***
// shared data reference for lookup transforms
const foreign = vl.data('data/airports.csv').key('iata').fields('latitude', 'longitude');
// add route lines from selected origin airport to destination airports
const routes = vl.markRule({color: '#000', opacity: 0.35})
.data('data/flights-airport.csv')
.transform(
vl.filter(origin.empty(false)), // filter to selected origin only
vl.lookup('origin').from(foreign), // origin lat/lon
vl.lookup('destination').from(foreign).as('lat2', 'lon2') // dest lat/lon
)
.encode(
vl.latitude().fieldQ('latitude'),
vl.longitude().fieldQ('longitude'),
vl.latitude2().field('lat2'),
vl.longitude2().field('lon2')
);
***/
// size airports by number of outgoing routes
// 1. aggregate flights-airport data set
// 2. lookup location data from airports data set
// 3. remove Puerto Rico (PR) and Virgin Islands (VI)
const points = vl.markCircle()
.data('https://observablehq.com/d/b39b8c7400076b8c#vis_airports1')
.transform(
vl.groupby('origin').aggregate(vl.count().as('routes')),
vl.lookup('origin').from(foreign.fields('country', 'latitude', 'longitude')),
//vl.filter('datum.state !== "PR" && datum.state !== "VI"')
)
.select(origin)
.encode(
vl.latitude().fieldQ('latitude'),
vl.longitude().fieldQ('longitude'),
vl.size().fieldQ('routes').scale({range: [0, 1000]}).legend(null),
vl.order().fieldQ('routes').sort('descending') // place smaller circles on top
);
return vl.layer(points) //routes, points
.project(vl.projection('equalEarth'))
.width(900).height(500)
.config({view: {stroke: null}})
.render();
}
foreign = vl.data('data/airports.csv').key('iata').fields('latitude', 'longitude');
vis_airports@1.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
https://observablehq.com/d/b39b8c7400076b8c#vis_airports1
world = FileAttachment("IMF_CountryPolys.json").json()
data = vl.topojson(FileAttachment("IMF_CountryPolys.json").json())
FileAttachment("IMF_CountryPolys.json").json()
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
