Public
Edited
May 30, 2023
1 fork
5 stars
datasets = require('vega-datasets@1')
usa = datasets['us-10m.json']()
projectionsFile = FileAttachment("projections2.csv")
projections = projectionsFile.csv()
projectionsFile_final = FileAttachment("projections_final@1.csv")
projections_final = projectionsFile_final.csv()
printTable(projections_final.slice(0,20), null)
printTableTypes(projections)
viewof year_projections_2 = Inputs.range([0, years.length-1], {step:1, label:"Years"});
year_2 = years[year_projections_2];
vl.markCircle({fill:'blue', clip: 'true', size:"200", fill: 'lightblue'})
.data(projections)
.transform({filter: 'datum.Scenario == "1.0 - MED"'})
.title('Moderate Sea Level Rise Projections for US Coastal Cities')
.encode(vl.x().fieldN('NOAA Name').title('Location'),
vl.y().fieldQ(year_2).scale({domain:[0, 300]}).title("Sea Level Rise for " + years[year_projections_2] + " (cm)"),
vl.tooltip().fieldN('NOAA Name'))
.width(1000)
.height(350)
.render()
{
const map = vl.markGeoshape({fill: '#ddd', stroke: '#fff', strokeWidth: 1})
.data(vl.topojson(usa).feature('states'));
const selectRegion = vl.selectPoint('Select')
.fields('reg_class')
.init({reg_class: 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 selectYear = vl.selectPoint('yearSelect')
.fields('year')
.init({year: years[0]})
.bind(vl.menu(years).name("Year "));
const show = vl.and(selectLevel, selectRegion, selectYear);
const impact = vl.markCircle()
.data(projections_final)
.params(selectYear, selectLevel, selectRegion)
.transform(vl.filter('datum["reg_class"] != "Caribbean"'),
vl.filter("datum['name'] != 'Wake Island, Pacific Ocean'"),
vl.filter("datum['name'] != 'Kwajalein, Marshall Islands'"),
vl.filter("datum['name'] != 'Pago Pago, American Samoa'"),
vl.filter("datum['name'] != 'Apra Harbor, Guam'"),
vl.filter("datum['name'] != 'Sand Island, Midway Islands'"),
vl.filter("datum['name'] != 'Johnston Atoll'"),
vl.calculate('year(datum.year)').as('Year'))
.encode(
vl.longitude().fieldQ('long'),
vl.latitude().fieldQ('lat'),
vl.size().fieldQ('rise').scale({domain:[0,100]}),
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('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();
}
{
const selectRegion = vl.selectPoint('Select')
.fields('reg_class')
.init({reg_class: 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 selectYear = vl.selectPoint('yearSelect')
.fields('year')
.init({year: years[0]})
.bind(vl.menu(years).name("Year "));
const show = vl.and(selectLevel, selectRegion, selectYear);
const map = vl.markGeoshape({fill: '#ddd', stroke: '#fff', strokeWidth: 1})
.data(vl.topojson(usa).feature('states'));
const impact = vl.markCircle()
.data(projections_final)
.params(selectYear, selectLevel, selectRegion)
.transform(vl.filter('datum["reg_class"] != "Caribbean"'),
vl.filter("datum['name'] != 'Wake Island, Pacific Ocean'"),
vl.filter("datum['name'] != 'Kwajalein, Marshall Islands'"),
vl.filter("datum['name'] != 'Pago Pago, American Samoa'"),
vl.filter("datum['name'] != 'Apra Harbor, Guam'"),
vl.filter("datum['name'] != 'Sand Island, Midway Islands'"),
vl.filter("datum['name'] != 'Johnston Atoll'"),
vl.calculate('year(datum.year)').as('Year'))
.encode(
vl.longitude().fieldQ('long'),
vl.latitude().fieldQ('lat'),
vl.size().fieldQ('rise').scale({domain:[0,500]}),
vl.opacity().if(show, vl.value(0.75)).value(0.001),
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('name')
);
const combine = vl.layer(map, impact)
.project(vl.projection('albersUsa'))
.title('Map of Affected Coastal Cities')
.width(300)
.height(300);
const graph = vl.markCircle({fill:'blue', size:"200", fill: 'lightblue'})
.data(projections_final)
.params(selectLevel, selectRegion, selectYear)
.padding({top: 120, bottom: 120, left: 100, right: 30})
.title('Sea Level Rise Projections in US Coastal Cities')
.encode(
vl.x().fieldN('name').axis({labels:false, ticks:false}).title('City'),
vl.y().fieldQ('rise').title('Sea Level Rise (cm)'),
vl.opacity().if(show, vl.value(0.75)).value(0.0001),
vl.tooltip().fieldN('name')
)
.width(300)
.height(300);
return vl.hconcat(combine, graph).render()
}
import {vl} from "@vega/vega-lite-api-v5"
import {printTable} from "@jonfroehlich/data-utilities"
import {menu, rotate3D, slider, translate2D} from '@jheer/dom-utilities'
import {Range} from '@observablehq/inputs'
import {printTableTypes} from "@jonfroehlich/data-utilities"
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.
