plot = {
const line = vl.markLine().encode(
vl.x().fieldT('date').title('Date'),
vl.y().fieldQ('marketCap').scale({type: scaleType}).title('Market Cap by USD'),
vl.color().fieldN('crypto_name').title('Cryptocurrency'),
);
const hover = vl.selectPoint('hover')
.encodings('x')
.on('mouseover')
.toggle(false)
.nearest(true);
const isHovered = hover.empty(false);
const base = line.transform(vl.filter(isHovered));
const label = {align: 'left', dx: 5, dy: -5};
const white = {stroke: 'white', strokeWidth: 2};
return vl.data(cleanedData)
.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('marketCap')),
base.markText(label).encode(vl.text().fieldQ('marketCap'))
)
.width(900)
.height(500)
.render();
}