{
const brush = vl.selectInterval()
.encodings('x');
const plot1 = vl.markBar()
.data(weather)
.params(brush)
.transform(
vl.groupby('latitude','longitude')
.aggregate(
vl.sum('PRCP').as('Total_PRCP')
),
)
.encode(
vl.x().fieldQ('Total_PRCP').bin({maxbins:40}).title('Total Precipitation'),
vl.y().count().title('Frequency'),
vl.color().value("#32567E")
)
.width(750)
.height(300)
;
const plot2 = vl.markCircle({size:40})
.data(weather)
.transform(
vl.groupby('latitude','longitude')
.aggregate(
vl.sum('PRCP').as('Total_PRCP')
),
)
.encode(
vl.x().fieldQ('longitude').scale({domain:[-125,-60],clamp:true}).title('Latitude'),
vl.y().fieldQ('latitude').scale({domain:[25,50],clamp:true}).title('Longitude'),
vl.color().fieldQ('Total_PRCP').scale({
"domain": [0,20,25,30,150],
"range": ["#32567E",'#A1C1E6',"#ffffff",'#F0B6A0',"#C03C3C"]
,reverse:true}),
vl.opacity().if(brush,vl.value(0.75)).value(0.05)
)
.width(750)
.height(500)
;
return vl.vconcat(plot1,plot2).title('Precipitation by Geography for the Continental US').render()
}