Emoji support in PNG export

[corradio]

Hello, What would need to happen in order to have emoji support in PNG exports? Thanks, Olivier

[jonmmease]

Hi, as you noted over in https://github.com/RazrFalcon/resvg/issues/485#issuecomment-1826847676, this is dependent on emoji support in resvg.

[jonmmease]

As a workaround for some use cases, you can use a site like https://emoji.aranja.com/ to download png images of individual emoji, then host them somewhere (like a github repo), and then display them using the vega/altair image mark like https://altair-viz.github.io/user_guide/marks/image.html.

[corradio]

As a workaround for some use cases, you can use a site like https://emoji.aranja.com/ to download png images of individual emoji, then host them somewhere (like a github repo), and then display them using the vega/altair image mark like https://altair-viz.github.io/user_guide/marks/image.html.

Sweet thank you!

[jonmmease]

It's early days, but I'm playing with writing an alternative PNG renderer that uses a different text engine (cosmic-text) which does support emoji.

See https://pypi.org/project/avenger/

For the example at https://altair-viz.github.io/gallery/isotype_emoji.html.

# Create chart as usual
import altair as alt
import pandas as pd

source = pd.DataFrame([
      {'country': 'Great Britain', 'animal': 'cattle'},
      {'country': 'Great Britain', 'animal': 'cattle'},
      {'country': 'Great Britain', 'animal': 'cattle'},
      {'country': 'Great Britain', 'animal': 'pigs'},
      {'country': 'Great Britain', 'animal': 'pigs'},
      {'country': 'Great Britain', 'animal': 'sheep'},
      {'country': 'Great Britain', 'animal': 'sheep'},
      {'country': 'Great Britain', 'animal': 'sheep'},
      {'country': 'Great Britain', 'animal': 'sheep'},
      {'country': 'Great Britain', 'animal': 'sheep'},
      {'country': 'Great Britain', 'animal': 'sheep'},
      {'country': 'Great Britain', 'animal': 'sheep'},
      {'country': 'Great Britain', 'animal': 'sheep'},
      {'country': 'Great Britain', 'animal': 'sheep'},
      {'country': 'Great Britain', 'animal': 'sheep'},
      {'country': 'United States', 'animal': 'cattle'},
      {'country': 'United States', 'animal': 'cattle'},
      {'country': 'United States', 'animal': 'cattle'},
      {'country': 'United States', 'animal': 'cattle'},
      {'country': 'United States', 'animal': 'cattle'},
      {'country': 'United States', 'animal': 'cattle'},
      {'country': 'United States', 'animal': 'cattle'},
      {'country': 'United States', 'animal': 'cattle'},
      {'country': 'United States', 'animal': 'cattle'},
      {'country': 'United States', 'animal': 'pigs'},
      {'country': 'United States', 'animal': 'pigs'},
      {'country': 'United States', 'animal': 'pigs'},
      {'country': 'United States', 'animal': 'pigs'},
      {'country': 'United States', 'animal': 'pigs'},
      {'country': 'United States', 'animal': 'pigs'},
      {'country': 'United States', 'animal': 'sheep'},
      {'country': 'United States', 'animal': 'sheep'},
      {'country': 'United States', 'animal': 'sheep'},
      {'country': 'United States', 'animal': 'sheep'},
      {'country': 'United States', 'animal': 'sheep'},
      {'country': 'United States', 'animal': 'sheep'},
      {'country': 'United States', 'animal': 'sheep'}
    ])

chart = alt.Chart(source).mark_text(size=45, baseline='middle').encode(
    alt.X('x:O').axis(None),
    alt.Y('animal:O').axis(None),
    alt.Row('country:N').title(''),
    alt.Text('emoji:N')
).transform_calculate(
    emoji="{'cattle': '🐄', 'pigs': '🐖', 'sheep': '🐏'}[datum.animal]"
).transform_window(
    x='rank()',
    groupby=['country', 'animal']
).properties(
    width=550,
    height=140
)

# Export to PNG with avenger
import avenger
png = avenger.altair_utils.chart_to_png(chart, scale=1)
with open("emoji.png", "wb") as f:
    f.write(png)

emoji.png:

[jonmmease]

Done in 1.5.0!