Bars2 = {
const selection = vl.selectSingle()
.encodings('x')
.fields('Degree')
.init({Degree: 'Computer and information sciences'})
.bind({Degree: vl.menu(Degree).name("Level and field of highest degree")});
const totalBar = vl.markBar()
.data(FutureCSV)
.transform(
vl.filter(selection),
vl.aggregate([
vl.sum('Total').as('Total'),
])
.groupby(['Degree'])
)
.encode(
vl.x().fieldN('Degree'),
vl.y().fieldQ('Total'),
vl.tooltip().fieldQ('Total'),
vl.color().condition(
{test: selection, value: 'blue'}
)
);
const closelyRelatedBar = vl.markBar()
.data(FutureCSV)
.transform(
vl.filter(selection),
vl.aggregate([
vl.sum('Closely related').as('Closely related'),
])
.groupby(['Degree'])
)
.encode(
vl.x().fieldN('Degree'),
vl.y().fieldQ('Closely related'),
vl.tooltip().fieldQ('Closely related'),
vl.color().condition(
{test: selection, value: 'red'}
)
);
return vl.hconcat(
vl.layer(totalBar, closelyRelatedBar)
.title("Total compared to Closely Related Fields "),
vl.markBar(FutureCSV)
.select(selection)
.title("Select Degree")
.width(200)
).render();
}