Взаимодействие Jupyter не экспортируется в html - PullRequest
Новая
       5

Взаимодействие Jupyter не экспортируется в html

0 голосов
/ 27 марта 2020

Я недавно занялся кодированием и сейчас провожу анализ данных с открытым исходным кодом Corona. Я построил интерактивный график, используя Python3 внутри Jupyter Notebook. Единственное, я встроил взаимодействие, но оно показывается только внутри Ноутбука, а не когда оно экспортируется в html. Может ли кто-нибудь дать мне подсказку, почему это так? Большое спасибо заранее.

Код: 

# Import the necessary packages

import pandas as pd
import numpy as np 
import requests
import io

from bokeh.io import push_notebook,output_file
from bokeh.io import show, curdoc
from bokeh.plotting import figure, output_notebook
from bokeh.models import HoverTool, ColumnDataSource, Select
from bokeh.layouts import row
from bokeh.models.tickers import FixedTicker
from bokeh.models.callbacks import CustomJS

from ipywidgets import interact

output_notebook()

#---------------------------------------------------------------------------------------------------   
# Import the data
#---------------------------------------------------------------------------------------------------

url = 'https://data.humdata.org/hxlproxy/api/data-preview.csv?url=https%3A%2F%2Fraw.githubusercontent.com%2FCSSEGISandData%2FCOVID-19%2Fmaster%2Fcsse_covid_19_data%2Fcsse_covid_19_time_series%2Ftime_series_covid19_confirmed_global.csv&filename=time_series_covid19_confirmed_global.csv'
s=requests.get(url).content

url2 = 'https://data.humdata.org/hxlproxy/api/data-preview.csv?url=https%3A%2F%2Fraw.githubusercontent.com%2FCSSEGISandData%2FCOVID-19%2Fmaster%2Fcsse_covid_19_data%2Fcsse_covid_19_time_series%2Ftime_series_covid19_deaths_global.csv&filename=time_series_covid19_deaths_global.csv'
s2 =requests.get(url2).content

df = pd.read_csv(io.StringIO(s.decode('utf-8')))
df = df.fillna("")

df2 = pd.read_csv(io.StringIO(s2.decode('utf-8')))
df2 = df2.fillna("")

#--------------------------------------------------------------------------------------------------- 
# Number of reported Corona cases
#---------------------------------------------------------------------------------------------------

Numb_cases = df.iloc[:,0:2].merge(df.iloc[:,4:],how='inner',right_index=True,left_index=True).fillna("")
Numb_cases.iloc[:,1] = Numb_cases.iloc[:,1]+ " : " + Numb_cases.iloc[:,0]
Numb_cases = Numb_cases.iloc[:,1:]
Numb_cases = Numb_cases.transpose()
Numb_cases.columns = Numb_cases.iloc[0,:]
Numb_cases = Numb_cases.iloc[1:,:]
Numb_cases.index = pd.to_datetime(Numb_cases.index)


#---------------------------------------------------------------------------------------------------
# Number of reported Corona deaths
#---------------------------------------------------------------------------------------------------

Numb_deaths = df2.iloc[:,0:2].merge(df2.iloc[:,4:],how='inner',right_index=True,left_index=True).fillna("")
Numb_deaths.iloc[:,1] = Numb_deaths.iloc[:,1]+ " : " + Numb_deaths.iloc[:,0]
Numb_deaths = Numb_deaths.iloc[:,1:]
Numb_deaths = Numb_deaths.transpose()
Numb_deaths.columns = Numb_deaths.iloc[0,:]
Numb_deaths = Numb_deaths.iloc[1:,:]

dates = pd.DataFrame(Numb_deaths.index)

Numb_deaths.index = pd.to_datetime(Numb_deaths.index)

#---------------------------------------------------------------------------------------------------
# Create the interactive graphs
#---------------------------------------------------------------------------------------------------

x = Numb_deaths.index
countries = list(Numb_cases.columns)

#plot1
source = ColumnDataSource(data={
'x' : Numb_cases.index,
'y' : Numb_cases
})

p = figure(x_axis_type="datetime", plot_width=400, plot_height=400, tools="box_zoom,reset")

p.yaxis.axis_label = "Total Number of Cases"
p.xaxis.axis_label = "Date"

countries = list(Numb_cases.columns)

# Create a HoverTool: hover
hover = HoverTool(tooltips = [('Numb cases:', '@y'),('Date :','$x{%F}')],formatters={'$x': 'datetime'},mode='mouse')

# Add the hover tool to the figure p
p.add_tools(hover)


#Plot2
source2 = ColumnDataSource(data={
'x' : Numb_deaths.index,
'y' : Numb_deaths
})

p2 = figure(x_axis_type="datetime", plot_width=400, plot_height=400,tools="box_zoom,reset")

p2.yaxis.axis_label = "Total Number of Deaths"
p2.xaxis.axis_label = "Date"


countries = list(Numb_deaths.columns)

# Create a HoverTool: hover
hover = HoverTool(tooltips = [('Numb deaths:', '@y'),('Date :','$x{%F}')],formatters={'$x': 'datetime'},mode='mouse')

# Add the hover tool to the figure p
p2.add_tools(hover)

# Define a callback function: update_plot
def update(Country):
source.data = {
        'x' : x,
        'y' : Numb_cases.loc[:,Country]
    }
p.circle('x', 'y',source=source ,size=10,
     fill_color='grey', alpha=0.40, line_color='grey',
     hover_fill_color='firebrick', hover_alpha=0.90,
     hover_line_color='white')
source2.data = {
        'x' : x,
        'y' : Numb_deaths.loc[:,Country]
    }
p2.circle('x', 'y',source=source2 ,size=10,
     fill_color='grey', alpha=0.40, line_color=None,
     hover_fill_color='firebrick', hover_alpha=0.90, 
     hover_line_color='white')
push_notebook()

interact(update, Country=countries)

show(row(p,p2),notebook_handle=True)

График внутри ноутбука Jupyter

График внутри экспортируемого html

1 Ответ

1 голос
/ 27 марта 2020

Когда вы работаете с ноутбуком, у вас где-то работает сервер, на котором выполняется код Python внутри функции update. Но когда у вас есть просто stati c HTML страница, у вас нет ничего, что запускает Python - поэтому функция не работает.

Вам нужно либо продолжать использовать ноутбук, либо используйте bokeh serve. Также возможно встроить Bokeh в какой-нибудь существующий сервер, например Flask или Django. Последний вариант - переписать функцию update в JavaScript, чтобы ее можно было встроить в HTML.

...