Research scientist. I like maps, code and data visualisation. I keep an eye on anything that can fly, an ear for fipradio and a foot ready for next trail.
version = "0.0.8"
// equivalent to Traffic.fromURL(url)
// with url: https://github.com/xoolive/traffic/data/samples/collections/quickstart.json.gz
quickstart = Traffic.fromSample("quickstart", "collections")
quickstart.table() // There are table views
// but also html views
viewof belevingsvlucht = {
const flight = await Flight.fromSample("belevingsvlucht");
return flight.view({ graticule: 0.5 });
}
// equivalent to Array.from(quickstart.iterate(600))
trajectories = Array.from(quickstart)
viewof sample = trajectories
// Get one trajectory with an Air France callsign
.find((flight) => flight.callsign.slice(0, 3) === "AFR")
.view()
sample.table()
sample.rollup({
start: (f) => f.start,
callsign: "callsign",
icao24: "icao24",
vrate_max: op.max("vertical_rate")
})
stats = Array.from(quickstart).map((flight) =>
flight.rollup({
start: (f) => f.start,
callsign: "callsign",
icao24: "icao24",
vrate_max: op.max("vertical_rate"),
altitude_mean: op.mean("altitude")
})
)
stats
Type Table, then Shift-Enter. Ctrl-space for more options.
feature = belevingsvlucht.feature()
{
const container = yield htl.html`<div style="height: 500px;">`;
const map = L.map(container, { scrollWheelZoom: false });
const layer = L.geoJSON(feature).addTo(map);
map.fitBounds(layer.getBounds(), { maxZoom: 9 });
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution:
"© <a href=https://www.openstreetmap.org/copyright>OpenStreetMap</a> contributors"
}).addTo(map);
// Add a marker for one airport
L.marker([airports.EHAM.latitude, airports.EHAM.longitude])
.addTo(map)
.bindTooltip(airports.EHAM.name);
L.marker([airports.EHLE.latitude, airports.EHLE.longitude])
.addTo(map)
.bindTooltip(airports.EHLE.name, { permanent: true });
}
Plot.plot({
width: 400,
projection: { type: "mercator", domain: feature, inset: 10 },
marks: [
Plot.geo(feature),
Plot.dot([airports.EHAM, airports.EHLE], {
x: "longitude",
y: "latitude"
}),
Plot.text([airports.EHAM, airports.EHLE], {
x: "longitude",
y: "latitude",
text: "name",
textAnchor: "start",
dx: 10,
dy: 5
})
]
})
Plot.plot({
projection: {
type: "mercator",
domain: d3
.geoCircle()
.center([airports.LFPG.longitude, airports.LFPG.latitude])
.radius(1.5)()
},
color: { legend: true },
marks: [
Plot.geo(
Array.from(quickstart)
.filter(
// We don't plot all flights, only after this time
(flight) =>
flight.stop > d3.utcParse("%Y-%m-%d %H:%M")("2021-10-07 13:30")
)
.map((flight) =>
flight.feature({
start: "start",
stop: "stop",
callsign: "callsign",
vrate_mean: aq.op.mean("vertical_rate")
})
),
{
stroke: (elt) => elt.properties.vrate_mean
}
),
Plot.dot([airports.LFPO, airports.LFPG, airports.LFPB], {
x: "longitude",
y: "latitude"
}),
Plot.text([airports.LFPO, airports.LFPG, airports.LFPB], {
x: "longitude",
y: "latitude",
text: "name",
textAnchor: "start",
dx: 10,
dy: -5
})
]
})
Plot.line(sample.data, {
x: "timestamp",
y: "altitude",
stroke: "steelblue",
strokeOpacity: 0.8
}).plot() // sample.chart({y: "altitude"}).plot()
Plot.plot({
marks: [
Plot.line(sample.data, {
x: "timestamp",
y: "altitude",
stroke: "steelblue",
strokeOpacity: 0.8
})
],
x: {
tickFormat: d3.utcFormat("%H:%M"),
label: "timestamp (UTC)"
},
marginLeft: 100,
width,
height: 300,
grid: true
})
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
topojson = require("topojson-client@3", "topojson-server@3", "topojson-simplify@3")
import { toc } from "@nebrius/indented-toc"
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.
