Public
Edited
Oct 10, 2023
Insert cell
Insert cell
DP_LIVE_10102023103253953.csv
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
data = {
const data = await FileAttachment("DP_LIVE_10102023103253953.csv").csv({
typed: true
});

return data
.filter((d) => d["MEASURE"] === "PC_GDP")
.filter((d) => d["TIME"] < 2022 && d["TIME"] > 2010)
.filter((d) => d["LOCATION"] !== "OECD")
.filter((d) => d["LOCATION"] !== "EU27_2020");
}
Insert cell
[...new Set(data.map((d) => d["LOCATION"]))].sort()
Insert cell
// Countries to show: Argentina, Brazil, Mexico, Israel, South Korea and maybe the US
// Mexico MEX only data up to 2017
// No Brazil BRA

countriesToShow = ["ARG", "ISR", "KOR", "USA"]
Insert cell
data.filter((d) => countriesToShow.includes(d["LOCATION"]))
Insert cell
chart = Plot.plot({
y: { grid: true, domain: [0, 6] },
marginRight: 50,
width,
marks: [
Plot.ruleY([0]),
Plot.lineY(data, {
x: "TIME",
y: "Value",
z: "LOCATION",
stroke: "#ddd",
filter: (d) => !countriesToShow.includes(d["LOCATION"])
}),
Plot.lineY(data, {
x: "TIME",
y: "Value",
z: "LOCATION",
stroke: "LOCATION",
filter: (d) => countriesToShow.includes(d["LOCATION"])
}),
Plot.text(
data.filter((d) => d["TIME"] === 2021),
{
x: "TIME",
dx: 15,
y: "Value",
z: "LOCATION",
text: "LOCATION",
filter: (d) => countriesToShow.includes(d["LOCATION"])
}
)
]
})
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