plot = {
const hover = vl.selectPoint('hover')
.encodings('x')
.on('mouseover')
.toggle(false)
.nearest(true);
const isHovered = hover.empty(false);
const line = vl.markLine().encode(
vl.x().fieldT('TIME'),
vl.y().fieldQ('Value'),
vl.color().fieldN('LOCATION')
);
const base = line.transform(vl.filter(isHovered));
const label = {align: 'left', dx: 5, dy: -5};
const white = {stroke: 'white', strokeWidth: 2};
return vl.data(european_data)
.layer(
line,
vl.markRule({color: '#aaa'})
.transform(vl.filter(isHovered))
.encode(vl.x().fieldT('TIME')),
line.markCircle()
.params(hover)
.encode(vl.opacity().if(isHovered, vl.value(1)).value(0)),
base.markText(label, white).encode(vl.text().fieldQ('Value')),
base.markText(label).encode(vl.text().fieldQ('Value'))
)
.width(800)
.height(500)
.render();
}