Last active
July 10, 2020 13:15
-
-
Save treuille/f7a6d005d9563c08fff2c2c029908a6b to your computer and use it in GitHub Desktop.
Comparing Dash and Streamlit
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import dash | |
import dash_core_components as dcc | |
import dash_html_components as html | |
from dash.dependencies import Input, Output | |
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css'] | |
app = dash.Dash(__name__, external_stylesheets=external_stylesheets) | |
app.layout = html.Div([ | |
dcc.Input( | |
id='num', | |
type='number', | |
value=5 | |
), | |
html.Table([ | |
html.Tr([html.Td(['x', html.Sup(2)]), html.Td(id='square')]), | |
html.Tr([html.Td(['x', html.Sup(3)]), html.Td(id='cube')]), | |
html.Tr([html.Td([2, html.Sup('x')]), html.Td(id='twos')]), | |
html.Tr([html.Td([3, html.Sup('x')]), html.Td(id='threes')]), | |
html.Tr([html.Td(['x', html.Sup('x')]), html.Td(id='x^x')]), | |
]), | |
]) | |
@app.callback( | |
[Output('square', 'children'), | |
Output('cube', 'children'), | |
Output('twos', 'children'), | |
Output('threes', 'children'), | |
Output('x^x', 'children')], | |
[Input('num', 'value')]) | |
def callback_a(x): | |
return x**2, x**3, 2**x, 3**x, x**x | |
if __name__ == '__main__': | |
app.run_server(debug=True) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import streamlit as st | |
x = st.slider('Pick x', 1, 100, 5) | |
f""" | |
| Formula | Result | | |
|---------|--------| | |
| $x^2$ | {x**2} | | |
| $x^3$ | {x**3} | | |
| $2^x$ | {2**x} | | |
| $3^x$ | {3**x} | | |
| $x^x$ | {x**x} | | |
""" |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I'd imagine that's borrowed from react's
dangerouslySetInnerHTML
: https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml , for the same reasons.