Inputs.table_County code to country icon

Community Help
1

Is there any way to represent country code (USA, ITA, CAN, etc.) to county’s flag as icon or emoji?

Example of my current table version is here

2

A search for flags on Observable yielded this:

3

Yes, I saw this, but waht is the way to embed it into the table view?

4

Here’s a notebook that can help:

To use in your notebook:

import {isoAlpha3toEmoji} from "@mbostock/iso-3166-alpha"

Screen Shot 2021-10-18 at 5.21.56 PM
Screen Shot 2021-10-18 at 5.21.56 PM2372×540 194 KB 

Inputs.table(perf, {
  format: {
    total_segment_score: sparkbar(d3.max(perf, d => d.total_segment_score)),
    total_element_score: sparkbar(d3.max(perf, d => d.total_element_score)),
    total_component_score: sparkbar(d3.max(perf, d => d.total_component_score)),
    nation: isoAlpha3toEmoji
  }
})
3 Likes
5

It’s just convert from Alpha-3 to Alpha-2, but didn’t add Emoji itself (((
Can you, pls, change and save code just inside my notebook: Inputs.table_County code to country icon / Dmitry S / Observable
I’ve already shared it with you )

6

Hi Amidsi, I noticed that on your notebook you do indeed display the emoji flags, shall I mark the above response from mbostock as the solution?

7

Hi Duane!
Not now, thank you, coz I still have issue and don’t have an idea how to fix it, now it’s looking like that:

image
image1375×366 17.9 KB

Then I’ll update status. Think it’ll be also important to know for society

8

In the notebook that you shared above the icons are showing up correctly: Inputs.table_County code to country icon / Dmitry S / Observable

image
image1304×568 70.5 KB

Maybe you have unpublished changes that are somehow breaking the icons?

9

I’d sent you screenshot how it of how it is looking from my side. Though all changes are published

10

Hmm, the code in your notebook looks correct, and the emoji icons are appearing so I’m at a bit of a loss as to what to suggest, unfortunately. The only thing I can think of is to confirm the following:

  1. The notebook you’re referring to is Inputs.table_County code to country icon / Dmitry S / Observable
  2. You have no unpublished changes (the button in the header doesn’t say “Republish”)
  3. You can see emoji icons on other notebooks (e.g. ISO 3166 Alpha-3 to Alpha-2 / Mike Bostock / Observable)

Thanks!

11
  1. Yes
  2. Yes
    image
    image1473×327 21.9 KB
  3. No
    image
    image610×723 42.2 KB
1 Like
12

Ah, interesting. The fact that you can’t see the flag emoji on other notebooks made me look into how reliable this approach is, and indeed it is the case that this technique isn’t 100% effective and can fail due to variations in operating system, browser, etc. So if you need the flags to render for all contexts you’ll need to use a different approach (likely using images). Take a look at this stack overflow link for more info: html - Flag Emojis not rendering - Stack Overflow

2 Likes
13

Matt Dzugan ran into the same problem in Making Maps out of Emojis / Matt Dzugan / Observable (related discussion).

You could embed the icons as SVGs from yammadev/flag-icons, e.g.:

flag = code => html`<img src="https://raw.githubusercontent.com/yammadev/flag-icons/v3.0.0/svg/${code}.svg">`

flag("US")

3 Likes