Public
Edited
Oct 26, 2022
{
const strokeWidth = 2.5;
const strokeOpacity = 0.72;
return Plot.plot({
width,
height: width * 0.82,
margin: 32,
y: {
grid: true,
nice: true
},
x: {
grid: true
},
marks: [
Plot.line(data, {
x: "year",
y: "historical",
stroke: "gray"
}),
Plot.line(data, {
x: "year",
y: "SSP1-1.9",
stroke: "red",
strokeWidth,
strokeOpacity
}),
Plot.text(data.slice(data.length - 1, data.length), {
x: "year",
y: "SSP1-1.9",
text: ["SSP1-1.9"],
fill: "red",
dy: -8,
dx: -8
}),
Plot.line(data, {
x: "year",
y: "SSP1-2.6",
stroke: "blue",
strokeWidth,
strokeOpacity
}),
Plot.text(data.slice(data.length - 1, data.length), {
x: "year",
y: "SSP1-2.6",
text: ["SSP1-2.6"],
fill: "blue",
dy: -8,
dx: -8
}),
Plot.line(data, {
x: "year",
y: "SSP2-4.5",
stroke: "orange",
strokeWidth,
strokeOpacity
}),
Plot.text(data.slice(data.length - 1, data.length), {
x: "year",
y: "SSP2-4.5",
text: ["SSP2-4.5"],
fill: "orange",
dy: -8,
dx: -8
}),
Plot.line(data, {
x: "year",
y: "SSP3-7.0",
stroke: "green",
strokeWidth,
strokeOpacity
}),
Plot.text(data.slice(data.length - 1, data.length), {
x: "year",
y: "SSP3-7.0",
text: ["SSP3-7.0"],
fill: "green",
dy: -8,
dx: -8
}),
Plot.line(data, {
x: "year",
y: "SSP5-8.5",
stroke: "brown",
strokeWidth,
strokeOpacity
}),
Plot.text(data.slice(data.length - 1, data.length), {
x: "year",
y: "SSP5-8.5",
text: ["SSP5-8.5"],
fill: "brown",
dy: -8,
dx: -8
})
]
});
}
data = FileAttachment("data (1).csv").csv({ typed: true })
viewof table = Inputs.table(data)
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.
