pandas dataframe to folium with vega chart popup

Question

Working with this dataframe:

State   Type    lat         lng         Total
Alabama Brand   32.318231   -86.902298  100
Alabama Generic 32.318231   -86.902298  200
Alabama OTC     32.318231   -86.902298  300
Alabama RX      32.318231   -86.902298  400
Alabama Total   32.318231   -86.902298  500

The most recent version of about 8 different attempts to have the above data appear in a bar chart within the popup of the marker on the map:

import json
from folium import features
import vincent
from vincent import Bar

bar = vincent.Bar(alabama_data, iter_idx=alabama_data['State During Use'], height=100, width=200)
data = json.loads(bar.to_json())

m = folium.Map([0, 0], zoom_start=1)
mk = features.Marker([0, 0])
p = folium.Popup("Hello")
v = features.Vega(data, width="100%", height="100%")

mk.add_child(p)
p.add_child(v)
m.add_child(mk)

m

However, this code renders the map, marker correctly. But, the popup is a blank white rectangle per this image:

So, that is not ideal. I have gone through about 20 or so tutorials on websites and youtube as well as consulted the documentation for folium, Vega and vega lite and can find no guidance there for this issue. I know this is likely an obscure question, but I am counting on the Interwebs to produce someone who toiled in the same vineyard here. Thank you so much for taking time to check this out.

user_13107804 · Answer

I'm new to using 'vincent' library, so I'm not sure if this is the best answer. I didn't see a column called 'State During Use' in the data you presented, so I decided to simply use the total column only. There was no latitude and longitude information, so I used the latitude and longitude information from the data you provided.

import pandas as pd
import numpy as np
import io

data = '''
State   Type    lat         lng         Total
Alabama Brand   32.318231   -86.902298  100
Alabama Generic 32.318231   -86.902298  200
Alabama OTC     32.318231   -86.902298  300
Alabama RX      32.318231   -86.902298  400
Alabama Total   32.318231   -86.902298  500
'''
alabama_data = pd.read_csv(io.StringIO(data), delim_whitespace=True)

alabama_data.set_index('Type', inplace=True)

alabama_data
    State   lat     lng     Total
Type                
Brand   Alabama     32.318231   -86.902298  100
Generic     Alabama     32.318231   -86.902298  200
OTC     Alabama     32.318231   -86.902298  300
RX  Alabama     32.318231   -86.902298  400
Total   Alabama     32.318231   -86.902298  500

import json
import folium
from folium import features
import vincent
from vincent import Bar

bar = vincent.Bar(alabama_data['Total'], height=100, width=200)
data = json.loads(bar.to_json())

m = folium.Map([32.318231, -86.902298], zoom_start=12)
mk = features.Marker([32.318231, -86.902298])
p = folium.Popup("Hello")
v = features.Vega(data, width="100%", height="100%")

mk.add_child(p)
p.add_child(v)
m.add_child(mk)

m

pandas dataframe to folium with vega chart popup

1 Answers