Enhance your Dashboard App with Lottie (small gifs)
In this video I'll show you how to add Lottie files (small Gifs) to your app with Python. I'll also share the exciting news of the Join Button. At the end, I would love to hear the dashboards you would like me to create in this upcoming year.
We'll close out 2022 and and share what you would like Charming Data to focus on in 2023.
If you're interested in having your own Dash tutorial video highlighted on Charming data, I invite you to create and share them with me. Feel free to use this session to let me know what topics you would like to create videos on.
...
https://www.youtube.com/watch?v=j8bMMCPyBTc
Learn to create the Sunburst Diagram in python to visualize hierarchical data. I'll share the source Code and link to data. The sunburst is often referred to as a radial tree map. Under 30 lines of code, and using Plotly Express, we will create multiple Sunbursts, change the styling, hover, color, and much more. Links Below...
Code: https://github.com/Coding-with-Adam/Dash-by-Plotly/tree/master/Plotly_Graphs/Sunburst
Data: https://drive.google.com/file/d/1zKRiqisK5JHQZ873P-FWCPvVDeSbV-kZ/view?usp=sharing
Data Source: https://mappingpoliceviolence.org/
Sunburst Parameters: https://plotly.com/python-api-reference/generated/plotly.express.sunburst.html
Plotly Sunburst Examples: https://plotly.com/python/sunburst-charts/
Plotly Sunburst Complete Parameters: https://plotly.com/python/reference/#sunburst
Continuous Color Scales: https://plotly.com/python/builtin-colorscales/
Discrete Color Scales: https://plotly.com/python/discrete-color/
Challenge solution uploaded to first comment below.
...
https://www.youtube.com/watch?v=6OMKTl7RKjQ
The Dot Plot (aka Strip Plot): using Plotly Express & Python, this tutorial will teach you everything about the Dot Plot. How to build it, shape it, style it, and create an animated plot. We will be using real-life data on suicide rates. Links below:
The Code:
https://github.com/Coding-with-Adam/Dash-by-Plotly/tree/master/Plotly_Graphs/Dot_Plot
The Data:
https://drive.google.com/file/d/1rV_iompSvotiDWR7mY7ttb3X8aRycWIc/view?usp=sharing
Strip/Dot Plot with Plotly Express:
https://plotly.github.io/plotly.py-docs/generated/plotly.express.strip.html
Plotly colors list:
https://community.plotly.com/t/plotly-colours-list/11730/3
...
https://www.youtube.com/watch?v=McdSocOfpps
In part 2 of Dash tutorial, we'll connect our CRUD App to PostgreSQL databases: one on our computer, and one online via Heroku. The database on the computer will allow you to test your database connection before deploying it to the web. The database on Heroku will allow others to use your dashboard app and save changes to the live.
Set-up-PostgreSQL Guide:
https://drive.google.com/file/d/1nhqTKTF_8SwTV7iCuGXnOdIw3QOVWH8O/view?usp=sharing
Code:
https://github.com/Coding-with-Adam/Dash-by-Plotly/blob/master/Dash_More_Advanced_Shit/CRUD_app/crud_dash_postgresql.py
CSV initial Data:
https://drive.google.com/file/d/1qdhk81kyFZgbxex__r8MdGwe6zd2ypBr/view?usp=sharing
Necessary App Libraries:
https://drive.google.com/file/d/1plTRwziSEY_vJ6k0BFVgHVO9A4TuxWpu/view?usp=sharing
SQLAlchemy:
https://towardsdatascience.com/sqlalchemy-python-tutorial-79a577141a91
More on usage of SQLAlchemy with PostgreSQL:
https://www.youtube.com/watch?v=w25ea_I89iM
Video layout:
00:00 - What to expect
03:16 - Dash App connection to PostgreSQL Database on Computer - Section 1
12:15 - Dash App connection to PostgreSQL Database Online (Heroku) - Section 2
28:48 - Review Dash App Code - Section 3
...
https://www.youtube.com/watch?v=Mf3s0P4aVKw
Review to the app's layout to understand everything displayed on the page. In this tutorial series we'll create the front end interface in Python using Dash. We will use a pre-built smart contract, written in solidity, to create and deploy a decentralized application on top of it. There will be a little bit of javascript used for inserting data into the blockchain, but most of the app will be in Python.
dApp in Python code:
https://github.com/charmingdata/dApp-animal-shelter-python/tree/main
Smart Contract:
https://github.com/charmingdata/all-smart-contracts/blob/main/ShelterDB.sol
Polygon zkEVM testnet:
https://testnet-zkevm.polygonscan.com/address/0x1245dBd38a1FF2371436245A9D7eF7AE4A9a1A26
DBC Alert component:
https://dash-bootstrap-components.opensource.faculty.ai/docs/components/alert/
DBC Radio Buttons component:
https://dash-bootstrap-components.opensource.faculty.ai/docs/components/input/
DMC Loading-spinner component:
https://www.dash-mantine-components.com/components/loadingoverlay
Video layout:
00:00 - What you will learn
00:31 - Contrainer and Titles
01:18 - Alert Component
03:18 - First Row & Col components
04:31 - Input Field Component
06:05 - Radio Buttons
07:46 - Submit Button
09:25 - Second Row
11:02 - Get Shelter Information
*****************************************************************************************
Join my channel to support its existence and access perks:
https://www.youtube.com/channel/UCqBFsuAz41sqWcFjZkqmJqQ
GitHub tutorials code:
https://github.com/charmingdata?tab=repositories&q=&type=&language=&sort=name
Connect with me on LinkedIn:
https://www.linkedin.com/in/charmingdata/
...
https://www.youtube.com/watch?v=c67dq7ADWHw
Build a decentralized app on Polygon zkEVM testnet for animal shelters. In this video you'll learn to deploy the smart contract to the testnet and create a hardhat project, while building the backend.
Shelter Decentralized App:
https://d-app-animal-shelter.vercel.app/
Smart Contract:
https://github.com/charmingdata/dApp-animal-shelter/blob/main
Polygonscan zkevm testnet:
https://testnet-zkevm.polygonscan.com/
Video layout:
00:00 - Intro to project & files
01:31 - Create Backend
04:40 - Readme Step 5
06:26 - Readme Step 6
07:18 - Readme Step 7 & 8
09:14 - Step 9 and 10
*****************************************************************************************
Join my channel to support its existence and access perks:
https://www.youtube.com/channel/UCqBFsuAz41sqWcFjZkqmJqQ
GitHub tutorials code:
https://github.com/charmingdata?tab=repositories&q=&type=&language=&sort=name
Connect with me on LinkedIn:
https://www.linkedin.com/in/charmingdata/
...
https://www.youtube.com/watch?v=9SCU1utD-G0
In this tutorial you'll learn to set up Jupyter Lab and Jupyter Notebook to run your Plotly Dash Apps, using PC or Mac. Installation Guide and code can be downloaded below.
My GitHub Code:
https://github.com/Coding-with-Adam/Dash-by-Plotly/tree/master/Other/juplab3
Installation Guide:
https://drive.google.com/file/d/1DBrfNSXIw-Pngpoo4DLxkvnnjI7BfTXq/view?usp=sharing
Plotly docs and PyPI:
https://plotly.com/python/getting-started/#overview
https://pypi.org/project/dash/
Video layout:
00:00 - What you will learn and why
01:33 - Step 1
03:11 - Create Virtual Environment
05:43 - Install Plotly, Dash, Jupyter Lab
12:00 - Jupyter Notebook setup
13:30 - Bonus points
15:35 - Final remarks
************************************************************************************
? If you appreciate these tutorials and would like to support their existence while getting access to my GitLab code:
Patreon: https://www.patreon.com/charmingdata
YouTube: https://www.youtube.com/channel/UCqBFsuAz41sqWcFjZkqmJqQ/join
*************************************************************************************
...
https://www.youtube.com/watch?v=lVYRhHREkGo
In this tutorial, you will learn to create the side bar, using Dash and Bootstrap, all in Python. No need to know CSS or HTML. You will also learn how to construct a multi-page Dash app, while using Plotly to add a bar chart to every page.
Code:
https://github.com/Coding-with-Adam/Dash-by-Plotly/tree/master/Bootstrap/Side-Bar
Bootstrap Navigation Bar:
https://dash-bootstrap-components.opensource.faculty.ai/docs/components/nav/
Video layout:
00:00 - What you will learn & download files
02:00 - Starting the Side Bar app
03:22 - Side Navigation Bar explained
09:12 - Pathname callback explanation
15:01 - Bootstrap Side Navigation Bar
************************************************************************
? If you appreciate these tutorials and would like to support their existence and get some perks: https://www.patreon.com/charmingdata
...
https://www.youtube.com/watch?v=ln8dyS2y4Nc
Dynamic callbacks (pattern-matching callbacks) is one of the most advanced features of Dash. The downloadable code will illustrate how dynamic callbacks are used to create powerful and increasingly complex dashboards, giving much more control to your web app user. And of course, all this is done in pure Python.
Code: https://github.com/Coding-with-Adam/Dash-by-Plotly/tree/master/Callbacks/Pattern%20Matching%20Callbacks
Data: https://drive.google.com/file/d/1Solfd5lHPpiApdE1EkcT6TdEk2dUs8dI/view?usp=sharing
Callback Documentation: https://dash.plotly.com/pattern-matching-callbacks
Plotly Forum: https://community.plotly.com/
Video layout:
00:00 - What we will cover
12:47 - Dynamic ID
14:37 - "MATCH" Callback selector
24:05 - "ALL" Callback selector
25:55 - "ALLSMALLER" Callback selector
...
https://www.youtube.com/watch?v=4gDwKYaA6ww