Em🌎ji
maps

πŸ‘‹

Hi, I'm Erik / @nerik

πŸ‡«πŸ‡·πŸ‡ͺπŸ‡ΈπŸ‘΄πŸ»
πŸ“šπŸŽΈβ›°οΈπŸ€Ήβ€β™‚οΈ

πŸ‘¨β€πŸ’»πŸ—Ί

Command-line Geography

gj2ascii
(GeoJSON to ASCII)

  • Written in Python by Kevin Wurster
  • Render spatial vectors as ASCII and/or emoji on the command line with Python.
  • the repo

πŸ€”πŸ’­

  • A pannable and zoomable map made of emojis
  • As a πŸƒ plugin
  • Renders GeoJSON polygons into a string of characters

Em🌎ji
maps

aka

Thematic Mapping with Emojis

A copy-pastable map

⌨️

Editing maps with just a keyboard

πŸ˜’

I've already seen that somewhere...

Emojimap.net

OSM POIs through the Overpass API

An emoji choropleth?

A first obvious candidate:
landcover/landuse

(this Île de Ré, along the french Atlantic Coast)

The End of Legends ?

Inspiration:
  • gj2ascii
  • some Twitter bots:

@emojiatlas

@Emojiforest

Thematic mapping

The IUCN red list of endangered species

Mapping America's HDI (Human Development Index)
Measure of America

Most popular NFL team by state

πŸ€“

Interlude:
some emoji fun facts

Where do Emojis come from?

Why do we have
🌯 :burrito:
and
πŸ₯ :fish_cake:...

...but not
:tortilla:
or
:choucroute: ?

😱

Who are the people
in charge of this ?

The

Unicode

Consortium

Emoji

Subcomittee

🏺

:amphora:

🏩

:love_hotel:

🀠

:cowboy:

?

"Shocked Face With Exploding Head"
(Unicode 10.0)

πŸ’©

:poop:

Anatomy of an Emoji

  • Unicode name
  • Unicode codepoint(s)
  • Shortcode
  • Rendered glyph
    (usually encoded in UTF-8)

  • Hatching chick
  • U+1F425 / 128036
  • :hatching_chick:
  • πŸ₯

Recommanded reading:
You, Me And The Emoji: Character Sets, Encoding And Emoji

But back to maps.

Ethnic groups and median age in NYC (2010 census data)

Bivariate choropleth

A walkthrough by Joshua Stevens

Emoji bivariate!

Emojis are using the
Fitzpatrick scale

Emojis can be a combination of multiple code points

πŸ‘΅ + 🏿 = πŸ‘΅πŸΏ

(U+1F475 U+1F3FF)

The Zero-Width Joiner (ZWJ)

A special, invisible character that allows us to combine multiple emojis into one

(Unicode: U+200D)

πŸ‘¨ + + β€πŸš€ = πŸ‘¨β€πŸš€

(U+1F468 U+200D U+1F680)

πŸ‘© + 🏿 + + β€πŸš€ = πŸ‘©πŸΏβ€πŸš€

(U+1F469 U+1F3FF U+200D U+1F680)

A quick note on platform support

  • iOs, macOs: πŸ‘
  • Windows: πŸ‘/πŸ–•
  • Android (except very recent): πŸ’€

Symbolizing data using human faces:

Chernoff faces (1973)

The idea:
Use facial features
(mouth expression, nose size, eyebrows orientation)
to encode multiple variables
(unemployment, divorce rate, women in work force)

Leveraging human brains' extremely good ability at "decoding" a human face

We're much better at understanding a face at a glance than a column of numbers

πŸ˜“

Let's just say it's
a controversial idea

critique #1: facial expressions are more than the sum of their parts

critique #2: disconnection between the data visualized and the emotional content

"if you’re using faces, you’re using emotions, so you’d better be prepared to make emotional statements about your data."

πŸ€–

And now for some technical details

PoC:

  1. vector data (GeoJSON)
  2. point-in-polygon (turf.js)
  3. arrange in a grid
  4. render to a string
  5. ?
  6. Profit
var emoji = L.emoji(geoJSON, {
  emoji: 'πŸ‘',
  size: 30
}).addTo(map);
          
var emoji = L.emoji(geoJSON, {
  emoji: {
    property: 'countryName',
    values: {
      'United Kingdom': 'β˜‚οΈ'
    },
    defaultValue: 'β˜€οΈοΈ',
    emptyValue: '🐟'
  }
}).addTo(map);
var emoji = L.emoji(geoJSON, {
  emoji: ':sparkles:'
}).addTo(map);
var emoji = L.emoji(geoJSON, {
  emoji: {
    property: 'hdi_2013',
    classes: {
      'breaks': [    4.3, 4.6, 4.9, 5.4    ],
      'emojis': ['😡', 'πŸ™', '😐', 'πŸ™‚', 'πŸ˜ƒ']
    }
  }
}).addTo(map);
var emoji = L.emoji(geoJSON, {
  emoji: function (feature) {
    if (!feature) {
      return L.Emoji.EMPTY;
    }
    return L.Emoji.getShortcode(':flag_'
      + feature.properties.iso2.toLowerCase() + ':');
  }
}).addTo(map);

UTFGrid ?

Plans for the Leaflet plugin

  • Get out of PoC
  • UTFGrid support
  • Points and lines
  • Emoticons support ;-)
  • Raster layers !

Plans for conquering the 🌎

  • A live weather map β˜οΈβ›ˆβ›…οΈπŸŒ€β˜€οΈ
  • Emoji Maps sandbox (geojson.io-like)
  • Emoji dataviz ?
  • More maps: The Emoji Atlas !

VoilΓ  πŸ‘
Merci πŸ™

nerik.github.io/Leaflet.Emoji
@nerik πŸ€™

‍