Public
Edited
May 29, 2023
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
datasets = require('vega-datasets@1')
Insert cell
usa = datasets['us-10m.json']()
Insert cell
projectionsFile = FileAttachment("projections2.csv")
Insert cell
projections = projectionsFile.csv()
Insert cell
Insert cell
printTable(projections.slice(0,20), null)
Insert cell
Insert cell
viewof year_projections_2 = Inputs.range([0, years.length-1], {step:1, label:"Years"});
Insert cell
year_2 = years[year_projections_2];
Insert cell
year_num = 2030 + year_projections_2 * 10
Insert cell
// katelyn's working version of visualization 1
{
const param = vl.param("Region") // name the param 'bar_color'
.value("Eastern Gulf")
.bind(vl.menu(reg_class)); // add dynamic menu with CSS color names

const param2 = vl.param('lvlSelect')
.value("0.3 - MED")
.bind(vl.menu(extent).name("Extent of Prediction "));

const show = vl.and(param, param2);


return vl.markCircle({fill:'blue', size:"200", fill: 'lightblue'})
.data(projections)
.params(param, param2)
.padding({top: 120, bottom: 120, left: 100, right: 30})
.transform(
vl.filter("datum.Scenario == lvlSelect"),
vl.filter("datum['Regional Classification'] == Region")
)
.title('Sea Level Rise Projections for ' + year_num + ' in US Coastal Cities')
.encode(
vl.x().fieldN('NOAA Name'),
vl.y().fieldQ(year_2).scale({domain:[-100,500]}),
)
.width(600)
.height(500)
.render()

}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
{
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()
}
Insert cell

vl.hconcat(plot("RSL2030 (cm)", vl.selectPoint('Select').fields('Regional Classification').init({Regional_Classification: reg_class[0]}).bind(vl.menu(reg_class).name("US Region ")), vl.selectPoint('lvlSelect').fields('Scenario').init({Scenario: extent[0]}).bind(vl.menu(extent).name("Extent of Prediction "))),
plot("RSL2090 (cm)", vl.selectPoint('Select').fields('Regional Classification').init({Regional_Classification: reg_class[0]}).bind(vl.menu(reg_class).name("US Region ")), vl.selectPoint('lvlSelect').fields('Scenario').init({Scenario: extent[0]}).bind(vl.menu(extent).name("Extent of Prediction "))),
plot("RSL2140 (cm)"), vl.selectPoint('Select').fields('Regional Classification').init({Regional_Classification: reg_class[0]}).bind(vl.menu(reg_class).name("US Region ")), vl.selectPoint('lvlSelect').fields('Scenario').init({Scenario: extent[0]}).bind(vl.menu(extent).name("Extent of Prediction "))).render()
Insert cell

function plot(selection, param1, param2) {const map = vl.markGeoshape({fill: '#ddd', stroke: '#fff', strokeWidth: 1})
.data(vl.topojson(usa).feature('states'));

const show = vl.and(param1, param2);

const impact = vl.markCircle()
.data(projections)
.params(param1, param2)
.transform(vl.filter('datum["Regional Classification"] != "Caribbean"'),
vl.filter("datum['NOAA Name'] != 'Wake Island, Pacific Ocean'"))
.encode(
vl.longitude().fieldQ('Long'),
vl.latitude().fieldQ('Lat'),
vl.size().fieldQ(selection).scale({domain:[0,500]}),
vl.opacity().if(show, vl.value(0.75)).value(0.01),
vl.color().if(show, vl.color().fieldN('Scenario')).value('grey'),
vl.tooltip().fieldN('NOAA Name')
);
return vl.layer(map, impact)
.project(vl.projection('albersUsa'))
.width(300)
.height(300);
}
Insert cell
Insert cell
chart1 = vl.markBar()
.data(values1)
.encode(vl.x().fieldN('a'), vl.y().fieldQ('b'));

chart2 = vl.markLine()
.data(values2)
.encode(vl.x().fieldT('time'), vl.y().fieldQ('value'));

sideBySide = vl.hconcat(chart1, chart2).render();
Insert cell
import {vl} from "@vega/vega-lite-api-v5"
Insert cell
import {printTable} from "@jonfroehlich/data-utilities"
Insert cell
import {menu, rotate3D, slider, translate2D} from '@jheer/dom-utilities'
Insert cell

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.
Learn more