Suggestion: Documentation - Add more detailed example of Altair Chart in Popup

[coolum001]

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

import folium

import altair as alt
import pandas as pd

# define data for demonstration
source = pd.DataFrame(
    {
        'a': ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I'],
        'b': [28, 55, 43, 91, 81, 53, 19, 87, 52],
    }
)

# create an altair chart, then convert to JSON
chart = alt.Chart(source).mark_bar().encode(x='a', y='b')
vis1 = chart.to_json()

# create folium map
start_coords = [-26.52, 153.09]
folium_map = folium.Map(
    location=start_coords,
    zoom_start=13,
    width='80%',
    height='80%',
)

# create a marker, with altair graphic as popup
circ_mkr = folium.CircleMarker(
    location=start_coords,
    radius=20,
    color='red',
    fill=True,
    fill_color='red',
    fillOpacity=1.0,
    opacity=1.0,
    tooltip='Altair Graph',
    popup=folium.Popup(max_width=400).add_child(folium.VegaLite(vis1, width=400, height=300)),
)

# add to map
circ_mkr.add_to(folium_map)

folium_map

Problem description

The Quickstart guide has a section titled "Vincent/Vega and Altair/VegaLite Markers".

However, the example code in this section only covers Vega graphics. It took me a little while to realise that the VegaLite constructor was required for Altair charts, as using the wrong constructor seems to give just a blank cell (in JupyterLab).

I am suggesting a specific example for Altair charts, as shown in the code attached above. This shows the creation of the Altair chart, conversion to JSON, and incorporation into a popup.

The resulting graphic looks like:

Again, thank you for this package.

Expected Output

Documentation to cover Altair charts incorporated into popups in more detail.

Output of folium.__version__

print(folium.__version__)
0.10.0

[Conengmo]

I'll add that Vincent is no longer being maintained, and it's advised to move over to Altair fully. https://github.com/wrobstory/vincent

In our documentation we should focus on Vega-Altair in Vega lite instead. https://github.com/altair-viz/altair