{
const brush = vl.selectInterval()
.encodings('x');
const continent = vl.selectPoint('Selection')
.fields('continent_name');
const plot1 = vl.markLine()
.data(football_gdp)
.params(brush,continent)
.encode(
vl.x().fieldT('year').title('Year'),
vl.y().count().title('# of Football Matches'),
vl.color().fieldN('continent_name'),
vl.opacity().if(continent,vl.value(0.75)).value(0.05),
vl.tooltip().fieldN('continent_name'),
vl.size().value(4)
)
.width(720)
.height(400)
.title('Trend of Football Matches by Continent')
;
const plot2 = vl.markCircle({size:70})
.data(football_gdp)
.params(continent)
.transform(
vl.filter(brush),
vl.groupby('team','continent_name')
.aggregate(
vl.sum('score').as('goals_scored'),
vl.sum('opponent_score').as('goals_conceded'),
vl.median('gdp_per_capita').as('gdp_per_capita'),
vl.count().as('total_games')
),
vl.filter("datum.gdp_per_capita<=150000")
)
.encode(
vl.x().fieldQ('goals_scored').title('Goals Scored'),
vl.y().fieldQ('gdp_per_capita').title('GDP per Capita (2015 US$)').scale({domain: [0, 150000]}),
vl.tooltip(['team','goals_scored','gdp_per_capita']),
vl.size().fieldQ('total_games'),
vl.color().fieldN('continent_name').scale({domain:['Africa','Asia','Europe','North America','Oceania','South America'],range:["#4c78a8","#f58518","#e45756","#72b7b2","#54a24b","#eeca3b"]}),
vl.opacity().if(continent,vl.value(0.75)).value(0.05)
)
.title('Goals Scored and Conceded by Country')
.width(720)
.height(300);
return vl.vconcat(plot1,plot2
).render()
}