Senior Art Editor at Nature News in London.
Public
Edited
Sep 6, 2023
data1 = {
const data = await FileAttachment("Graphic 1 - Sheet1.csv").csv({
typed: true
});
return data.map((d) => {
let date = new Date(d["Year"], 0, 1);
return { date, percent: d["Percentage"] };
});
}
graphic_1 = Plot.plot({
y: { grid: true, domain: [0, 30] },
marks: [
Plot.ruleY([0]),
Plot.lineY(data1, { x: "date", y: "percent", stroke: "orange" })
]
})
graphic_1b = Plot.plot({
marginRight: 200,
y: { grid: true, domain: [0, 70] },
color: { legend: true },
marks: [
Plot.ruleY([0]),
Plot.lineY(data1b, {
x: "year",
y: "percent",
z: "country",
stroke: "country"
}),
Plot.text(
data1b.filter((d) => d.yearInt === 2019),
{
x: "year",
y: "percent",
z: "country",
text: "country",
textAnchor: "start",
dx: 4
}
)
]
})
graphic_2 = Plot.plot({
marginRight: 200,
y: { grid: true },
color: { legend: true },
marks: [
Plot.ruleY([0]),
Plot.lineY(data2, {
x: "year",
y: "percent",
z: "country",
stroke: "country"
}),
Plot.text(
data2.filter((d) => d.yearInt === 2021),
{
x: "year",
y: "percent",
z: "country",
text: "country",
textAnchor: "start",
dx: 4
}
)
]
})
data4 = {
const data = await FileAttachment(
"access-to-clean-fuels-and-technologies-for-cooking.csv"
).csv({
typed: true
});
const countriesToShow = ["Togo", "Sri Lanka", "Malawi", "India", "World"];
return data
.filter((d) => d["Year"] >= 2000)
.map((d) => ({
year: new Date(d["Year"], 0, 1),
yearInt: d["Year"],
percent:
d[
"Indicator:Proportion of population with primary reliance on clean fuels and technologies for cooking (%) - Residence Area Type:Total"
],
country: d["Entity"]
}))
.filter((d) => countriesToShow.includes(d.country));
}
graphic_4 = Plot.plot({
marginRight: 200,
y: { grid: true, domain: [0, 70] },
color: { legend: true },
marks: [
Plot.ruleY([0]),
Plot.lineY(data4, {
x: "year",
y: "percent",
z: "country",
stroke: "country"
}),
Plot.text(
data4.filter((d) => d.yearInt === 2020),
{
x: "year",
y: "percent",
z: "country",
text: "country",
textAnchor: "start",
dx: 4
}
)
]
})
data5 = {
const data = await FileAttachment("account-at-financial-institution.csv").csv(
{
typed: true
}
);
const countriesToShow = [
"India",
"World",
"Sub-Saharan Africa (WB)",
"High-income countries",
"China",
"Latin America and Caribbean (WB)"
];
return data
.map((d) => ({
year: new Date(d["Year"], 0, 1),
yearInt: d["Year"],
percent:
d[
"Account ownership at a financial institution or with a mobile-money-service provider (% of population ages 15+)"
],
country: d["Entity"]
}))
.filter((d) => countriesToShow.includes(d.country));
}
graphic_5 = Plot.plot({
marginRight: 200,
y: { grid: true, domain: [0, 100] },
color: { legend: true },
marks: [
Plot.ruleY([0]),
Plot.lineY(data5, {
x: "year",
y: "percent",
z: "country",
stroke: "country"
}),
Plot.text(
data5.filter((d) => d.yearInt === 2021),
{
x: "year",
y: "percent",
z: "country",
text: "country",
textAnchor: "start",
dx: 4
}
)
]
})
test = FileAttachment("Graphic-7 - Sheet1.csv").csv()
test.columns
data7 = {
const data = await FileAttachment("Graphic-7 - Sheet1.csv").csv({
typed: true
});
return data.reduce((previous, current) => {
const year = new Date(current["Year"], 0, 1);
const yearInt = current["Year"];
const footprint = current["Material footprint (billion tonnes)"];
const percapita = current["Per capita"];
let footprintObject = {
year,
yearInt,
value: footprint,
type: "footprint"
};
let percapitaObject = {
year,
yearInt,
value: percapita,
type: "percapita"
};
return [footprintObject, percapitaObject, ...previous];
}, []);
}
graphic_7 = Plot.plot({
marginRight: 200,
y: { grid: true, domain: [0, 100] },
marks: [
Plot.ruleY([0]),
Plot.lineY(data7, { x: "year", y: "value", z: "type", stroke: "type" }),
Plot.text(
data7.filter((d) => d.yearInt === 2019),
{
x: "year",
y: "value",
z: "type",
text: "type",
textAnchor: "start",
dx: 4
}
)
]
})
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.
