Published
Edited
Apr 14, 2021
2 forks
5 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
// regional indicator symbol letters
risl = "🇦 🇧 🇨 🇩 🇪 🇫 🇬 🇭 🇮 🇯 🇰 🇱 🇲 🇳 🇴 🇵 🇶 🇷 🇸 🇹 🇺 🇻 🇼 🇽 🇾 🇿".split(" ")
Insert cell
import {Table, Text} from "@observablehq/inputs"
Insert cell
tableData1 = {
const data = [];
for (const rowLetter of risl) {
const row = { "‧": rowLetter };
for (const columnLetter of risl) {
row[columnLetter] = rowLetter + columnLetter;
}
data.push(row);
}
return data;
}
Insert cell
Insert cell
Insert cell
flags = "🇦🇨 🇦🇩 🇦🇪 🇦🇫 🇦🇬 🇦🇮 🇦🇱 🇦🇲 🇦🇴 🇦🇶 🇦🇷 🇦🇸 🇦🇹 🇦🇺 🇦🇼 🇦🇽 🇦🇿 🇧🇦 🇧🇧 🇧🇩 🇧🇪 🇧🇫 🇧🇬 🇧🇭 🇧🇮 🇧🇯 🇧🇱 🇧🇲 🇧🇳 🇧🇴 🇧🇶 🇧🇷 🇧🇸 🇧🇹 🇧🇻 🇧🇼 🇧🇾 🇧🇿 🇨🇦 🇨🇨 🇨🇩 🇨🇫 🇨🇬 🇨🇭 🇨🇮 🇨🇰 🇨🇱 🇨🇲 🇨🇳 🇨🇴 🇨🇵 🇨🇷 🇨🇺 🇨🇻 🇨🇼 🇨🇽 🇨🇾 🇨🇿 🇩🇪 🇩🇬 🇩🇯 🇩🇰 🇩🇲 🇩🇴 🇩🇿 🇪🇦 🇪🇨 🇪🇪 🇪🇬 🇪🇭 🇪🇷 🇪🇸 🇪🇹 🇪🇺 🇫🇮 🇫🇯 🇫🇰 🇫🇲 🇫🇴 🇫🇷 🇬🇦 🇬🇧 🇬🇩 🇬🇪 🇬🇫 🇬🇬 🇬🇭 🇬🇮 🇬🇱 🇬🇲 🇬🇳 🇬🇵 🇬🇶 🇬🇷 🇬🇸 🇬🇹 🇬🇺 🇬🇼 🇬🇾 🇭🇰 🇭🇲 🇭🇳 ��🇷 🇭🇹 🇭🇺 🇮🇨 🇮🇩 🇮🇪 🇮🇱 🇮🇲 🇮🇳 🇮🇴 🇮🇶 🇮🇷 🇮🇸 🇮🇹 🇯🇪 🇯🇲 🇯🇴 🇯🇵 🇰🇪 🇰🇬 🇰🇭 🇰🇮 🇰🇲 🇰🇳 🇰🇵 🇰🇷 🇰🇼 🇰🇾 🇰🇿 🇱🇦 🇱🇧 🇱🇨 🇱🇮 🇱🇰 🇱🇷 🇱🇸 🇱🇹 🇱🇺 🇱🇻 🇱🇾 🇲🇦 🇲🇨 🇲🇩 🇲🇪 🇲🇫 🇲🇬 🇲🇭 🇲🇰 🇲🇱 🇲🇲 🇲🇳 🇲🇴 🇲🇵 🇲🇶 🇲🇷 🇲🇸 🇲🇹 🇲🇺 🇲🇻 🇲🇼 🇲🇽 🇲🇾 🇲🇿 🇳🇦 🇳🇨 🇳🇪 🇳🇫 🇳🇬 🇳🇮 🇳🇱 🇳🇴 🇳🇵 🇳🇷 🇳🇺 🇳🇿 🇴🇲 🇵🇦 🇵🇪 🇵🇫 🇵🇬 🇵🇭 🇵🇰 🇵🇱 🇵🇲 🇵🇳 🇵🇷 🇵🇸 🇵🇹 🇵🇼 🇵🇾 🇶🇦 🇷🇪 🇷🇴 🇷🇸 🇷🇺 🇷🇼 🇸🇦 🇸🇧 🇸🇨 🇸🇩 🇸🇪 🇸🇬 🇸�� 🇸🇮 🇸🇯 🇸🇰 🇸🇱 🇸🇲 🇸🇳 🇸🇴 🇸🇷 🇸🇸 🇸🇹 🇸🇻 🇸🇽 🇸🇾 🇸🇿 🇹🇦 🇹🇨 🇹🇩 🇹🇫 🇹🇬 🇹🇭 🇹🇯 🇹🇰 🇹🇱 🇹🇲 🇹🇳 🇹🇴 🇹🇷 🇹🇹 🇹🇻 🇹🇼 🇹🇿 🇺🇦 🇺🇬 🇺🇲 🇺🇳 🇺🇸 🇺🇾 🇺🇿 🇻🇦 🇻🇨 🇻🇪 🇻🇬 🇻🇮 🇻🇳 🇻🇺 🇼🇫 🇼🇸 🇽🇰 🇾🇪 🇾🇹 🇿🇦 🇿🇲 🇿🇼".split(' ')
Insert cell
tableData2 = {
const data = [];
for (const rowLetter of risl) {
const row = { "‧": rowLetter };
for (const columnLetter of risl) {
const combo = rowLetter + columnLetter;
row[columnLetter] = flags.includes(combo) ? combo : "";
}
data.push(row);
}
return data;
}
Insert cell
// Thanks to Jacob Rus fo the style suggestions
function flagTable(data) {
var t = Table(data, { rows: 40, width: 740 });
t.querySelectorAll('td, th').forEach(cell => {
cell.style.fontSize = '1.4em';
cell.style.padding = '0 0';
cell.style.border = 'none';
});
return t;
}
Insert cell
flagTable(tableData2)
Insert cell
Insert cell
tableData3 = {
const data = [];
for (const rowLetter of risl) {
const row = { "‧": rowLetter };
for (const columnLetter of risl) {
const combo = rowLetter + columnLetter;
const obmoc = columnLetter + rowLetter;
row[columnLetter] =
flags.includes(combo) && flags.includes(obmoc) ? combo : "";
}
data.push(row);
}
return data;
}
Insert cell
flagTable(tableData3)
Insert cell
Insert cell
pairs = {
const data = new Map();
for (const flag of flags) {
const reversed = flag[2] + flag[3] + flag[0] + flag[1];
data.set(flag, flags.includes(reversed) ? reversed : "");
}
return data
}
Insert cell
viewof flagSearch2 = Text({placeholder: "paste a flag emoji here!", value: "🇦🇶"})
Insert cell
{
const result = pairs.get(flagSearch2);
switch(result){
case undefined:
return md`<span style="font-size:x-large">Please paste a flag emoji into the text field<span>`;
case '':
return md`<span style="font-size:x-large">${flagSearch2} cannot be reversed 😞<br><br> ${flagSearch2} ⮀ ${flagSearch2[2]+flagSearch2[3]+flagSearch2[0]+flagSearch2[1]}</span>`;
default:
return md`<span style="font-size:x-large">${flagSearch2} can be reversed! 😊<br><br> ${flagSearch2} ⮀ ${result}</span>`
}
}
Insert cell
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