spec = {
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('date'),
vl.y().fieldQ('price').scale({type: 'log'}),
vl.color().fieldN('symbol')
);
const base = line.transform(vl.filter(isHovered));
const label = {align: 'left', dx: 5, dy: -5};
const white = {stroke: 'white', strokeWidth: 2};
return vl.data('data/stocks.csv')
.layer(
line,
vl.markRule({color: '#aaa'})
.transform(vl.filter(isHovered))
.encode(vl.x().fieldT('date')),
line.markCircle()
.params(hover)
.encode(vl.opacity().if(isHovered, vl.value(1)).value(0)),
base.markText(label, white).encode(vl.text().fieldQ('price')),
base.markText(label).encode(vl.text().fieldQ('price'))
)
.width(700)
.height(400);
}