def content(self):
df = self.data['df']
available_indicators = df['Indicator Name'].unique()
content = {
'content-3': html.Div(dcc.Markdown(
"""
function(input1, input2, input3, ...) ==> new_data
"""), className='center reveal', style={'font-size':'150%', 'margin-top':'2rem'}),
'content-1':
html.Div([
Row(html.Div([
html.Div('y-axis', style={'opacity':0.7, 'margin-bottom':'0.25rem'}),
dcc.Dropdown(
id='yaxis-column',
options=[{'label': i, 'value': i} for i in available_indicators],
value='Life expectancy at birth, total (years)'
),
dcc.RadioItems(
id='yaxis-type',
options=[{'label': i, 'value': i} for i in ['Linear', 'Log']],
value='Linear',
labelStyle={'display': 'inline-block'}
)
], style={})),
Row(html.Div([
html.Div('x-axis', style={'opacity':0.7, 'margin-bottom':'0.25rem'}),
dcc.Dropdown(
id='xaxis-column',
options=[{'label': i, 'value': i} for i in available_indicators],
value='Fertility rate, total (births per woman)'
),
dcc.RadioItems(
id='xaxis-type',
options=[{'label': i, 'value': i} for i in ['Linear', 'Log']],
value='Linear',
labelStyle={'display': 'inline-block'}
)
], style={}))
], className='pad-y', style={'font-size':'x-large'}),
'content-2' :
html.Div([
dcc.Graph(id='indicator-graphic'),
dcc.Slider(
id='year--slider',
min=df['Year'].min(),
max=df['Year'].max(),
value=df['Year'].max(),
step=None,
marks={str(year): str(year) for year in df['Year'].unique()}
)
])
}
return content
class Dash(Block):
shape = [[8, 4]]
row_classes = ['center-y']
content = [
dcc.Markdown(
"""
* Python framework for building data-driven web applications
* Enables construction of modern reactive web-apps
- __*Using just Python!!*__
* Built on
- Flask (Python web framework)
- React (JavaScript interface library)
"""),
html.Div([
Row(html.Img(src='/static/img/dash.svg', style={'width':'100%'})),
Row(html.Img(src='/static/img/plotly.png')),
], className='center pad-y-extra')]
class Title(Block):
name = "Creating Reactive Web Apps in Python"
classes = ['center']
shape = [[6, 6]]
row_classes = ['center-y']
content = [
html.Div(dcc.Markdown("""
#### Ned Letcher
nedned.net
@nletcher
"""), style={'text-align':'left'}),
[
Row(html.Img(src='/static/img/forefront.jpg',
style={'margin-bottom':'2em'})),
Row(html.Img(src='/static/img/melbourne-uni.png',
style={'width':'35%'}))
]
]
class JavaScript(Block):
name = "JavaScript library?"
shape = [[8, 4]]
row_classes = ['center-y']
content = [
dcc.Markdown(
"""
eg D3.js, plotly.js, Chart.js etc...
* but most data analytics not done in JavaScript
* integrating data will take time
* requires front-end development skills
* full stack developers??
"""),
html.Div([
Row(html.Img(src='/static/img/d3.png', style={'width':'30%'})),
Row(html.Img(src='/static/img/plotly.png')),
Row(html.Img(src='/static/img/chartjs.jpg')),
], className='center pad-y')
]
class Dash(Block):
shape = [[12], [12], [4, 8]]
row_heights = [None, 15, None]
content = [
Image(src='dash.svg', width=50),
html.Div(),
html.Div([
Row(Image(src='flask.png', width=50), hcenter=True),
Row(Image(src='react.png', width=50), hcenter=True),
Row(Image(src='plotly.png', width=50), hcenter=True),
]),
dcc.Markdown(
s("""
* Framework for building data-driven reactive web applications
- __*using only Python!!*__
* Made by Plotly
* Open source (MIT Licence)
* Active community
* ~6k ★ on GitHub
"""))
]
class Python(Block):
name = "Python"
shape = [[9, 3]]
row_classes = ['center-y']
content = [
dcc.Markdown(
"""
* **Jupyter**
- Might already be using notebook for analysis
- *But* can't expose kernel to the world
- Notebook Server + Dashboard Server
- *But* does not scale
* **Bokeh and Bokeh Server**
- Good option
- Some complexity involved?
* **Dash**...
"""),
html.Div([
Row(html.Img(src='/static/img/jupyter.svg', style={'width':'100%'})),
Row(html.Img(src='/static/img/bokeh.png')),
Row(html.Img(src='/static/img/dash.svg')),
], className='center pad-y')
]
class ComponentTrees(Block):
name = "Layouts are Component Trees"
header = True
# not using shape because I haven't worked out a way to selctively make
# bootstrap cols produced by shape *not* horizontally centered
content = html.Div([
Row([
html.Div(),
dcc.SyntaxHighlighter(language='python',
theme='dark',
children=s("""
import dash_html_components as html
import dash_core_components as dcc
"""))
],
style={'width': '50vw'}),
Row([
html.Div([
html.A('Div', className="html-component"),
html.Ul([
html.Li(html.A('H1', className="html-component")),
html.Li(html.A('Graph', className="dcc-component")),
html.Li(html.A('P', className="html-component")),
])
],
className='clt'),
dcc.SyntaxHighlighter(language='python',
theme='dark',
children=s("""
html.Div([
html.H1("My Dashboard"),
dcc.Graph(),
html.P("We did a dashboard")
])
"""))
],
className='m-2'),
Row([
html.Div([
html.A('Div', className="html-component"),
html.Ul([
html.Li(html.A('H1', className="html-component")),
html.Li([
html.Div(html.A('Ul', className="html-component")),
html.Ul([
html.Li(html.A('Li', className="html-component")),
html.Li(html.A('Li', className="html-component")),
html.Li(html.A('Li', className="html-component")),
])
]),
])
],
className='clt'),
dcc.SyntaxHighlighter(language='python',
theme='dark',
children=s("""
html.Div([
html.H1('My List'),
html.Ul([
html.Li(),
html.Li(),
html.Li(),
]),
])
"""))
],
className='m-2'),
Row([
html.Div([
html.A('Div', className="html-component"),
html.Ul([
html.Li(html.A('Markdown', className="dcc-component")),
html.Li(html.A('Img', className="html-component")),
html.Li(html.A('Img', className="html-component")),
])
],
className='clt'),
dcc.SyntaxHighlighter(language='python',
theme='dark',
children=s("""
html.Div([
dcc.Markdown('''
# Some Markdown Content
_Everybody_ loves Markdown'''),
html.Img(src="image1.png"),
html.Img(src="image2.png"),
])
"""))
])
])
class R(Block):
name = "R"
shape = [[12]]
classes = ['center']
content = Row(html.Img(src='/static/img/shiny.png', style={'width':'50%'}))
class Architecture(Block):
name = "The Big Picture"
shape = [[12]]
classes = ['center']
content = Row(html.Img(src='/static/img/dash-architecture.svg', style={'width':'70%'}))