Repository for Plotly-Dash course exercises.
WasmDash for building Dash apps on the browser: https://wasmdash.vercel.app/
Installation guide for local Dash app development: Tech stack
Datasets to be used throughout the course: agriculture, makeup
Dash Core Components: https://dash.plotly.com/dash-core-components
Dash html Button component: https://dash.plotly.com/dash-html-components/button
Tables with Dash Ag Grid Getting Started Recommended chapters for more advanced learning: Pagination, Column filters, Cell editing
Plotly Express Graphs:
Graph attributes
WasmDash for building Dash apps on the browser: https://wasmdash.vercel.app/
Installation guide for local Dash app development: Tech stack
Datasets to be used throughout the course: agriculture, makeup
Supplement video tutorial on the callback
WasmDash for building Dash apps on the browser: https://wasmdash.vercel.app/
Datasets to be used throughout the course: agriculture, makeup
Plotly Python graphing docs
Plotly Express: intro to the high-level interface
The Dash Core Graph Component
Dash Bootstrap: choosing and declaring the stylesheet/theme
List of all available themes
Rows and Columns to position your app components neatly on the page
Dash Bootstrap styling cheat sheet
Advanced Callbacks:
- State argument:
commonly used when there are certain components in the callback Input that should not trigger the callback. For example, a dropdown combined with a button; the dropdown would be assigned to the State and the button to the Input. - no_update:
used at the end of the function when you don’t want certain Output components to update. - duplicate_outputs:
needs to be added when you use the same component ID AND Property in the Output within two different callbacks. - prevent_initial_call
used if you don’t want the callback to trigger when the app first loads or anytime the app (browser) is refreshed.
Expanding your component collection:
- Upload for csv; Upload for images. (not on WasmDash)
- Interval component
- Modal: first example with this WasmDash modal code.
- Open Pycharm and activate venv:
.\venv\Scripts\activate - Install all libraries and gunicorn in your virtual environment
- Create requirements file:
pip freeze > requirements.txt - Make sure your app code has
server = app.server - Run app to make sure it works:
python app.py - Push code to your github account; how-to see: https://youtu.be/vpRkAoCqX3o
how-to see: https://youtu.be/H16dZMYmvqo?feature=shared
- Open your Render account
- Create new Web Service and choose: “Build and deploy from a Git repository”
- Add the url of your public git repository
- Give the app a unique name
- Update the gunicorn command to:
gunicorn app_name:server
(Note: uvicorn can be used as well, see app conditions you have implemented)
Note: Possible error:
Render won’t work with the latest version of certain python libraries. For example, you’ll get an error if your requirements.txt file has the most recent version of pandas. Render allows up to pandas==1.3.5
- When your app has a local csv sheet you’re pulling data from, the file structure should look like this: deploy-app2-example-repo
- Notice how you would read the csv sheet into your app
- Don’t forget to add to your app code:
server = app.server - And install gunicorn or uvicorn in your virtual environment
- When deploying the app on Render.com, ensure that the Root Directory is src
Resources for future Dash learning
Make use of community Dash knowledge on the forum: https://community.plotly.com/