Interested in dataviz and looking forward to a world where human brains are freed from being occupied with boring, repetitive, manual, click-copy-paste tasks.
viewof statfor_colors = Inputs.form(
{
asia_pacific: Inputs.color({
label: "Asia/Pacific:",
value: d3.rgb(209, 209, 209).formatHex()
}),
ecac: Inputs.color({
label: "Europe (ECAC):",
value: "#28b5c8"
}),
mid_atlantic: Inputs.color({
label: "Mid-Atlantic:",
value: d3.rgb(187, 77, 161).formatHex()
}),
middle_east: Inputs.color({
label: "Middle-East:",
value: d3.rgb(160, 209, 114).formatHex()
}),
north_africa: Inputs.color({
label: "North-Africa:",
value: d3.rgb(249, 154, 89).formatHex()
}),
north_atlantic: Inputs.color({
label: "North-Atlantic:",
value: d3.rgb(233, 169, 159).formatHex()
}),
other_europe: Inputs.color({
label: "Other Europe:",
value: d3.rgb(48, 134, 170).formatHex()
}),
south_atlantic: Inputs.color({
label: "South-Atlantic:",
value: d3.rgb(216, 44, 91).formatHex()
}),
southern_africa: Inputs.color({
label: "Southern Africa:",
value: d3.rgb(254, 197, 88).formatHex()
})
},
{
label: "Statfor Regions' colors:",
template: (inputs) => htl.html`
<div style="display: flex; gap: 0.7em; flex-wrap: wrap; min-height: 25.5px">
${Object.values(inputs)}
</div>`
}
)
Object.keys(statfor_colors)
get_statfor_region = function (d) {
// make Antartica white
if (d.id == "ATA") {
return "antarctica";
} else if (asia_pacific.includes(d.id)) {
return "asia_pacific";
} else if (ecac.includes(d.id)) {
return "ecac";
} else if (middle_east.includes(d.id)) {
return "middle_east";
} else if (mid_atlantic.includes(d.id)) {
return "mid_atlantic";
} else if (north_atlantic.includes(d.id)) {
return "north_atlantic";
} else if (other_europe.includes(d.id)) {
return "other_europe";
} else if (north_africa.includes(d.id)) {
return "north_africa";
} else if (south_atlantic.includes(d.id)) {
return "south_atlantic";
} else if (southern_africa.includes(d.id)) {
return "southern_africa";
}
return "unknown";
}
countries = {
const c = topojson.feature(world, world.objects.countries);
let fs = c.features;
// assign STATFOR regions to countries
fs.forEach((d) => {
// make Antartica white
if (d.id == "ATA") {
d.properties.region = "antarctica";
} else if (asia_pacific.includes(d.id)) {
d.properties.region = "asia_pacific";
} else if (ecac.includes(d.id)) {
d.properties.region = "ecac";
} else if (middle_east.includes(d.id)) {
d.properties.region = "middle_east";
} else if (mid_atlantic.includes(d.id)) {
d.properties.region = "mid_atlantic";
} else if (north_atlantic.includes(d.id)) {
d.properties.region = "north_atlantic";
} else if (other_europe.includes(d.id)) {
d.properties.region = "other_europe";
} else if (north_africa.includes(d.id)) {
d.properties.region = "north_africa";
} else if (south_atlantic.includes(d.id)) {
d.properties.region = "south_atlantic";
} else if (southern_africa.includes(d.id)) {
d.properties.region = "southern_africa";
}
});
return c;
}
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.
