dash-app-gallery
dash-app-gallery copied to clipboard
Noting already existing categories for all apps
Adam: from 1st app to cultural dimensions Somesh: Discrete color to KNN clasification Tolga: Legend app to Plotly Express App Gyasi: Poisson app to the end
Google sheet here.
@tolgahancepel @someshfengde
I'm here.
Hi there,
Has anyone run it successfully? I got this:
URLError
urllib.error.URLError: <urlopen error [Errno 111] Connection refused>
Traceback (most recent call last)
File "/usr/local/mambaforge/envs/dash-gallery/lib/python3.9/urllib/request.py", line 1346, in do_open
h.request(req.get_method(), req.selector, req.data, headers,
File "/usr/local/mambaforge/envs/dash-gallery/lib/python3.9/http/client.py", line 1285, in request
self._send_request(method, url, body, headers, encode_chunked)
File "/usr/local/mambaforge/envs/dash-gallery/lib/python3.9/http/client.py", line 1331, in _send_request
self.endheaders(body, encode_chunked=encode_chunked)
File "/usr/local/mambaforge/envs/dash-gallery/lib/python3.9/http/client.py", line 1280, in endheaders
self._send_output(message_body, encode_chunked=encode_chunked)
File "/usr/local/mambaforge/envs/dash-gallery/lib/python3.9/http/client.py", line 1040, in _send_output
self.send(msg)
File "/usr/local/mambaforge/envs/dash-gallery/lib/python3.9/http/client.py", line 980, in send
self.connect()
File "/usr/local/mambaforge/envs/dash-gallery/lib/python3.9/http/client.py", line 1447, in connect
super().connect()
File "/usr/local/mambaforge/envs/dash-gallery/lib/python3.9/http/client.py", line 946, in connect
self.sock = self._create_connection(
File "/usr/local/mambaforge/envs/dash-gallery/lib/python3.9/socket.py", line 844, in create_connection
raise err
File "/usr/local/mambaforge/envs/dash-gallery/lib/python3.9/socket.py", line 832, in create_connection
sock.connect(sa)
Then I found out there was a runtime file there, so I was going to deploy the environment exactly as required. I got this:
ERROR: Could not find a version that satisfies the requirement numpy==1.22.3 (from versions: 1.3.0, 1.4.1, 1.5.0, 1.5.1, 1.6.0, 1.6.1, 1.6.2, 1.7.0, 1.7.1, 1.7.2, 1.8.0, 1.8.1, 1.8.2, 1.9.0, 1.9.1, 1.9.2, 1.9.3, 1.10.0.post2, 1.10.1, 1.10.2, 1.10.4, 1.11.0, 1.11.1, 1.11.2, 1.11.3, 1.12.0, 1.12.1, 1.13.0rc1, 1.13.0rc2, 1.13.0, 1.13.1, 1.13.3, 1.14.0rc1, 1.14.0, 1.14.1, 1.14.2, 1.14.3, 1.14.4, 1.14.5, 1.14.6, 1.15.0rc1, 1.15.0rc2, 1.15.0, 1.15.1, 1.15.2, 1.15.3, 1.15.4, 1.16.0rc1, 1.16.0rc2, 1.16.0, 1.16.1, 1.16.2, 1.16.3, 1.16.4, 1.16.5, 1.16.6, 1.17.0rc1, 1.17.0rc2, 1.17.0, 1.17.1, 1.17.2, 1.17.3, 1.17.4, 1.17.5, 1.18.0rc1, 1.18.0, 1.18.1, 1.18.2, 1.18.3, 1.18.4, 1.18.5, 1.19.0rc1, 1.19.0rc2, 1.19.0, 1.19.1, 1.19.2, 1.19.3, 1.19.4, 1.19.5, 1.20.0rc1, 1.20.0rc2, 1.20.0, 1.20.1, 1.20.2, 1.20.3, 1.21.0rc1, 1.21.0rc2, 1.21.0, 1.21.1, 1.21.2, 1.21.3, 1.21.4, 1.21.5, 1.21.6)
ERROR: No matching distribution found for numpy==1.22.3
NumPy 1.22.0 Release Notes:
The Python versions supported in this release are 3.8-3.10, Python 3.7 has been dropped.
To be honest, this is a novice-oriented project, why stick to the old habit of using pip to manage the environment?
Also, use python376 in 2022, which is a bit far from the environment of those real users.
HI @IcToxi, I've had some errors launching as well but not like your errors. Did you try installing all the libraries within the requirements.txt file first? My error was generated because I forgot to do that.
Also, what operating system are you using?
Hi @Coding-with-Adam,
I have tried WSL and Manjaro, same error. I created a new virtual environment with mamba (tried both py3.9 and py3.7.6), and then used pip to execute pip install -r requirements.txt. And I have no clue about this error from socket, I've given up to continue tossing the environment. Could you please send me a to-do list? Since we assigned tasks from the page that I can't run right now.
Hi @IcToxi I am running python 3.8.13 and it's running fine on my end let me check by updating python version
Hi @IcToxi we're trying to get that fixed today. But, I'm not sure how long it will take. While we work on it, would you be able to create a minimal app that has a sunburst and a chained callback?
@Coding-with-Adam Sure.
And thank you, @someshfengde, but I don't think this issue is worth our time, our task doesn't necessarily need to run the whole app.
@IcToxi I updated the requirements.txt file at start of the project so it kinda became related to meπ
from dash import Dash, Input, Output, html, dcc
import dash_bootstrap_components as dbc
import plotly.express as px
import numpy as np
df = px.data.gapminder().query("year >= 1992")
app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
app.layout = html.Div(
dbc.Row(
[
dbc.Col(
[
dbc.Container(
[
dcc.Dropdown(
id="sunburst-plot-x-year",
options=df.year.unique(),
value=df.year.unique()[-1],
),
dcc.Dropdown(id="sunburst-plot-x-continent", multi=True),
dcc.Dropdown(id="sunburst-plot-x-country", multi=True),
]
)
],
width=3,
),
dbc.Col(
[
dbc.Container(
[
dcc.Graph(id="sunburst-plot-x-graph"),
]
)
],
width=9,
),
]
)
)
@app.callback(
Output("sunburst-plot-x-continent", "options"),
Input("sunburst-plot-x-year", "value"),
)
def chained_dropdown_1(year):
return df.query(f"year == {year}").continent.unique()
@app.callback(
Output("sunburst-plot-x-continent", "value"),
Input("sunburst-plot-x-continent", "options"),
)
def chained_dropdown_2(available_options):
return available_options
@app.callback(
Output("sunburst-plot-x-country", "options"),
Input("sunburst-plot-x-continent", "value"),
)
def chained_dropdown_3(continent):
return df.query(f"continent in {continent}").country.unique()
@app.callback(
Output("sunburst-plot-x-country", "value"),
Input("sunburst-plot-x-country", "options"),
)
def chained_dropdown_4(available_options):
return available_options
@app.callback(
Output("sunburst-plot-x-graph", "figure"),
[
Input("sunburst-plot-x-year", "value"),
Input("sunburst-plot-x-continent", "value"),
Input("sunburst-plot-x-country", "value"),
],
)
def generate_graph(year, continent, country):
_df = df.query(f"year == {year} & continent in {continent} & country in {country}")
fig = px.sunburst(
_df,
path=["continent", "country"],
values="pop",
color="lifeExp",
hover_data=["iso_alpha"],
color_continuous_scale="RdBu",
color_continuous_midpoint=np.average(_df["lifeExp"], weights=_df["pop"]),
)
fig.update_layout(margin=dict(l=0, r=0, t=0, b=0))
return fig
if __name__ == "__main__":
app.run_server(debug=True)
Hi @Coding-with-Adam, I paste it here?
Tip: Don't forget external_stylesheets=[dbc.themes.XXXX] when using dbc's Layout. π
Hi @IcToxi your app is now in the repo. I made small changes to avoid a None Type error, but it looks great. Thank you for creating.
We also updated the main requirements.txt file. Can you try to git clone this repo again and see if you get the same error please.

I can run it now, sorry, it has nothing to do with the environment, it is the raw.githubusercontent.com you introduced that I can't visit normally for some reasons you might know.
from dash import Dash, html, dcc, dash_table, Output, Input, State
from dash.exceptions import PreventUpdate
import plotly.express as px
df = px.data.iris()
fig = px.parallel_coordinates(
df,
color="species_id",
labels={
"species_id": "Species",
"sepal_width": "Sepal Width",
"sepal_length": "Sepal Length",
"petal_width": "Petal Width",
"petal_length": "Petal Length",
},
color_continuous_scale=px.colors.diverging.Tealrose,
color_continuous_midpoint=2,
)
app = Dash(__name__)
app.layout = html.Div(
[
my_graph := dcc.Graph(figure=fig),
my_table := dash_table.DataTable(
df.to_dict("records"),
[{"name": i, "id": i} for i in df.columns],
row_selectable="single",
),
]
)
@app.callback(
Output(my_graph, "figure"),
Input(my_table, "selected_rows"),
State(my_graph, "figure"),
)
def pick(r, f):
if r is None:
raise PreventUpdate
row = (
df[["sepal_length", "sepal_width", "petal_length", "petal_width", "species_id"]]
.loc[r[0]]
.to_list()
)
for i, v in enumerate(f.get("data")[0].get("dimensions")):
v.update({"constraintrange": [row[i] - row[i] / 100000, row[i]]})
return f
if __name__ == "__main__":
app.run_server(debug=True)
This is one of my replies on the forum, this kind of [row[i] - row[i] / 100000 does not seem very common, do you think it is appropriate to add it here?
This is one of my replies on the forum, this kind of
[row[i] - row[i] / 100000does not seem very common, do you think it is appropriate to add it here?
Do you mean add this example as an app here in the gallery?
from dash import Dash, html, dcc, Input, Output, State, MATCH, ALL
app = Dash(__name__)
questionnaire = {
1: {
"type": "choice",
"question": "Does your agency use an electronic accounting software system (as opposed to manual)?",
"options": ["Yes", "No", "Skip"],
},
2: {
"type": "choice+blank",
"question": "Has your agency recently implemented any new or substantially changed systems, for example, financial management or accounting systems? (If yes, please explain.)",
"options": ["Yes", "No", "Skip"],
},
3: {
"type": "choice",
"question": "Does your agency have a written Accounting and Financial Reporting policy?",
"options": ["Yes", "No", "Skip"],
},
4: {
"type": "choice",
"question": "Does your agency have a written Personnel policy (to include travel reimbursement, fringe benefits, etc.)?",
"options": ["Yes", "No", "Skip"],
},
5: {
"type": "multi-choice",
"question": "Which of the following aspects of the OJT training program were explained to you?",
"options": [
"Training Hours",
"Type of Training",
"Training Wages",
"Job Choices",
"Entry Wages",
],
},
6: {
"type": "multi-choice",
"question": "How did you learn about this OJT program?",
"options": [
"Contractor",
"Community Based Organization",
"Union Apprenticeship Program",
"Other",
],
},
7: {
"type": "blank",
"question": "What are your performance based strengths (speed, strength, power, agility, balance, conditioning, etc.)?",
},
8: {
"type": "essay",
"question": "Do you have any questions, comments or concerns?",
},
}
def generate(k, v):
match v["type"]:
case "choice":
return html.Div(
[
html.P(str(k) + ". " + v["question"]),
dcc.RadioItems(
id={
"index": k,
"type": v["type"],
"category": "questionnaire",
"additional": False,
},
options={i: i for i in v["options"]},
),
]
)
case "multi-choice":
return html.Div(
[
html.P(str(k) + ". " + v["question"]),
dcc.Checklist(
id={
"index": k,
"type": v["type"],
"category": "questionnaire",
"additional": False,
},
options={i: i for i in v["options"]},
),
]
)
case "choice+blank":
return html.Div(
[
html.P(str(k) + ". " + v["question"]),
dcc.RadioItems(
id={
"index": k,
"type": v["type"],
"category": "questionnaire",
"additional": False,
},
options={i: i for i in v["options"]},
),
dcc.Input(
id={
"index": k,
"type": v["type"],
"category": "questionnaire",
"additional": True,
},
disabled=True,
),
]
)
case "blank":
return html.Div(
[
html.P(str(k) + ". " + v["question"]),
dcc.Input(
id={
"index": k,
"type": v["type"],
"category": "questionnaire",
"additional": False,
}
),
]
)
case "essay":
return html.Div(
[
html.P(str(k) + ". " + v["question"]),
dcc.Textarea(
id={
"index": k,
"type": v["type"],
"category": "questionnaire",
"additional": False,
}
),
]
)
case _:
return html.Div("Something is wrong...")
app.layout = html.Div(
[generate(k, v) for k, v in questionnaire.items()]
+ [html.Br(), btn := html.Button("Submit"), answers := html.Div()]
)
app.callback(
Output(
{
"category": "questionnaire",
"type": "choice+blank",
"additional": True,
"index": MATCH,
},
"disabled",
),
Input(
{
"category": "questionnaire",
"type": "choice+blank",
"additional": False,
"index": MATCH,
},
"value",
),
)(lambda v: False if v == "Yes" else True)
app.callback(
Output(btn, "disabled"),
Input(
{"category": "questionnaire", "type": ALL, "additional": False, "index": ALL},
"value",
),
)(lambda answer: False if all(answer) else True)
@app.callback(
Output(answers, "children"),
Input(btn, "n_clicks"),
[
State(
{"category": "questionnaire", "type": ALL, "additional": ALL, "index": ALL},
"id",
),
State(
{"category": "questionnaire", "type": ALL, "additional": ALL, "index": ALL},
"value",
),
],
prevent_initial_call=True,
)
def collect(n_clicks, index, answer):
return str([v | {"answer": answer[i]} for i, v in enumerate(index)])
if __name__ == "__main__":
app.run_server(debug=True)
And this one, which I think would be a good example of pattern matching, but the questionnaires I just found randomly on the internet would look a little weird in a formal place. Anyone has a good idea?
And for client-side callbacks, I think writing in JS files should be advocated. But currently the structure of this project is only designed to display Python code.
Do you mean add this example as an app here in the gallery?
Yes, I see that the parallel-coordinates is in our list.