Jupyter Dash

import os

from urllib.parse import urlparse

nj_runtime_url = urlparse(os.environ.get('NEXTJOURNAL_RUNTIME_SERVICE_URL'))

from jupyter_dash import JupyterDash

import dash_core_components as dcc

import dash_html_components as html

from dash.dependencies import Input, Output

import pandas as pd

df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv')

app = JupyterDash(__name__,

                  server_url = 'https://' + nj_runtime_url.hostname,

                  requests_pathname_prefix = nj_runtime_url.path + '/')

app.layout = html.Div([

    dcc.Graph(id='graph-with-slider'),

    dcc.Slider(

        id='year-slider',

        min=df['year'].min(),

        max=df['year'].max(),

        value=df['year'].min(),

        marks={str(year): str(year) for year in df['year'].unique()},

        step=None

    )

])

@app.callback(

    Output('graph-with-slider', 'figure'),

    [Input('year-slider', 'value')])

def update_figure(selected_year):

    filtered_df = df[df.year == selected_year]

    fig = px.scatter(filtered_df, x="gdpPercap", y="lifeExp",

                     size="pop", color="continent", hover_name="country",

                     log_x=True, size_max=55)

    fig.update_layout(transition_duration=500)

    return fig

app.run_server(mode='inline', width='100%', host='0.0.0.0', port=9998)

pip install jupyter-dash