reusable.Row([
html.A(
className='image-link',
href='https://dash.plot.ly/getting-started',
children=html.Img(
src='https://github.com/plotly/dash-docs/raw/master/images/gapminder-animation.gif',
alt='Screenshot of simple Dash app'
)
),
dcc.Markdown(
className="markdown-links",
children=dedent('''
[View the getting started guide](https://dash.plot.ly/getting-started)
''')
),
dcc.Markdown(dedent('''
The [Dash Getting Started Guide](/getting-started) contains
many applications that range in complexity.
The first interactive app that you'll create combines a `Slider`
with a `Graph` and filters data using a Pandas `DataFrame`.
The `animate` property in the `Graph` component was set to `True`
so that the points transition smoothly.
Some interactivity is built into the `Graph` component, including
hovering over values, clicking on legend items to toggle traces, and
zooming into regions.
''')),
]),
## Getting Started
''')),
reusable.Row([
html.
A(className='image-link',
href='https://dash.plot.ly/getting-started',
children=html.Img(
src=
'https://github.com/plotly/dash-docs/raw/master/images/gapminder-animation.gif',
alt='Screenshot of simple Dash app')),
dcc.Markdown(className="markdown-links",
children=dedent('''
[View the getting started guide](https://dash.plot.ly/getting-started)
''')),
dcc.Markdown(
dedent('''
The [Dash Getting Started Guide](/getting-started) contains
many applications that range in complexity.
The first interactive app that you'll create combines a `Slider`
with a `Graph` and filters data using a Pandas `DataFrame`.
The `animate` property in the `Graph` component was set to `True`
so that the points transition smoothly.
Some interactivity is built-in to the `Graph` component including
hovering over values, clicking on legend items to toggle traces, and
zooming into regions.
''')),
]),
# FINANCE SECTION
html.Img(id="no-gch-x-normal", style={"width": "100%"}),
rc.CardTitle("Cross (Y-Normal) Cut Plane"),
html.Img(id="no-gch-y-normal", style={"width": "100%"}),
]
)
)
app.layout = html.Div(
style={"--slider_active": "teal"},
# className="container",
children=[
navbar,
html.Br(),
rc.Row(
rc.Col(
rc.Card(rc.CardContent(rc.Row([rc.Col(c, width=3) for c in controls]))),
width=12,
)
),
rc.Row(
[
rc.Col([html.H4("Results with GCH"), left_section], width=6),
rc.Col([html.H4("Results without GCH"), right_section], width=6),
]
),
],
)
@app.callback(
Output("gch-horizontal", "src"),
Output("gch-x-normal", "src"),