Folium: Choropleth doesn't escape apostrophe in legend_name

[JJSong0805]

Please add a code sample or a nbviewer link, copy-pastable if possible

import pandas as pd
import numpy as np
import json
import folium
import urllib.request, json

with urllib.request.urlopen("https://data.sfgov.org/api/geospatial/p5b7-5n3h?method=export&format=GeoJSON") as url:
    Analysis_Neighborhoods = json.loads(url.read().decode())

San_Cards_Fraud_rates = pd.read_csv('https://query.data.world/s/noqqfpf75ixart4kngi6p3qb2wb4fz')

latitude = 37.77
longitude = -122.42

# create a plain San Francisco map
Fraud_map = folium.Map(location=[latitude, longitude], zoom_start=12)

Fraud_map.choropleth(
    geo_data=Analysis_Neighborhoods,
    data=San_Cards_Fraud_rates[['Neighborhood','Rates (%)']],
    columns=['Neighborhood', 'Rates (%)'],
    key_on='feature.properties.nhood',
    fill_color='YlOrRd', 
    fill_opacity=0.7, 
    line_opacity=0.2,
    legend_name="Card's Fraud Rates in San Francisco"
)

# display map
Fraud_map

Problem description

I run this code on Jupyter notebook. No error or exception raised, but it just returned nothing but space. I've checked similar issue and try running it on firefox or using m.save(Map.html) to resolve this problem, however I still fail. And I've checked the key_on in the geojson file, but couldn't find any clue that could possibly result in this issue.

Expected Output

I expect the output to be a choropleth with colors representing the cards' fraud rates in each San Francisco neighborhoods from https://data.sfgov.org/Geographic-Locations-and-Boundaries/Analysis-Neighborhoods/p5b7-5n3h.

Output of folium.__version__

[Conengmo]

Try: data=San_Cards_Fraud_rates instead of data=San_Cards_Fraud_rates[['Neighborhood','Rates (%)']]. You already define the columns with the columns parameter.

[JJSong0805]

Try: data=San_Cards_Fraud_rates instead of data=San_Cards_Fraud_rates[['Neighborhood','Rates (%)']]. You already define the columns with the columns parameter.

Hi Conengmo, thanks for the reply! I tried this method but failed, so it doesn't seen like the main problem.

[Conengmo]

You're right, that wasn't the problem. The problem is in your legend name:
legend_name="Card's Fraud Rates in San Francisco"
The apostrophe is not escaped in the Javascript output which leads to the map not showing. If you remove the apostrophe it should work.

We should either escape the legend_name option or make sure the template (which is in Branca) uses template literals.

[JJSong0805]

You're right, that wasn't the problem. The problem is in your legend name:
legend_name="Card's Fraud Rates in San Francisco"
The apostrophe is not escaped in the Javascript output which leads to the map not showing. If you remove the apostrophe it should work.

We should either escape the legend_name option or make sure the template (which is in Branca) uses template literals.

Thanks a lot!!! It works!