import {vl} from "@vega/vega-lite-api-v5"
sea_level_projections = FileAttachment("SL_projections.csv").csv({typed: true})
years = ['RSL2030 (cm)', 'RSL2040 (cm)', 'RSL2050 (cm)', 'RSL2060 (cm)', 'RSL2070 (cm)', 'RSL2080 (cm)', 'RSL2090 (cm)', 'RSL2100 (cm)', 'RSL2110 (cm)', 'RSL2120 (cm)', 'RSL2130 (cm)', 'RSL2140 (cm)']
locations = ['Nawiliwili', 'Honolulu', 'Mokuoloe', 'Kahului, Kahului Harbor',
'Kawaihae', 'Hilo, Hilo Bay, Kuhio Bay', 'Johnston Atoll',
'Sand Island, Midway Islands', 'Apra Harbor, Guam',
'Pago Pago, American Samoa', 'Kwajalein, Marshall Islands',
'Wake Island, Pacific Ocean', 'Eastport', 'Cutler Naval Base',
'Bar Harbor', 'Portland', 'Boston', 'Woods Hole',
'Nantucket Island', 'Newport', 'Providence', 'New London',
'Bridgeport', 'Montauk', 'PORT JEFFERSON', 'Kings Point',
'The Battery', 'Bergen Point West Reach', 'Sandy Hook',
'Atlantic City', 'Cape May', 'Philadelphia', 'Reedy Point',
'Lewes', 'OCEAN CITY, FISHING PIER', 'Cambridge',
'Tolchester Beach', 'Baltimore, Fort McHenry, Patapsco River',
'Annapolis', 'Solomons Island', 'Washington', 'Kiptopeke',
'Lewisetta', 'Sewells Point', 'PORTSMOUTH, NORFOLK NAVAL SHIPYARD',
'Chesapeake Bay Bridge Tunnel', 'Duck', 'Oregon Inlet Marina',
'Cape Hatteras Fishing Pier', 'Beaufort, Duke Marine Lab',
'Wilmington', 'Springmaid Pier',
'Charleston, Cooper River Entrance', 'Fort Pulaski',
'Fernandina Beach', 'Mayport (Bar Pilots Dock)',
'Mayport (Ferry Depot)', 'Trident Pier, Port Canaveral',
'Virginia Key, Biscayne Bay', 'Vaca Key, Florida Bay', 'Key West',
'Naples, Gulf of Mexico', 'Fort Myers',
'St. Petersburg, Tampa Bay', 'Clearwater Beach', 'Cedar Key',
'Apalachicola', 'Panama City', 'Pensacola', 'Dauphin Island',
'Bay Waveland Yacht Club', 'Grand Isle', 'Sabine Pass North',
'Galveston Pier 21', 'Galveston Pleasure Pier', 'Freeport',
'Rockport', 'Bob Hall Pier, Corpus Christi', 'Port Isabel',
'San Diego, San Diego Bay', 'La Jolla', 'Los Angeles',
'Santa Monica', 'Santa Barbara', 'Port San Luis', 'Monterey',
'San Francisco', 'Redwood City', 'Alameda', 'Point Reyes',
'Port Chicago', 'Arena Cove', 'North Spit', 'Crescent City',
'Port Orford', 'Charleston', 'South Beach', 'Astoria',
'Toke Point', 'Neah Bay', 'Port Angeles', 'Port Townsend',
'Seattle', 'Cherry Point', 'Friday Harbor', 'Ketchikan', 'Sitka',
'Juneau', 'Skagway, Taiya Inlet', 'Yakutat, Yakutat Bay',
'Cordova', 'Valdez', 'Seward', 'Seldovia', 'Nikiski', 'Anchorage',
'Kodiak Island', 'Sand Point', 'Adak Island', 'Unalaska',
'Nome, Norton Sound', 'Prudhoe Bay', 'Lime Tree Bay',
'Charlotte Amalie', 'San Juan, La Puntilla, San Juan Bay',
'Magueyes Island']
locations_sorted = locations.sort()
viewof location_slider = Inputs.range([0, locations.length - 1], {step: 3, label: "Locations"})
loc = [locations_sorted[location_slider]]
year_label = [2030, 2040, 2050, 2060, 2070, 2080, 2090, 2100, 2110, 2120, 2130, 2140, 2150]
region_labels =['Hawaiian Islands','National','Northeast', 'Southeast', 'Eastern Gulf',
'Western Gulf','Southwest', 'Northwest', 'Caribbean']
viewof region_slider = Inputs.range([0, region_labels.length - 1], {step: 1, label: "Region"})
region = region_labels[region_slider]
viewof year_projections = Inputs.range([0, years.length - 1], {step: 1, label: "Years"})
year_SL_val = years[year_projections]
loc
sea_level_projections
vl.markCircle({fill:'blue', clip: 'true', size:"200", fill: 'lightblue'})
.data(sea_level_projections)
.transform({filter: 'datum.Scenario == "1.0 - MED"'})
.title('Moderate Sea Level Rise Projections for US Coastal Cities')
.encode(vl.x().fieldN(loc).title('Location'),
vl.y().fieldQ(year_SL_val).scale({domain:[0, 300]}).title("Sea Level Rise for " + year_label[year_projections] + " (cm)"),
vl.tooltip().fieldN('NOAA Name'))
.width(1000)
.height(350)
.render()
// Jon's sandbox code during office hours
{
// const param = vl.param("region_select") // name the param 'bar_color'
// .fields('Regional Classification')
// .init({Regional_Classification: region_labels[0]})
// .bind(vl.menu(region_labels)); // add dynamic menu with CSS color
const selectRegion = vl.selectPoint('Select')
.fields('Regional Classification')
.init({Regional_Classification: region_labels[0]})
.bind(vl.radio(region_labels).name("US Region "));
const show = vl.and(selectRegion);
return vl.markCircle({fill:'blue', size:"200", fill: 'lightblue'})
.data(sea_level_projections)
.params(selectRegion)
.padding({top: 100, bottom: 100, left: 100, right: 30})
.transform(
vl.filter("datum['Regional Classification'] == 'selectRegion'"),
vl.filter("datum.Scenario == '1.0 - MED'")
)
.title('Moderate Sea Level Rise Projections for US Coastal Cities')
.encode(
vl.x().fieldN('NOAA Name'),
vl.y().fieldQ(year_SL_val)
)
.width(500)
.height(400)
.render()
}
// Retrying original way
{
const param = vl.param("region_select") // name the param 'bar_color'
//.fields('Regional Classification')
//.init({Regional_Classification: region_labels[0]})
.bind(vl.menu(region_labels)); // add dynamic menu with CSS color
return vl.markCircle({fill:'blue', size:"200", fill: 'lightblue'})
.data(sea_level_projections)
.params(param)
.padding({top: 100, bottom: 100, left: 100, right: 30})
.transform(
vl.filter("datum['Regional Classification'] == 'region_select'"),
vl.filter("datum.Scenario == '1.0 - MED'")
)
.title('Moderate Sea Level Rise Projections for US Coastal Cities')
.encode(
vl.x().fieldN('NOAA Name'),
vl.y().fieldQ(year_SL_val)
)
.width(500)
.height(400)
.render()
}
{
const panzoom = vl.selectInterval().bind('scales')
.translate('[mousedown[!event.shiftKey], window:mouseup] > window:mousemove!')
.zoom('wheel!');
const brush = vl.selectInterval().resolve('union')
.on('[mousedown[event.shiftKey], window:mouseup] > window:mousemove!')
.translate('[mousedown[event.shiftKey], window:mouseup] > window:mousemove!')
.zoom(null);
return vl.markCircle()
.transform({filter: 'datum.Scenario == "1.0 - MED"'})
.data(sea_level_projections)
.params(panzoom, brush)
.encode(
vl.x().fieldN('NOAA Name').title('Location'),
vl.y().fieldQ(year_SL_val),
vl.opacity().if(brush, vl.value(0.8)).value(0.1)
)
.width(1000)
.height(200)
.render();
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
