class Context(Block):
name = "Sometimes you need a User Interface"
header = True
shape = [[6, 6], [12], [6, 6]]
content = [
Image('table.png', round=True, width=65),
Image('code.jpg', round=True, width=50),
FontA('fa-arrow-down fa-5x'),
Image('charts.svg', round=True, width=50),
Image('interfaces.jpg', round=True, width=50),
]
class Title(Block):
name = "Building Data-driven Web Applications with Dash"
title = True
shape = [[6, 6]]
row_classes = ['pad-top']
content = [
html.Div(
dcc.Markdown(
dedent("""
### Ned Letcher
nedned.net
@nletcher"""))),
html.Div([Image(src='dash.svg'),
Image(src='plotly.png')],
className='d-flex flex-column')
]
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 UserInterfaces(Block):
name = "Sometimes you need a User Interface"
header = True
shape = [[8, 4]]
content = [
dcc.Markdown(
s("""
* Business intelligence, analytics
- dashboards, KPIs etc
- interactive reports
* Research, science, data science
- interactive exploration of results
- vehicle for communicating results
- prototypes
* DevOps, site reliability engineers (SREs)
- monitoring dashboards
* Data-driven journalism
- interactive content
- explorable explanations
* Web Development
- rapid prototyping
""")),
Image('charts.svg', round=True),
]
class DataTableComponentImage(Block):
content = Image(src='datatable.png', width=80)
class DashArchitecture(Block):
header = True
content = Image(src='dash-architecture.svg', width='80vw')
class Meta(Block):
content = Image(src='whatifitoldyou.jpg')
class WebPlatform(Block):
name = "The Web Platform?"
header = True
content = Image('web.png', width=80)