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%'}))