Special letters in hovering data in map plots (Plotly Express)

Question

I've used Plotly Express for categorizing different zones in Denmark. Is there a way to include special letters (in my case: 'æ', 'ø', 'å')? When hovering over the cities of my map of Denmark, these letters are just displayed as a square with a question mark.

Example picture

import plotly.express as px
import json
import pandas as pd

# Load data
with open("map1.geojson") as f:
    geo_data = json.load(f)

df = pd.read_csv("postnr12.csv",
                   dtype={"fips": str})

fig = px.choropleth_mapbox(df,
                    locations=df["Postnummer"],
                    geojson = geo_data,
                    color = df["Zone"],
                    featureidkey = "properties.POSTNR_TXT",
                    hover_name = 'Postnummer', #info ved de forskellige lokationer
                    hover_data = (['by']), #showscale = False, text = df["by"], name = ' ',
                    mapbox_style="stamen-terrain",
                    center = {"lat": 56.26392, "lon": 9.501785},
                    zoom=5.5, opacity=0.4,)
#fig.update_geos(fitbounds="locations", visible=False)
fig.update_layout(coloraxis_showscale=False)

[![CSV][2]][2]

user_5327068 · Answer

Normally I wouldn't post an "answer" that might not solve the problem, but this is for the purpose of helping you debug what the issue may be. I'll update my answer if we figure it out.

This might have to do with your version of Plotly (is your version of Plotly up to date?). Try running the following code below and let me know if the same issue is still occurring (if you are able to see special characters when you run the code below - then that means it probably has something to do with your .csv file). A final possibility is that your browser is having trouble rendering special characters in html. I don't think it's likely if you're using a modern browser but it might be possible.

The below code creates a chloropleth mapbox using a sample df that contains the special characters you mentioned, and it renders properly for me in Chrome.

import numpy as np
from urllib.request import urlopen
import json
with urlopen('https://raw.githubusercontent.com/plotly/datasets/master/geojson-counties-fips.json') as response:
    counties = json.load(response)

import pandas as pd
df = pd.read_csv("https://raw.githubusercontent.com/plotly/datasets/master/fips-unemp-16.csv",
                   dtype={"fips": str})

import plotly.express as px

## subset the df for a sample
df_subset = df.iloc[:75].copy()

## randomly choose the characters
np.random.seed(42)
special_characters = np.random.choice(['å','æ', 'ø'],75)
df_subset['by'] = special_characters

fig = px.choropleth_mapbox(df_subset, geojson=counties, locations='fips', color='unemp',
                           color_continuous_scale="Viridis",
                           range_color=(0, 12),
                           mapbox_style="carto-positron",
                           zoom=6, center = {"lat": 32.3182, "lon": -86.9023},
                           opacity=0.5,
                           hover_data = (['by']),
                           labels={'unemp':'unemployment rate'}
                          )
fig.update_layout(margin={"r":0,"t":0,"l":0,"b":0})
fig.show()

Special letters in hovering data in map plots (Plotly Express)

1 Answers