{
const colors = {
domain: ['2019', '2020'],
range: ['#B8860B', '#8A2BE2']
};
const basic1 = vl.markLine({opacity: 0.5, strokeWidth:5, interpolate: "monotone", point:{size:50}})
.data(df)
.encode(
vl.x().fieldQ('week').title('Week').axis({labelAngle: 0, fontSize:10}),
vl.y().fieldQ('bikes_14counters').title('Number of Bike Riders').axis({labelAngle: 0, fontSize:10}),
vl.color().fieldN('year').legend({orient: 'top-right'}).scale(colors),
vl.shape().fieldN('year').legend(null),
vl.opacity().value(0.5)
)
.title({
text: 'Biker Rider Count Comparison',
anchor: 'middle',
offset: 5,
fontsize: 12
})
.width(700)
.height(200)
const basic2 = vl.markRule({stroke: 'firebrick'})
.data([{'week': 12}])
.encode(
vl.x().fieldQ('week')
);
return vl.layer(basic1, basic2).render()
}