pandas 添加视频(来自url)鼠标悬停/点击时弹出

7ajki6be  于 2023-02-07  发布在  其他
关注(0)|答案(1)|浏览(98)

我有一个使用plotly在Map上绘制一些点的脚本。我的代码目前显示这些点,当鼠标悬停在这些点上时,它会显示Pandas数据框中一列的信息。

import plotly.graph_objs as go
import plotly
import pandas as pd
from plotly.offline import iplot

# setting access token

mapbox_access_token = 'map_token_here'
df = pd.read_csv('cvs_with-data')
video_type = list(df['Type'].value_counts().index)

data = []
for video in video_type:
    video_data = dict(
            lat = df.loc[df['Type'] == video,'Latitude'],
            lon = df.loc[df['Type'] == video,'Longitude'],
            name = video,
            marker = dict(size = 14),
            type = 'scattermapbox'
        )
    data.append(video_data)

mapbox_access_token = 'map_token_here

layout = dict(
    height = 800,
    margin = dict(t=0, b=0, l=0, r=0),
    font = dict(color='#FFFFFF', size=11),
    paper_bgcolor = '#000000',
    mapbox=dict(
        accesstoken=mapbox_access_token,
        bearing=0,
        center=dict(
            lat=57,
            lon=-4
        ),
        pitch=0,
        zoom=5,
        style='dark'
    ),
)
updatemenus=list([
    # drop-down 1: map styles menu
    # buttons containes as many dictionaries as many alternative map styles I want to offer
    dict(
        buttons=list([
            dict(
                args=['mapbox.style', 'dark'],
                label='Dark',
                method='relayout'
            ),                    
            dict(
                args=['mapbox.style', 'light'],
                label='Light',
                method='relayout'
            ),
            dict(
                args=['mapbox.style', 'outdoors'],
                label='Outdoors',
                method='relayout'
            ),
            dict(
                args=['mapbox.style', 'satellite-streets'],
                label='Satellite with Streets',
                method='relayout'
            )                    
        ]),
        # direction where I want the menu to expand when I click on it
        direction = 'up',
      
        # here I specify where I want to place this drop-down on the map
        x = 0.75,
        xanchor = 'left',
        y = 0.05,
        yanchor = 'bottom',
      
        # specify font size and colors
        bgcolor = '#000000',
        bordercolor = '#FFFFFF',
        font = dict(size=11)
    ),    
    
    # drop-down 2: select type of storm event to visualize
    dict(
         # for each button I specify which dictionaries of my data list I want to visualize.  I have 4 different
         # : the first will show all of them, while from the second to the last option, only
         # one type at the time will be shown on the map
         buttons=list([
            dict(label = 'All Testimonies',
                 method = 'update',
                 args = [{'visible': [True, True, True, True, True, True, True]}]),
            dict(label = 'Stakeholder',
                 method = 'update',
                 args = [{'visible': [True, False, False, False, False, False, False]}]),
            dict(label = 'Scientist',
                 method = 'update',
                 args = [{'visible': [False, True, False, False, False, False, False]}]),
             dict(label = 'Member of the public',
                 method = 'update',
                 args = [{'visible': [False, False, True, False, False, False, False]}])
          
        ]),
        # direction where the drop-down expands when opened
        direction = 'down',
        # positional arguments
        x = 0.01,
        xanchor = 'left',
        y = 0.99,
        yanchor = 'bottom',
        # fonts and border
        bgcolor = '#000000',
        bordercolor = '#FFFFFF',
        font = dict(size=11)
    )
])

# assign the list of dictionaries to the layout dictionary
layout['updatemenus'] = updatemenus

annotations = [dict(text='Video Testimonials across Scotland', 
         font=dict(color='#FFFFFF',size=14), borderpad=10, 
         x=0.05, y=0.05, xref='paper', yref='paper', align='left', showarrow=False, bgcolor='black')]

layout['title'] = 'Video testimonials'
layout['updatemenus'] = updatemenus
layout['annotations'] = annotations

figure = dict(data=data, layout=layout)
plotly.offline.plot(figure, filename='Test.html', auto_open=False)

当我用包含我想弹出的视频网址的列更改列时,Map根本不显示点。

kwvwclae

kwvwclae1#

虽然不能使用plotly-dashhovertemplate中播放视频,但可以在html.Iframe组件中播放视频。下面是一个工作示例,使用了一个示例 Dataframe ,该 Dataframe 具有一个video_url列,该列包含一个嵌入式YouTube视频的URL。
由于我在本例中使用的是YouTube视频,因此update_video回调将'?&autoplay=1'附加到视频url的末尾,以便视频自动开始播放,但根据您的用例,您可能不需要这样做。

import pandas as pd
import plotly.express as px

import dash
from dash import dcc, html, Input, Output

us_cities = pd.read_csv("https://raw.githubusercontent.com/plotly/datasets/master/us-cities-top-1k.csv", nrows=5)

us_cities['video_url'] = [
    'https://www.youtube.com/embed/lJIrF4YjHfQ',
    'https://www.youtube.com/embed/jNQXAC9IVRw',
    'https://www.youtube.com/embed/qNcEmhqSobY',
    'https://www.youtube.com/embed/H1S6UCX4RAA',
    'https://www.youtube.com/embed/SAVI1HI5NrY'
]

fig = px.scatter_mapbox(us_cities, lat="lat", lon="lon", zoom=3)
fig.update_layout(mapbox_style="dark", mapbox_accesstoken=MAPBOX_ACCESS_TOKEN)
fig.update_layout(margin={"r":0,"t":0,"l":0,"b":0})

app = dash.Dash('app')

app.layout = html.Div([
    dcc.Graph(
        id='mapbox', 
        figure=fig
    ),
    html.Iframe(
        id='video', 
        src=None, 
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share")
])

@app.callback(
    Output('video', 'src'),
    Input('mapbox', 'hoverData'),
    prevent_initial_call=True
)
def update_video(hover_data):
    point_index = hover_data['points'][0]['pointIndex']
    video_url = us_cities.iloc[point_index]['video_url']
    return video_url + '?&autoplay=1'

if __name__ == '__main__':
    app.run_server()

相关问题