Published
Edited
Oct 6, 2022
// I would like to do this in Plotly to make it look nicer
Treemap(importData, {
path: (d) => d.ptTitle + "/" + d.cmdDescE, // e.g. flare/animate/Easing
label: (d) => d.cmdDescE,
group: (d) => d.cmdDescE, // for color; e.g. animate
value: (d) => d?.TradeValue, // area of each rect
title: (d, n) => [n.id, n.value.toLocaleString()].join("\n"), // hover text
width,
height: 500
})
// I would like to do this in Plotly to make it look nicer
Treemap(exportData, {
path: (d) => d.ptTitle + "/" + d.cmdDescE, // e.g. flare/animate/Easing
label: (d) => d.cmdDescE,
group: (d) => d.cmdDescE, // for color; e.g. animate
value: (d) => d?.TradeValue, // area of each rect
title: (d, n) => [n.id, n.value.toLocaleString()].join("\n"),
width,
height: 500
})
// fetches list of countries available in ComTrade this is used in the country select above
countryList = (
await fetch(
"https://raw.githubusercontent.com/cameronkruse/food-security/main/pages/assets/reporting_areas.json"
)
).json()
year = "2021"
foodCodeString = "01%2C02%2C03%2C04%2C05%2C07%2C08%2C09%2C10%2C11%2C12%2C13%2C15%2C16%2C17%2C19%2C20"
multiyearString = "2021%2C2020%2C2019%2C2018%2C2017"
// ToDo add country_code function here
// this returns the id of the text value chosen for countries
countryCode = Object.values(countryList.results)
.filter((item) => item.text == countrySelect)
.map((item) => item.id)
rawImportData = fetch(
`https://comtrade.un.org/api/get?max=10000&type=C&freq=A&px=HS&ps=${year}&r=${countryCode}&p=all&rg=1&cc=${foodCodeString}`
).then((response) => response.json())
importData = rawImportData.dataset.filter((item) => {
return item.ptTitle !== "World";
})
rawExportData = fetch(
`https://comtrade.un.org/api/get?max=10000&type=C&freq=A&px=HS&ps=${year}&r=${countryCode}&p=all&rg=2&cc=${foodCodeString}`
).then((response) => response.json())
exportData = rawExportData.dataset.filter((item) => {
return item.ptTitle !== "World";
})
yoyImportData = fetch(
`https://comtrade.un.org/api/get?max=10000&type=C&freq=A&px=HS&ps=${multiyearString}&r=${countryCode}&p=0&rg=1&cc=${foodCodeString}`
).then((response) => response.json())
yoyExportData = fetch(
`https://comtrade.un.org/api/get?max=10000&type=C&freq=A&px=HS&ps=${multiyearString}&r=${countryCode}&p=0&rg=2&cc=${foodCodeString}`
).then((response) => response.json())
joinedImpExp = Promise.all([importData, exportData]).then((values) => {
let data = values[0].concat(values[1]);
return data;
})
// https://observablehq.com/@justlemonsong/treemap-with-plotly
{
var data = [
{
type: "treemap",
labels: combinedArray,
parents: parentFilled,
values: valuefilled,
// textinfo: "label+percent parent",
domain: { x: [0, 1] },
// outsidetextfont: { size: 20, color: "#377eb8" },
marker: { line: { width: 0.1 } },
pathbar: { visible: true }
}
];
var layout = {
annotations: [
{
showarrow: false,
text: "branchvalues: <b>remainder</b>",
x: 0.25,
xanchor: "center",
y: 1.1,
yanchor: "bottom"
}
]
};
const div = DOM.element("div");
Plotly.newPlot(div, data);
return div;
}
// I would like to do this in Plotly to make it look nicer
// Treemap(exportData.dataset, {
// path: (d) => d.ptTitle + "/" + d.cmdDescE, // e.g. flare/animate/Easing
// label: (d) => d.cmdDescE,
// group: (d) => d.cmdDescE, // for color; e.g. animate
// value: (d) => d?.TradeValue, // area of each rect
// title: (d, n) => [n.id, n.value.toLocaleString()].join("\n"),
// width,
// height: 500
// })
labeltest = importData.map((item) => {
return item.cmdDescE;
})
uniqueValues = [...new Set(parenttest.map((item) => item))]
combinedArray = labeltest.concat(uniqueValues)
parenttest = importData.map((item) => {
return item.ptTitle;
})
parentFilled = parenttest.concat(Array(129).fill(""))
valuestest = importData.map((item) => {
return item.TradeValue;
})
valuefilled = valuestest.concat(Array(129).fill(1))
viewof table = Inputs.table([parentFilled, combinedArray, valuefilled])
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.
