Public
Edited
May 30, 2023
Importers
cell_1_1 = {
const grouped = d3.rollups(
funderLimitData(data, countries),
(v) => {
return {
year: new Date(
new Date(0).setFullYear(v[0].trans_day.getYear() + 1900)
),
trans_value: d3.sum(v, (d) => d.trans_value),
funder_country: v[0].funder_country,
value: d3.sum(v, (d) => d.trans_value)
};
},
(d) => d.trans_day.getYear() + 1900 + "_" + d.funder_country
);
const sorted = grouped.sort((a, b) => a[1].year - b[1].year);
return Plot.plot({
width,
color: {
legend: true,
domain: countries.map((c) => getCountryName(c))
},
x: {
nice: true
},
y: {
nice: true,
type: "log",
grid: true
},
marks: [
Plot.line(sorted, {
x: (d) => d[1].year,
y: (d) => d[1].value,
stroke: (d) => getCountryName(d[1].funder_country)
}),
Plot.dot(sorted, {
x: (d) => d[1].year,
y: (d) => d[1].value,
fill: (d) => getCountryName(d[1].funder_country),
title: (d) =>
`${getCountryName(d[1].funder_country)} - ${
d[1].year.getYear() + 1900
}
Total Foreign Investment: ${formatNumbersNice(d[1].trans_value)}`
})
]
});
}
cell_1_4 = {
const grouped = d3.rollups(
data,
(v) => {
return {
year: new Date(
new Date(0).setFullYear(v[0].trans_day.getYear() + 1900)
),
trans_value: d3.sum(v, (d) => d.trans_value),
funder_country: v[0].funder_country,
value: d3.sum(v, (d) => d.trans_value)
};
},
(d) => d.trans_day.getYear() + 1900 + "_" + d.funder_country
);
const sorted = grouped.sort((a, b) => a[1].year - b[1].year);
return Plot.plot({
width,
color: {
// legend: true,
domain: iso.map((c) => c.name)
},
x: {
nice: true
},
y: {
nice: true,
type: "log",
grid: true
},
marks: [
Plot.barY(
sorted,
Plot.binX(
{ y: "sum" },
{
x: (d) => d[1].year,
y: (d) => d[1].value
// fill: "red"
}
)
)
]
});
}
// cell_5_3 = {
// const grouped = d3.rollups(
// funderLimitData(data, countries),
// (v) => {
// return {
// year: new Date(
// new Date(0).setFullYear(v[0].trans_day.getYear() + 1900)
// ),
// gdp:
// gdp_adjusted[funder_country.name][v[0].trans_day.getYear() + 1900] *
// population[funder_country.name][v[0].trans_day.getYear() + 1900],
// trans_value: d3.sum(v, (d) => d.trans_value),
// funder_country: v[0].funder_country,
// value:
// d3.sum(v, (d) => d.trans_value) /
// (gdp_adjusted[funder_country.name][v[0].trans_day.getYear() + 1900] *
// population[funder_country.name][v[0].trans_day.getYear() + 1900])
// };
// },
// (d) => d.trans_day.getYear() + 1900 + "_" + d.funder_country
// );
// const sorted = grouped.sort((a, b) => a[1].year - b[1].year);
// return Plot.plot({
// width,
// color: {
// legend: true,
// domain: countries.map((c) => getCountryName(c))
// },
// x: {
// type: "utc"
// },
// y: {
// grid: true,
// tickFormat: "p",
// nice: true
// },
// marks: [
// Plot.line(sorted, {
// x: (d) => d[1].year,
// y: (d) => d[1].value,
// stroke: (d) => getCountryName(d[1].funder_country)
// }),
// Plot.dot(sorted, {
// x: (d) => d[1].year,
// y: (d) => d[1].value,
// fill: (d) => getCountryName(d[1].funder_country),
// // fill: "black",
// title: (d) =>
// `${getCountryName(d[1].funder_country)}
// GDP: ${formatNumbersNice(d[1].gdp)}$
// Total Foreign Investment: ${formatNumbersNice(d[1].trans_value)}`
// })
// ]
// });
// }
// cell_5_4 = {
// const summed_data = d3.rollup(
// timeLimitData(funderLimitData(data, funder_country.code), [
// year.toString() + "-01-01",
// // "-",
// year.toString() + "-12-31"
// // "-"
// ]),
// (v) => {
// const gdp =
// gdp_adjusted[getCountryName(v[0].trans_country)][year] *
// population[getCountryName(v[0].trans_country)][year];
// const sum = d3.sum(v, (d) => d.trans_value);
// return {
// name: getCountryName(v[0].trans_country),
// gdp,
// trans_value: sum,
// value: sum / gdp
// };
// },
// (d) => d.trans_country
// );
// const height = 600;
// const projection = d3
// .geoEquirectangular()
// // .fitWidth(width, countries_geo)
// .fitSize([width, height], countries_geo);
// // .fitHeight(height)
// return Plot.plot({
// width,
// projection,
// color: {
// legend: true,
// type: "log",
// // nice: true,
// tickFormat: "p"
// },
// x: {
// // nice: true
// },
// marks: [
// Plot.geo(countries_geo, {
// // fill: (d) => 0,
// fill: (d) =>
// summed_data.get(d.properties.key)
// ? summed_data.get(d.properties.key).value
// : undefined,
// // strokeWidth: 2
// title: (d) =>
// summed_data.get(d.properties.key)
// ? `${getCountryName(d.properties.key)}
// FI of GPD: ${(
// Math.round(summed_data.get(d.properties.key).value * 100 * 10000) /
// 10000
// ).toFixed(4)}%
// GDP: ${formatNumbersNice(summed_data.get(d.properties.key).gdp)}
// FI: ${formatNumbersNice(summed_data.get(d.properties.key).trans_value)}`
// : undefined
// }),
// Plot.geo(countries_geo, {
// strokeWidth: 1
// })
// ]
// });
// }
// cell_5_5 = {
// const summed_data = d3.rollup(
// timeLimitData(data, [
// year.toString() + "-01-01",
// // "-",
// year.toString() + "-12-31"
// // "-"
// ]),
// (v) => {
// if (!(getCountryName(v[0].trans_country) in gdp_adjusted))
// return undefined;
// const gdp =
// gdp_adjusted[getCountryName(v[0].trans_country)][year] *
// population[getCountryName(v[0].trans_country)][year];
// const sum = d3.sum(v, (d) => d.trans_value);
// return {
// name: getCountryName(v[0].trans_country),
// gdp,
// trans_value: sum,
// value: sum / gdp
// };
// },
// (d) => d.trans_country
// );
// const height = 600;
// const projection = d3
// .geoEquirectangular()
// // .fitWidth(width, countries_geo)
// .fitSize([width, height], countries_geo);
// // .fitHeight(height)
// return Plot.plot({
// width,
// projection,
// color: {
// legend: true,
// type: "log",
// // nice: true,
// tickFormat: "p"
// },
// x: {
// // nice: true
// },
// marks: [
// Plot.geo(countries_geo, {
// // fill: (d) => 0,
// fill: (d) =>
// summed_data.get(d.properties.key)
// ? summed_data.get(d.properties.key).value
// : undefined,
// // strokeWidth: 2
// title: (d) =>
// summed_data.get(d.properties.key)
// ? `${getCountryName(d.properties.key)}
// FI of GPD: ${(
// Math.round(summed_data.get(d.properties.key).value * 100 * 10000) /
// 10000
// ).toFixed(4)}%
// GDP: ${formatNumbersNice(summed_data.get(d.properties.key).gdp)}
// FI: ${formatNumbersNice(summed_data.get(d.properties.key).trans_value)}`
// : undefined
// }),
// Plot.geo(countries_geo, {
// strokeWidth: 1
// })
// ]
// });
// }
{
const list = d3.flatRollup(
data,
(v) => {
return {
trans_value: d3.sum(v, (d) => d.trans_value),
funder_country: v[0].funder_country,
trans_day: new Date(
`${v[0].trans_day.getYear() + 1900}.01.01`
).getTime(),
trans_country: v[0].trans_country,
trans_sector_group: v[0].trans_sector_group
};
},
(g) =>
g.funder_country +
(g.trans_day.getYear() + 1900) +
g.trans_country +
g.trans_sector_group
);
return Array.from(list, ([_, value]) => value);
}
// sectors = {
// const url = await FileAttachment("SectorCategory.csv").url();
// return d3.csv(url, d3.autoType());
// }
import { Plot } from "@mkfreeman/plot-tooltip"
topojson = require("topojson")
import { image } from "@fil/hello-html-to-image"
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.
