Notebooks 2.0 is here.
Published
Edited
May 14, 2019
3 stars
{
// Interactive Interval Selection
const brush = vl.selectInterval().encodings("x");
// Keeling curve: Pane 1
const Keeling = vl
.markCircle({ size: 5 })
.data(CO2)
.transform(
vl.filter('datum.CO2 !== "-99.99"'),
vl.filter("datum.Year >= 1963 && datum.Year < 2019"),
vl.calculate("datetime(datum.Year,datum.Month,1)").as("Date")
)
.encode(
vl
.x()
.fieldT("Date")
.scale({ domain: [1963, 2019] })
.axis({
title: "",
titleFontSize: 15,
labelFontSize: 12,
tickCount: 40,
labelFlush: false
}),
vl
.y()
.fieldQ("CO2")
.scale({ zero: false, domain: [300, 420] })
.axis({
title: " CO₂ (ppm) ",
labelFontSize: 12,
tickCount: 6
}),
vl.tooltip([vl.yearmonth("Date"),"CO2"])
)
.title({text: "CO₂ Concentrations Over Time (Commonly Known as the Keeling Curve)"})
.width(607)
.height(50);
// Annual Keeling curve values used to link with the coral bleaching data set and the SST anomaly dataset
const Keeling2 = vl
.markCircle({ color: "red", size: 5 })
.data(coral_bleaching_keeling)
.select(brush)
.transform(
vl.filter("datum.YEAR >= 1963"),
vl.calculate("parseFloat(datum.Date)").as("DateFloat"),
vl.calculate("datetime(datum.Year,datum.Month,1)").as("dateS")
)
.encode(
vl
.x()
.year("YEAR")
.scale({ domain: [1963, 2019] }),
vl
.y()
.fieldQ("CO2")
.scale({ zero: false }),
vl
.color()
.if(brush)
.value("grey"),
vl
.opacity()
.if(brush,vl.value(0))
.value(0)
)
.width(607)
.height(50);
// Coral Bleaching Histogram: Pane 2
const CoralC = vl
.markBar({width:10})
.data(coral_bleaching_keeling)
.select(brush)
.title("Number of Coral Bleaching Point Measurements Taken Each Year")
.transform(
vl.calculate('year(datum.YEAR)').as('Year'),
)
.encode(
vl
.x()
.year("YEAR")
.scale({ domain: [1963, 2018] })
.axis({
title: "Year",
titleFontSize: 12,
labelFontSize: 12,
tickCount: 50,
labelFlush: false
}),
vl
.y()
.count()
.axis({
title:"log(# of points)",
labelFontSize: 12,
tickCount: 4,
labelFlush: false
})
.scale({ type: "log", domain: [0.1, 10000] }),
vl
.color()
.if(brush)
.value("grey"),
vl
.opacity()
.if(brush, vl.value(0.8))
.value(0.1),
vl.tooltip().count()
)
.width(607)
.height(50);
// Coral Bleaching Map: Pane 3
const map = vl
.layer(
// use the sphere of the Earth as the base layer
vl.markGeoshape({ fill: "#e6f3ff" }).data(vl.sphere()),
// add a graticule for geographic reference lines
vl
.markGeoshape({ stroke: "#ffffff", strokeWidth: 1 })
.data(vl.graticule()),
// and then the countries of the world
vl
.markGeoshape({ fill: "#2a1d0c", stroke: "#706545", strokeWidth: 0.5 })
.data(vl.topojson(world).feature("countries"))
)
.width(607)
.height(140)
.config({ view: { stroke: null } });
const points = vl
.markCircle({ size: 25, stroke: 'black', strokeWidth: 0.3 })
.data(coral_bleaching_keeling)
.transform(
vl.filter('datum.LAT <= "60"'),
vl.filter(brush)
)
.encode(
vl.latitude().fieldQ("LAT"),
vl.longitude().fieldQ("LON"),
vl.tooltip().fieldN("BLEACHING SEVERITY"),
vl
.color()
.fieldN("BLEACHING SEVERITY")
.scale({
domain: ["No Bleaching", "Low", "Medium", "High"],
range: ["#BA85CB", "gold", "darkorange", "red"]
})
.legend({
label: ["blue", "no bleaching", "mild", "moderate", "severe"]
})
);
// Mean SST Anomaly Map: Pane r
const map2 = vl
.layer(
// use the sphere of the Earth as the base layer
vl.markGeoshape({ fill: "#B3B3B3" }).data(vl.sphere())
)
.width(607)
.height(140)
.config({ view: { stroke: null } });
const points2 = vl
.markSquare({ size: 320, opacity: 1 })
.data(SSTdata)
.transform(
vl.filter(brush)
)
.encode(
vl.latitude().fieldQ("LAT"),
vl.longitude().fieldQ("LON"),
vl
.color()
.mean("SSTA")
.scale({
domain: [-1.5, 1.5],
clamp: true,
scheme: "redblue",
reverse: true
})
.legend({ title: "°C, Grey = No Data", direction: "horizontal", orient: "bottom", tickCount: 6}),
vl.tooltip({format: '.2'}).mean("SSTA")
);
const countries2 = vl
.markGeoshape({ fill: "#2a1d0c", stroke: "#706545", strokeWidth: 0.5 })
.data(vl.topojson(world).feature("countries"));
const refline = vl.markGeoshape({stroke: '#2a1d0c', strokeWidth: 0.1})
.data(vl.graticule());
// Display our graphic
return vl
.vconcat(
vl.layer(Keeling, Keeling2),
CoralC,
vl
.layer(map, points)
.project(
vl
.projection("equirectangular")
.scale(100)
.translate(300,120)
.center(0,-17)
)
.title(
"Measurements of Coral Bleaching Severity"
)
.config({ view: { stroke: null } }),
vl
.layer(map2, points2, refline, countries2)
.project(
vl
.projection("equirectangular")
.scale(100)
.translate(300,120)
.center(0,-17)
)
.title(
"Mean Sea Surface Temperature Anomaly* over Time Period Selected Above *ᶜᵒᵐᵖᵃʳᵉᵈ ᵗᵒ ᵐᵉᵃⁿ ˢˢᵗ ᵒᵛᵉʳ ¹⁸⁹¹⁻¹⁹⁶²"
)
.config({ view: { stroke: null } })
).title({text: 'Effects of Changing CO₂ on the Ocean - Select years in either of the top two panes to populate the maps below', fontSize: 18, offset: 25})
.render();
}
CO2 = d3.csv('https://gist.githubusercontent.com/cdfredrickson/74add5d97d6a72f5d695b1ef0609f407/raw/6b3ccee2227651f61feb7d644e28f61fff9e5a16/monthly_in_situ_co2_mlo_Wrangled_newyear.csv')
SSTdata = d3.csv('https://gist.githubusercontent.com/cdfredrickson/5c207f8510a0968e667cdaf3ac84fec2/raw/c70dd27a297f7034d51bbae8b43af222fc192660/SSTmonthly_tropics_10deg_CO2_short_altmonths_no2019.csv')
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.
