Multiple Dash Apps on One Page

Dash Python
1

Greetings - I’m trying to build multiple Dash (by Plotly) Apps into One Page. In other words, the user sees a data visualization on top of the page, scrolls down, sees some sample text, scrolls down and then sees another data visualization. The code runs but only the second data visualization populates (along with the sample text). Any help would be greatly appreciated.

Here is the sample code:

import plotly.plotly as py
import plotly.graph_objs as go
import numpy as np 
import pandas as pd
import requests
import io
import re
import dash 
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output 

from app import server 

app = dash.Dash('dash_36', sharing=True, url_base_pathname='/dash_36', 
csrf_protect=False, server=server) 

app.config['suppress_callback_exceptions']=True

df = pd.read_csv('app_8/main.csv')

colors = {
'background': '#111111',
'text': '#7FDBFF'
}

app.layout = html.Div([

html.A("Previous Chart:    ", href='dash_16'),
html.A("     Next Chart:", href='dash_18'),
html.A("     Back to Main Page:", 
href='https://ds.org/index'),

dcc.Graph(
    id='Senators of the United States 115th Congress: '
                  'America ~ A Country Up For $ALE',
    figure={

        'data': [
            go.Scatter(
                x=df[df['party'] == i]['sector_total'],
                y=df[df['party'] == i]['industry_total'],
                #z=df[df['candidate_name'] == i]['contributor_total'],
                text=df[df['party'] == i]['candidate_name'],
                mode='markers',
                opacity=0.7,
                marker={
                    'size': 15,
                    'line': {'width': 0.5, 'color': 'white'}
                },
                name=i
            ) for i in df.party.unique()
        ],

        'layout': go.Layout(
            xaxis={'title': 'Sector Total'},
            yaxis={'title': 'Industry Total'},
            #margin={'l': 40, 'b': 40, 't': 10, 'r': 10},
            #legend={'x': 0, 'y': 1},
            hovermode='closest',
            title='Sector Total, Industry Total & Candidate Name by 
            Party',
             plot_bgcolor= colors['background'],
            paper_bgcolor=colors['background'],
            height=700,
            font= {
                'color': colors['text'],
            } 
        )
    }
),

dcc.Markdown('''

# SAMPLE TEXT

# This is an <h1> tag

## This is an <h2> tag

###### This is an <h6> tag
'''), 

dcc.Markdown('''
*This text will be italic*

_This will also be italic_


**This text will be bold**

__This will also be bold__

_You **can** combine them_
'''),

dcc.Graph(
    id='Senators of the United States 115th Congress: '
                  'America ~ A Country Up For $ALE', 
    figure={
        'data': [
            go.Scatter(
                x=df[df['contributor_name'] == i] 
                ['contributor_individual'],
                y=df[df['contributor_name'] == i]['contributor_pac'],
                #z=df[df['candidate_name'] == i]['contributor_total'],
                text=df[df['contributor_name'] == i]['candidate_name'],
                mode='markers',
                opacity=0.7,
                marker={
                    'size': 15,
                    'line': {'width': 0.5, 'color': 'white'}
                },
                name=i
            ) for i in df.contributor_name.unique()
        ],
        'layout': go.Layout(
            xaxis={'title': 'Contributor Individual'}, 
            yaxis={'title': 'Contributor PAC'},
            #margin={'l': 10, 'b': 10, 't': 10, 'r': 10},
            #legend={'x': 0, 'y': 1},
            hovermode='closest',
            title='Contributor Individual, Contributor PAC & Candidate 
            Name by Contributor Name',
            plot_bgcolor= colors['background'],
            paper_bgcolor=colors['background'],
            height=700,
            font= {
                'color': colors['text'],
            } 
        )
    }
)



])
2

Have you tried using dcc.Tabs? It’s much more effective than scrolling down to see visualizations, and will probably solve your display problem as well.
I found it especially useful for building a multi-tab app