Professor Big Data Science at Ghent University.
kaart met stations
prototypes
{
function baseMap(property, title) {
const map = vl.markGeoshape({fill: '#eeeeee', stroke:'white', strokeWidth: 1})
.data(vl.topojson(belgium).feature('municipalities'))
.transform(vl.filter("datum.properties.reg_nis != '03000'"))
.width(700).height(300);
const badStations = vl.markCircle()
.data(stationData)
.transform(
vl.lookup('id').from(vl.data(measurements).key('id').fields(['status'])),
vl.filter("datum.status !== 'Ok'")
)
.encode(
vl.longitude().fieldQ('coordinates.longitude'),
vl.latitude().fieldQ('coordinates.latitude'),
vl.color().value("black"),
vl.tooltip().value("buiten werking")
);
const stations = vl.markCircle({size: 100})
.data(stationData)
.transform(
vl.lookup('id').from(vl.data(measurements).key('id').fields(['temp', 'rainVolume', 'humidity', 'windSpeed', 'status'])),
vl.calculate("round(datum.windSpeed)").as('wind'),
vl.filter("datum.status === 'Ok'")
)
.encode(
vl.longitude().fieldQ('coordinates.longitude'),
vl.latitude().fieldQ('coordinates.latitude'),
vl.color().fieldQ(property).scale({scheme: 'viridis'}).legend({title: title, orient: "bottom"}),
vl.opacity().if(brush, vl.value(0.75)).value(0.1),
vl.tooltip([
{field: "given_name", type: "nominal", title: "Station"},
{field: "city", type: "nominal", title: "Locatie"},
{field: "temp", type: "quantitative", title: "Temperatuur (°C)"},
{field: "humidity", type: "quantitative", title: "Luchtvochtigheid (%)"},
{field: "rainVolume", type: "quantitative", title: "Neerslag vandaag (l/m²)"},])
);
const histogram = vl.markBar()
.data(measurements)
.transform(
vl.filter("datum.status === 'Ok'"),
vl.calculate("round(datum.windSpeed)").as('wind'),
)
.select(brush)
.encode(
vl.y().fieldQ(property).axis({title: title}),
vl.x().count().axis({title: "Aantal stations"}),
vl.color().fieldQ(property),
vl.opacity().if(brush, vl.value(0.75)).value(0.2)
)
.width(100)
.height(300);
return vl.hconcat(vl.layer(map, badStations, stations), histogram);
}
const brush = vl.selectInterval()
.encodings('y');
const temp = baseMap("temp", "Temperatuur (°C)");
const rainVolume = baseMap("rainVolume", "Neerslag vandaag (l/m²)");
const wind = baseMap("wind", "Windsnelheid (km/u)");
const humidity = baseMap("humidity", "Luchtvochtigheid (%)");
return vl.vconcat(temp, rainVolume, wind, humidity)
.config({view: {stroke: null}})
.resolve({scale: {color: 'independent'}})
.render();
}
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.
