{
const map = vl.markGeoshape({fill: '#ddd', stroke: '#fff', strokeWidth: 1})
.data(vl.topojson(usa).feature('states'));
const selectRegion = vl.selectPoint('Select')
.fields('Regional Classification')
.init({Regional_Classification: reg_class[0]})
.bind(vl.radio(reg_class).name("US Region "));
const selectLevel = vl.selectPoint('lvlSelect')
.fields('Scenario')
.init({Scenario: extent[0]})
.bind(vl.menu(extent).name("Extent of Prediction "));
const show = vl.and(selectLevel, selectRegion);
const impact = vl.markCircle()
.data(projections)
.params(selectRegion, selectLevel)
.transform(vl.filter('datum["Regional Classification"] != "Caribbean"'),
vl.filter("datum['NOAA Name'] != 'Wake Island, Pacific Ocean'"),
vl.filter("datum['NOAA Name'] != 'Kwajalein, Marshall Islands'"),
vl.filter("datum['NOAA Name'] != 'Pago Pago, American Samoa'"),
vl.filter("datum['NOAA Name'] != 'Apra Harbor, Guam'"),
vl.filter("datum['NOAA Name'] != 'Sand Island, Midway Islands'"),
vl.filter("datum['NOAA Name'] != 'Johnston Atoll'"))
.encode(
vl.longitude().fieldQ('Long'),
vl.latitude().fieldQ('Lat'),
vl.size().fieldQ(year).scale({domain:[0,200]}),
vl.opacity().if(show, vl.value(0.75)).value(0.02),
vl.color().if(show, vl.color().fieldN('Scenario').scale({ range: ['#FF8A8A', '#FF5C5C', '#FF2E2E', '#FF0000', '#FF2400', '#D9381E', '#DC143C', '#DA012D', '#D10000', '#A30000', '#9B111E', '#960018', '#800020', '#800000', '#750000'] })).value('grey'),
vl.tooltip().fieldN('NOAA Name')
);
return vl.layer(map, impact)
.title("Projected Sea Level Rise in Coastal Cities between 2030 and 2140")
.project(vl.projection('albersUsa'))
.width(700)
.height(500)
.render()
return vl.markCircle({fill:'blue', size:"200", fill: 'lightblue'})
.data(projections)
.params(selectRegion, selectLevel)
.padding({top: 120, bottom: 120, left: 100, right: 30})
.transform(
vl.filter("datum.Scenario == lvlSelect"),
vl.filter("datum['Regional Classification'] == Select")
)
.title('Moderate Sea Level Rise Projections for ' + year_num + ' in US Coastal Cities')
.encode(
vl.x().fieldN('NOAA Name'),
vl.y().fieldQ(year_2).scale({domain:[0,300]}),
)
.width(600)
.height(500)
.render()
}