├── .github └── FUNDING.yml ├── AI ├── Arms-Trade │ ├── app.py │ └── country trade register.csv ├── Banking │ ├── dashapp.py │ └── requirements.txt ├── Create-Your-Own-GPT │ ├── Defense.csv │ ├── Offense.csv │ └── Standings.csv ├── EmbedChain-Chatbot │ ├── Birds Flying Into Windows.pdf │ ├── app.py │ ├── config.yaml │ └── requirements.txt └── Window-Bird-Protector │ ├── Birds Flying Into Windows.pdf │ ├── bird collisions.pdf │ ├── bird window type.pdf │ ├── resources.txt │ └── window type.pdf ├── Ag-Grid ├── custom-components │ ├── assets │ │ └── dashAgGridComponentFunctions.js │ ├── button-in-table.py │ └── graph-in-table.py ├── filters │ └── radio-button-filter.py ├── getting-started │ ├── app.py │ └── space-mission-data.csv ├── icon-dropdown-link │ ├── app.py │ └── assets │ │ ├── prohibited.png │ │ └── safe.png ├── introduction │ ├── ag-grid-intro.py │ └── ag-grid-intro2.py ├── row-deletion │ ├── add-delete-rows.py │ └── finance_survey.csv └── save-table │ ├── app.py │ └── data │ ├── canada_finance_survey.csv │ ├── dataset_1.csv │ └── mydata10.csv ├── Analytic_Web_Apps ├── Blockchain-minimal │ ├── DailyActiveEthAddress.csv │ ├── Gemini_ETHUSD_d.csv │ └── app.py ├── Excel_to_Dash_Animal_Shelter │ ├── Animals_Inventory.csv │ ├── Dash_excel.py │ ├── dash_api_data.py │ └── jup_dash_excel.ipynb ├── Financial │ ├── Join_me.md │ ├── assets │ │ ├── IBM-Logo2.png │ │ └── tata.png │ ├── data.csv │ ├── finance.py │ └── part1_finance.py ├── Linkedin_Analysis │ ├── Connections.csv │ ├── Invitations.csv │ ├── Reactions.csv │ ├── a-layout_only.py │ ├── assets │ │ └── linkedin-logo2.png │ ├── b-layout_components.py │ ├── c-small-cards.py │ ├── d-final_analysis.py │ ├── jup-a-layout_only.ipynb │ ├── jup-b-layout-comp.ipynb │ ├── jup-c-small-cards.ipynb │ ├── jup-d-final-analysis.ipynb │ └── messages.csv ├── Multi-Excel-Dashboard │ ├── Toronto_temp.xlsx │ ├── climate_change.csv │ ├── multiple_csv_app.py │ └── nyc_snow.csv ├── Operational_Dashboard │ ├── assets │ │ └── mydecoration.css │ ├── elections.py │ ├── long_code.py │ └── politics.csv ├── SocialMedia_Twitter │ ├── app.py │ ├── index.py │ ├── mentions.py │ ├── other.py │ └── trends.py └── VizForGood │ ├── Scatter_mapbox │ ├── Sunny Street - Patient data 3 years.csv │ ├── Volaby-Sunny_Street-detailed-stats 2019 - 2021 - V3.csv │ ├── assets │ │ └── image3.jpg │ ├── jupyter-summer-streets.ipynb │ └── summer_streets.py │ └── Treemap-choropleth │ ├── Vizforsocialgood.xlsx │ └── sankey.py ├── Bootstrap ├── A_Join_me.md ├── Berlin_crimes.csv ├── Card-Advanced │ ├── background_image_link.py │ ├── live_card.py │ ├── minimal_card.py │ └── side_by_side.py ├── Complete_Guide │ └── live_bootstrap.py ├── Side-Bar │ ├── iranian_students.csv │ └── side_bar.py ├── Space_Corrected.csv ├── Stying │ ├── Dash-Bootsrap5-styling.py │ └── Readme.md ├── assets │ └── spinner_styling.css ├── bootstrap_card.py ├── bootstrap_collapse.py ├── bootstrap_collapse2.py ├── bootstrap_intro.py ├── bootstrap_modal.py └── spinners_bar.py ├── Callbacks ├── Basic Callback │ ├── Mutual-Funds.csv │ └── basic_callback.py ├── Client-side-callback │ ├── clientside_call.py │ ├── clientside_interval.py │ ├── clientside_win_api.py │ ├── jupyter-clientside-call.ipynb │ ├── jupyter-clientside-interval.ipynb │ ├── jupyter-clientside-win-api.ipynb │ ├── opsales.csv │ └── opsales1.csv ├── Pattern Matching Callbacks │ ├── Caste.csv │ └── dynamic_callbacks.py ├── chained_callback │ ├── Join_Me.md │ ├── chained_fig_postset.py │ ├── chained_fig_preset.py │ ├── fig_postset_jupyterlab.ipynb │ ├── fig_preset_jupyterlab.ipynb │ └── social-capital-project.csv └── clientside-js-charts │ ├── app.py │ ├── assets │ ├── appexcahrts.js │ └── herpers.js │ └── data.py ├── Cytoscape ├── assets │ └── sunny-and-cloud.jpg ├── layout-u-interactivity.py ├── layout-u-interactvty-jupyter-dash.ipynb ├── networks-jupyter-dash.ipynb ├── networks.py ├── org-data.csv ├── styling-jupyter-dash.ipynb └── styling.py ├── Dash Components ├── BeforeAfter │ ├── assets │ │ ├── beirut1.jpg │ │ ├── beirut2.jpg │ │ ├── chemistry1.jpg │ │ ├── chemistry2.jpg │ │ ├── ciona-egg1.png │ │ ├── ciona-egg2.png │ │ ├── reef1.jpg │ │ └── reef2.jpg │ └── before-after.py ├── Button │ └── app.py ├── Carousel │ ├── assets │ │ ├── Chapulin1.jpg │ │ ├── Chapulin2.jpg │ │ └── Chapulin3.jpg │ ├── jupyter-carousel.ipynb │ └── python-carousel.py ├── Checklist │ ├── assets │ │ └── checklist.css │ ├── challenges.txt │ ├── checkbox.py │ ├── easy_challenge_solution.py │ ├── hard_challenge_solution.py │ └── medium_challenge_solution.py ├── Daq_Components │ ├── daq.py │ ├── daq2.py │ ├── daq2_4_jupyterlab.ipynb │ └── daq_4_jupyterlab.ipynb ├── Dash-Player │ └── app.py ├── DatePickerRange │ ├── Sidewalk_Caf__Licenses_and_Applications.csv │ └── datepicker.py ├── Download │ ├── assets │ │ ├── bees-by-Lisa-from-Pexels.jpg │ │ └── data_file.txt │ └── download_button.py ├── Dropdown │ ├── Urban_Park_Ranger_Animal_Condition.csv │ ├── assets │ │ └── bWLwgP.css │ └── dropdown.py ├── Graph │ └── dash-graph.py ├── Image Annotations-Canvas │ ├── Late-Stage_Female_Breast_Cancer_Incidence_Rate__cases_per_100_000_females.csv │ └── image_annot.py ├── Input_element │ ├── challenge_solution.py │ ├── dup_bees.csv │ ├── input_non_text.py │ ├── input_text.py │ └── the_challenge.txt ├── Interval │ └── interval.py ├── Markdown │ └── markdown_app.py ├── Range_Slider │ ├── assets │ │ └── styling.css │ └── rangeslider.py ├── Slider │ ├── app.py │ └── severe-storms.csv ├── Store │ └── data_share.py └── Upload │ ├── Caste.csv │ ├── Jup_uploading.ipynb │ └── uploading.py ├── Dash_Interactive_Graphs ├── Bar_Chart │ └── Bird Strikes.csv ├── Bubble_with_link │ └── acled_conflictexposure.csv ├── Candle_OHLC │ ├── finance-charts.py │ └── oil_prices.csv ├── ClickData │ └── nyc_opendata.py ├── DataTable │ ├── assets │ │ └── bWLwgP.css │ └── datatable.py ├── Line_chart │ ├── assets │ │ └── bWLwgP.css │ └── line.py ├── Scatter_Matrix │ ├── scatter_mtrx.py │ ├── scatter_mtrx_4_jupyterlab.ipynb │ └── social_capital.csv ├── Scatter_mapbox │ ├── assets │ │ └── venues_styling.css │ └── recycling.py ├── bar.py ├── choro_map.py ├── dash-altair.py ├── domain-notable-ai-system.csv ├── line-pie.py ├── pie.py └── scatter.py ├── Dash_More_Advanced_Stuff ├── API │ ├── finance │ │ ├── challenge.txt │ │ ├── challenge_solution.py │ │ └── finance_api.py │ └── weather │ │ ├── assets │ │ └── styling.css │ │ ├── challenges.txt │ │ ├── easy_challenge_solution.py │ │ ├── hard_challenge_solution.py │ │ ├── medium_challenge_solution.py │ │ └── weather_api.py ├── BigQuery │ ├── Dash-BigQuery.py │ ├── JupyterLab-Dash-BQ.ipynb │ └── jupyter-BQ.ipynb ├── CRUD_app │ ├── crud.py │ └── crud_dash_postgresql.py ├── Dash_Labs │ ├── jup_powerful_app.ipynb │ ├── jup_short_app.ipynb │ ├── loger_powerful_app.py │ └── short_app.py ├── Dash_Mobile │ ├── assets │ │ └── bWLwgP.css │ ├── data.txt │ ├── mobile_app.py │ └── mobile_app_bootstrap.py ├── Dash_with_chatGPT │ └── dash-GPT.py ├── Dynamic Callbacks │ ├── dynamic_callbacks.py │ └── dynamic_remove.py ├── Email_Alerts │ ├── example.py │ └── technology_stocks.csv ├── GitHub Pull Request │ └── Readme.md ├── Intro to Python multipage │ ├── App-A │ │ ├── app.py │ │ └── pages │ │ │ ├── pg1.py │ │ │ ├── pg2.py │ │ │ └── pg3.py │ ├── App-B │ │ ├── app.py │ │ ├── assets │ │ │ └── smoking2.jpg │ │ └── pages │ │ │ ├── pg1.py │ │ │ ├── pg2.py │ │ │ └── pg3.py │ └── App-C │ │ └── src │ │ ├── app.py │ │ ├── assets │ │ ├── pg1.png │ │ ├── pg3.png │ │ └── smoking2.jpg │ │ └── pages │ │ ├── pg1.py │ │ ├── pg2.py │ │ └── pg3.py ├── Lottie │ └── lottie.py ├── Multipage_app │ ├── app.py │ ├── app2_with_sidebar.py │ └── pages │ │ ├── bar_charts.py │ │ ├── heatmaps.py │ │ ├── histograms.py │ │ └── not_found_404.py ├── NLP │ └── nlpDash.py ├── PowerBi-to-Dash │ └── Bitcoin │ │ ├── Jupyter_Bitcoin.ipynb │ │ ├── bitcoin-analysis.py │ │ └── testing.json ├── Sharing_data_multipage_app │ ├── app.py │ └── pages │ │ ├── bargraph.py │ │ ├── not_found_404.py │ │ └── table.py └── Speed_Up_Dash │ ├── faster_graph.py │ ├── faster_table.py │ ├── normal_graph.py │ └── normal_table.py ├── Dash_and_Databases └── MongoDB │ ├── Jupyter_Mong_Dash.ipynb │ ├── Mongo-Guide.md │ ├── data.py │ ├── live-mongodb-dash.py │ ├── long_data.py │ ├── mongo_dash_datatable.py │ ├── mongo_databases.py │ └── test_mongo.py ├── DataTable ├── Conditional_Formatting │ ├── con_formatting.py │ ├── medical supplies.csv │ └── table_bars.py ├── Sort-filter-select │ └── selecting.py ├── Tips-and-tricks │ ├── filter-datatable.py │ ├── hide-x-cols.py │ ├── pandas-w-dash.py │ └── sort-x-cols.py ├── Tooltip │ ├── datatable-tooltip.py │ └── medical_supplies_tooltip.csv ├── datatable_intro_and_sort.py ├── dropdown_in_DataTable.py ├── height.py ├── internet_cleaned.csv ├── styling.py └── width_datatable.py ├── Deploy_App_to_Web ├── Authentication │ ├── assets │ │ └── bWLwgP.css │ ├── data.md │ └── datatable.py ├── Heroku-Dash-tools │ ├── Berlin_crimes.csv │ ├── Graffiti_analysis.py │ └── animal_shelter_support.py ├── Heroku_App │ ├── COVID-19-geographic-disbtribution-worldwide-2020-03-29.csv │ ├── DataTable.py │ ├── assets │ │ └── bWLwgP.css │ └── requirements.txt ├── Kaggle-GGL-Collab │ ├── Dash-on-GGL-Colab.ipynb │ └── Dash-on-Kaggle.ipynb ├── Multipage_App │ ├── app.py │ ├── apps │ │ ├── __init__.py │ │ ├── global_sales.py │ │ └── vgames.py │ ├── assets │ │ └── bWLwgP.css │ ├── datasets │ │ ├── opsales.md │ │ └── vgsales.md │ └── index.py ├── PWA-Phone-App │ └── res-seating │ │ ├── Open_Restaurant_Applications.csv │ │ ├── Procfile │ │ ├── assets │ │ ├── images │ │ │ ├── android-launchericon-144-144.png │ │ │ ├── android-launchericon-192-192.png │ │ │ ├── android-launchericon-48-48.png │ │ │ ├── android-launchericon-512-512.png │ │ │ ├── android-launchericon-72-72.png │ │ │ └── android-launchericon-96-96.png │ │ ├── manifest.json │ │ ├── mylogo.png │ │ ├── offline.html │ │ └── sw01.js │ │ ├── phoneapp.py │ │ └── requirements.txt ├── PythonAnyWhere │ ├── assets │ │ └── mydecoration.css │ ├── elections.py │ ├── politics.csv │ └── supporting_doc.md └── my-app │ ├── cheatsheet.md │ ├── dash_app.py │ └── space-mission-data.csv ├── Good_to_Know ├── Callback-basics │ ├── dropdown.py │ ├── graph.py │ ├── radio-slider.py │ ├── radio.py │ └── slider.py ├── Dash2-14 │ ├── app.py │ └── pages │ │ ├── home.py │ │ └── page-1.py ├── Dash2.0 │ ├── Exercises │ │ ├── Assignments.md │ │ ├── solution-1.py │ │ ├── solution-2.py │ │ ├── solution-3.py │ │ ├── solution-4.py │ │ └── solution-5.py │ ├── Jupyter │ │ ├── j-app-with-graph.ipynb │ │ ├── j-dash2.ipynb │ │ ├── j-hello-world.ipynb │ │ └── j-interactive-app.ipynb │ ├── app-with-graph.py │ ├── dash2.py │ ├── hello-world.py │ ├── interactive-app.py │ ├── learning-resources.md │ └── social_capital.csv ├── Layout-Design │ ├── layout-intro.py │ └── layout-intro2.py ├── Polars │ └── dash_w_polars.py ├── dash-with-math.py └── resume │ ├── app.py │ ├── assets │ └── Berlin_crimes.csv │ ├── pages │ ├── app2.py │ ├── app3.py │ ├── contact.py │ ├── home.py │ ├── projects.py │ ├── side_bar.py │ └── testimonials.py │ └── requirements.txt ├── LangChain ├── Agents │ ├── Pandas-Agent │ │ ├── World-Stock-Prices-Data-small.csv │ │ └── app.py │ ├── Plotly AI │ │ ├── Multi Stock │ │ │ ├── app_file.md │ │ │ ├── news_multiple.py │ │ │ └── sp500.csv │ │ └── One Stock │ │ │ ├── app_file.md │ │ │ ├── news.py │ │ │ ├── news_df.csv │ │ │ └── sp500.csv │ └── web-search │ │ ├── .env │ │ ├── app.py │ │ └── requirements.txt ├── Gmail-agent │ └── app.py ├── Graph-Insights │ ├── app-demo.py │ └── domain-notable-ai-system.csv └── Quickstart │ ├── llm-chain-exercise1.py │ ├── llm-chain-exercise2.py │ ├── llm-chain-exercise3.py │ ├── llm-chain.py │ └── retrieval-chain.py ├── My-Dear-Supporters.md ├── Other ├── Altair-matplot-bokeh │ ├── jup-matplot-dash.ipynb │ ├── mat_alt_bok.py │ └── matplot-dash.py ├── COVID19_women │ └── covid.py ├── Create Virtual Environment │ └── mydash1_8.yml ├── DPhi Presentation │ ├── Dash-app.py │ ├── MPVDataset.csv │ ├── bar-plot.py │ ├── jupyter-bar-plot.ipynb │ ├── jupyter-dash-app.ipynb │ ├── jupyter-sunburst.ipynb │ ├── sunburst.py │ └── z-links.md ├── Dash_Introduction │ ├── intro.py │ ├── intro_bees.csv │ ├── solution_bar.py │ ├── solution_line.py │ └── the_challenges.txt ├── Dash_Pannellum │ └── app.py ├── Data-Dash-app-gallery │ ├── bad_apples_frames.json │ └── badapple_frames.json ├── Excel_Dash │ ├── excel_plotly_dash.py │ ├── practice.py │ └── vgsales.csv ├── Gender_Inequality │ └── gender_ineq.py ├── Monterrey │ ├── add-alert-solution.py │ ├── add-dropdown-solucion.py │ ├── airbnb.csv │ ├── exercises.md │ ├── figure-px.py │ ├── intro_app.py │ ├── mexico-dash.py │ └── resources.md ├── NYC Marathon Results, 2024 - Marathon Runner Results.csv ├── Presentation Dash │ ├── app.py │ ├── intro-dash.py │ ├── intro-plotly.py │ ├── more-exercises.md │ ├── solucion-add-dropdown.py │ └── solution-add-alert.py ├── Suicidal_Data │ ├── age_suicide_rates.py │ ├── sex_suicide_rates.py │ └── suicide_rates.py ├── Vizro │ └── Data-apps-Vizro │ │ ├── actions.py │ │ ├── filter_data.py │ │ ├── multipage.py │ │ ├── parameters.py │ │ └── parameters_ex2.py ├── my-portfolio.csv ├── myscript.js └── tickers_yahoo.csv ├── Plotly_Graphs ├── 3d_scatter │ └── scatter3d.py ├── Animated_Scatter │ └── gender_ineq.py ├── Bar │ └── bar.py ├── BigData │ ├── Join_me.md │ ├── chicago_shader.py │ └── nyc_shader.py ├── Dot_Plot │ └── strip_plot.py ├── Heatmaps │ ├── An_ask.md │ ├── Berlin_crimes.csv │ ├── Historical NBA Performance.csv │ ├── customer_churn.csv │ ├── heatmap.py │ ├── heatmap_churn.py │ ├── heatmap_time.py │ └── jupyterlab_heatmap_time.ipynb ├── Icicle │ ├── Bills_of_Sale_of_Enslaved_Individuals__1718-1862.csv │ └── icicle_chart.py ├── Pie │ └── pie.py ├── Plotly_Introduction │ ├── bird-window-collision-death.csv │ └── plotly_charts.py ├── Racing_Bar_Graph │ └── suicide_rates.py ├── Radar-chart │ ├── ExistingHotels_CustomerVisitsdata-1554810038262.csv │ ├── NBA_Referee_Stats.csv │ ├── radar-hotel.py │ └── radarplot.py ├── Scatter_Plot │ └── scatterplot.py ├── Sunburst-sm │ ├── Sunburst-sm.py │ └── assets │ │ └── bWLwgP.css ├── Sunburst │ ├── challenge.txt │ ├── solution_challenge.py │ └── sunburst.py └── ViolinBox │ ├── challenge_solution.py │ ├── reddit │ ├── dup_bees.py │ └── dup_bees.txt │ ├── violin.py │ └── violin_challenge.txt ├── README.md ├── Supporters └── add-image │ └── image_to_graph.py ├── dash-plotly-logo.png ├── vgsales.csv └── z-share-doc.md /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: [Coding-with-Adam] 4 | patreon: charmingdata 5 | -------------------------------------------------------------------------------- /AI/Banking/requirements.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Coding-with-Adam/Dash-by-Plotly/f53325eb47d610b960b8d97fd48bec2520cf18c1/AI/Banking/requirements.txt -------------------------------------------------------------------------------- /AI/Create-Your-Own-GPT/Defense.csv: -------------------------------------------------------------------------------- 1 | Team,Interceptions,Sacks,Fumbles forced,Fumbles recovered,Fumbles recovered to touchdown 2 | San Francisco 49ers,19,43,10,6,0 3 | Chicago Bears,18,25,12,5,0 4 | Cincinnati Bengals,15,38,9,8,0 5 | Buffalo Bills,13,45,13,10,0 6 | Denver Broncos,11,36,17,13,1 7 | Cleveland Browns,14,41,11,9,1 8 | Tampa Bay Buccaneers,11,40,14,8,0 9 | Arizona Cardinals,9,32,6,6,1 10 | Los Angeles Chargers,7,44,11,10,0 11 | Kansas City Chiefs,8,46,13,8,1 12 | Indianapolis Colts,15,46,17,9,1 13 | Washington Commanders,6,38,10,9,0 14 | Dallas Cowboys,13,40,13,7,1 15 | Miami Dolphins,13,48,13,9,0 16 | Philadelphia Eagles,6,39,14,8,1 17 | Atlanta Falcons,7,30,15,8,0 18 | New York Giants,13,24,13,9,0 19 | Jacksonville Jaguars,14,30,12,11,0 20 | New York Jets,12,39,12,7,1 21 | Detroit Lions,9,30,9,6,0 22 | Green Bay Packers,6,34,8,10,1 23 | Carolina Panthers,8,20,3,3,0 24 | New England Patriots,9,29,8,5,0 25 | Las Vegas Raiders,11,36,12,8,1 26 | Los Angeles Rams,8,30,6,4,0 27 | Baltimore Ravens,11,50,12,10,0 28 | New Orleans Saints,14,30,7,8,1 29 | Seattle Seahawks,11,39,11,8,0 30 | Pittsburgh Steelers,13,39,15,8,1 31 | Houston Texans,12,38,13,8,0 32 | Tennessee Titans,4,41,11,8,0 33 | Minnesota Vikings,11,41,20,9,2 34 | -------------------------------------------------------------------------------- /AI/Create-Your-Own-GPT/Standings.csv: -------------------------------------------------------------------------------- 1 | Team,Win,Loss,Tie,PCT,Points for,Points against,Diff,Streak 2 | Baltimore Ravens,11,3,0,0.786,384,225,159,W4 3 | San Francisco 49ers,11,3,0,0.786,425,234,191,W6 4 | Dallas Cowboys,10,4,0,0.714,431,264,167,L1 5 | Detroit Lions,10,4,0,0.714,382,331,51,W1 6 | Miami Dolphins,10,4,0,0.714,441,294,147,W1 7 | Philadelphia Eagles,10,4,0,0.714,359,341,18,L3 8 | Cleveland Browns,9,5,0,0.643,309,289,20,W2 9 | Kansas City Chiefs,9,5,0,0.643,319,245,74,W1 10 | Buffalo Bills,8,6,0,0.571,379,254,125,W2 11 | Cincinnati Bengals,8,6,0,0.571,307,311,-4,W3 12 | Houston Texans,8,6,0,0.571,306,295,11,W1 13 | Indianapolis Colts,8,6,0,0.571,344,343,1,W1 14 | Jacksonville Jaguars,8,6,0,0.571,319,313,6,L3 15 | LA Rams,8,7,0,0.533,357,332,25,W2 16 | Denver Broncos,7,7,0,0.5,304,351,-47,L1 17 | Minnesota Vikings,7,7,0,0.5,290,269,21,L1 18 | New Orleans Saints,7,8,0,0.467,331,297,34,L1 19 | Pittsburgh Steelers,7,7,0,0.5,223,280,-57,L3 20 | Seattle Seahawks,7,7,0,0.5,300,335,-35,W1 21 | Tampa Bay Buccaneers,7,7,0,0.5,296,290,6,W3 22 | Atlanta Falcons,6,8,0,0.429,258,278,-20,L2 23 | Green Bay Packers,6,8,0,0.429,300,301,-1,L2 24 | Las Vegas Raiders,6,8,0,0.429,265,280,-15,W1 25 | Chicago Bears,5,9,0,0.357,287,329,-42,L1 26 | LA Chargers,5,9,0,0.357,303,345,-42,L2 27 | NY Giants,5,9,0,0.357,189,338,-149,L1 28 | NY Jets,5,9,0,0.357,201,287,-86,L1 29 | Tennessee Titans,5,9,0,0.357,257,301,-44,L1 30 | Washington Commanders,4,10,0,0.286,281,423,-142,L5 31 | Arizona Cardinals,3,11,0,0.214,259,376,-117,L1 32 | New England Patriots,3,11,0,0.214,186,299,-113,L1 33 | Carolina Panthers,2,12,0,0.143,206,348,-142,W1 34 | -------------------------------------------------------------------------------- /AI/EmbedChain-Chatbot/Birds Flying Into Windows.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Coding-with-Adam/Dash-by-Plotly/f53325eb47d610b960b8d97fd48bec2520cf18c1/AI/EmbedChain-Chatbot/Birds Flying Into Windows.pdf -------------------------------------------------------------------------------- /AI/EmbedChain-Chatbot/app.py: -------------------------------------------------------------------------------- 1 | import os 2 | from dash import Dash, html, dcc, callback, Input, Output, State 3 | from embedchain import App 4 | # pip install -r requirements.txt 5 | 6 | # Create a bot instance 7 | os.environ["OPENAI_API_KEY"] = "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" 8 | ai_bot = App.from_config(config_path="config.yaml") 9 | 10 | # Embed resources: websites, PDFs, videos 11 | ai_bot.add("https://www.wildbirdfund.org/page-sitemap.xml", data_type="sitemap") 12 | # ai_bot.add("https://nycaudubon.org/our-work/conservation/project-safe-flight") 13 | # ai_bot.add("Birds Flying Into Windows.pdf", data_type='pdf_file') 14 | # ai_bot.add("https://www.youtube.com/watch?v=l8LDTRxc0Bc") 15 | 16 | app = Dash() 17 | app.layout = html.Div([ 18 | html.H1('WILD BIRD FUND'), 19 | html.H3('This AI Chatbot was trained on the wildbirdfund website. It was built to help people understand how to keep city birds ' 20 | 'safe and take care of them when injured.'), 21 | html.Label('Ask your question:'), 22 | html.Br(), 23 | dcc.Textarea(id='question-area', value=None, style={'width': '25%', 'height': 100}), 24 | html.Br(), 25 | html.Button(id='submit-btn', children='Submit'), 26 | dcc.Loading(id="load", children=html.Div(id='response-area', children='')), 27 | ]) 28 | 29 | @callback( 30 | Output('response-area', 'children'), 31 | Input('submit-btn', 'n_clicks'), 32 | State('question-area', 'value'), 33 | prevent_initial_call=True 34 | ) 35 | def create_response(_, question): 36 | # What kind of glass should I use to keep birds safe from window collisions? 37 | answer = ai_bot.query(question) 38 | return answer 39 | 40 | 41 | if __name__ == '__main__': 42 | app.run_server(debug=False) 43 | -------------------------------------------------------------------------------- /AI/EmbedChain-Chatbot/config.yaml: -------------------------------------------------------------------------------- 1 | embedder: 2 | provider: openai 3 | config: 4 | model: 'text-embedding-ada-002' 5 | -------------------------------------------------------------------------------- /AI/EmbedChain-Chatbot/requirements.txt: -------------------------------------------------------------------------------- 1 | dash==2.15.0 2 | embedchain==0.1.67 3 | lxml==5.1.0 4 | youtube-transcript-api==0.6.2 5 | pytube==15.0.0 6 | -------------------------------------------------------------------------------- /AI/Window-Bird-Protector/Birds Flying Into Windows.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Coding-with-Adam/Dash-by-Plotly/f53325eb47d610b960b8d97fd48bec2520cf18c1/AI/Window-Bird-Protector/Birds Flying Into Windows.pdf -------------------------------------------------------------------------------- /AI/Window-Bird-Protector/bird collisions.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Coding-with-Adam/Dash-by-Plotly/f53325eb47d610b960b8d97fd48bec2520cf18c1/AI/Window-Bird-Protector/bird collisions.pdf -------------------------------------------------------------------------------- /AI/Window-Bird-Protector/bird window type.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Coding-with-Adam/Dash-by-Plotly/f53325eb47d610b960b8d97fd48bec2520cf18c1/AI/Window-Bird-Protector/bird window type.pdf -------------------------------------------------------------------------------- /AI/Window-Bird-Protector/resources.txt: -------------------------------------------------------------------------------- 1 | Data taken from: 2 | https://abcbirds.org/blog/truth-about-birds-and-glass-collisions/ 3 | https://www.wildbirdfund.org/ 4 | https://link.springer.com/article/10.1007/s11252-022-01304-w 5 | https://abcbirds.org/glass-collisions/resources/ 6 | -------------------------------------------------------------------------------- /AI/Window-Bird-Protector/window type.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Coding-with-Adam/Dash-by-Plotly/f53325eb47d610b960b8d97fd48bec2520cf18c1/AI/Window-Bird-Protector/window type.pdf -------------------------------------------------------------------------------- /Ag-Grid/custom-components/assets/dashAgGridComponentFunctions.js: -------------------------------------------------------------------------------- 1 | var dagcomponentfuncs = (window.dashAgGridComponentFunctions = window.dashAgGridComponentFunctions || {}); 2 | 3 | 4 | dagcomponentfuncs.Button = function (props) { 5 | const {setData, data} = props; 6 | 7 | function onClick() { 8 | setData(); 9 | } 10 | return React.createElement( 11 | 'button', 12 | { 13 | onClick: onClick, 14 | className: props.className, 15 | }, 16 | props.value 17 | ); 18 | }; 19 | 20 | 21 | 22 | /* 23 | dagcomponentfuncs.DCC_GraphClickData = function (props) { 24 | const {setData} = props; 25 | function setProps() { 26 | const graphProps = arguments[0]; 27 | if (graphProps['clickData']) { 28 | setData(graphProps); 29 | } 30 | } 31 | return React.createElement(window.dash_core_components.Graph, { 32 | figure: props.value, 33 | setProps, 34 | style: {height: '100%'}, 35 | config: {displayModeBar: false}, 36 | }); 37 | }; 38 | 39 | */ 40 | -------------------------------------------------------------------------------- /Ag-Grid/getting-started/app.py: -------------------------------------------------------------------------------- 1 | import micropip 2 | await micropip.install("dash_ag_grid") 3 | await micropip.install('openpyxl') 4 | 5 | import dash_ag_grid as dag 6 | from dash import Dash, html, dcc 7 | import plotly.express as px 8 | import pandas as pd 9 | import base64 10 | def create_onedrive_directdownload (onedrive_link): 11 | data_bytes64 = base64.b64encode(bytes(onedrive_link, 'utf-8')) 12 | data_bytes64_String = data_bytes64.decode('utf-8').replace('/','_').replace('+','-').rstrip("=") 13 | resultUrl = f"https://api.onedrive.com/v1.0/shares/u!{data_bytes64_String}/root/content" 14 | return resultUrl 15 | 16 | url = create_onedrive_directdownload("https://1drv.ms/x/s!AoKPiuofdvp_ltlppz8OsI8UmSVP1w?e=UVI006") 17 | df = pd.read_excel(url, engine='openpyxl') 18 | print(df.head()) 19 | 20 | app = Dash(__name__) 21 | app.layout = html.Div([ 22 | dag.AgGrid( 23 | rowData=df.to_dict("records"), 24 | columnDefs=[{"field": i} for i in df.columns], 25 | # columnSize="sizeToFit", 26 | ), 27 | dcc.Graph(figure=px.histogram(df, x=df.columns[1])) 28 | ]) 29 | 30 | if __name__ == '__main__': 31 | app.run(debug=True) 32 | -------------------------------------------------------------------------------- /Ag-Grid/icon-dropdown-link/assets/prohibited.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Coding-with-Adam/Dash-by-Plotly/f53325eb47d610b960b8d97fd48bec2520cf18c1/Ag-Grid/icon-dropdown-link/assets/prohibited.png -------------------------------------------------------------------------------- /Ag-Grid/icon-dropdown-link/assets/safe.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Coding-with-Adam/Dash-by-Plotly/f53325eb47d610b960b8d97fd48bec2520cf18c1/Ag-Grid/icon-dropdown-link/assets/safe.png -------------------------------------------------------------------------------- /Ag-Grid/introduction/ag-grid-intro.py: -------------------------------------------------------------------------------- 1 | from dash import Dash, html, dcc, Input, Output # pip install dash 2 | import dash_ag_grid as dag # pip install dash-ag-grid 3 | import pandas as pd # pip install pandas 4 | import plotly.express as px 5 | 6 | df = px.data.tips() 7 | 8 | table = dag.AgGrid( 9 | id="my-table", 10 | rowData=df.to_dict("records"), # **need it 11 | columnDefs=[{"field": i} for i in df.columns], # **need it 12 | defaultColDef={"resizable": True, "sortable": True, "filter": True, "minWidth":115}, 13 | columnSize="sizeToFit", 14 | dashGridOptions={"pagination": True, "paginationPageSize":10}, 15 | className="ag-theme-alpine", # https://dashaggrid.pythonanywhere.com/layout/themes 16 | ) 17 | graph = dcc.Graph(id="my-graph", figure={}) 18 | 19 | 20 | app = Dash(__name__) 21 | app.layout = html.Div([graph, table]) 22 | 23 | 24 | @app.callback(Output("my-graph", "figure"), Input("my-table", "virtualRowData")) 25 | def display_cell_clicked_on(vdata): 26 | if vdata: 27 | dff = pd.DataFrame(vdata) 28 | return px.histogram(dff, x="total_bill", y="tip", color="sex", marginal="rug", hover_data=df.columns) 29 | else: 30 | return px.histogram(df, x="total_bill", y="tip", color="sex", marginal="rug", hover_data=df.columns) 31 | 32 | 33 | if __name__ == "__main__": 34 | app.run_server(debug=True) 35 | -------------------------------------------------------------------------------- /Ag-Grid/introduction/ag-grid-intro2.py: -------------------------------------------------------------------------------- 1 | from dash import Dash, html, dcc, Input, Output 2 | import dash_ag_grid as dag 3 | import pandas as pd 4 | import plotly.express as px 5 | 6 | df = px.data.tips() 7 | 8 | # create a number-based filter for columns with integer data 9 | col_defs = [] 10 | for i in df.columns: 11 | if i=="tip" or i=="total_bill" or i=="size": 12 | col_defs.append({"field": i, "filter": "agNumberColumnFilter"}) 13 | else: 14 | col_defs.append({"field": i}) 15 | 16 | table = dag.AgGrid( 17 | id="my-table", 18 | rowData=df.to_dict("records"), 19 | columnDefs=col_defs, 20 | defaultColDef={"resizable": True, "sortable": True, "filter": True, "minWidth":115}, 21 | columnSize="sizeToFit", 22 | dashGridOptions={"pagination": True, "paginationPageSize":10}, 23 | className="ag-theme-alpine", 24 | ) 25 | graph2 = dcc.Graph(id="my-graph2", figure={}) 26 | 27 | 28 | app = Dash(__name__) 29 | app.layout = html.Div([graph2, table]) 30 | 31 | 32 | @app.callback(Output('my-graph2', 'figure'), Input('my-table', 'cellClicked')) 33 | def display_cell_clicked_on(cdata): 34 | if cdata: 35 | print(cdata) 36 | cell_row = int(cdata['rowId']) 37 | new_color = ["yellow" if x==cell_row else "blue" for x in range(0,len(df))] 38 | new_size = [30 if x==cell_row else 10 for x in range(0,len(df))] 39 | 40 | fig = px.scatter(df, x="total_bill", y="tip") 41 | fig['data'][0]['marker']['color'] = new_color 42 | fig['data'][0]['marker']['size'] = new_size 43 | return fig 44 | 45 | else: 46 | return px.scatter(df, x="total_bill", y="tip") 47 | 48 | 49 | if __name__ == "__main__": 50 | app.run_server(debug=False, port=8045) 51 | -------------------------------------------------------------------------------- /Ag-Grid/row-deletion/finance_survey.csv: -------------------------------------------------------------------------------- 1 | Gender,Age,Money,Stock_Market,Objective,Source 2 | Female,34,2545,Yes,Retirement Plan,Newspapers 3 | Female,23,326654,No,Health Care,Consultants 4 | Male,30,48752,Yes,Retirement Plan,Television 5 | Male,22,172191,Yes,Retirement Plan,Internet 6 | Female,24,195294,No,Retirement Plan,Internet 7 | Female,24,218398,No,Retirement Plan,Internet 8 | Female,27,241501,Yes,Retirement Plan,Consultants 9 | Male,21,264605,Yes,Retirement Plan,Newspapers 10 | Male,35,287708,Yes,Retirement Plan,Television 11 | Male,31,310812,Yes,Retirement Plan,Newspapers 12 | Female,35,333915,Yes,Retirement Plan,Consultants 13 | Male,29,357019,Yes,Retirement Plan,Consultants 14 | Female,21,380122,No,Education,Internet 15 | Female,28,4587,Yes,Retirement Plan,Newspapers 16 | Female,25,225,Yes,Health Care,Consultants 17 | Male,27,3268,Yes,Health Care,Newspapers 18 | Female,28,125785,Yes,Health Care,Television 19 | Male,27,168653,Yes,Retirement Plan,Consultants 20 | Male,29,231433,Yes,Retirement Plan,Newspapers 21 | Male,26,294213,Yes,Health Care,Newspapers 22 | Male,29,356993,Yes,Retirement Plan,Consultants 23 | Female,24,419773,Yes,Health Care,Newspapers 24 | Male,27,482553,Yes,Retirement Plan,Consultants 25 | Male,25,545333,Yes,Health Care,Consultants 26 | Female,26,608113,Yes,Retirement Plan,Newspapers 27 | Female,32,670893,Yes,Retirement Plan,Consultants 28 | Male,26,733673,Yes,Retirement Plan,Consultants 29 | Male,31,796453,Yes,Health Care,Television 30 | Male,29,859233,Yes,Retirement Plan,Television 31 | Female,34,922013,Yes,Retirement Plan,Newspapers 32 | Male,27,984793,No,Education,Television 33 | Female,31,457,Yes,Retirement Plan,Consultants 34 | Male,27,6897,Yes,Health Care,Newspapers 35 | Male,26,13337,Yes,Education,Newspapers 36 | Male,27,19777,Yes,Health Care,Consultants 37 | Male,30,26217,Yes,Health Care,Consultants 38 | Male,30,32657,Yes,Retirement Plan,Newspapers 39 | Male,25,39097,Yes,Health Care,Consultants 40 | Male,31,45537,Yes,Health Care,Newspapers 41 | Male,29,51977,Yes,Retirement Plan,Consultants 42 | -------------------------------------------------------------------------------- /Ag-Grid/save-table/data/canada_finance_survey.csv: -------------------------------------------------------------------------------- 1 | Gender,Age,Money,Stock_Market,Objective,Source 2 | Female,34,2545,Yes,Retirement Plan,Newspapers 3 | Female,23,326654,No,Health Care,Consultants 4 | Male,30,48752,Yes,Retirement Plan,Television 5 | Male,22,172191,Yes,Retirement Plan,Internet 6 | Female,24,195294,No,Retirement Plan,Internet 7 | Female,24,218398,No,Retirement Plan,Internet 8 | Female,27,241501,Yes,Retirement Plan,Consultants 9 | Male,21,264605,Yes,Retirement Plan,Newspapers 10 | Male,35,287708,Yes,Retirement Plan,Television 11 | Male,31,310812,Yes,Retirement Plan,Newspapers 12 | Female,35,333915,Yes,Retirement Plan,Consultants 13 | Male,29,357019,Yes,Retirement Plan,Consultants 14 | Female,21,380122,No,Education,Internet 15 | Female,28,4587,Yes,Retirement Plan,Newspapers 16 | Female,25,225,Yes,Health Care,Consultants 17 | Male,27,3268,Yes,Health Care,Newspapers 18 | Female,28,125785,Yes,Health Care,Television 19 | Male,27,168653,Yes,Retirement Plan,Consultants 20 | Male,29,231433,Yes,Retirement Plan,Newspapers 21 | Male,26,294213,Yes,Health Care,Newspapers 22 | Male,29,356993,Yes,Retirement Plan,Consultants 23 | Female,24,419773,Yes,Health Care,Newspapers 24 | Male,27,482553,Yes,Retirement Plan,Consultants 25 | Male,25,545333,Yes,Health Care,Consultants 26 | Female,26,608113,Yes,Retirement Plan,Newspapers 27 | Female,32,670893,Yes,Retirement Plan,Consultants 28 | Male,26,733673,Yes,Retirement Plan,Consultants 29 | Male,31,796453,Yes,Health Care,Television 30 | Male,29,859233,Yes,Retirement Plan,Television 31 | Female,34,922013,Yes,Retirement Plan,Newspapers 32 | Male,27,984793,No,Education,Television 33 | Female,31,457,Yes,Retirement Plan,Consultants 34 | Male,27,6897,Yes,Health Care,Newspapers 35 | Male,26,13337,Yes,Education,Newspapers 36 | Male,27,19777,Yes,Health Care,Consultants 37 | Male,30,26217,Yes,Health Care,Consultants 38 | Male,30,32657,Yes,Retirement Plan,Newspapers 39 | Male,25,39097,Yes,Health Care,Consultants 40 | Male,31,45537,Yes,Health Care,Newspapers 41 | Male,29,51977,Yes,Retirement Plan,Consultants 42 | -------------------------------------------------------------------------------- /Ag-Grid/save-table/data/dataset_1.csv: -------------------------------------------------------------------------------- 1 | Gender,Age,Money,Stock_Market,Objective,Source 2 | Female,77,2545,Yes,Retirement Plan,Newspapers 3 | Female,23,326654,No,Health Care,Consultants 4 | Male,30,48752,Yes,Retirement Plan,Television 5 | Male,22,172191,Yes,Retirement Plan,Internet 6 | Female,24,195294,No,Retirement Plan,Internet 7 | Female,24,218398,No,Retirement Plan,Internet 8 | Female,27,241501,Yes,Retirement Plan,Consultants 9 | Male,21,264605,Yes,Retirement Plan,Newspapers 10 | Male,35,287708,Yes,Retirement Plan,Television 11 | Male,31,310812,Yes,Retirement Plan,Newspapers 12 | Female,35,333915,Yes,Retirement Plan,Consultants 13 | Male,29,357019,Yes,Retirement Plan,Consultants 14 | Female,21,380122,No,Education,Internet 15 | Female,28,4587,Yes,Retirement Plan,Newspapers 16 | Female,25,225,Yes,Health Care,Consultants 17 | Male,27,3268,Yes,Health Care,Newspapers 18 | Female,28,125785,Yes,Health Care,Television 19 | Male,27,168653,Yes,Retirement Plan,Consultants 20 | Male,29,231433,Yes,Retirement Plan,Newspapers 21 | Male,26,294213,Yes,Health Care,Newspapers 22 | Male,29,356993,Yes,Retirement Plan,Consultants 23 | Female,24,419773,Yes,Health Care,Newspapers 24 | Male,27,482553,Yes,Retirement Plan,Consultants 25 | Male,25,545333,Yes,Health Care,Consultants 26 | Female,26,608113,Yes,Retirement Plan,Newspapers 27 | Female,32,670893,Yes,Retirement Plan,Consultants 28 | Male,26,733673,Yes,Retirement Plan,Consultants 29 | Male,31,796453,Yes,Health Care,Television 30 | Male,29,859233,Yes,Retirement Plan,Television 31 | Female,34,922013,Yes,Retirement Plan,Newspapers 32 | Male,27,984793,No,Education,Television 33 | Female,31,457,Yes,Retirement Plan,Consultants 34 | Male,27,6897,Yes,Health Care,Newspapers 35 | Male,26,13337,Yes,Education,Newspapers 36 | Male,27,19777,Yes,Health Care,Consultants 37 | Male,30,26217,Yes,Health Care,Consultants 38 | Male,30,32657,Yes,Retirement Plan,Newspapers 39 | Male,25,39097,Yes,Health Care,Consultants 40 | Male,31,45537,Yes,Health Care,Newspapers 41 | Male,29,51977,Yes,Retirement Plan,Consultants 42 | -------------------------------------------------------------------------------- /Ag-Grid/save-table/data/mydata10.csv: -------------------------------------------------------------------------------- 1 | Gender,Age,Money,Stock_Market,Objective,Source 2 | Female,11,2545,Yes,Retirement Plan,Newspapers 3 | Female,23,326654,No,Health Care,Consultants 4 | Male,30,48752,Yes,Retirement Plan,Television 5 | Male,22,172191,Yes,Retirement Plan,Internet 6 | Female,24,195294,No,Retirement Plan,Internet 7 | Female,24,218398,No,Retirement Plan,Internet 8 | Female,27,241501,Yes,Retirement Plan,Consultants 9 | Male,21,264605,Yes,Retirement Plan,Newspapers 10 | Male,35,287708,Yes,Retirement Plan,Television 11 | Male,31,310812,Yes,Retirement Plan,Newspapers 12 | Female,35,333915,Yes,Retirement Plan,Consultants 13 | Male,29,357019,Yes,Retirement Plan,Consultants 14 | Female,21,380122,No,Education,Internet 15 | Female,28,4587,Yes,Retirement Plan,Newspapers 16 | Female,25,225,Yes,Health Care,Consultants 17 | Male,27,3268,Yes,Health Care,Newspapers 18 | Female,28,125785,Yes,Health Care,Television 19 | Male,27,168653,Yes,Retirement Plan,Consultants 20 | Male,29,231433,Yes,Retirement Plan,Newspapers 21 | Male,26,294213,Yes,Health Care,Newspapers 22 | Male,29,356993,Yes,Retirement Plan,Consultants 23 | Female,24,419773,Yes,Health Care,Newspapers 24 | Male,27,482553,Yes,Retirement Plan,Consultants 25 | Male,25,545333,Yes,Health Care,Consultants 26 | Female,26,608113,Yes,Retirement Plan,Newspapers 27 | Female,32,670893,Yes,Retirement Plan,Consultants 28 | Male,26,733673,Yes,Retirement Plan,Consultants 29 | Male,31,796453,Yes,Health Care,Television 30 | Male,29,859233,Yes,Retirement Plan,Television 31 | Female,34,922013,Yes,Retirement Plan,Newspapers 32 | Male,27,984793,No,Education,Television 33 | Female,31,457,Yes,Retirement Plan,Consultants 34 | Male,27,6897,Yes,Health Care,Newspapers 35 | Male,26,13337,Yes,Education,Newspapers 36 | Male,27,19777,Yes,Health Care,Consultants 37 | Male,30,26217,Yes,Health Care,Consultants 38 | Male,30,32657,Yes,Retirement Plan,Newspapers 39 | Male,25,39097,Yes,Health Care,Consultants 40 | Male,31,45537,Yes,Health Care,Newspapers 41 | Male,29,51977,Yes,Retirement Plan,Consultants 42 | -------------------------------------------------------------------------------- /Analytic_Web_Apps/Financial/Join_me.md: -------------------------------------------------------------------------------- 1 | My goal is to make this a sustainable project for myself and my viewers. This code and videos are time-intensive, so if you appreciate my repository and tutorials and are able support their existence, I would be grateful to you. Become my supporter at: https://www.patreon.com/charmingdata 2 | 3 | By joining my community, you can get access to members' only posts, my private GitLab repository, and a one-on-one, 20-minute consultation. 4 | -------------------------------------------------------------------------------- /Analytic_Web_Apps/Financial/assets/IBM-Logo2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Coding-with-Adam/Dash-by-Plotly/f53325eb47d610b960b8d97fd48bec2520cf18c1/Analytic_Web_Apps/Financial/assets/IBM-Logo2.png -------------------------------------------------------------------------------- /Analytic_Web_Apps/Financial/assets/tata.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Coding-with-Adam/Dash-by-Plotly/f53325eb47d610b960b8d97fd48bec2520cf18c1/Analytic_Web_Apps/Financial/assets/tata.png -------------------------------------------------------------------------------- /Analytic_Web_Apps/Linkedin_Analysis/assets/linkedin-logo2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Coding-with-Adam/Dash-by-Plotly/f53325eb47d610b960b8d97fd48bec2520cf18c1/Analytic_Web_Apps/Linkedin_Analysis/assets/linkedin-logo2.png -------------------------------------------------------------------------------- /Analytic_Web_Apps/Multi-Excel-Dashboard/Toronto_temp.xlsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Coding-with-Adam/Dash-by-Plotly/f53325eb47d610b960b8d97fd48bec2520cf18c1/Analytic_Web_Apps/Multi-Excel-Dashboard/Toronto_temp.xlsx -------------------------------------------------------------------------------- /Analytic_Web_Apps/Operational_Dashboard/politics.csv: -------------------------------------------------------------------------------- 1 | state,party,electoral votes 2 | CA,democrat,55 3 | CO,democrat,9 4 | CT,democrat,7 5 | DC,democrat,3 6 | DE,democrat,3 7 | HI,democrat,4 8 | IL,democrat,20 9 | MA,democrat,11 10 | MD,democrat,10 11 | MN,democrat,10 12 | NH,democrat,4 13 | NJ,democrat,14 14 | NM,democrat,5 15 | NY,democrat,29 16 | OR,democrat,7 17 | RI,democrat,4 18 | VA,democrat,13 19 | VT,democrat,3 20 | WA,democrat,12 21 | AK,republican,3 22 | AL,republican,9 23 | AR,republican,6 24 | ID,republican,4 25 | IN,republican,11 26 | KS,republican,6 27 | KY,republican,8 28 | LA,republican,8 29 | MO,republican,10 30 | MS,republican,6 31 | MT,republican,3 32 | ND,republican,3 33 | NE,republican,5 34 | OK,republican,7 35 | SC,republican,9 36 | SD,republican,3 37 | TN,republican,11 38 | UT,republican,6 39 | WV,republican,5 40 | WY,republican,3 41 | AZ,unsure,11 42 | FL,unsure,29 43 | GA,unsure,16 44 | IA,unsure,6 45 | ME,unsure,4 46 | MI,unsure,16 47 | NC,unsure,15 48 | NV,unsure,6 49 | OH,unsure,18 50 | PA,unsure,20 51 | TX,unsure,38 52 | WI,unsure,10 53 | -------------------------------------------------------------------------------- /Analytic_Web_Apps/SocialMedia_Twitter/app.py: -------------------------------------------------------------------------------- 1 | import dash 2 | import dash_bootstrap_components as dbc 3 | import twitter 4 | 5 | api = twitter.Api(consumer_key='dA7IdoRKgaACPuZu8hJb9qo0K', 6 | consumer_secret='8dz7XjbUUylgw7Da5Zs2YoYBQSLVObvz0jG25uVRmioleqioA4', 7 | access_token_key='3296439504-ft6rRDSdVOhUBNFnUOZlWOG4wFgxO41n8Z6l0Fj', 8 | access_token_secret='gOcOD0XwEwxLHVtbV089n8DVOtrnRGR5EAzlv6quP2Xjc') 9 | # ensure you connected correctly 10 | # print(api.VerifyCredentials()) 11 | # exit() 12 | 13 | app = dash.Dash(__name__, suppress_callback_exceptions=True, external_stylesheets=[dbc.themes.LUX], 14 | meta_tags=[{'name': 'viewport', 15 | 'content': 'width=device-width, initial-scale=1.0'}] 16 | ) -------------------------------------------------------------------------------- /Analytic_Web_Apps/SocialMedia_Twitter/index.py: -------------------------------------------------------------------------------- 1 | import dash_bootstrap_components as dbc 2 | import dash 3 | import dash_html_components as html 4 | import dash_core_components as dcc 5 | from dash.dependencies import Output, Input 6 | import twitter # pip install python-twitter 7 | from app import app, api 8 | 9 | # Connect to the layout and callbacks of each tab 10 | from mentions import mentions_layout 11 | from trends import trends_layout 12 | from other import other_layout 13 | 14 | 15 | # our app's Tabs ********************************************************* 16 | app_tabs = html.Div( 17 | [ 18 | dbc.Tabs( 19 | [ 20 | dbc.Tab(label="Mentions", tab_id="tab-mentions", labelClassName="text-success font-weight-bold", activeLabelClassName="text-danger"), 21 | dbc.Tab(label="Trends", tab_id="tab-trends", labelClassName="text-success font-weight-bold", activeLabelClassName="text-danger"), 22 | dbc.Tab(label="Other", tab_id="tab-other", labelClassName="text-success font-weight-bold", activeLabelClassName="text-danger"), 23 | ], 24 | id="tabs", 25 | active_tab="tab-mentions", 26 | ), 27 | ], className="mt-3" 28 | ) 29 | 30 | app.layout = dbc.Container([ 31 | dbc.Row(dbc.Col(html.H1("Twitter Analytics Dashboard Live", 32 | style={"textAlign": "center"}), width=12)), 33 | html.Hr(), 34 | dbc.Row(dbc.Col(app_tabs, width=12), className="mb-3"), 35 | html.Div(id='content', children=[]) 36 | 37 | ]) 38 | 39 | @app.callback( 40 | Output("content", "children"), 41 | [Input("tabs", "active_tab")] 42 | ) 43 | def switch_tab(tab_chosen): 44 | if tab_chosen == "tab-mentions": 45 | return mentions_layout 46 | elif tab_chosen == "tab-trends": 47 | return trends_layout 48 | elif tab_chosen == "tab-other": 49 | return other_layout 50 | return html.P("This shouldn't be displayed for now...") 51 | 52 | 53 | 54 | if __name__=='__main__': 55 | app.run_server(debug=True) 56 | -------------------------------------------------------------------------------- /Analytic_Web_Apps/SocialMedia_Twitter/other.py: -------------------------------------------------------------------------------- 1 | import plotly.express as px 2 | import dash_bootstrap_components as dbc 3 | import dash 4 | import dash_html_components as html 5 | import dash_core_components as dcc 6 | from dash.dependencies import Output, Input 7 | import pandas as pd 8 | import twitter # pip install python-twitter 9 | from app import app, api 10 | 11 | 12 | # layout of second (trends) tab ****************************************** 13 | other_layout = html.Div([ 14 | dbc.Row([ 15 | dbc.Col([ 16 | html.H2("More Twitter analysis to come...") 17 | ], width=12) 18 | ]), 19 | dbc.Row([ 20 | dbc.Col([ 21 | dcc.Graph(id='scatter', figure={}) 22 | ], width=6), 23 | dbc.Col([ 24 | dcc.Graph(id='scatter2', figure={}) 25 | ], width=6) 26 | ]) 27 | ]) -------------------------------------------------------------------------------- /Analytic_Web_Apps/VizForGood/Scatter_mapbox/assets/image3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Coding-with-Adam/Dash-by-Plotly/f53325eb47d610b960b8d97fd48bec2520cf18c1/Analytic_Web_Apps/VizForGood/Scatter_mapbox/assets/image3.jpg -------------------------------------------------------------------------------- /Analytic_Web_Apps/VizForGood/Treemap-choropleth/Vizforsocialgood.xlsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Coding-with-Adam/Dash-by-Plotly/f53325eb47d610b960b8d97fd48bec2520cf18c1/Analytic_Web_Apps/VizForGood/Treemap-choropleth/Vizforsocialgood.xlsx -------------------------------------------------------------------------------- /Bootstrap/A_Join_me.md: -------------------------------------------------------------------------------- 1 | My goal is to make this a sustainable project for myself and my viewers. This code and videos are time-intensive, so if you appreciate my repository and tutorials and are able support their existence, I would be grateful to you. Become my supporter at: https://www.patreon.com/charmingdata 2 | -------------------------------------------------------------------------------- /Bootstrap/Card-Advanced/minimal_card.py: -------------------------------------------------------------------------------- 1 | from dash import Dash, html 2 | import dash_bootstrap_components as dbc 3 | 4 | app = Dash(__name__, external_stylesheets=[dbc.themes.SPACELAB, dbc.icons.BOOTSTRAP]) 5 | 6 | # MINIMAL DASH BOOTSTRAP CARD------------------------------------------------------------------------------------------- 7 | card = dbc.Card( 8 | dbc.CardBody( 9 | [ 10 | html.H1("Sales"), 11 | html.H3("$104.2M") 12 | ], 13 | ), 14 | ) 15 | 16 | 17 | # STYLING THE CARD (adding color and centering text)-------------------------------------------------------------------- 18 | # card = dbc.Card( 19 | # dbc.CardBody( 20 | # [ 21 | # html.H1("Sales"), 22 | # html.H3("$104.2M", className="text-success") 23 | # ], 24 | # ), 25 | # className="text-center" 26 | # ) 27 | 28 | 29 | # CARD WITH ICONS (adding icon and background color)------------------------------------------------------------------- 30 | # card = dbc.Card( 31 | # dbc.CardBody( 32 | # [ 33 | # html.H1(children=[html.I(className="bi bi-bank me-2"), "Profit"]), 34 | # html.H3("$8.3M"), 35 | # html.H4(html.I("10.3% vs LY", className="bi bi-caret-up-fill text-success")), 36 | # ], 37 | # ), 38 | # className="text-center m-4 bg-primary text-white", 39 | # ) 40 | 41 | 42 | app.layout=dbc.Container(card) 43 | 44 | 45 | if __name__ == "__main__": 46 | app.run_server(debug=True) 47 | -------------------------------------------------------------------------------- /Bootstrap/Card-Advanced/side_by_side.py: -------------------------------------------------------------------------------- 1 | 2 | from dash import Dash, html 3 | import dash_bootstrap_components as dbc 4 | 5 | app = Dash(__name__, external_stylesheets=[dbc.themes.SPACELAB, dbc.icons.BOOTSTRAP]) 6 | 7 | 8 | card_sales = dbc.Card( 9 | dbc.CardBody( 10 | [ 11 | html.H1([html.I(className="bi bi-currency-dollar me-2"), "Sales"], className="text-nowrap"), 12 | html.H3("$106.7M"), 13 | html.Div( 14 | [ 15 | html.I("5.8%", className="bi bi-caret-up-fill text-success"), 16 | " vs LY", 17 | ] 18 | ), 19 | ], className="border-start border-success border-5" 20 | ), 21 | className="text-center m-4" 22 | ) 23 | 24 | 25 | card_profit = dbc.Card( 26 | dbc.CardBody( 27 | [ 28 | html.H1([html.I(className="bi bi-bank me-2"), "Profit"], className="text-nowrap"), 29 | html.H3("$8.3M",), 30 | html.Div( 31 | [ 32 | html.I("12.3%", className="bi bi-caret-down-fill text-danger"), 33 | " vs LY", 34 | ] 35 | ), 36 | ], className="border-start border-danger border-5" 37 | ), 38 | className="text-center m-4", 39 | ) 40 | 41 | 42 | card_orders = dbc.Card( 43 | dbc.CardBody( 44 | [ 45 | html.H1([html.I(className="bi bi-cart me-2"), "Orders"], className="text-nowrap"), 46 | html.H3("91.4K"), 47 | html.Div( 48 | [ 49 | html.I("10.3%", className="bi bi-caret-up-fill text-success"), 50 | " vs LY", 51 | ] 52 | ), 53 | ], className="border-start border-success border-5" 54 | ), 55 | className="text-center m-4", 56 | ) 57 | 58 | app.layout = dbc.Container( 59 | dbc.Row( 60 | [dbc.Col(card_sales), dbc.Col(card_profit), dbc.Col(card_orders)], 61 | ), 62 | fluid=True, 63 | ) 64 | 65 | 66 | if __name__ == "__main__": 67 | app.run_server(debug=True) 68 | -------------------------------------------------------------------------------- /Bootstrap/Stying/Readme.md: -------------------------------------------------------------------------------- 1 | ## Dash Bootstrap cheetsheet: 2 | https://dashcheatsheet.pythonanywhere.com/ 3 | -------------------------------------------------------------------------------- /Bootstrap/assets/spinner_styling.css: -------------------------------------------------------------------------------- 1 | .spinner { 2 | width: 40px; 3 | height: 40px; 4 | background-color: #333; 5 | 6 | margin: 100px auto; 7 | -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out; 8 | animation: sk-rotateplane 1.2s infinite ease-in-out; 9 | } 10 | 11 | @-webkit-keyframes sk-rotateplane { 12 | 0% { -webkit-transform: perspective(120px) } 13 | 50% { -webkit-transform: perspective(120px) rotateY(180deg) } 14 | 100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) } 15 | } 16 | 17 | @keyframes sk-rotateplane { 18 | 0% { 19 | transform: perspective(120px) rotateX(0deg) rotateY(0deg); 20 | -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) 21 | } 50% { 22 | transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); 23 | -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) 24 | } 100% { 25 | transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); 26 | -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /Bootstrap/bootstrap_collapse.py: -------------------------------------------------------------------------------- 1 | # Video: [Bootstrap Collapse Dash Plotly](https://youtu.be/RnJGlgc9vcM) 2 | # Docs: [Collapse Documentation:](https://dash-bootstrap-components.opensource.faculty.ai/docs/components/collapse/) 3 | from dash import Dash, html, Input, Output, State # pip install dash 4 | import dash_bootstrap_components as dbc # pip install dash_bootstrap_components 5 | 6 | app = Dash(__name__, external_stylesheets=[dbc.themes.LUMEN]) # https://bootswatch.com/default/ 7 | 8 | app.layout = html.Div([ 9 | html.Div(html.H6("Product: a beautiful Pizza reheated after a day in the fridge, for $99"), style={"text-align":"center"}), 10 | html.Hr(), 11 | dbc.CardHeader( 12 | dbc.Button( 13 | "Why should I buy reheated pizza for $99?", 14 | color="link", 15 | id="button-question-1", 16 | ) 17 | ), 18 | dbc.Collapse( 19 | dbc.CardBody("Because it's a lot better than a hotdog."), 20 | id="collapse-question-1", is_open=False 21 | ), 22 | 23 | dbc.CardHeader( 24 | dbc.Button( 25 | "Does it have extra cheese?", 26 | color="link", 27 | id="button-question-2", 28 | ) 29 | ), 30 | dbc.Collapse( 31 | dbc.CardBody("Yes, and it is made from the goats of Antarctica, which keeps the cheese cold and fresh."), 32 | id="collapse-question-2", is_open=False 33 | ), 34 | ]) 35 | 36 | 37 | @app.callback( 38 | Output("collapse-question-1", "is_open"), 39 | [Input("button-question-1", "n_clicks")], 40 | [State("collapse-question-1", "is_open")], 41 | ) 42 | def toggle_collapse(n, is_open): 43 | if n: 44 | return not is_open 45 | return is_open 46 | 47 | 48 | @app.callback( 49 | Output("collapse-question-2", "is_open"), 50 | [Input("button-question-2", "n_clicks")], 51 | [State("collapse-question-2", "is_open")], 52 | ) 53 | def toggle_collapse(n, is_open): 54 | if n: 55 | return not is_open 56 | return is_open 57 | 58 | 59 | if __name__ == "__main__": 60 | app.run_server(debug=True, port=2000) 61 | -------------------------------------------------------------------------------- /Callbacks/Client-side-callback/clientside_win_api.py: -------------------------------------------------------------------------------- 1 | import dash 2 | from dash.dependencies import Input, Output, State 3 | import dash_core_components as dcc 4 | import dash_html_components as html 5 | 6 | import plotly.express as px 7 | import pandas as pd 8 | 9 | 10 | df = pd.read_csv('https://raw.githubusercontent.com/Coding-with-Adam/Dash-by-Plotly/master/Callbacks/Client-side-callback/opsales.csv') 11 | 12 | external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css'] 13 | app = dash.Dash(__name__, external_stylesheets=external_stylesheets) 14 | 15 | app.layout = html.Div([ 16 | html.Button('Print Graphs', id='printing'), 17 | html.Div(id='hidden-content'), 18 | html.H1('Analysis of Store Sales', style={'textAlign':'center'}), 19 | dcc.Graph(id='one', figure=px.pie(df, names="Shipping Mode", values="Sales").update_traces(textinfo='label+percent', showlegend=False)), 20 | dcc.Graph(id='two', figure=px.histogram(df, x="Order Status", y="Sales")), 21 | dcc.Graph(id='thr', figure=px.pie(df, names="Customer Segment", values="Sales").update_traces(textinfo='label+percent', showlegend=False)), 22 | ]) 23 | 24 | app.clientside_callback( 25 | """ 26 | function(clicks) { 27 | if (clicks > 0) { 28 | window.print() 29 | } 30 | return "" 31 | } 32 | """, 33 | Output('hidden-content', 'children'), 34 | Input('printing', 'n_clicks') 35 | ) 36 | 37 | # app.clientside_callback( 38 | # """ 39 | # function(clicks) { 40 | # if (clicks > 0) { 41 | # var myWindow = window.open("", "", "width=200,height=100"); 42 | # myWindow.document.write("

A new window!

"); 43 | # myWindow.focus(); 44 | # } 45 | # return "" 46 | # } 47 | # """, 48 | # Output('hidden-content', 'children'), 49 | # Input('printing', 'n_clicks') 50 | # ) 51 | 52 | if __name__ == '__main__': 53 | app.run_server(debug=True) 54 | 55 | 56 | 57 | # https://youtu.be/wHUzUHTPfo0 58 | -------------------------------------------------------------------------------- /Callbacks/chained_callback/Join_Me.md: -------------------------------------------------------------------------------- 1 | My goal is to make this a sustainable project for myself and my viewers. 2 | This code and videos are time-intensive, so if you appreciate my repository and tutorials and are able support their existence, I would be grateful to you. 3 | Become my supporter at: https://www.patreon.com/charmingdata 4 | -------------------------------------------------------------------------------- /Callbacks/clientside-js-charts/app.py: -------------------------------------------------------------------------------- 1 | # Code belongs to yazid - https://github.com/leberber 2 | from dash import Dash, dcc, html, Input, Output, clientside_callback, ClientsideFunction 3 | import dash_mantine_components as dmc 4 | from data import tradeData 5 | 6 | 7 | app = Dash(__name__, external_scripts=['https://cdn.jsdelivr.net/npm/apexcharts']) 8 | app.layout = html.Div( 9 | children=[ 10 | dcc.Store(id='ApexchartsSampleData', data=tradeData), 11 | html.H1("Javascript Charts inside a Dash App"), 12 | dmc.Center( 13 | dmc.Paper( 14 | shadow="sm", 15 | style={'height':'600px', 'width':'800px', 'marginTop':'100px'}, 16 | children=[ 17 | html.Div(id='apexAreaChart'), 18 | dmc.Center( 19 | children=[ 20 | dmc.SegmentedControl( 21 | id="selectCountryChip", 22 | value="Canada", 23 | data=['Canada', 'USA', 'Australia'], 24 | ) 25 | ] 26 | ) 27 | ] 28 | ) 29 | ) 30 | ] 31 | ) 32 | 33 | 34 | clientside_callback( 35 | ClientsideFunction( 36 | namespace='apexCharts', 37 | function_name='areaChart' 38 | ), 39 | Output("apexAreaChart", "children"), 40 | Input("ApexchartsSampleData", "data"), 41 | Input("selectCountryChip", "value"), 42 | ) 43 | 44 | 45 | if __name__ == "__main__": 46 | app.run_server(debug=True) 47 | -------------------------------------------------------------------------------- /Callbacks/clientside-js-charts/assets/herpers.js: -------------------------------------------------------------------------------- 1 | var BillionFormatter = function(value) { 2 | var val = Math.abs(value); 3 | if (val >= 1000000) { 4 | val = (val / 1000000000).toFixed(1) + " B"; 5 | } 6 | return val; 7 | }; 8 | 9 | var GigatonneFormatter = function(value) { 10 | var val = Math.abs(value); 11 | if (val >= 1000000) { 12 | val = (val / 1000000000).toFixed(1) + " Gt"; 13 | } 14 | return val; 15 | }; -------------------------------------------------------------------------------- /Cytoscape/assets/sunny-and-cloud.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Coding-with-Adam/Dash-by-Plotly/f53325eb47d610b960b8d97fd48bec2520cf18c1/Cytoscape/assets/sunny-and-cloud.jpg -------------------------------------------------------------------------------- /Cytoscape/org-data.csv: -------------------------------------------------------------------------------- 1 | name,age,books,slaves_freed,color 2 | Executive Director (Harriet),52,4,21,blue 3 | Vice President (Sarah),45,2,40,blue 4 | Vice President (Charlotte),25,1,107,blue 5 | Program Officer (Sojourner),35,2,54,blue 6 | Program Officer (Elizabeth),40,1,68,blue 7 | Program Associate (Ellen),78,3,19,blue 8 | -------------------------------------------------------------------------------- /Dash Components/BeforeAfter/assets/beirut1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Coding-with-Adam/Dash-by-Plotly/f53325eb47d610b960b8d97fd48bec2520cf18c1/Dash Components/BeforeAfter/assets/beirut1.jpg -------------------------------------------------------------------------------- /Dash Components/BeforeAfter/assets/beirut2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Coding-with-Adam/Dash-by-Plotly/f53325eb47d610b960b8d97fd48bec2520cf18c1/Dash Components/BeforeAfter/assets/beirut2.jpg -------------------------------------------------------------------------------- /Dash Components/BeforeAfter/assets/chemistry1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Coding-with-Adam/Dash-by-Plotly/f53325eb47d610b960b8d97fd48bec2520cf18c1/Dash Components/BeforeAfter/assets/chemistry1.jpg -------------------------------------------------------------------------------- /Dash Components/BeforeAfter/assets/chemistry2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Coding-with-Adam/Dash-by-Plotly/f53325eb47d610b960b8d97fd48bec2520cf18c1/Dash Components/BeforeAfter/assets/chemistry2.jpg -------------------------------------------------------------------------------- /Dash Components/BeforeAfter/assets/ciona-egg1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Coding-with-Adam/Dash-by-Plotly/f53325eb47d610b960b8d97fd48bec2520cf18c1/Dash Components/BeforeAfter/assets/ciona-egg1.png -------------------------------------------------------------------------------- /Dash Components/BeforeAfter/assets/ciona-egg2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Coding-with-Adam/Dash-by-Plotly/f53325eb47d610b960b8d97fd48bec2520cf18c1/Dash Components/BeforeAfter/assets/ciona-egg2.png -------------------------------------------------------------------------------- /Dash Components/BeforeAfter/assets/reef1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Coding-with-Adam/Dash-by-Plotly/f53325eb47d610b960b8d97fd48bec2520cf18c1/Dash Components/BeforeAfter/assets/reef1.jpg -------------------------------------------------------------------------------- /Dash Components/BeforeAfter/assets/reef2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Coding-with-Adam/Dash-by-Plotly/f53325eb47d610b960b8d97fd48bec2520cf18c1/Dash Components/BeforeAfter/assets/reef2.jpg -------------------------------------------------------------------------------- /Dash Components/BeforeAfter/before-after.py: -------------------------------------------------------------------------------- 1 | # Video: [Before After Image Slider - Dash Component](https://youtu.be/-0bqU94KGMw) 2 | from dash import Dash, html # pip install dash 3 | from dash_extensions import BeforeAfter # pip install dash-extensions==0.0.47 or higher 4 | import dash_bootstrap_components as dbc # dash-bootstrap-components 5 | 6 | app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP]) 7 | app.layout = dbc.Container([ 8 | dbc.Row( 9 | dbc.Col([ 10 | html.H1("Before-After Dash Component", style={'textAlign':'center'}) 11 | ], width=12) 12 | ), 13 | html.Hr(), 14 | dbc.Row([ 15 | dbc.Col([ 16 | # https://nypost.com/2020/08/05/before-and-after-satellite-images-of-the-beirut-explosion/ 17 | html.H2("Satellite Imagery"), 18 | BeforeAfter(before="assets/beirut1.jpg", after="assets/beirut2.jpg", width=512, height=412, defaultProgress=0.5), 19 | ], width=6), 20 | dbc.Col([ 21 | # https://sustainableearth.blog/2019/05/06/changes-in-marine-habitats/ 22 | html.H2("Conservation"), 23 | BeforeAfter(before="assets/reef1.jpg", after="assets/reef2.jpg", width=512, height=412), 24 | ], width=6) 25 | 26 | ]), 27 | html.Hr(), 28 | dbc.Row([ 29 | dbc.Col([ 30 | # https://www.sciencetimes.com/articles/29510/20210205/mbl-researchers-imaged-first-body-plan-moments-embryo.htm 31 | html.H2("Marine Biology"), 32 | BeforeAfter(before="assets/ciona-egg1.png", after="assets/ciona-egg2.png", width=512, height=412), 33 | ], width=6), 34 | dbc.Col([ 35 | # https://pressbooks-dev.oer.hawaii.edu/chemistry/chapter/writing-and-balancing-chemical-equations/ 36 | html.H2("Chemistry"), 37 | BeforeAfter(before="assets/chemistry1.jpg",after="assets/chemistry2.jpg", width=512, height=412), 38 | ], width=6) 39 | ],className='mb-5'), 40 | ]) 41 | 42 | 43 | 44 | if __name__ == '__main__': 45 | app.run_server(debug=True, port=8002) 46 | -------------------------------------------------------------------------------- /Dash Components/Carousel/assets/Chapulin1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Coding-with-Adam/Dash-by-Plotly/f53325eb47d610b960b8d97fd48bec2520cf18c1/Dash Components/Carousel/assets/Chapulin1.jpg -------------------------------------------------------------------------------- /Dash Components/Carousel/assets/Chapulin2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Coding-with-Adam/Dash-by-Plotly/f53325eb47d610b960b8d97fd48bec2520cf18c1/Dash Components/Carousel/assets/Chapulin2.jpg -------------------------------------------------------------------------------- /Dash Components/Carousel/assets/Chapulin3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Coding-with-Adam/Dash-by-Plotly/f53325eb47d610b960b8d97fd48bec2520cf18c1/Dash Components/Carousel/assets/Chapulin3.jpg -------------------------------------------------------------------------------- /Dash Components/Carousel/python-carousel.py: -------------------------------------------------------------------------------- 1 | from dash import Dash, Input, Output, html, dcc, callback # need version dash 2.0.0 or higher 2 | # import plotly.express as px 3 | # import pandas as pd 4 | import dash_bootstrap_components as dbc 5 | 6 | app = Dash(__name__, external_stylesheets=[dbc.themes.SOLAR]) 7 | 8 | app.layout = dbc.Container([ 9 | dbc.Row([ 10 | dbc.Col([ 11 | html.H1("Our Cool Analytics Dashboard", style={"textAlign":"center"}) 12 | ],width=12) 13 | ]), 14 | dbc.Row([ 15 | dbc.Col([ 16 | dbc.Carousel( 17 | items=[ 18 | {"key": "1", "src": "/assets/Chapulin1.jpg", "caption":"My cat captions", "img_style":{"max-height":"500px"}}, 19 | {"key": "2", "src": "/assets/Chapulin2.jpg", "header":"My cat header", "img_style":{"max-height":"500px"}}, 20 | {"key": "3", "src": "/assets/Chapulin3.jpg", "img_style":{"max-height":"500px"}}, 21 | ], 22 | controls=True, 23 | indicators=True, 24 | interval=2000, 25 | ride="carousel", 26 | # className="carousel-fade" 27 | ) 28 | ], width=8) 29 | ], justify="center"), 30 | html.Br(), 31 | dbc.Row([ 32 | dbc.Col([ 33 | html.H2("All my graphs and charts below", style={"textAlign":"center"}), 34 | dcc.Graph(figure={}) 35 | ],width=12) 36 | ]) 37 | 38 | ]) 39 | 40 | 41 | if __name__ == '__main__': 42 | app.run_server(debug=False, port=8000) 43 | -------------------------------------------------------------------------------- /Dash Components/Checklist/assets/checklist.css: -------------------------------------------------------------------------------- 1 | .my_box_container { 2 | display: flex; 3 | } 4 | 5 | .my_box_input { 6 | cursor: pointer; 7 | } 8 | 9 | .my_box_label { 10 | background: #A5D6A7; 11 | padding: 0.5rem 1rem; 12 | border-radius: 0.5rem; 13 | } 14 | -------------------------------------------------------------------------------- /Dash Components/Checklist/challenges.txt: -------------------------------------------------------------------------------- 1 | Easy Challenge: Make the checkbox label (green area) more transparent (opacity) 2 | 3 | Medium Challenge: Disable the March month checkbox 4 | 5 | Hard Challenge: Use “Animal Condition” in your web app instead of “Month Call Made” 6 | -------------------------------------------------------------------------------- /Dash Components/Checklist/easy_challenge_solution.py: -------------------------------------------------------------------------------- 1 | # Add opacity to line 15 inside your checklist.css form 2 | 3 | .my_box_container { 4 | display: flex; 5 | } 6 | 7 | .my_box_input { 8 | cursor: pointer; 9 | } 10 | 11 | .my_box_label { 12 | background: #A5D6A7; 13 | padding: 0.5rem 1rem; 14 | border-radius: 0.5rem; 15 | opacity: 0.4; 16 | } 17 | -------------------------------------------------------------------------------- /Dash Components/Checklist/medium_challenge_solution.py: -------------------------------------------------------------------------------- 1 | # solution to disable only the March checkbox 2 | 3 | html.Div([ 4 | dcc.Checklist( 5 | id='my_checklist', 6 | options=[ 7 | {'label': x, 'value': x, 'disabled':True} 8 | if x=='March' else {'label': x, 'value': x, 'disabled':False} 9 | for x in df['Month Call Made'].unique() 10 | ] 11 | ) 12 | ]) 13 | -------------------------------------------------------------------------------- /Dash Components/Download/assets/bees-by-Lisa-from-Pexels.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Coding-with-Adam/Dash-by-Plotly/f53325eb47d610b960b8d97fd48bec2520cf18c1/Dash Components/Download/assets/bees-by-Lisa-from-Pexels.jpg -------------------------------------------------------------------------------- /Dash Components/Download/assets/data_file.txt: -------------------------------------------------------------------------------- 1 | You just allowed the user to download a file that you saved in your "assets" folder. 2 | When your app is deployed to the web, the path to the assets file might look different. 3 | Instead of "./assets/data_file.txt", it might be something like "./mainfolder/firstapp/assets/data_file.txt". 4 | It really depends on the structure of your app and the filing system of the server you use (Pythonanywhere, 5 | Heroku, AWS, etc.) to deploy your app. -------------------------------------------------------------------------------- /Dash Components/Download/download_button.py: -------------------------------------------------------------------------------- 1 | import dash 2 | from dash.dependencies import Output, Input 3 | import dash_html_components as html 4 | import dash_core_components as dcc 5 | import dash_bootstrap_components as dbc 6 | import dash_table 7 | import pandas as pd 8 | 9 | FONT_AWESOME = ( 10 | "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" 11 | ) 12 | 13 | df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/solar.csv') 14 | 15 | external_stylesheets = [dbc.themes.BOOTSTRAP, FONT_AWESOME] 16 | app = dash.Dash(__name__, external_stylesheets=external_stylesheets) 17 | 18 | 19 | app.layout = dbc.Container( 20 | [ 21 | dash_table.DataTable( 22 | id='table', 23 | columns=[{"name": i, "id": i} for i in df.columns], 24 | data=df.to_dict('records'), 25 | ), 26 | 27 | dbc.Button(id='btn', 28 | children=[html.I(className="fa fa-download mr-1"), "Download"], 29 | color="info", 30 | className="mt-1" 31 | ), 32 | 33 | dcc.Download(id="download-component"), 34 | ], 35 | className='m-4' 36 | ) 37 | 38 | 39 | @app.callback( 40 | Output("download-component", "data"), 41 | Input("btn", "n_clicks"), 42 | prevent_initial_call=True, 43 | ) 44 | def func(n_clicks): 45 | return dict(content="Always remember, we're better together.", filename="hello.txt") 46 | # return dcc.send_data_frame(df.to_csv, "mydf_csv.csv") 47 | # return dcc.send_data_frame(df.to_excel, "mydf_excel.xlsx", sheet_name="Sheet_name_1") 48 | # return dcc.send_file("./assets/data_file.txt") 49 | # return dcc.send_file("./assets/bees-by-Lisa-from-Pexels.jpg") 50 | 51 | 52 | if __name__ == "__main__": 53 | app.run_server(debug=True) 54 | -------------------------------------------------------------------------------- /Dash Components/Image Annotations-Canvas/Late-Stage_Female_Breast_Cancer_Incidence_Rate__cases_per_100_000_females.csv: -------------------------------------------------------------------------------- 1 | Year,Race,"Rate (per 100,000 females)" 2 | 2010,All,46.2 3 | 2010,White,46.2 4 | 2010,Black,53.2 5 | 2010,Hispanic,36.2 6 | 2010,Asian,31.8 7 | 2011,Black,51.1 8 | 2011,All,43.7 9 | 2011,White,43.4 10 | 2011,Hispanic,34.9 11 | 2011,Asian,32.7 12 | 2012,Hispanic,39.0 13 | 2012,White,44.9 14 | 2012,Black,49.9 15 | 2012,All,44.3 16 | 2012,Asian,25.6 17 | 2013,All,45.9 18 | 2013,White,44.8 19 | 2013,Black,55.8 20 | 2013,Hispanic,39.1 21 | 2013,Asian,31.6 22 | 2014,All,44.4 23 | 2014,White,44.1 24 | 2014,Black,49.4 25 | 2014,Hispanic,39.7 26 | 2014,Asian,34.2 27 | 2015,All,44.8 28 | 2015,White,43.9 29 | 2015,Black,52.6 30 | 2015,Hispanic,37.0 31 | 2015,Asian,33.6 32 | 2016,All,42.0 33 | 2016,White,41.7 34 | 2016,Black,49.6 35 | 2016,Hispanic,35.9 36 | 2016,Asian,30.1 37 | 2017,All, 38 | 2017,White, 39 | 2017,Black, 40 | 2017,Hispanic, 41 | 2017,Asian, 42 | 2018,All, 43 | 2018,White, 44 | 2018,Black, 45 | 2018,Hispanic, 46 | 2018,Asian, 47 | 2019,All, 48 | 2019,White, 49 | 2019,Black, 50 | 2019,Hispanic, 51 | 2019,Asian, 52 | 2020,Hispanic, 53 | 2020,Asian, 54 | 2020,White, 55 | 2020,Black, 56 | 2020,All, 57 | Target,All,43.7 58 | Target,White,43.3 59 | Target,Hispanic,35.7 60 | Target,Black,48.9 61 | Target,Asian,30.1 62 | -------------------------------------------------------------------------------- /Dash Components/Input_element/the_challenge.txt: -------------------------------------------------------------------------------- 1 | Add code to the callback function, so if Enter is 2 | clicked by user 3 times, the text below the input 3 | would return "Game Over" 4 | -------------------------------------------------------------------------------- /Dash Components/Markdown/markdown_app.py: -------------------------------------------------------------------------------- 1 | import dash 2 | import dash_core_components as dcc 3 | import dash_html_components as html 4 | from dash.dependencies import Input, Output 5 | 6 | app = dash.Dash(__name__, external_stylesheets=['https://codepen.io/chriddyp/pen/bWLwgP.css']) 7 | app.layout = html.Div([ 8 | html.Div([ 9 | html.H2("Text with Markdown"), 10 | dcc.Textarea(id="message", placeholder="Test your Markdown", 11 | style={'width': '100%', 'height': 300}), 12 | ],className="four columns"), 13 | 14 | html.Div([ 15 | html.Hr(style={"width":4, "height":700, "border": "6px solid black"}) 16 | ],className="one columns"), 17 | 18 | html.Div([ 19 | html.H2("Result"), 20 | dcc.Markdown(id="markdown-result") 21 | ],className="seven columns"), 22 | 23 | ]) 24 | 25 | @app.callback( 26 | Output("markdown-result", "children"), 27 | Input("message","value") 28 | ) 29 | def text_update(value): 30 | return value 31 | 32 | 33 | if __name__ == '__main__': 34 | app.run_server(debug=True) -------------------------------------------------------------------------------- /Dash Components/Range_Slider/assets/styling.css: -------------------------------------------------------------------------------- 1 | /* The slider itself */ 2 | .slider { 3 | -webkit-appearance: none; 4 | width: 100%; 5 | height: 10px; 6 | background: #d3d3d3; 7 | outline: none; 8 | opacity: 0.7; 9 | -webkit-transition: .2s; 10 | transition: opacity .2s; 11 | } 12 | 13 | /* Mouse-over effects */ 14 | .slider:hover { 15 | opacity: 1; 16 | } 17 | -------------------------------------------------------------------------------- /Dash Components/Slider/severe-storms.csv: -------------------------------------------------------------------------------- 1 | Year,Severe Storm Count,Severe Storm Count Rank,Severe Storm Costs (Billions),Severe Storm Costs Rank,Severe Storm Deaths,Severe Storm Deaths Rank 2 | 2022,8,6,10,18,7,19 3 | 2021,11,2,21.6,4,113,3 4 | 2020,13,1,37.8,2,81,5 5 | 2019,8,6,15.6,7,12,16 6 | 2018,9,5,14.6,8,8,18 7 | 2017,10,3,21.9,3,34,12 8 | 2016,8,6,17.8,6,19,15 9 | 2015,6,11,10.1,17,10,17 10 | 2014,6,11,13.7,9,35,11 11 | 2013,7,9,13.5,10,40,10 12 | 2012,7,9,20.8,5,50,8 13 | 2011,10,3,41.6,1,550,1 14 | 2010,4,16,12.1,13,5,21 15 | 2009,6,11,11,15,23,14 16 | 2008,6,11,12.3,12,89,4 17 | 2007,1,38,3.5,24,0,43 18 | 2006,5,15,10.2,16,48,9 19 | 2005,1,38,1.3,37,0,43 20 | 2004,2,20,2.7,27,4,22 21 | 2003,4,16,12.8,11,61,7 22 | 2002,2,20,4.6,22,7,19 23 | 2001,2,20,6.2,21,3,23 24 | 2000,1,38,1.2,38,0,43 25 | 1999,1,38,3.5,24,0,43 26 | 1998,3,19,6.7,19,133,2 27 | 1997,1,38,1.8,30,0,43 28 | 1996,0,43,0,43,0,43 29 | 1995,2,20,11.6,14,0,43 30 | 1994,1,38,2,28,0,43 31 | 1993,1,38,1.3,37,0,43 32 | 1992,4,16,6.7,19,0,43 33 | 1991,1,38,1.4,33,0,43 34 | 1990,1,38,1.8,30,0,43 35 | 1989,1,38,1.3,37,0,43 36 | 1988,0,43,0,43,0,43 37 | 1987,0,43,0,43,0,43 38 | 1986,1,38,1.4,33,0,43 39 | 1985,1,38,1.6,31,0,43 40 | 1984,2,20,3,26,80,6 41 | 1983,0,43,0,43,0,43 42 | 1982,2,20,3,26,33,13 43 | 1981,1,38,1.3,37,0,43 44 | -------------------------------------------------------------------------------- /Dash_Interactive_Graphs/dash-altair.py: -------------------------------------------------------------------------------- 1 | import altair as alt # pip install altair 2 | from dash import Dash, Input, Output, callback, dcc, html, no_update # pip install dash 3 | from vega_datasets import data # pip install vega_datasets 4 | import dash_vega_components as dvc # pip install dash_vega_components 5 | import plotly.express as px 6 | 7 | app = Dash() 8 | 9 | app.layout = html.Div( 10 | [ 11 | html.H1("Altair Chart"), 12 | dcc.Dropdown(options=["All", "USA", "Europe", "Japan"], value="All", id="origin-dropdown"), 13 | dvc.Vega(id="altair-chart", opt={"renderer": "svg", "actions": False}, spec={}), 14 | ] 15 | ) 16 | 17 | 18 | @callback( 19 | Output(component_id="altair-chart", component_property="spec"), 20 | Input(component_id="origin-dropdown", component_property="value") 21 | ) 22 | def display_altair_chart(origin): 23 | source = data.cars() 24 | # print(source.head()) 25 | 26 | if origin != "All": 27 | source = source[source["Origin"] == origin] 28 | 29 | chart = ( 30 | alt.Chart(source) 31 | .mark_circle(size=60) 32 | .encode( 33 | x="Horsepower", 34 | y="Miles_per_Gallon", 35 | color=alt.Color("Origin").scale(domain=["Europe", "Japan", "USA"]), 36 | tooltip=["Name", "Origin", "Horsepower", "Miles_per_Gallon"], 37 | ) 38 | .interactive() 39 | ) 40 | 41 | # source2 = px.data.medals_long() 42 | # # print(source2) 43 | # chart2 = alt.Chart(source2).mark_bar().encode( 44 | # x='nation', 45 | # y='count', 46 | # color=alt.condition( 47 | # alt.datum.count > 14, # If the year is bigger than 14 this test returns True, 48 | # alt.value('orange'), # which sets the bar orange. 49 | # alt.value('steelblue') # And if it's not true it sets the bar steelblue. 50 | # ) 51 | # ).properties(width=400) 52 | 53 | return chart.to_dict() #chart.to_dict 54 | 55 | 56 | 57 | if __name__ == "__main__": 58 | app.run(debug=True) 59 | -------------------------------------------------------------------------------- /Dash_Interactive_Graphs/pie.py: -------------------------------------------------------------------------------- 1 | import pandas as pd 2 | 3 | import dash 4 | import dash_core_components as dcc 5 | import dash_html_components as html 6 | from dash.dependencies import Input, Output 7 | import plotly.express as px 8 | 9 | df = pd.read_csv("Urban_Park_Ranger_Animal_Condition_Response.csv") 10 | 11 | # you need to include __name__ in your Dash constructor if 12 | # you plan to use a custom CSS or JavaScript in your Dash apps 13 | app = dash.Dash(__name__) 14 | 15 | #--------------------------------------------------------------- 16 | app.layout = html.Div([ 17 | html.Div([ 18 | html.Label(['NYC Calls for Animal Rescue']), 19 | dcc.Dropdown( 20 | id='my_dropdown', 21 | options=[ 22 | {'label': 'Action Taken by Ranger', 'value': 'Final Ranger Action'}, 23 | {'label': 'Age', 'value': 'Age'}, 24 | {'label': 'Animal Health', 'value': 'Animal Condition'}, 25 | {'label': 'Borough', 'value': 'Borough'}, 26 | {'label': 'Species', 'value': 'Animal Class'}, 27 | {'label': 'Species Status', 'value': 'Species Status'} 28 | ], 29 | value='Animal Class', 30 | multi=False, 31 | clearable=False, 32 | style={"width": "50%"} 33 | ), 34 | ]), 35 | 36 | html.Div([ 37 | dcc.Graph(id='the_graph') 38 | ]), 39 | 40 | ]) 41 | 42 | #--------------------------------------------------------------- 43 | @app.callback( 44 | Output(component_id='the_graph', component_property='figure'), 45 | [Input(component_id='my_dropdown', component_property='value')] 46 | ) 47 | 48 | def update_graph(my_dropdown): 49 | dff = df 50 | 51 | piechart=px.pie( 52 | data_frame=dff, 53 | names=my_dropdown, 54 | hole=.3, 55 | ) 56 | 57 | return (piechart) 58 | 59 | 60 | if __name__ == '__main__': 61 | app.run_server(debug=True) 62 | -------------------------------------------------------------------------------- /Dash_More_Advanced_Stuff/API/finance/challenge.txt: -------------------------------------------------------------------------------- 1 | Look up Zoom stock market symbol and "get_daily" data 2 | -------------------------------------------------------------------------------- /Dash_More_Advanced_Stuff/API/weather/assets/styling.css: -------------------------------------------------------------------------------- 1 | .table-weather{ 2 | border: 1px solid #55575D; 3 | border-collapse: collapse; 4 | width: 20%; 5 | max-height: 500px; 6 | } 7 | 8 | .table-weather td{ 9 | border: 1px solid #55575D; 10 | } 11 | -------------------------------------------------------------------------------- /Dash_More_Advanced_Stuff/API/weather/challenges.txt: -------------------------------------------------------------------------------- 1 | Easy Challenge: Update your web app every 5 seconds, and stop updating after 3 intervals 2 | 3 | Medium Challenge: Update your app with city of New Delhi, and show only temperature and observation time 4 | 5 | Hard Challenge: Change your app to show yesterday’s forecast of "mintemp" & “avgtemp” in New York 6 | -------------------------------------------------------------------------------- /Dash_More_Advanced_Stuff/API/weather/easy_challenge_solution.py: -------------------------------------------------------------------------------- 1 | # Solution to update your web app every 5 seconds, and stop updating after 3 intervals 2 | # changes made to line 8,9 3 | 4 | dcc.Interval( 5 | id='my_interval', 6 | disabled=False, #if True the counter will no longer update 7 | n_intervals=0, #number of times the interval has passed 8 | interval=5*1000, #increment the counter n_intervals every 5 seconds 9 | max_intervals=3, #number of times the interval will be fired. 10 | #if -1, then the interval has no limit (the default) 11 | #and if 0 then the interval stops running. 12 | ), 13 | -------------------------------------------------------------------------------- /Dash_More_Advanced_Stuff/API/weather/medium_challenge_solution.py: -------------------------------------------------------------------------------- 1 | # Solution to update your web app with city of New Delhi, and show only temperature and observation time 2 | # changes made to line 4,8 3 | 4 | categories=["observation_time","temperature"] 5 | 6 | def update_weather(): 7 | weather_requests = requests.get( 8 | "http://api.weatherstack.com/current?access_key=88ffb416536794b25ea52f6e9a6c6c28&query=New%20Delhi" 9 | ) 10 | json_data = weather_requests.json() 11 | df = pd.DataFrame(json_data) 12 | return([ 13 | html.Table( 14 | className='table-weather', 15 | children=[ 16 | html.Tr( 17 | children=[ 18 | html.Td( 19 | children=[ 20 | name+": "+str(data) 21 | ] 22 | ) 23 | ] 24 | ) 25 | for name,data in zip(categories,df['current'][categories]) 26 | ]) 27 | ]) 28 | -------------------------------------------------------------------------------- /Dash_More_Advanced_Stuff/Dash_Mobile/data.txt: -------------------------------------------------------------------------------- 1 | Download BR_Animal_Control_Calls.csv from: 2 | https://drive.google.com/file/d/1B3tVfVcVyUnX2FHG1h8ma48Y__vqAWPw/view?usp=sharing 3 | -------------------------------------------------------------------------------- /Dash_More_Advanced_Stuff/GitHub Pull Request/Readme.md: -------------------------------------------------------------------------------- 1 | To practice your Pull Requests go to: https://github.com/charmingdata/practice-pull-request 2 | 3 | Download Pull Request Guide: 4 | https://docs.google.com/document/d/1wTzW6BAxWvfGwPmgkCt9z8cRn8SsG7iX/edit?usp=sharing&ouid=118003078876393636228&rtpof=true&sd=true 5 | -------------------------------------------------------------------------------- /Dash_More_Advanced_Stuff/Intro to Python multipage/App-A/app.py: -------------------------------------------------------------------------------- 1 | import dash 2 | from dash import html, dcc 3 | 4 | app = dash.Dash(__name__, use_pages=True) 5 | 6 | app.layout = html.Div( 7 | [ 8 | # main app framework 9 | html.Div("Python Multipage App with Dash", style={'fontSize':50, 'textAlign':'center'}), 10 | html.Div([ 11 | dcc.Link(page['name']+" | ", href=page['path']) 12 | for page in dash.page_registry.values() 13 | ]), 14 | html.Hr(), 15 | 16 | # content of each page 17 | dash.page_container 18 | ] 19 | ) 20 | 21 | 22 | if __name__ == "__main__": 23 | app.run(debug=True) 24 | -------------------------------------------------------------------------------- /Dash_More_Advanced_Stuff/Intro to Python multipage/App-A/pages/pg1.py: -------------------------------------------------------------------------------- 1 | import dash 2 | from dash import dcc, html 3 | import plotly.express as px 4 | 5 | dash.register_page(__name__, path='/') 6 | 7 | df = px.data.gapminder() 8 | 9 | layout = html.Div( 10 | [ 11 | dcc.Dropdown([x for x in df.continent.unique()], id='cont-choice', style={'width':'50%'}), 12 | dcc.Graph(id='line-fig', 13 | figure=px.histogram(df, x='continent', y='lifeExp', histfunc='avg')) 14 | ] 15 | ) 16 | 17 | -------------------------------------------------------------------------------- /Dash_More_Advanced_Stuff/Intro to Python multipage/App-A/pages/pg2.py: -------------------------------------------------------------------------------- 1 | import dash 2 | from dash import dcc, html 3 | import plotly.express as px 4 | 5 | dash.register_page(__name__) 6 | 7 | df = px.data.tips() 8 | 9 | layout = html.Div( 10 | [ 11 | dcc.RadioItems([x for x in df.day.unique()], id='day-choice'), 12 | dcc.Graph(id='bar-fig', 13 | figure=px.bar(df, x='smoker', y='total_bill')) 14 | ] 15 | ) 16 | 17 | -------------------------------------------------------------------------------- /Dash_More_Advanced_Stuff/Intro to Python multipage/App-A/pages/pg3.py: -------------------------------------------------------------------------------- 1 | import dash 2 | from dash import dcc, html 3 | 4 | dash.register_page(__name__) 5 | 6 | layout = html.Div( 7 | [ 8 | dcc.Markdown('# This will be the content of Page 3') 9 | ] 10 | ) 11 | -------------------------------------------------------------------------------- /Dash_More_Advanced_Stuff/Intro to Python multipage/App-B/app.py: -------------------------------------------------------------------------------- 1 | import dash 2 | from dash import html, dcc 3 | import dash_bootstrap_components as dbc 4 | 5 | app = dash.Dash(__name__, use_pages=True, external_stylesheets=[dbc.themes.SPACELAB]) 6 | sidebar = dbc.Nav( 7 | [ 8 | dbc.NavLink( 9 | [ 10 | html.Div(page["name"], className="ms-2"), 11 | ], 12 | href=page["path"], 13 | active="exact", 14 | ) 15 | for page in dash.page_registry.values() 16 | ], 17 | vertical=True, 18 | pills=True, 19 | className="bg-light", 20 | ) 21 | 22 | app.layout = dbc.Container([ 23 | dbc.Row([ 24 | dbc.Col(html.Div("Python Multipage App with Dash", 25 | style={'fontSize':50, 'textAlign':'center'})) 26 | ]), 27 | 28 | html.Hr(), 29 | 30 | dbc.Row( 31 | [ 32 | dbc.Col( 33 | [ 34 | sidebar 35 | ], xs=4, sm=4, md=2, lg=2, xl=2, xxl=2), 36 | 37 | dbc.Col( 38 | [ 39 | dash.page_container 40 | ], xs=8, sm=8, md=10, lg=10, xl=10, xxl=10) 41 | ] 42 | ) 43 | ], fluid=True) 44 | 45 | 46 | if __name__ == "__main__": 47 | app.run(debug=False) 48 | -------------------------------------------------------------------------------- /Dash_More_Advanced_Stuff/Intro to Python multipage/App-B/assets/smoking2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Coding-with-Adam/Dash-by-Plotly/f53325eb47d610b960b8d97fd48bec2520cf18c1/Dash_More_Advanced_Stuff/Intro to Python multipage/App-B/assets/smoking2.jpg -------------------------------------------------------------------------------- /Dash_More_Advanced_Stuff/Intro to Python multipage/App-B/pages/pg1.py: -------------------------------------------------------------------------------- 1 | import dash 2 | from dash import dcc, html, callback, Output, Input 3 | import plotly.express as px 4 | import dash_bootstrap_components as dbc 5 | 6 | dash.register_page(__name__, path='/', name='Home') # '/' is home page 7 | 8 | # page 1 data 9 | df = px.data.gapminder() 10 | 11 | layout = html.Div( 12 | [ 13 | dbc.Row( 14 | [ 15 | dbc.Col( 16 | [ 17 | dcc.Dropdown(options=df.continent.unique(), 18 | id='cont-choice') 19 | ], xs=10, sm=10, md=8, lg=4, xl=4, xxl=4 20 | ) 21 | ] 22 | ), 23 | dbc.Row( 24 | [ 25 | dbc.Col( 26 | [ 27 | dcc.Graph(id='line-fig', 28 | figure=px.histogram(df, x='continent', 29 | y='lifeExp', 30 | histfunc='avg')) 31 | ], width=12 32 | ) 33 | ] 34 | ) 35 | ] 36 | ) 37 | 38 | 39 | @callback( 40 | Output('line-fig', 'figure'), 41 | Input('cont-choice', 'value') 42 | ) 43 | def update_graph(value): 44 | if value is None: 45 | fig = px.histogram(df, x='continent', y='lifeExp', histfunc='avg') 46 | else: 47 | dff = df[df.continent==value] 48 | fig = px.histogram(dff, x='country', y='lifeExp', histfunc='avg') 49 | return fig 50 | -------------------------------------------------------------------------------- /Dash_More_Advanced_Stuff/Intro to Python multipage/App-B/pages/pg2.py: -------------------------------------------------------------------------------- 1 | import dash 2 | from dash import dcc, html, callback, Output, Input 3 | import plotly.express as px 4 | import dash_bootstrap_components as dbc 5 | 6 | dash.register_page(__name__, name='Tip Analysis') 7 | 8 | # page 2 data 9 | df = px.data.tips() 10 | 11 | layout = html.Div( 12 | [ 13 | dbc.Row([ 14 | dbc.Col( 15 | [ 16 | html.Img(src='assets/smoking2.jpg') 17 | ], width=4 18 | ), 19 | dbc.Col( 20 | [ 21 | dcc.RadioItems(df.day.unique(), id='day-choice', value='Sat') 22 | ], width=6 23 | ) 24 | ]), 25 | dbc.Row([ 26 | dbc.Col( 27 | [ 28 | dcc.Graph(id='bar-fig', 29 | figure=px.bar(df, x='smoker', y='total_bill')) 30 | ], width=12 31 | ) 32 | ]) 33 | ] 34 | ) 35 | 36 | 37 | @callback( 38 | Output('bar-fig', 'figure'), 39 | Input('day-choice', 'value') 40 | ) 41 | def update_graph(value): 42 | dff = df[df.day==value] 43 | fig = px.bar(dff, x='smoker', y='total_bill') 44 | return fig 45 | -------------------------------------------------------------------------------- /Dash_More_Advanced_Stuff/Intro to Python multipage/App-B/pages/pg3.py: -------------------------------------------------------------------------------- 1 | import dash 2 | from dash import dcc, html 3 | 4 | dash.register_page(__name__, name='Other Data') 5 | 6 | layout = html.Div( 7 | [ 8 | dcc.Markdown('# This will be the content of Page 3 and much more!') 9 | ] 10 | ) 11 | -------------------------------------------------------------------------------- /Dash_More_Advanced_Stuff/Intro to Python multipage/App-C/src/app.py: -------------------------------------------------------------------------------- 1 | import dash 2 | from dash import html, dcc 3 | import dash_bootstrap_components as dbc 4 | 5 | app = dash.Dash(__name__, use_pages=True, external_stylesheets=[dbc.themes.SPACELAB]) 6 | server = app.server 7 | 8 | sidebar = dbc.Nav( 9 | [ 10 | dbc.NavLink( 11 | [ 12 | html.Div(page["name"], className="ms-2"), 13 | ], 14 | href=page["path"], 15 | active="exact", 16 | ) 17 | for page in dash.page_registry.values() 18 | ], 19 | vertical=True, 20 | pills=True, 21 | className="bg-light", 22 | ) 23 | 24 | app.layout = dbc.Container([ 25 | dbc.Row([ 26 | dbc.Col(html.Div("Python Multipage App with Dash", 27 | style={'fontSize':50, 'textAlign':'center'})) 28 | ]), 29 | 30 | html.Hr(), 31 | 32 | dbc.Row( 33 | [ 34 | dbc.Col( 35 | [ 36 | sidebar 37 | ], xs=4, sm=4, md=2, lg=2, xl=2, xxl=2), 38 | 39 | dbc.Col( 40 | [ 41 | dash.page_container 42 | ], xs=8, sm=8, md=10, lg=10, xl=10, xxl=10) 43 | ] 44 | ) 45 | ], fluid=True) 46 | 47 | 48 | if __name__ == "__main__": 49 | app.run(debug=False) 50 | -------------------------------------------------------------------------------- /Dash_More_Advanced_Stuff/Intro to Python multipage/App-C/src/assets/pg1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Coding-with-Adam/Dash-by-Plotly/f53325eb47d610b960b8d97fd48bec2520cf18c1/Dash_More_Advanced_Stuff/Intro to Python multipage/App-C/src/assets/pg1.png -------------------------------------------------------------------------------- /Dash_More_Advanced_Stuff/Intro to Python multipage/App-C/src/assets/pg3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Coding-with-Adam/Dash-by-Plotly/f53325eb47d610b960b8d97fd48bec2520cf18c1/Dash_More_Advanced_Stuff/Intro to Python multipage/App-C/src/assets/pg3.png -------------------------------------------------------------------------------- /Dash_More_Advanced_Stuff/Intro to Python multipage/App-C/src/assets/smoking2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Coding-with-Adam/Dash-by-Plotly/f53325eb47d610b960b8d97fd48bec2520cf18c1/Dash_More_Advanced_Stuff/Intro to Python multipage/App-C/src/assets/smoking2.jpg -------------------------------------------------------------------------------- /Dash_More_Advanced_Stuff/Intro to Python multipage/App-C/src/pages/pg1.py: -------------------------------------------------------------------------------- 1 | import dash 2 | from dash import dcc, html, callback, Output, Input 3 | import plotly.express as px 4 | import dash_bootstrap_components as dbc 5 | 6 | # To create meta tag for each page, define the title, image, and description. 7 | dash.register_page(__name__, 8 | path='/', # '/' is home page and it represents the url 9 | name='Home', # name of page, commonly used as name of link 10 | title='Index', # title that appears on browser's tab 11 | image='pg1.png', # image in the assets folder 12 | description='Histograms are the new bar charts.' 13 | ) 14 | 15 | # page 1 data 16 | df = px.data.gapminder() 17 | 18 | layout = html.Div( 19 | [ 20 | dbc.Row( 21 | [ 22 | dbc.Col( 23 | [ 24 | dcc.Dropdown(options=df.continent.unique(), 25 | id='cont-choice') 26 | ], xs=10, sm=10, md=8, lg=4, xl=4, xxl=4 27 | ) 28 | ] 29 | ), 30 | dbc.Row( 31 | [ 32 | dbc.Col( 33 | [ 34 | dcc.Graph(id='line-fig', 35 | figure=px.histogram(df, x='continent', 36 | y='lifeExp', 37 | histfunc='avg')) 38 | ], width=12 39 | ) 40 | ] 41 | ) 42 | ] 43 | ) 44 | 45 | 46 | @callback( 47 | Output('line-fig', 'figure'), 48 | Input('cont-choice', 'value') 49 | ) 50 | def update_graph(value): 51 | if value is None: 52 | fig = px.histogram(df, x='continent', y='lifeExp', histfunc='avg') 53 | else: 54 | dff = df[df.continent==value] 55 | fig = px.histogram(dff, x='country', y='lifeExp', histfunc='avg') 56 | return fig 57 | -------------------------------------------------------------------------------- /Dash_More_Advanced_Stuff/Intro to Python multipage/App-C/src/pages/pg2.py: -------------------------------------------------------------------------------- 1 | import dash 2 | from dash import dcc, html, callback, Output, Input 3 | import plotly.express as px 4 | import dash_bootstrap_components as dbc 5 | 6 | dash.register_page(__name__, 7 | path='/tips', # represents the url text 8 | name='Tip Analysis', # name of page, commonly used as name of link 9 | title='Tips' # epresents the title of browser's tab 10 | ) 11 | 12 | # page 2 data 13 | df = px.data.tips() 14 | 15 | layout = html.Div( 16 | [ 17 | dbc.Row([ 18 | dbc.Col( 19 | [ 20 | html.Img(src='assets/smoking2.jpg') 21 | ], width=4 22 | ), 23 | dbc.Col( 24 | [ 25 | dcc.RadioItems(df.day.unique(), id='day-choice', value='Sat') 26 | ], width=6 27 | ) 28 | ]), 29 | dbc.Row([ 30 | dbc.Col( 31 | [ 32 | dcc.Graph(id='bar-fig', 33 | figure=px.bar(df, x='smoker', y='total_bill')) 34 | ], width=12 35 | ) 36 | ]) 37 | ] 38 | ) 39 | 40 | 41 | @callback( 42 | Output('bar-fig', 'figure'), 43 | Input('day-choice', 'value') 44 | ) 45 | def update_graph(value): 46 | dff = df[df.day==value] 47 | fig = px.bar(dff, x='smoker', y='total_bill') 48 | return fig 49 | -------------------------------------------------------------------------------- /Dash_More_Advanced_Stuff/Intro to Python multipage/App-C/src/pages/pg3.py: -------------------------------------------------------------------------------- 1 | import dash 2 | from dash import dcc, html 3 | import plotly.express as px 4 | 5 | dash.register_page(__name__, 6 | path='/heatmap', 7 | name='Heatmap', 8 | title='New heatmaps', 9 | image='pg3.png', 10 | description='Learn all about the heatmap.' 11 | ) 12 | 13 | layout = html.Div( 14 | [ 15 | dcc.Markdown('## This is the newest heatmap design', style={'textAlign':'center'}), 16 | dcc.Graph(figure= px.imshow([[1, 20, 30], 17 | [20, 1, 60], 18 | [30, 60, 1]])) 19 | ] 20 | ) 21 | -------------------------------------------------------------------------------- /Dash_More_Advanced_Stuff/Multipage_app/app.py: -------------------------------------------------------------------------------- 1 | import dash # pip install dash 2 | from dash import Dash, html, dcc 3 | import dash_bootstrap_components as dbc # pip install dash-bootstrap-components 4 | 5 | # Code from: https://github.com/plotly/dash-labs/tree/main/docs/demos/multi_page_example1 6 | 7 | app = dash.Dash( 8 | __name__, external_stylesheets=[dbc.themes.BOOTSTRAP], use_pages=True 9 | ) 10 | 11 | # for x in dash.page_registry.values(): 12 | # print(x) 13 | 14 | navbar = dbc.NavbarSimple( 15 | dbc.DropdownMenu( 16 | [ 17 | dbc.DropdownMenuItem(page["name"], href=page["path"]) 18 | for page in dash.page_registry.values() 19 | if page["module"] != "pages.not_found_404" 20 | ], 21 | nav=True, 22 | label="More Pages", 23 | ), 24 | brand="Multi Page App Plugin Demo", 25 | color="primary", 26 | dark=True, 27 | className="mb-2", 28 | ) 29 | 30 | app.layout = dbc.Container(html.Div([ 31 | navbar, dash.page_container 32 | ]), fluid=True) 33 | 34 | if __name__ == "__main__": 35 | app.run_server(debug=True) 36 | -------------------------------------------------------------------------------- /Dash_More_Advanced_Stuff/Multipage_app/app2_with_sidebar.py: -------------------------------------------------------------------------------- 1 | import dash 2 | from dash import dcc, html, Output, Input, State 3 | import dash_labs as dl 4 | import dash_bootstrap_components as dbc 5 | 6 | 7 | app = dash.Dash( 8 | __name__, external_stylesheets=[dbc.themes.BOOTSTRAP], use_pages=True 9 | ) 10 | 11 | offcanvas = html.Div( 12 | [ 13 | dbc.Button("Explore", id="open-offcanvas", n_clicks=0), 14 | dbc.Offcanvas( 15 | dbc.ListGroup( 16 | [ 17 | dbc.ListGroupItem(page["name"], href=page["path"]) 18 | for page in dash.page_registry.values() 19 | if page["module"] != "pages.not_found_404" 20 | ] 21 | ), 22 | id="offcanvas", 23 | is_open=False, 24 | ), 25 | ], 26 | className="my-3" 27 | ) 28 | 29 | app.layout = dbc.Container(html.Div([ 30 | offcanvas,dash.page_container 31 | ]), fluid=True) 32 | 33 | @app.callback( 34 | Output("offcanvas", "is_open"), 35 | Input("open-offcanvas", "n_clicks"), 36 | [State("offcanvas", "is_open")], 37 | ) 38 | def toggle_offcanvas(n1, is_open): 39 | if n1: 40 | return not is_open 41 | return is_open 42 | 43 | if __name__ == "__main__": 44 | app.run_server(debug=True, port=8001) 45 | -------------------------------------------------------------------------------- /Dash_More_Advanced_Stuff/Multipage_app/pages/bar_charts.py: -------------------------------------------------------------------------------- 1 | import dash 2 | # Code from: https://github.com/plotly/dash-labs/tree/main/docs/demos/multi_page_example1 3 | dash.register_page(__name__) 4 | 5 | from dash import Dash, dcc, html, Input, Output, callback 6 | import plotly.express as px 7 | 8 | df = px.data.tips() 9 | days = df.day.unique() 10 | 11 | layout = html.Div( 12 | [ 13 | dcc.Dropdown( 14 | id="dropdown", 15 | options=[{"label": x, "value": x} for x in days], 16 | value=days[0], 17 | clearable=False, 18 | style={"width": "50%"} 19 | ), 20 | dcc.Graph(id="bar-chart"), 21 | ] 22 | ) 23 | 24 | 25 | @callback(Output("bar-chart", "figure"), Input("dropdown", "value")) 26 | def update_bar_chart(day): 27 | mask = df["day"] == day 28 | fig = px.bar(df[mask], x="sex", y="total_bill", color="smoker", barmode="group") 29 | return fig 30 | -------------------------------------------------------------------------------- /Dash_More_Advanced_Stuff/Multipage_app/pages/heatmaps.py: -------------------------------------------------------------------------------- 1 | import dash 2 | # Code from: https://github.com/plotly/dash-labs/tree/main/docs/demos/multi_page_example1 3 | dash.register_page(__name__, path="/") 4 | 5 | from dash import Dash, dcc, html, Input, Output, callback 6 | import plotly.express as px 7 | 8 | df = px.data.medals_wide(indexed=True) 9 | 10 | layout = html.Div( 11 | [ 12 | html.P("Medals included:"), 13 | dcc.Checklist( 14 | id="heatmaps-medals", 15 | options=[{"label": x, "value": x} for x in df.columns], 16 | value=df.columns.tolist(), 17 | ), 18 | dcc.Graph(id="heatmaps-graph"), 19 | ] 20 | ) 21 | 22 | 23 | @callback(Output("heatmaps-graph", "figure"), Input("heatmaps-medals", "value")) 24 | def filter_heatmap(cols): 25 | fig = px.imshow(df[cols]) 26 | return fig 27 | -------------------------------------------------------------------------------- /Dash_More_Advanced_Stuff/Multipage_app/pages/histograms.py: -------------------------------------------------------------------------------- 1 | import dash 2 | # Code from: https://github.com/plotly/dash-labs/tree/main/docs/demos/multi_page_example1 3 | dash.register_page(__name__) 4 | 5 | from dash import Dash, dcc, html, Input, Output, callback 6 | import plotly.express as px 7 | import numpy as np # pip install numpy 8 | 9 | np.random.seed(2020) 10 | 11 | layout = html.Div( 12 | [ 13 | dcc.Graph(id="histograms-graph"), 14 | html.P("Mean:"), 15 | dcc.Slider( 16 | id="histograms-mean", min=-3, max=3, value=0, marks={-3: "-3", 3: "3"} 17 | ), 18 | html.P("Standard Deviation:"), 19 | dcc.Slider(id="histograms-std", min=1, max=3, value=1, marks={1: "1", 3: "3"}), 20 | ] 21 | ) 22 | 23 | 24 | @callback( 25 | Output("histograms-graph", "figure"), 26 | Input("histograms-mean", "value"), 27 | Input("histograms-std", "value"), 28 | ) 29 | def display_color(mean, std): 30 | data = np.random.normal(mean, std, size=500) 31 | fig = px.histogram(data, nbins=30, range_x=[-10, 10]) 32 | fig.update_layout(showlegend=False) 33 | return fig 34 | -------------------------------------------------------------------------------- /Dash_More_Advanced_Stuff/Multipage_app/pages/not_found_404.py: -------------------------------------------------------------------------------- 1 | from dash import html 2 | import dash 3 | 4 | dash.register_page(__name__, path="/404") 5 | 6 | 7 | layout = html.H1("Custom 404") 8 | -------------------------------------------------------------------------------- /Dash_More_Advanced_Stuff/Sharing_data_multipage_app/app.py: -------------------------------------------------------------------------------- 1 | import dash 2 | from dash import dcc, callback, Output, Input, dash_table # pip install dash 3 | import dash_bootstrap_components as dbc # pip install dash-bootstrap-components 4 | import plotly.express as px 5 | 6 | df = px.data.tips() 7 | print(df.head()) 8 | # convert dataframe to list of dictionaries because dcc.Store 9 | # accepts dict | list | number | string | boolean 10 | df = df.to_dict('records') 11 | 12 | app = dash.Dash( 13 | __name__, external_stylesheets=[dbc.themes.FLATLY], suppress_callback_exceptions=True, use_pages=True 14 | ) 15 | 16 | navbar = dbc.NavbarSimple( 17 | dbc.DropdownMenu( 18 | [ 19 | dbc.DropdownMenuItem(page["name"], href=page["path"]) 20 | for page in dash.page_registry.values() 21 | if page["module"] != "pages.not_found_404" 22 | ], 23 | nav=True, 24 | label="More Pages", 25 | ), 26 | brand="Multi Page App Plugin Demo", 27 | color="primary", 28 | dark=True, 29 | className="mb-2", 30 | ) 31 | 32 | app.layout = dbc.Container( 33 | [navbar,dash.page_container, 34 | dcc.Store(id="stored-data", data=df), 35 | dcc.Store(id="store-dropdown-value", data=None) 36 | ], 37 | fluid=True) 38 | 39 | if __name__ == "__main__": 40 | app.run_server(debug=True, port=8003) 41 | 42 | -------------------------------------------------------------------------------- /Dash_More_Advanced_Stuff/Sharing_data_multipage_app/pages/bargraph.py: -------------------------------------------------------------------------------- 1 | import dash 2 | 3 | dash.register_page(__name__, path="/") 4 | 5 | from dash import Dash, dcc, html, Input, Output, State, callback, dash_table 6 | import plotly.express as px 7 | import pandas as pd 8 | 9 | 10 | layout = html.Div( 11 | [ 12 | html.P("Choose Day:"), 13 | html.Div(id="dropdown-container", children=[]), 14 | html.Div(id="bar-container", children=[]), 15 | ] 16 | ) 17 | 18 | @callback(Output("dropdown-container", "children"), Input("stored-data", "data")) 19 | def populate_dropdownvalues(data): 20 | dff = pd.DataFrame(data) 21 | return dcc.Dropdown( 22 | id="dropdown", 23 | options=[{"label": x, "value": x} for x in dff.day.unique()], 24 | value=dff.day.unique()[0], 25 | clearable=False, 26 | style={"width": "50%"}, 27 | persistence=True, 28 | persistence_type="session" 29 | ), 30 | 31 | 32 | @callback( 33 | [Output("bar-container", "children"), 34 | Output("store-dropdown-value", "data")], 35 | [Input("dropdown", "value"), 36 | State("stored-data", "data")] 37 | ) 38 | def graph_and_table(dropdown_day, data): 39 | dff = pd.DataFrame(data) 40 | dff = dff[dff["day"] == dropdown_day] 41 | fig = px.bar(dff, x="sex", y="total_bill", color="smoker", barmode="group") 42 | return dcc.Graph(figure=fig), dropdown_day 43 | 44 | -------------------------------------------------------------------------------- /Dash_More_Advanced_Stuff/Sharing_data_multipage_app/pages/not_found_404.py: -------------------------------------------------------------------------------- 1 | from dash import html 2 | import dash 3 | 4 | dash.register_page(__name__, path="/404") 5 | 6 | 7 | layout = html.H1("Custom 404") 8 | -------------------------------------------------------------------------------- /Dash_More_Advanced_Stuff/Sharing_data_multipage_app/pages/table.py: -------------------------------------------------------------------------------- 1 | import dash 2 | 3 | dash.register_page(__name__) 4 | 5 | from dash import Dash, dcc, html, Input, Output, callback, dash_table 6 | import plotly.express as px 7 | import pandas as pd 8 | 9 | 10 | layout = html.Div( 11 | [ 12 | html.Div(id="table-container", children=[]), 13 | ] 14 | ) 15 | 16 | @callback(Output("table-container", "children"), 17 | [Input("stored-data", "data"), 18 | Input("store-dropdown-value", "data")] 19 | ) 20 | def populate_checklist(data, day): 21 | if day is None: 22 | return html.H1("Please choose a day on bargraph page!") 23 | dff = pd.DataFrame(data) 24 | dff = dff[dff["day"] == day] 25 | my_table = dash_table.DataTable( 26 | id='table', 27 | columns=[{"name": i, "id": i} for i in dff.columns], 28 | data=dff.to_dict('records'), 29 | ) 30 | return my_table 31 | -------------------------------------------------------------------------------- /Dash_More_Advanced_Stuff/Speed_Up_Dash/faster_graph.py: -------------------------------------------------------------------------------- 1 | from dash import Dash, dcc, html, Input, Output, State, Patch 2 | import plotly.express as px 3 | import pandas as pd 4 | import numpy as np 5 | 6 | app = Dash(__name__) 7 | 8 | # Getting our data 9 | df = pd.read_csv("MarketSales.csv") 10 | # df = pd.read_csv("MarketSales1.csv") 11 | 12 | # print("find index of item id #324") 13 | # print(np.where(df['ID']==324)) 14 | 15 | # Print figure to understand how to use Patch 16 | # fig = px.scatter(df, x='LINENET', y='PRICE') 17 | # print(fig) 18 | # # print('price of item id #324 on index 12 is:') 19 | # print(fig['data'][0]['y'][12]) 20 | # exit() 21 | 22 | 23 | # App layout 24 | app.layout = html.Div([ 25 | html.Div("Our goal is to update only the Price of one data point without transferring the whole figure and its data from the server to the browser."), 26 | dcc.RadioItems(['LINENET','LINENETTOTAL'], 'LINENET', id='x-axis'), 27 | html.Button(id="button", children="update Price of one data point"), 28 | dcc.Graph(id="graph-update-example", figure={}), 29 | ]) 30 | 31 | @app.callback( 32 | Output("graph-update-example", "figure"), 33 | Input("x-axis", "value"), 34 | ) 35 | def update_markers(x_axis_col): 36 | fig = px.scatter(df, x=x_axis_col, y='PRICE') 37 | return fig 38 | 39 | @app.callback( 40 | Output("graph-update-example", "figure", allow_duplicate=True), 41 | Input("button", "n_clicks"), 42 | prevent_initial_call=True 43 | ) 44 | def update_markers(n_click): 45 | patched_figure = Patch() 46 | patched_figure['data'][0]['y'][12] = 500+n_click*100 47 | return patched_figure 48 | 49 | 50 | if __name__ == '__main__': 51 | app.run_server(debug=True) 52 | -------------------------------------------------------------------------------- /Dash_More_Advanced_Stuff/Speed_Up_Dash/faster_table.py: -------------------------------------------------------------------------------- 1 | from dash import Dash, html, dcc,Input, Output, State, Patch 2 | import dash_ag_grid as dag 3 | import pandas as pd 4 | import numpy as np 5 | 6 | df = pd.read_csv("https://raw.githubusercontent.com/plotly/datasets/master/solar.csv") 7 | df = pd.concat([df]*3, ignore_index=True) 8 | 9 | app = Dash(__name__) 10 | 11 | grid = dag.AgGrid( 12 | id="quickstart-grid", 13 | rowData=df.to_dict("records"), 14 | columnDefs=[{"field": i} for i in df.columns], 15 | columnSize="sizeToFit", 16 | ) 17 | # print(grid) 18 | # grid.rowData[0]['Number of Solar Plants'] = 500 19 | 20 | app.layout = html.Div([ 21 | html.Button('Get Data', id='my-button'), 22 | html.Div('Select State to update number of Solar Plants'), 23 | dcc.Dropdown(sorted(df.State.unique()), 'California', id='select-state'), 24 | dcc.Input(type='number', id='quantity'), 25 | grid 26 | ]) 27 | 28 | 29 | @app.callback( 30 | Output("quickstart-grid", "rowData"), 31 | Input("my-button", "n_clicks"), 32 | State("select-state", "value"), 33 | State("quantity", "value"), 34 | prevent_initial_call=True 35 | ) 36 | def display_cell_clicked_on(_, state_chosen, num): 37 | # print(np.where(df.State=='California')[0]) 38 | 39 | update_grid_data = Patch() 40 | for x in [0,8,16]: 41 | update_grid_data[x]['Number of Solar Plants'] = num 42 | return update_grid_data 43 | 44 | 45 | if __name__ == "__main__": 46 | app.run_server(debug=True) 47 | -------------------------------------------------------------------------------- /Dash_More_Advanced_Stuff/Speed_Up_Dash/normal_graph.py: -------------------------------------------------------------------------------- 1 | from dash import Dash, dcc, html, Input, Output, State, Patch 2 | import plotly.express as px 3 | import pandas as pd 4 | import numpy as np 5 | 6 | app = Dash(__name__) 7 | 8 | # Getting our data: Turkish Market Sales by OMER COLAKOGLU. 9 | # https://www.kaggle.com/datasets/omercolakoglu/turkish-market-sales-dataset-with-9000items 10 | df = pd.read_csv("MarketSales.csv") 11 | # df = pd.read_csv("MarketSales1.csv") 12 | 13 | 14 | # App layout 15 | app.layout = html.Div([ 16 | html.Div("Our goal is to update only the Price of one data point without transferring the whole figure and its data from the server to the browser."), 17 | dcc.RadioItems(['LINENET','LINENETTOTAL'], 'LINENET', id='x-axis'), 18 | html.Button(id="button", children="update Price of one data point"), 19 | dcc.Graph(id="graph-update-example", figure={}), 20 | ]) 21 | 22 | @app.callback( 23 | Output("graph-update-example", "figure"), 24 | Input("x-axis", "value"), 25 | ) 26 | def update_markers(x_axis_col): 27 | fig = px.scatter(df, x=x_axis_col, y='PRICE') 28 | return fig 29 | 30 | @app.callback( 31 | Output("graph-update-example", "figure", allow_duplicate=True), 32 | Input("button", "n_clicks"), 33 | State("graph-update-example", "figure"), 34 | prevent_initial_call=True 35 | ) 36 | def update_markers(n_click, fig): 37 | fig['data'][0]['y'][12] = 500+n_click*100 38 | return fig 39 | 40 | 41 | if __name__ == '__main__': 42 | app.run_server(debug=True, port=8004) 43 | -------------------------------------------------------------------------------- /Dash_More_Advanced_Stuff/Speed_Up_Dash/normal_table.py: -------------------------------------------------------------------------------- 1 | from dash import Dash, html, dcc,Input, Output, State, Patch 2 | import dash_ag_grid as dag 3 | import pandas as pd 4 | import numpy as np 5 | 6 | df = pd.read_csv("https://raw.githubusercontent.com/plotly/datasets/master/solar.csv") 7 | df = pd.concat([df]*3, ignore_index=True) 8 | 9 | 10 | app = Dash(__name__) 11 | 12 | grid = dag.AgGrid( 13 | id="quickstart-grid", 14 | rowData=df.to_dict("records"), 15 | columnDefs=[{"field": i} for i in df.columns], 16 | columnSize="sizeToFit", 17 | ) 18 | 19 | app.layout = html.Div([ 20 | html.Button('Get Data', id='my-button'), 21 | html.Div('Select State to update number of Solar Plants'), 22 | dcc.Dropdown(sorted(df.State.unique()), 'California', id='select-state'), 23 | dcc.Input(type='number', id='quantity'), 24 | grid 25 | ]) 26 | 27 | 28 | @app.callback( 29 | Output("quickstart-grid", "rowData"), 30 | Input("my-button", "n_clicks"), 31 | State("select-state", "value"), 32 | State("quantity", "value"), 33 | State("quickstart-grid", "rowData"), 34 | prevent_initial_call=True 35 | ) 36 | def display_cell_clicked_on(_, state_chosen, num, data): 37 | for x in [0, 8, 16]: 38 | data[x]['Number of Solar Plants'] = num 39 | return data 40 | 41 | 42 | if __name__ == "__main__": 43 | app.run_server(debug=True, port=8004) 44 | -------------------------------------------------------------------------------- /Dash_and_Databases/MongoDB/data.py: -------------------------------------------------------------------------------- 1 | db.shelterA.insertMany([ 2 | { 3 | "owner": "Marv", 4 | "animal": "cat", 5 | "breed": "tabi", 6 | "age": 1, 7 | "health": "good", 8 | "neutered": false 9 | }, 10 | { 11 | "owner": "Adam", 12 | "animal": "cat", 13 | "breed": "longthair", 14 | "age": 3, 15 | "health": "great", 16 | "neutered": false 17 | }, 18 | { 19 | "owner": "Jim", 20 | "animal": "cat", 21 | "breed": "shorthair", 22 | "age": 2, 23 | "health": "average", 24 | "neutered": true 25 | }, 26 | { 27 | "owner": "Sebastian", 28 | "animal": "dog", 29 | "breed": "french", 30 | "age": 5, 31 | "health": "bad", 32 | "neutered": true 33 | }, 34 | { 35 | "owner": "Sindy", 36 | "animal": "cat", 37 | "breed": "sphynx", 38 | "age": 10, 39 | "health": "average", 40 | "neutered": true 41 | }, 42 | { 43 | "owner": "Prajat", 44 | "animal": "dog", 45 | "breed": "buldog", 46 | "age": 3, 47 | "health": "good", 48 | "neutered": true 49 | }, 50 | { 51 | "owner": "Sindy", 52 | "animal": "cat", 53 | "breed": "sphynx", 54 | "age": 10, 55 | "health": "average", 56 | "neutered": true 57 | }, 58 | { 59 | "owner": "Lyla", 60 | "animal": "cat", 61 | "breed": "sphynx", 62 | "age": 4, 63 | "health": "good", 64 | "neutered": false 65 | }, 66 | { 67 | "owner": "Sam", 68 | "animal": "dog", 69 | "breed": "labrador", 70 | "age": 4, 71 | "health": "average", 72 | "neutered": false 73 | }, 74 | { 75 | "owner": "Seba", 76 | "animal": "cat", 77 | "breed": "sphynx", 78 | "age": 10, 79 | "health": "bad", 80 | "neutered": true 81 | } 82 | ]) 83 | -------------------------------------------------------------------------------- /Dash_and_Databases/MongoDB/test_mongo.py: -------------------------------------------------------------------------------- 1 | import plotly.express as px 2 | import pandas as pd 3 | import pymongo 4 | from pymongo import MongoClient 5 | 6 | # Connect to local server 7 | client = MongoClient("mongodb://127.0.0.1:27017/") 8 | 9 | # Create database called animals 10 | mydb = client["animals"] 11 | 12 | # Create Collection (table) called shelterA 13 | collection = mydb.shelterA 14 | 15 | # Create the documents (rows) 16 | record = { 17 | "animal": "cat", 18 | "breed": "shorthair", 19 | "age": 2, 20 | "health": "good", 21 | "neutered": "false" 22 | } 23 | 24 | # Insert documents (rows) into the database's collection (table) 25 | collection.insert_one(record) 26 | 27 | # View the documents 28 | # testing = collection.find_one() 29 | # print(testing) 30 | 31 | # Convert the Collection (table) date to a pandas DataFrame 32 | # df = pd.DataFrame(list(collection.find())) 33 | # print(df) 34 | # print("----------------------------") 35 | # print(df.iloc[:, 1:]) 36 | -------------------------------------------------------------------------------- /DataTable/Conditional_Formatting/medical supplies.csv: -------------------------------------------------------------------------------- 1 | Serial number,Machines,Country,Part description,Part sent date,Part received date,Elapsed Days,Origin supplier,Feedback 2 | 28555,425,Germany,MPD,11-Jan-19,29-Jan-19,18,Blue-P,No 3 | 31862,463,Germany,MPD,29-Jan-19,11-Mar-19,41,Sanders,No 4 | 35723,323,Germany,PCB,17-Feb-20,28-Feb-20,11,Sanders,No 5 | 48789,1278,India,MPD,29-Jan-19,11-Mar-19,41,Sanders,No 6 | 63051,223,India,PS,16-Mar-20,12-May-20,57,Sanders,No 7 | 69587,486,India,PS,20-May-19,29-May-19,9,Blue-P,Yes 8 | 74356,863,Germany,PS,8-Apr-19,17-Apr-19,9,Blue-P,Yes 9 | 78365,846,Germany,PS,30-Apr-19,9-May-19,9,Blue-P,No 10 | 88365,234,Canada,PCB,2-Mar-20,5-Mar-20,3,Blue-P,No 11 | 91585,2444,India,PCB,20-Jul-20,,,,Yes 12 | 93543,565,India,PCB,11-Aug-20,21-Aug-20,10,Sanders,Yes 13 | 95676,22,India,PCB,11-Sep-20,21-Aug-20,-21,Blue-P,Yes 14 | 99653,38,India,MPD,11-Aug-20,,,,Yes 15 | 100237,865,Germany,MPD,3-Aug-20,,,Sanders,Yes 16 | -------------------------------------------------------------------------------- /DataTable/Conditional_Formatting/table_bars.py: -------------------------------------------------------------------------------- 1 | # Code source from Dash Plotly 2 | def data_bars(df, column): 3 | n_bins = 100 4 | bounds = [i * (1.0 / n_bins) for i in range(n_bins + 1)] 5 | ranges = [ 6 | ((df[column].max() - df[column].min()) * i) + df[column].min() 7 | for i in bounds 8 | ] 9 | styles = [] 10 | for i in range(1, len(bounds)): 11 | min_bound = ranges[i - 1] 12 | max_bound = ranges[i] 13 | max_bound_percentage = bounds[i] * 100 14 | styles.append({ 15 | 'if': { 16 | 'filter_query': ( 17 | '{{{column}}} >= {min_bound}' + 18 | (' && {{{column}}} < {max_bound}' if (i < len(bounds) - 1) else '') 19 | ).format(column=column, min_bound=min_bound, max_bound=max_bound), 20 | 'column_id': column 21 | }, 22 | 'background': ( 23 | """ 24 | linear-gradient(90deg, 25 | #0074D9 0%, 26 | #0074D9 {max_bound_percentage}%, 27 | white {max_bound_percentage}%, 28 | white 100%) 29 | """.format(max_bound_percentage=max_bound_percentage) 30 | ), 31 | 'paddingBottom': 2, 32 | 'paddingTop': 2 33 | }) 34 | 35 | return styles 36 | -------------------------------------------------------------------------------- /DataTable/Tips-and-tricks/hide-x-cols.py: -------------------------------------------------------------------------------- 1 | from dash import Dash, dash_table, dcc, html, Input, Output 2 | import pandas as pd 3 | import dash_bootstrap_components as dbc 4 | # Need to use Python 3.8 or higher and Dash 2.2.0 or higher 5 | 6 | df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/gapminder2007.csv') 7 | df = df[['continent', 'country', 'pop', 'lifeExp']] 8 | 9 | app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP]) 10 | 11 | 12 | app.layout = dbc.Container([ 13 | dcc.Markdown('# Hide Columns per Screen Size', style={'textAlign':'center'}), 14 | 15 | my_table := dash_table.DataTable( 16 | id='table', 17 | columns=[ 18 | {'name': 'Continent', 'id': 'continent', 'type': 'numeric'}, 19 | {'name': 'Country', 'id': 'country', 'type': 'text'}, 20 | {'name': 'Population', 'id': 'pop', 'type': 'numeric'}, 21 | {'name': 'Life Expectancy', 'id': 'lifeExp', 'type': 'numeric'} 22 | ], 23 | data=df.to_dict('records'), 24 | page_size=10, 25 | 26 | style_data={ 27 | 'width': '150px', 'minWidth': '150px', 'maxWidth': '150px', 28 | 'overflow': 'hidden', 29 | 'textOverflow': 'ellipsis', 30 | } 31 | ), 32 | dcc.Location(id='_pages_plugin_location') 33 | ]) 34 | 35 | # this assumes users will not resize the window on their own 36 | # produced by @raptorbrad- https://community.plotly.com/t/how-to-hide-datatable-columns-based-on-screen-size/60582/3?u=adamschroeder 37 | app.clientside_callback( 38 | """ 39 | function(href) { 40 | if (window.innerWidth < 750) { 41 | return ['continent', 'lifeExp'] 42 | } 43 | return [] 44 | } 45 | """, 46 | Output('table', 'hidden_columns'), 47 | Input('_pages_plugin_location', 'href') 48 | ) 49 | 50 | 51 | if __name__ == '__main__': 52 | app.run_server(debug=False, port=8003) 53 | -------------------------------------------------------------------------------- /DataTable/Tips-and-tricks/sort-x-cols.py: -------------------------------------------------------------------------------- 1 | from dash import Dash, dash_table, dcc, html, Input, Output, callback 2 | import pandas as pd 3 | import dash_bootstrap_components as dbc 4 | # Need to use Python 3.8 or higher and Dash 2.2.0 or higher 5 | 6 | df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/gapminder2007.csv') 7 | df = df[['continent', 'country', 'pop', 'lifeExp']] 8 | 9 | app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP]) 10 | 11 | 12 | # Created sortable/non-sortable columns: produces by https://community.plotly.com/t/datatable-add-sorting-to-only-one-column/31399/8?u=adamschroeder 13 | table_columns = [ 14 | {'name': 'Continent', 'id': 'continent', 'type': 'numeric', 'sortable': True}, 15 | {'name': 'Country', 'id': 'country', 'type': 'text', 'sortable': True}, 16 | {'name': 'Population', 'id': 'pop', 'type': 'numeric', 'sortable': False}, 17 | {'name': 'Life Expectancy', 'id': 'lifeExp', 'type': 'numeric', 'sortable': False} 18 | ] 19 | 20 | non_sortable_column_ids = [col['id'] for col in table_columns if col.pop('sortable') is False] 21 | print(non_sortable_column_ids) 22 | table_css = [ 23 | { 24 | 'selector': f'th[data-dash-column="{col}"] span.column-header--sort', 25 | 'rule': 'display: none', 26 | } 27 | for col in non_sortable_column_ids 28 | ] 29 | print(table_css) 30 | 31 | app.layout = dbc.Container([ 32 | dcc.Markdown('# Partially Sort Columns', style={'textAlign':'center'}), 33 | 34 | my_table := dash_table.DataTable( 35 | columns=table_columns, 36 | css=table_css, 37 | data=df.to_dict('records'), 38 | page_size=10, 39 | sort_action='native', 40 | 41 | style_data={ 42 | 'width': '150px', 'minWidth': '150px', 'maxWidth': '150px', 43 | 'overflow': 'hidden', 44 | 'textOverflow': 'ellipsis', 45 | } 46 | ) 47 | ]) 48 | 49 | 50 | if __name__ == '__main__': 51 | app.run_server(debug=False, port=8004) 52 | -------------------------------------------------------------------------------- /DataTable/Tooltip/medical_supplies_tooltip.csv: -------------------------------------------------------------------------------- 1 | Machines A,Machines B,Country,Part description,Part sent date,Part received date,Elapsed Days,Origin supplier,Feedback 2 | 435,425,Germany,MPD Medical Supplies Inc,11-Jan-19,29-Jan-19,18,Blue-P,No 3 | 470,463,Germany,MPD Medical Supplies Inc,29-Jan-19,11-Mar-19,41,Sanders,No 4 | 300,323,Germany,PCB,17-Feb-20,28-Feb-20,11,Sanders,No 5 | 1200,1278,India,MPD Medical Supplies Inc,29-Jan-19,11-Mar-19,41,Sanders,No 6 | 215,223,India,PS,16-Mar-20,12-May-20,57,Sanders,No 7 | 5,486,India,PS,20-May-19,29-May-19,9,Blue-P,Yes 8 | 1000,863,Germany,PS,8-Apr-19,17-Apr-19,9,Blue-P,Yes 9 | 1256,846,Germany,PS,30-Apr-19,9-May-19,9,Blue-P,No 10 | 235,234,Canada,PCB,2-Mar-20,5-Mar-20,3,Blue-P,No 11 | 2555,2444,India,PCB,20-Jul-20,,,,"Yes, it was a beautiful part that got the job done" 12 | 562,565,India,PCB,11-Aug-20,21-Aug-20,10,Sanders,Yes 13 | 12,22,India,PCB,11-Sep-20,21-Aug-20,-21,Blue-P,Yes 14 | 45,38,India,MPD Medical Supplies Inc,11-Aug-20,,,Blue Shield Blue Cross,"Yes, great service and very fast shipping. Thank you," 15 | 900,865,Germany,MPD Medical Supplies Inc,3-Aug-20,,,Sanders,Yes 16 | -------------------------------------------------------------------------------- /Deploy_App_to_Web/Authentication/data.md: -------------------------------------------------------------------------------- 1 | Download the csv file for this app: 2 | https://drive.google.com/file/d/1Dc1O5VGLE8pQypO7RzGfhA37Q3EI4-20/view?usp=sharing 3 | -------------------------------------------------------------------------------- /Deploy_App_to_Web/Heroku_App/requirements.txt: -------------------------------------------------------------------------------- 1 | Brotli==1.0.7 2 | click==7.1.2 3 | dash==2.15.0 4 | dash-core-components==2.0.0 5 | dash-html-components==2.0.0 6 | dash-renderer==1.4.1 7 | dash-table==4.7.0 8 | Flask==2.3.2 9 | Flask-Compress==1.5.0 10 | future==0.18.2 11 | gunicorn==22.0.0 12 | itsdangerous==1.1.0 13 | Jinja2==3.1.4 14 | MarkupSafe==1.1.1 15 | numpy==1.22.0 16 | pandas==1.0.0 17 | plotly==4.8.0 18 | python-dateutil==2.8.1 19 | pytz==2020.1 20 | retrying==1.3.3 21 | six==1.15.0 22 | Werkzeug>=2.2.3 23 | -------------------------------------------------------------------------------- /Deploy_App_to_Web/Multipage_App/app.py: -------------------------------------------------------------------------------- 1 | import dash 2 | 3 | # meta_tags are required for the app layout to be mobile responsive 4 | app = dash.Dash(__name__, suppress_callback_exceptions=True, 5 | meta_tags=[{'name': 'viewport', 6 | 'content': 'width=device-width, initial-scale=1.0'}] 7 | ) 8 | server = app.server 9 | -------------------------------------------------------------------------------- /Deploy_App_to_Web/Multipage_App/apps/__init__.py: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /Deploy_App_to_Web/Multipage_App/apps/vgames.py: -------------------------------------------------------------------------------- 1 | import dash_core_components as dcc 2 | import dash_html_components as html 3 | from dash.dependencies import Input, Output 4 | import plotly.express as px 5 | import pandas as pd 6 | import pathlib 7 | from app import app 8 | 9 | # get relative data folder 10 | PATH = pathlib.Path(__file__).parent 11 | DATA_PATH = PATH.joinpath("../datasets").resolve() 12 | 13 | dfv = pd.read_csv(DATA_PATH.joinpath("vgsales.csv")) # GregorySmith Kaggle 14 | sales_list = ["North American Sales", "EU Sales", "Japan Sales", "Other Sales", "World Sales"] 15 | 16 | 17 | layout = html.Div([ 18 | html.H1('Video Games Sales', style={"textAlign": "center"}), 19 | 20 | html.Div([ 21 | html.Div(dcc.Dropdown( 22 | id='genre-dropdown', value='Strategy', clearable=False, 23 | options=[{'label': x, 'value': x} for x in sorted(dfv.Genre.unique())] 24 | ), className='six columns'), 25 | 26 | html.Div(dcc.Dropdown( 27 | id='sales-dropdown', value='EU Sales', clearable=False, 28 | persistence=True, persistence_type='memory', 29 | options=[{'label': x, 'value': x} for x in sales_list] 30 | ), className='six columns'), 31 | ], className='row'), 32 | 33 | dcc.Graph(id='my-bar', figure={}), 34 | ]) 35 | 36 | 37 | @app.callback( 38 | Output(component_id='my-bar', component_property='figure'), 39 | [Input(component_id='genre-dropdown', component_property='value'), 40 | Input(component_id='sales-dropdown', component_property='value')] 41 | ) 42 | def display_value(genre_chosen, sales_chosen): 43 | dfv_fltrd = dfv[dfv['Genre'] == genre_chosen] 44 | dfv_fltrd = dfv_fltrd.nlargest(10, sales_chosen) 45 | fig = px.bar(dfv_fltrd, x='Video Game', y=sales_chosen, color='Platform') 46 | fig = fig.update_yaxes(tickprefix="$", ticksuffix="M") 47 | return fig 48 | -------------------------------------------------------------------------------- /Deploy_App_to_Web/Multipage_App/datasets/opsales.md: -------------------------------------------------------------------------------- 1 | download file from: 2 | https://drive.google.com/file/d/1j8TuttJEkx47LySk5EPgf00cye8_2VJh/view?usp=sharing 3 | -------------------------------------------------------------------------------- /Deploy_App_to_Web/Multipage_App/datasets/vgsales.md: -------------------------------------------------------------------------------- 1 | download csv file from: 2 | https://drive.google.com/file/d/1MBwS3h6QEGCbVWsQ2OygUQIcPRFIn3_N/view?usp=sharing 3 | -------------------------------------------------------------------------------- /Deploy_App_to_Web/Multipage_App/index.py: -------------------------------------------------------------------------------- 1 | import dash_core_components as dcc 2 | import dash_html_components as html 3 | from dash.dependencies import Input, Output 4 | 5 | # Connect to main app.py file 6 | from app import app 7 | from app import server 8 | 9 | # Connect to your app pages 10 | from apps import vgames, global_sales 11 | 12 | 13 | app.layout = html.Div([ 14 | dcc.Location(id='url', refresh=False), 15 | html.Div([ 16 | dcc.Link('Video Games|', href='/apps/vgames'), 17 | dcc.Link('Other Products', href='/apps/global_sales'), 18 | ], className="row"), 19 | html.Div(id='page-content', children=[]) 20 | ]) 21 | 22 | 23 | @app.callback(Output('page-content', 'children'), 24 | [Input('url', 'pathname')]) 25 | def display_page(pathname): 26 | if pathname == '/apps/vgames': 27 | return vgames.layout 28 | if pathname == '/apps/global_sales': 29 | return global_sales.layout 30 | else: 31 | return "404 Page Error! Please choose a link" 32 | 33 | 34 | if __name__ == '__main__': 35 | app.run_server(debug=False) 36 | -------------------------------------------------------------------------------- /Deploy_App_to_Web/PWA-Phone-App/res-seating/Procfile: -------------------------------------------------------------------------------- 1 | web: gunicorn phoneapp:server -------------------------------------------------------------------------------- /Deploy_App_to_Web/PWA-Phone-App/res-seating/assets/images/android-launchericon-144-144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Coding-with-Adam/Dash-by-Plotly/f53325eb47d610b960b8d97fd48bec2520cf18c1/Deploy_App_to_Web/PWA-Phone-App/res-seating/assets/images/android-launchericon-144-144.png -------------------------------------------------------------------------------- /Deploy_App_to_Web/PWA-Phone-App/res-seating/assets/images/android-launchericon-192-192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Coding-with-Adam/Dash-by-Plotly/f53325eb47d610b960b8d97fd48bec2520cf18c1/Deploy_App_to_Web/PWA-Phone-App/res-seating/assets/images/android-launchericon-192-192.png -------------------------------------------------------------------------------- /Deploy_App_to_Web/PWA-Phone-App/res-seating/assets/images/android-launchericon-48-48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Coding-with-Adam/Dash-by-Plotly/f53325eb47d610b960b8d97fd48bec2520cf18c1/Deploy_App_to_Web/PWA-Phone-App/res-seating/assets/images/android-launchericon-48-48.png -------------------------------------------------------------------------------- /Deploy_App_to_Web/PWA-Phone-App/res-seating/assets/images/android-launchericon-512-512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Coding-with-Adam/Dash-by-Plotly/f53325eb47d610b960b8d97fd48bec2520cf18c1/Deploy_App_to_Web/PWA-Phone-App/res-seating/assets/images/android-launchericon-512-512.png -------------------------------------------------------------------------------- /Deploy_App_to_Web/PWA-Phone-App/res-seating/assets/images/android-launchericon-72-72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Coding-with-Adam/Dash-by-Plotly/f53325eb47d610b960b8d97fd48bec2520cf18c1/Deploy_App_to_Web/PWA-Phone-App/res-seating/assets/images/android-launchericon-72-72.png -------------------------------------------------------------------------------- /Deploy_App_to_Web/PWA-Phone-App/res-seating/assets/images/android-launchericon-96-96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Coding-with-Adam/Dash-by-Plotly/f53325eb47d610b960b8d97fd48bec2520cf18c1/Deploy_App_to_Web/PWA-Phone-App/res-seating/assets/images/android-launchericon-96-96.png -------------------------------------------------------------------------------- /Deploy_App_to_Web/PWA-Phone-App/res-seating/assets/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "background_color": "#ffffff", 3 | "description": "", 4 | "dir": "ltr", 5 | "display": "standalone", 6 | "name": "Restaurant seating tracker", 7 | "orientation": "any", 8 | "scope": "https://res-seating.herokuapp.com/assets/", 9 | "short_name": "Eat outside", 10 | "start_url": "https://res-seating.herokuapp.com/assets/", 11 | "theme_color": "#ffffff", 12 | "categories": [], 13 | "screenshots": [], 14 | "icons": [ 15 | { 16 | "src": "images/android-launchericon-512-512.png", 17 | "sizes": "512x512" 18 | }, 19 | { 20 | "src": "images/android-launchericon-192-192.png", 21 | "sizes": "192x192" 22 | }, 23 | { 24 | "src": "images/android-launchericon-144-144.png", 25 | "sizes": "144x144" 26 | }, 27 | { 28 | "src": "images/android-launchericon-96-96.png", 29 | "sizes": "96x96" 30 | }, 31 | { 32 | "src": "images/android-launchericon-72-72.png", 33 | "sizes": "72x72" 34 | }, 35 | { 36 | "src": "images/android-launchericon-48-48.png", 37 | "sizes": "48x48" 38 | } 39 | ], 40 | "shortcuts": [] 41 | } -------------------------------------------------------------------------------- /Deploy_App_to_Web/PWA-Phone-App/res-seating/assets/mylogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Coding-with-Adam/Dash-by-Plotly/f53325eb47d610b960b8d97fd48bec2520cf18c1/Deploy_App_to_Web/PWA-Phone-App/res-seating/assets/mylogo.png -------------------------------------------------------------------------------- /Deploy_App_to_Web/PWA-Phone-App/res-seating/assets/offline.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | A simple HTML document 5 | 6 | 7 |

You’re experiencing connectivity issues! Please try again later.

8 | 9 | 10 | -------------------------------------------------------------------------------- /Deploy_App_to_Web/PWA-Phone-App/res-seating/assets/sw01.js: -------------------------------------------------------------------------------- 1 | // This is the "Offline page" service worker 2 | 3 | importScripts('https://storage.googleapis.com/workbox-cdn/releases/5.1.2/workbox-sw.js'); 4 | 5 | const CACHE = "pwabuilder-page"; 6 | 7 | // TODO: replace the following with the correct offline fallback page i.e.: const offlineFallbackPage = "offline.html"; 8 | const offlineFallbackPage = "/assets/offline.html"; 9 | 10 | self.addEventListener("message", (event) => { 11 | if (event.data && event.data.type === "SKIP_WAITING") { 12 | self.skipWaiting(); 13 | } 14 | }); 15 | 16 | self.addEventListener('install', async (event) => { 17 | event.waitUntil( 18 | caches.open(CACHE) 19 | .then((cache) => cache.add(offlineFallbackPage)) 20 | ); 21 | }); 22 | 23 | if (workbox.navigationPreload.isSupported()) { 24 | workbox.navigationPreload.enable(); 25 | } 26 | 27 | self.addEventListener('fetch', (event) => { 28 | if (event.request.mode === 'navigate') { 29 | event.respondWith((async () => { 30 | try { 31 | const preloadResp = await event.preloadResponse; 32 | 33 | if (preloadResp) { 34 | return preloadResp; 35 | } 36 | 37 | const networkResp = await fetch(event.request); 38 | return networkResp; 39 | } catch (error) { 40 | 41 | const cache = await caches.open(CACHE); 42 | const cachedResp = await cache.match(offlineFallbackPage); 43 | return cachedResp; 44 | } 45 | })()); 46 | } 47 | }); 48 | -------------------------------------------------------------------------------- /Deploy_App_to_Web/PWA-Phone-App/res-seating/requirements.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Coding-with-Adam/Dash-by-Plotly/f53325eb47d610b960b8d97fd48bec2520cf18c1/Deploy_App_to_Web/PWA-Phone-App/res-seating/requirements.txt -------------------------------------------------------------------------------- /Deploy_App_to_Web/PythonAnyWhere/politics.csv: -------------------------------------------------------------------------------- 1 | state,party,electoral votes 2 | CA,democrat,55 3 | CO,democrat,9 4 | CT,democrat,7 5 | DC,democrat,3 6 | DE,democrat,3 7 | HI,democrat,4 8 | IL,democrat,20 9 | MA,democrat,11 10 | MD,democrat,10 11 | MN,democrat,10 12 | NH,democrat,4 13 | NJ,democrat,14 14 | NM,democrat,5 15 | NY,democrat,29 16 | OR,democrat,7 17 | RI,democrat,4 18 | VA,democrat,13 19 | VT,democrat,3 20 | WA,democrat,12 21 | AK,republican,3 22 | AL,republican,9 23 | AR,republican,6 24 | ID,republican,4 25 | IN,republican,11 26 | KS,republican,6 27 | KY,republican,8 28 | LA,republican,8 29 | MO,republican,10 30 | MS,republican,6 31 | MT,republican,3 32 | ND,republican,3 33 | NE,republican,5 34 | OK,republican,7 35 | SC,republican,9 36 | SD,republican,3 37 | TN,republican,11 38 | UT,republican,6 39 | WV,republican,5 40 | WY,republican,3 41 | AZ,unsure,11 42 | FL,unsure,29 43 | GA,unsure,16 44 | IA,unsure,6 45 | ME,unsure,4 46 | MI,unsure,16 47 | NC,unsure,15 48 | NV,unsure,6 49 | OH,unsure,18 50 | PA,unsure,20 51 | TX,unsure,38 52 | WI,unsure,10 53 | -------------------------------------------------------------------------------- /Deploy_App_to_Web/PythonAnyWhere/supporting_doc.md: -------------------------------------------------------------------------------- 1 | link to supporting docs: 2 | https://drive.google.com/file/d/1HtJcu3ZWsDYEIv8srod16z4jD4HEeHuH/view?usp=sharing 3 | -------------------------------------------------------------------------------- /Deploy_App_to_Web/my-app/cheatsheet.md: -------------------------------------------------------------------------------- 1 | # App Deploy to Pythonanywhere 2 | 3 | 1. Open an account on [Pythonanywhere](https://www.pythonanywhere.com/) 4 | 2. **Create web app**: Dashboard → Open "Web: Tab → Add a new web app 5 | - “Next” button → Flask → 3.10 → default path is ok 6 | 3. **Install necessary libraries**: Dashboard → Bash (in New Console section) 7 | - My personal app uses Dash and pandas and dash ag grid, so: 8 | - `pip install pandas` 9 | - `pip install dash==2.17.0` or just `pip instal dash`, but I want the latest version 10 | - `pip install dash-ag-grid` 11 | 4. **Upload files**: “Files” tab → mysite → delete flask_app.py 12 | - Click the Upload-a-File button to add your app file and csv/excel sheet 13 | 5. **Modify how the app reads the data**: “Files” tab → mysite → [app_name].py 14 | - `df = pd.read_csv('/home/charmingdata2/mysite/space-mission-data.csv')` 15 | 6. **Edit WSGI file**: “Web” tab → WSGI configuration file 16 | - Remove last line and insert two lines instead: 17 | - `from [app_name_without_.py] import app` 18 | - `application = app.server` 19 | 7. **Reload app**: “Web” tab → click green Reload button 20 | -------------------------------------------------------------------------------- /Deploy_App_to_Web/my-app/dash_app.py: -------------------------------------------------------------------------------- 1 | from dash import Dash, dcc # pip install dash 2 | import dash_ag_grid as dag # pip install dash-ag-grid 3 | import plotly.express as px 4 | import pandas as pd # pip install pandas 5 | 6 | df = pd.read_csv('space-mission-data.csv') 7 | 8 | app = Dash() 9 | app.layout = [ 10 | dag.AgGrid( 11 | rowData=df.to_dict("records"), 12 | columnDefs=[{"field": i} for i in df.columns], 13 | ), 14 | dcc.Graph(figure=px.histogram(df, x='price')) 15 | ] 16 | 17 | if __name__ == '__main__': 18 | app.run(debug=True) 19 | -------------------------------------------------------------------------------- /Good_to_Know/Callback-basics/dropdown.py: -------------------------------------------------------------------------------- 1 | from dash import Dash, dcc, html, Output, Input, State, callback 2 | import plotly.express as px 3 | 4 | app = Dash(__name__) 5 | 6 | app.layout = html.Div([ 7 | dcc.Dropdown(options=['Texas','Florida','New York'], value='Texas', clearable=True, id='our-States'), 8 | dcc.RadioItems(options=['Dallas','Arlington','Austin'], id='my-radio-btn'), 9 | ]) 10 | 11 | # Display options of cities based on chosen US state 12 | @callback( 13 | Output(component_id='my-radio-btn', component_property='options'), 14 | Input(component_id='our-States', component_property='value') 15 | ) 16 | def update_text(chosen_state): # the function argument comes from the component property of the Input 17 | print(chosen_state) 18 | print(type(chosen_state)) 19 | if chosen_state == 'Texas': 20 | return ['Dallas','Arlington','Austin'] 21 | elif chosen_state == 'Florida': 22 | return ['Polk City','Pinecrest','Orlando'] 23 | elif chosen_state == 'New York': 24 | return ['Troy','Buffalo','Batavia'] 25 | else: 26 | return [] # the returned objects are assigned to the component properties of the Outputs 27 | 28 | 29 | if __name__=='__main__': 30 | app.run(port=8004) -------------------------------------------------------------------------------- /Good_to_Know/Callback-basics/graph.py: -------------------------------------------------------------------------------- 1 | from dash import Dash, dcc, html, Output, Input, State, callback 2 | import plotly.express as px 3 | 4 | df = px.data.tips() 5 | print(df.head()) 6 | 7 | app = Dash(__name__) 8 | 9 | app.layout = html.Div([ 10 | dcc.Graph(figure=px.histogram(df, x='day', y='tip'), id='bar-graph'), 11 | dcc.Graph(figure={}, id='my-graph') 12 | ]) 13 | 14 | # Plot a pie chart based on the selected day of the bar chart 15 | @callback( 16 | Output(component_id='my-graph', component_property='figure'), 17 | Input(component_id='bar-graph', component_property='clickData'), 18 | prevent_initial_call=True 19 | ) 20 | def update_text(chosen_data): # the function argument comes from the component property of the Input 21 | print(chosen_data) 22 | print(type(chosen_data)) 23 | extract_day = chosen_data['points'][0]['x'] 24 | print(extract_day) 25 | dff = df[df.day==extract_day] 26 | print(dff.head()) 27 | fig = px.pie(dff, names='smoker', values='total_bill', title=f'total bill by smoker on {extract_day}') 28 | return fig # the returned objects are assigned to the component properties of the Outputs 29 | 30 | 31 | if __name__=='__main__': 32 | app.run(port=8005) -------------------------------------------------------------------------------- /Good_to_Know/Callback-basics/radio-slider.py: -------------------------------------------------------------------------------- 1 | from dash import Dash, dcc, html, Output, Input, State, callback 2 | import plotly.express as px 3 | 4 | app = Dash(__name__) 5 | 6 | app.layout = html.Div([ 7 | dcc.RadioItems(options=['car','house','ship'], value='ship', id='my-radio-btn'), 8 | dcc.Slider(10, 20, step=1, value=12, id='my-slider'), 9 | dcc.Markdown(children='', id='text-displayed', style={'fontSize':10}) 10 | ]) 11 | 12 | @callback( 13 | Output(component_id='text-displayed', component_property='children'), 14 | Output(component_id='text-displayed', component_property='style'), 15 | Input(component_id='my-radio-btn', component_property='value'), 16 | Input(component_id='my-slider', component_property='value') 17 | 18 | ) 19 | def update_text(selected_text, selected_font_size): # the function argument comes from the component property of the Input 20 | print(selected_text) 21 | print(type(selected_text)) 22 | print('-----------------------') 23 | print(selected_font_size) 24 | print(type(selected_font_size)) 25 | return f"The Radio Button value you chose was: {selected_text}", {'fontSize':selected_font_size} # the returned objects are assigned to the component properties of the Outputs 26 | 27 | if __name__=='__main__': 28 | app.run(port=8003) -------------------------------------------------------------------------------- /Good_to_Know/Callback-basics/radio.py: -------------------------------------------------------------------------------- 1 | from dash import Dash, dcc, html, Output, Input, State, callback 2 | import plotly.express as px 3 | 4 | app = Dash(__name__) 5 | 6 | app.layout = html.Div([ 7 | dcc.RadioItems(options=['car','house','ship'], value='ship', id='my-radio-btn'), 8 | dcc.Markdown(children='', id='text-displayed') 9 | ]) 10 | 11 | @callback( 12 | Output(component_id='text-displayed', component_property='children'), 13 | Input(component_id='my-radio-btn', component_property='value') 14 | ) 15 | def update_text(user_selected): # the function argument comes from the component property of the Input 16 | print(user_selected) 17 | print(type(user_selected)) 18 | return f"The Radio Button value you chose was: {user_selected}" # the returned object is assigned to the component property of the Output 19 | 20 | if __name__=='__main__': 21 | app.run(port=8001) 22 | -------------------------------------------------------------------------------- /Good_to_Know/Callback-basics/slider.py: -------------------------------------------------------------------------------- 1 | from dash import Dash, dcc, html, Output, Input, State, callback 2 | import plotly.express as px 3 | 4 | app = Dash(__name__) 5 | 6 | app.layout = html.Div([ 7 | dcc.Slider(10,20, step=1, value=12, id='my-slider'), 8 | dcc.Markdown(children='This is the Title of the App', id='text-displayed', style={'fontSize':10}) 9 | ]) 10 | 11 | @callback( 12 | Output(component_id='text-displayed', component_property='style'), 13 | Input(component_id='my-slider', component_property='value') 14 | ) 15 | def update_text(user_selected): # the function argument comes from the component property of the Input 16 | print(user_selected) 17 | print(type(user_selected)) 18 | return {'fontSize' : user_selected} # the returned object is assigned to the component property of the Output 19 | 20 | if __name__=='__main__': 21 | app.run(port=8002) -------------------------------------------------------------------------------- /Good_to_Know/Dash2-14/app.py: -------------------------------------------------------------------------------- 1 | from dash import Dash, Input, html, dcc, page_container 2 | import plotly.express as px 3 | df = px.data.iris().to_dict() 4 | 5 | app = Dash( 6 | __name__, 7 | use_pages=True, 8 | routing_callback_inputs={ 9 | # The language will be passed as a keyword argument to pages' layout functions 10 | "language_chosen": Input("language", "value"), 11 | "stored_data": Input("our-data", "data") 12 | }, 13 | ) 14 | app.layout = html.Div( 15 | [ 16 | html.Div( 17 | [ 18 | "My app", 19 | html.Div( 20 | [ 21 | dcc.Link("Home", href="/"), 22 | dcc.Link("Page 1", href="/page-1"), 23 | dcc.Dropdown( 24 | id="language", 25 | options=[ 26 | {"label": "English", "value": "en"}, 27 | {"label": "Français", "value": "fr"}, 28 | ], 29 | value="en", 30 | clearable=False 31 | ), 32 | dcc.Store(data=df, id="our-data") 33 | ], 34 | style={"marginLeft": "auto", "display": "flex", "gap": 10} 35 | ) 36 | ], 37 | style={"background": "#CCC", "padding": 10, "marginBottom": 20, "display": "flex"}, 38 | ), 39 | page_container, 40 | ] 41 | ) 42 | 43 | if __name__ == '__main__': 44 | app.run(debug=True) 45 | -------------------------------------------------------------------------------- /Good_to_Know/Dash2-14/pages/home.py: -------------------------------------------------------------------------------- 1 | from dash import register_page, html, callback, Input, Output 2 | 3 | register_page(__name__, "/") 4 | 5 | translations = { 6 | "en": { 7 | "title": "Hello world", 8 | "subtitle": "This is the home page.", 9 | }, 10 | "fr": { 11 | "title": "Bonjour le monde", 12 | "subtitle": "Ceci est la page d'accueil.", 13 | } 14 | } 15 | 16 | def layout(stored_data, language_chosen): 17 | return [ 18 | html.H1(translations[language_chosen]["title"]), 19 | html.H2(translations[language_chosen]["subtitle"]), 20 | ] 21 | -------------------------------------------------------------------------------- /Good_to_Know/Dash2-14/pages/page-1.py: -------------------------------------------------------------------------------- 1 | import pandas as pd 2 | from dash import register_page, html, dcc 3 | import plotly.express as px 4 | 5 | register_page(__name__, "/page-1") 6 | 7 | translations = { 8 | "en": { 9 | "title": "Our first page", 10 | "subtitle": "This is the First page.", 11 | }, 12 | "fr": { 13 | "title": "Notre première page", 14 | "subtitle": "Ceci est la première page.", 15 | } 16 | } 17 | 18 | def layout(stored_data, language_chosen): 19 | fig = px.scatter(stored_data, x="sepal_width", y="sepal_length") 20 | 21 | return [ 22 | html.H1(translations[language_chosen]["title"]), 23 | html.H2(translations[language_chosen]["subtitle"]), 24 | dcc.Graph(figure=fig) 25 | ] 26 | -------------------------------------------------------------------------------- /Good_to_Know/Dash2.0/Exercises/Assignments.md: -------------------------------------------------------------------------------- 1 | # Exercises to help you get started with Dash 2 | 3 | 1. Customize the layout so the dropdown and the choropleth graph are next to each other on the page. The total width of columns inside one row must be equal or less than 12. Hint - see the second example in [Dash Bootstrap docs](https://dash-bootstrap-components.opensource.faculty.ai/docs/components/layout/). 4 | 2. Modify the app so it plots a bar graph instead of the choropleth graph. The x-axis should represent states while the y-axis should represent the `column_name` from the dropdown. See Plotly docs on [the bar chart](https://plotly.com/python/bar-charts/). 5 | 3. Replace the bar chart or choropleth map with a line chart. The x-axis representing the year, the y-axis representing the `column_name`, and color representing the States. See Plotly docs on [the line chart](https://plotly.com/python/line-charts/). (When done, see the TEEN BIRTHS PER 1,000 trend in the graph.). 6 | 4. Take the app-with-graph.py file. Add an empty `Alert` [Dash Mantine Component](https://dash-mantine-components.herokuapp.com/components/alert) to the layout between the markdown and the graph. Insert the Alert component as the second Output in the callback, with `children` as the component property. Modify the callback function so it returns this string, `"The data for the bar graph is highly confidential."` if user chooses a bar plot, and it returns this string, `"The scatter plot is believed to have been first published in 1833"` if user chooses a scatter plot. 7 | 5. Take the interactive-app.py file. Add a [radioItems Dash Core Component](https://dash.plotly.com/dash-core-components/radioitems) to the layout after assigning the following colors to its `options` property: `['blue','red','green']`. Incorporate the RadioItems component into the callback so the button/color chosen updates the color of the markdown text. Hint - the callback will have a total of 2 Outputs and 2 Inputs. To color the Markdown text in purple, its `style` property is written like this: `dcc.Markdown(style={'color':'purple'})` 8 | -------------------------------------------------------------------------------- /Good_to_Know/Dash2.0/Exercises/solution-2.py: -------------------------------------------------------------------------------- 1 | # If you prefer to run the code online instead of on your computer click: 2 | # https://github.com/Coding-with-Adam/Dash-by-Plotly#execute-code-in-browser 3 | 4 | from dash import Dash, dcc, Output, Input # pip install dash 5 | import dash_bootstrap_components as dbc # pip install dash-bootstrap-components 6 | import plotly.express as px 7 | import pandas as pd # pip install pandas 8 | 9 | # incorporate data into app 10 | # Source - https://www.cdc.gov/nchs/pressroom/stats_of_the_states.htm 11 | df = pd.read_csv("https://raw.githubusercontent.com/Coding-with-Adam/Dash-by-Plotly/master/Good_to_Know/Dash2.0/social_capital.csv") 12 | print(df.head()) 13 | 14 | # Build your components 15 | app = Dash(__name__, external_stylesheets=[dbc.themes.LUX]) 16 | mytitle = dcc.Markdown(children='') 17 | mygraph = dcc.Graph(figure={}) 18 | dropdown = dcc.Dropdown(options=df.columns.values[2:], 19 | value='Cesarean Delivery Rate', # initial value displayed when page first loads 20 | clearable=False) 21 | 22 | # Customize your own Layout 23 | app.layout = dbc.Container([ 24 | dbc.Row([ 25 | dbc.Col([mytitle], width=6) 26 | ], justify='center'), 27 | dbc.Row([ 28 | dbc.Col([mygraph], width=8), 29 | dbc.Col([dropdown], width=4) 30 | ]), 31 | ], fluid=True) 32 | 33 | # Callback allows components to interact 34 | @app.callback( 35 | Output(mygraph, 'figure'), 36 | Output(mytitle, 'children'), 37 | Input(dropdown, 'value') 38 | ) 39 | def update_graph(column_name): # function arguments come from the component property of the Input 40 | 41 | print(column_name) 42 | print(type(column_name)) 43 | # https://plotly.com/python/bar-charts/ 44 | fig = px.bar(data_frame=df, x='STATE', y=column_name) 45 | 46 | return fig, '# '+column_name # returned objects are assigned to the component property of the Output 47 | 48 | 49 | # Run app 50 | if __name__=='__main__': 51 | app.run_server(debug=True, port=8062) 52 | -------------------------------------------------------------------------------- /Good_to_Know/Dash2.0/Exercises/solution-3.py: -------------------------------------------------------------------------------- 1 | # If you prefer to run the code online instead of on your computer click: 2 | # https://github.com/Coding-with-Adam/Dash-by-Plotly#execute-code-in-browser 3 | 4 | from dash import Dash, dcc, Output, Input # pip install dash 5 | import dash_bootstrap_components as dbc # pip install dash-bootstrap-components 6 | import plotly.express as px 7 | import pandas as pd # pip install pandas 8 | 9 | # incorporate data into app 10 | # Source - https://www.cdc.gov/nchs/pressroom/stats_of_the_states.htm 11 | df = pd.read_csv("https://raw.githubusercontent.com/Coding-with-Adam/Dash-by-Plotly/master/Good_to_Know/Dash2.0/social_capital.csv") 12 | print(df.head()) 13 | 14 | # Build your components 15 | app = Dash(__name__, external_stylesheets=[dbc.themes.LUX]) 16 | mytitle = dcc.Markdown(children='') 17 | mygraph = dcc.Graph(figure={}) 18 | dropdown = dcc.Dropdown(options=df.columns.values[2:], 19 | value='Cesarean Delivery Rate', # initial value displayed when page first loads 20 | clearable=False) 21 | 22 | # Customize your own Layout 23 | app.layout = dbc.Container([ 24 | dbc.Row([ 25 | dbc.Col([mytitle], width=6) 26 | ], justify='center'), 27 | dbc.Row([ 28 | dbc.Col([mygraph], width=8), 29 | dbc.Col([dropdown], width=4) 30 | ]), 31 | ], fluid=True) 32 | 33 | # Callback allows components to interact 34 | @app.callback( 35 | Output(mygraph, 'figure'), 36 | Output(mytitle, 'children'), 37 | Input(dropdown, 'value') 38 | ) 39 | def update_graph(column_name): # function arguments come from the component property of the Input 40 | 41 | print(column_name) 42 | print(type(column_name)) 43 | # https://plotly.com/python/line-charts/ 44 | fig = px.line(data_frame=df, x='YEAR', y=column_name, color='STATE') 45 | 46 | return fig, '# '+column_name # returned objects are assigned to the component property of the Output 47 | 48 | 49 | # Run app 50 | if __name__=='__main__': 51 | app.run_server(debug=True, port=8063) -------------------------------------------------------------------------------- /Good_to_Know/Dash2.0/Exercises/solution-4.py: -------------------------------------------------------------------------------- 1 | # If you prefer to run the code online instead of on your computer click: 2 | # https://github.com/Coding-with-Adam/Dash-by-Plotly#execute-code-in-browser 3 | import dash 4 | from dash import Dash, dcc, Output, Input # pip install dash 5 | import dash_bootstrap_components as dbc # pip install dash-bootstrap-components 6 | import plotly.express as px 7 | import dash_mantine_components as dmc 8 | 9 | # incorporate data into app 10 | df = px.data.medals_long() 11 | 12 | # Customize your own Layout 13 | app = Dash(__name__, external_stylesheets=[dbc.themes.VAPOR]) 14 | mytitle = dcc.Markdown(children='# App that analyzes Olympic medals') 15 | mygraph = dcc.Graph(figure={}) 16 | dropdown = dcc.Dropdown(options=['Bar Plot', 'Scatter Plot'], 17 | value='Bar Plot', # initial value displayed when page first loads 18 | clearable=False) 19 | myalert = dmc.Alert(children="Scatter plot is not the best graph for these data!") 20 | 21 | app.layout = dmc.MantineProvider([mytitle, myalert, mygraph, dropdown]) 22 | 23 | # Callback allows components to interact 24 | @app.callback( 25 | Output(mygraph, component_property='figure'), 26 | Output(myalert, component_property='children'), 27 | Input(dropdown, component_property='value'), 28 | ) 29 | def update_graph(user_input): # function arguments come from the component property of the Input 30 | if user_input == 'Bar Plot': 31 | fig = px.bar(data_frame=df, x="nation", y="count", color="medal") 32 | alert_text = "The data for the bar graph is highly confidential." 33 | 34 | elif user_input == 'Scatter Plot': 35 | fig = px.scatter(data_frame=df, x="count", y="nation", color="medal", 36 | symbol="medal") 37 | alert_text = "The scatter plot is believed to have been first published in 1833." 38 | 39 | return fig, alert_text # returned objects are assigned to the component property of the Ouput 40 | 41 | 42 | # Run app 43 | if __name__=='__main__': 44 | app.run_server(port=8064) 45 | -------------------------------------------------------------------------------- /Good_to_Know/Dash2.0/Exercises/solution-5.py: -------------------------------------------------------------------------------- 1 | # If you prefer to run the code online instead of on your computer click: 2 | # https://github.com/Coding-with-Adam/Dash-by-Plotly#execute-code-in-browser 3 | 4 | from dash import Dash, dcc, Output, Input # pip install dash 5 | import dash_bootstrap_components as dbc # pip install dash-bootstrap-components 6 | 7 | # Customize your own Layout 8 | app = Dash(__name__, external_stylesheets=[dbc.themes.SOLAR]) 9 | mytext = dcc.Markdown(children='') 10 | myinput = dbc.Input(value="# Hello World - let's build web apps in Python!") 11 | myradio = dcc.RadioItems(options=['blue','red','green']) 12 | 13 | app.layout = dbc.Container([mytext, myinput, myradio]) 14 | 15 | 16 | # Callback allows components to interact 17 | @app.callback( 18 | Output(mytext, component_property='children'), 19 | Output(mytext, component_property='style'), 20 | Input(myinput, component_property='value'), 21 | Input(myradio, component_property='value') 22 | ) 23 | def update_title(user_input, user_color): # function arguments come from the component property of the Input 24 | return user_input, {'color':user_color} # returned objects are assigned to the component property of the Ouput 25 | 26 | 27 | # Run app 28 | if __name__ == '__main__': 29 | app.run_server(port=8065) 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /Good_to_Know/Dash2.0/Jupyter/j-hello-world.ipynb: -------------------------------------------------------------------------------- 1 | { 2 | "cells": [ 3 | { 4 | "cell_type": "code", 5 | "execution_count": null, 6 | "id": "d0845ef1", 7 | "metadata": {}, 8 | "outputs": [], 9 | "source": [ 10 | "# If you prefer to run the code online instead of on your computer click:\n", 11 | "# https://github.com/Coding-with-Adam/Dash-by-Plotly#execute-code-in-browser\n", 12 | "\n", 13 | "from dash import Dash, dcc # pip install dash\n", 14 | "import dash_bootstrap_components as dbc # pip install dash-bootstrap-components\n", 15 | "\n", 16 | "# Build your components\n", 17 | "app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])\n", 18 | "mytext = dcc.Markdown(children=\"# Hello World - let's build web apps in Python!\")\n", 19 | "\n", 20 | "# Customize your own Layout\n", 21 | "app.layout = dbc.Container([mytext])\n", 22 | "\n", 23 | "# Run app\n", 24 | "if __name__=='__main__':\n", 25 | " app.run_server(port=8041)\n", 26 | "\n" 27 | ] 28 | } 29 | ], 30 | "metadata": { 31 | "kernelspec": { 32 | "display_name": "Python 3 (ipykernel)", 33 | "language": "python", 34 | "name": "python3" 35 | }, 36 | "language_info": { 37 | "codemirror_mode": { 38 | "name": "ipython", 39 | "version": 3 40 | }, 41 | "file_extension": ".py", 42 | "mimetype": "text/x-python", 43 | "name": "python", 44 | "nbconvert_exporter": "python", 45 | "pygments_lexer": "ipython3", 46 | "version": "3.10.0" 47 | } 48 | }, 49 | "nbformat": 4, 50 | "nbformat_minor": 5 51 | } 52 | -------------------------------------------------------------------------------- /Good_to_Know/Dash2.0/Jupyter/j-interactive-app.ipynb: -------------------------------------------------------------------------------- 1 | { 2 | "cells": [ 3 | { 4 | "cell_type": "code", 5 | "execution_count": null, 6 | "id": "7ea88ea4", 7 | "metadata": {}, 8 | "outputs": [], 9 | "source": [ 10 | "# If you prefer to run the code online instead of on your computer click:\n", 11 | "# https://github.com/Coding-with-Adam/Dash-by-Plotly#execute-code-in-browser\n", 12 | "\n", 13 | "from dash import Dash, dcc, Output, Input # pip install dash\n", 14 | "import dash_bootstrap_components as dbc # pip install dash-bootstrap-components\n", 15 | "\n", 16 | "# Build your components\n", 17 | "app = Dash(__name__, external_stylesheets=[dbc.themes.SOLAR])\n", 18 | "mytext = dcc.Markdown(children='')\n", 19 | "myinput = dbc.Input(value=\"# Hello World - let's build web apps in Python!\")\n", 20 | "\n", 21 | "# Customize your own Layout\n", 22 | "app.layout = dbc.Container([mytext, myinput])\n", 23 | "\n", 24 | "# Callback allows components to interact\n", 25 | "@app.callback(\n", 26 | " Output(mytext, component_property='children'),\n", 27 | " Input(myinput, component_property='value')\n", 28 | ")\n", 29 | "def update_title(user_input): # function arguments come from the component property of the Input\n", 30 | " return user_input # returned objects are assigned to the component property of the Output\n", 31 | "\n", 32 | "\n", 33 | "# Run app\n", 34 | "if __name__=='__main__':\n", 35 | " app.run_server(port=8042)\n" 36 | ] 37 | } 38 | ], 39 | "metadata": { 40 | "kernelspec": { 41 | "display_name": "Python 3 (ipykernel)", 42 | "language": "python", 43 | "name": "python3" 44 | }, 45 | "language_info": { 46 | "codemirror_mode": { 47 | "name": "ipython", 48 | "version": 3 49 | }, 50 | "file_extension": ".py", 51 | "mimetype": "text/x-python", 52 | "name": "python", 53 | "nbconvert_exporter": "python", 54 | "pygments_lexer": "ipython3", 55 | "version": "3.10.0" 56 | } 57 | }, 58 | "nbformat": 4, 59 | "nbformat_minor": 5 60 | } 61 | -------------------------------------------------------------------------------- /Good_to_Know/Dash2.0/app-with-graph.py: -------------------------------------------------------------------------------- 1 | # If you prefer to run the code online instead of on your computer click: 2 | # https://github.com/Coding-with-Adam/Dash-by-Plotly#execute-code-in-browser 3 | 4 | from dash import Dash, dcc, Output, Input # pip install dash 5 | import dash_bootstrap_components as dbc # pip install dash-bootstrap-components 6 | import plotly.express as px 7 | 8 | # incorporate data into app 9 | df = px.data.medals_long() 10 | 11 | # Build your components 12 | app = Dash(__name__, external_stylesheets=[dbc.themes.VAPOR]) 13 | mytitle = dcc.Markdown(children='# App that analyzes Olympic medals') 14 | mygraph = dcc.Graph(figure={}) 15 | dropdown = dcc.Dropdown(options=['Bar Plot', 'Scatter Plot'], 16 | value='Bar Plot', # initial value displayed when page first loads 17 | clearable=False) 18 | 19 | # Customize your own Layout 20 | app.layout = dbc.Container([mytitle, mygraph, dropdown]) 21 | 22 | # Callback allows components to interact 23 | @app.callback( 24 | Output(mygraph, component_property='figure'), 25 | Input(dropdown, component_property='value') 26 | ) 27 | def update_graph(user_input): # function arguments come from the component property of the Input 28 | if user_input == 'Bar Plot': 29 | fig = px.bar(data_frame=df, x="nation", y="count", color="medal") 30 | 31 | elif user_input == 'Scatter Plot': 32 | fig = px.scatter(data_frame=df, x="count", y="nation", color="medal", 33 | symbol="medal") 34 | 35 | return fig # returned objects are assigned to the component property of the Output 36 | 37 | 38 | # Run app 39 | if __name__=='__main__': 40 | app.run_server(port=8053) 41 | -------------------------------------------------------------------------------- /Good_to_Know/Dash2.0/hello-world.py: -------------------------------------------------------------------------------- 1 | # If you prefer to run the code online instead of on your computer click: 2 | # https://github.com/Coding-with-Adam/Dash-by-Plotly#execute-code-in-browser 3 | 4 | from dash import Dash, dcc # pip install dash 5 | import dash_bootstrap_components as dbc # pip install dash-bootstrap-components 6 | 7 | # Build your components 8 | app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP]) 9 | mytext = dcc.Markdown(children="# Hello World - let's build web apps in Python!") 10 | 11 | # Customize your own Layout 12 | app.layout = dbc.Container([mytext]) 13 | 14 | # Run app 15 | if __name__=='__main__': 16 | app.run_server(port=8051) 17 | -------------------------------------------------------------------------------- /Good_to_Know/Dash2.0/interactive-app.py: -------------------------------------------------------------------------------- 1 | # If you prefer to run the code online instead of on your computer click: 2 | # https://github.com/Coding-with-Adam/Dash-by-Plotly#execute-code-in-browser 3 | 4 | from dash import Dash, dcc, Output, Input # pip install dash 5 | import dash_bootstrap_components as dbc # pip install dash-bootstrap-components 6 | 7 | # Build your components 8 | app = Dash(__name__, external_stylesheets=[dbc.themes.SOLAR]) 9 | mytext = dcc.Markdown(children='') 10 | myinput = dbc.Input(value="# Hello World - let's build web apps in Python!") 11 | 12 | # Customize your own Layout 13 | app.layout = dbc.Container([mytext, myinput]) 14 | 15 | # Callback allows components to interact 16 | @app.callback( 17 | Output(mytext, component_property='children'), 18 | Input(myinput, component_property='value') 19 | ) 20 | def update_title(user_input): # function arguments come from the component property of the Input 21 | return user_input # returned objects are assigned to the component property of the Output 22 | 23 | 24 | # Run app 25 | if __name__=='__main__': 26 | app.run_server(port=8052) 27 | -------------------------------------------------------------------------------- /Good_to_Know/Dash2.0/learning-resources.md: -------------------------------------------------------------------------------- 1 | # Resources to help you learn Dash 2 | 3 | ### 4 | - [Check out the new book I wrote with Dash Experts](https://www.barnesandnoble.com/w/python-dash-adam-schroeder/1141355104?ean=9781718502222) 5 | 6 | --- 7 | 8 | ### Important app components 9 | - [Dash Core Components](https://dash.plotly.com/dash-core-components) 10 | - [Dash Bootstrap Components](https://dash-bootstrap-components.opensource.faculty.ai/docs/components/) 11 | - [Dash Mantine Components](https://www.dash-mantine-components.com/) 12 | 13 | ### Layout components 14 | - [Dash Bootstrap for Layout](https://dash-bootstrap-components.opensource.faculty.ai/docs/components/layout/) 15 | 16 | ### Plotly Graphing library 17 | - [Plotly Graphs](https://plotly.com/python/) 18 | - [Plotly Express API](https://plotly.com/python-api-reference/plotly.express.html) 19 | 20 | ### Cheat Sheet to style your app 21 | - [Dash Bootstrap Cheat Sheet](https://dashcheatsheet.pythonanywhere.com/) 22 | 23 | ### Speed up your learning process 24 | - [Join the Plotly Community Forum](https://community.plotly.com) 25 | 26 | --- 27 | 28 | ### Ready to share your app with others on the web? 29 | - [App deployment with Dash-tools](https://github.com/andrew-hossack/dash-tools) 30 | -------------------------------------------------------------------------------- /Good_to_Know/Layout-Design/layout-intro.py: -------------------------------------------------------------------------------- 1 | from dash import Dash, dcc, html 2 | import dash_bootstrap_components as dbc 3 | import plotly.express as px 4 | 5 | # Instantiate our App and incorporate BOOTSTRAP theme stylesheet 6 | app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP]) 7 | 8 | # Incorporate data into App 9 | df = px.data.gapminder() 10 | print(df.head()) 11 | 12 | # Build the scatter plot 13 | fig = px.scatter(data_frame=df, x="gdpPercap", y="lifeExp", size="pop", 14 | color="continent", hover_name="country", log_x=True, 15 | size_max=60, range_y=[30, 90], animation_frame='year') 16 | 17 | # Build the layout to define what will be displayed on the page 18 | app.layout = dbc.Container([ 19 | dbc.Row([ 20 | dbc.Col([ 21 | html.H1("Life Expectancy vs. GDP", style={'textAlign': 'center'}) 22 | ], width=12) 23 | ]), 24 | 25 | dbc.Row([ 26 | dbc.Col([ 27 | dcc.Graph(id='our-plot', figure=fig) 28 | ], width=12) 29 | ]) 30 | ]) 31 | 32 | 33 | # callback is used to create app interactivity 34 | #@callback() 35 | 36 | # Run the App 37 | if __name__ == '__main__': 38 | app.run_server() 39 | -------------------------------------------------------------------------------- /Good_to_Know/Layout-Design/layout-intro2.py: -------------------------------------------------------------------------------- 1 | from dash import Dash, html, dcc 2 | import dash_bootstrap_components as dbc 3 | import plotly.express as px 4 | 5 | # Instantiate our App and incorporate BOOTSTRAP theme stylesheet 6 | app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP]) 7 | 8 | # Incorporate data into App 9 | df = px.data.gapminder() 10 | print(df.columns) 11 | 12 | # Build the layout to define what will be displayed on the page 13 | app.layout = dbc.Container([ 14 | dbc.Row([ 15 | dbc.Col([ 16 | html.H1("The Title of Our App") 17 | ], width=8) 18 | ], justify="center"), 19 | 20 | dbc.Row([ 21 | dbc.Col([ 22 | html.Label('Dropdown'), 23 | dcc.Dropdown(options=[x for x in df.year.unique()], 24 | value=df.year[0]), 25 | ], width=6), 26 | dbc.Col([ 27 | html.Label('Radio Items'), 28 | dcc.RadioItems(options=['New York City', 'Montréal', 'San Francisco'], 29 | value='Montréal'), 30 | ], width=6) 31 | ]), 32 | 33 | dbc.Row([ 34 | dbc.Col([ 35 | html.Label('Slider'), 36 | dcc.Slider(min=0, max=10, step=1, value=5), 37 | ], width=6), 38 | dbc.Col([ 39 | html.Label('Text Input'), 40 | html.Br(), 41 | dcc.Input(value='Initial text', type='text'), 42 | ], width=6) 43 | ]), 44 | ]) 45 | 46 | # callback is used to create app interactivity 47 | #@callback() 48 | 49 | # Run the App 50 | if __name__ == '__main__': 51 | app.run_server(port=8001) 52 | -------------------------------------------------------------------------------- /Good_to_Know/dash-with-math.py: -------------------------------------------------------------------------------- 1 | from dash import Dash, dcc # pip install dash==2.3.0 (or higher) 2 | import plotly.express as px 3 | import dash_bootstrap_components as dbc 4 | import pandas as pd 5 | 6 | df = px.data.stocks() 7 | print(df.head()) 8 | fig_left = px.line(df, 'date', ['NFLX', 'AAPL', 'GOOG']) 9 | fig_left.update_yaxes(title=dict(text='$(a+b)^{2 } = a^{2 } + ab + b^{2}$')) 10 | 11 | fig_right = px.line(df, 'date', ['NFLX', 'AAPL', 'GOOG']) 12 | fig_right.update_yaxes(title=dict(text=r'$\text{Google} = a^{2 } + ab + b^{2}$')) 13 | 14 | app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP]) 15 | app.layout = dbc.Container([ 16 | dcc.Markdown('# Dash 2.3.0 now has Mathjax', style={'textAlign': 'center'}, className='mb-3'), 17 | dbc.Row([ 18 | dbc.Col([ 19 | dcc.Markdown('## Mathjax Alone:'), 20 | ], width=4), 21 | dbc.Col([ 22 | dcc.Markdown('## Mathjax WITH Text:') 23 | ], width=4) 24 | ], className='mb-3', justify='center'), 25 | 26 | dbc.Row([ 27 | dbc.Col([ 28 | dcc.Markdown('$x=\\frac{-b \\pm \\sqrt{b^2-4ac}}{2a}$', mathjax=True), # make sure to user raw string (r) if you're using one backslash 29 | ], width=4), 30 | dbc.Col([ 31 | dcc.Markdown('Add text outside of dollar signs $x=\\frac{-b \\pm \\sqrt{b^2-4ac}}{2a}$', mathjax=True) 32 | ], width=4) 33 | ], justify='center'), 34 | 35 | dbc.Row([ 36 | dbc.Col([ 37 | dcc.Graph(figure=fig_left, mathjax=True) 38 | ], width=6), 39 | 40 | dbc.Col([ 41 | dcc.Graph(figure=fig_right, mathjax=True) 42 | ], width=6), 43 | ]) 44 | ]) 45 | 46 | 47 | if __name__=='__main__': 48 | app.run_server(debug=False) 49 | -------------------------------------------------------------------------------- /Good_to_Know/resume/app.py: -------------------------------------------------------------------------------- 1 | import dash 2 | from dash import Dash, html 3 | import dash_bootstrap_components as dbc 4 | 5 | app = Dash(__name__, use_pages=True, external_stylesheets=[dbc.themes.SUPERHERO]) 6 | 7 | header = dbc.Navbar( 8 | dbc.Container( 9 | [ 10 | dbc.Row([ 11 | dbc.NavbarToggler(id="navbar-toggler"), 12 | dbc.Nav([ 13 | dbc.NavLink(page["name"], href=page["path"]) 14 | for page in dash.page_registry.values() 15 | if not page["path"].startswith("/app") 16 | ]) 17 | ]) 18 | ], 19 | fluid=True, 20 | ), 21 | dark=True, 22 | color='dark' 23 | ) 24 | 25 | app.layout = dbc.Container([header, dash.page_container], fluid=False) 26 | 27 | if __name__ == '__main__': 28 | app.run_server() -------------------------------------------------------------------------------- /Good_to_Know/resume/pages/app2.py: -------------------------------------------------------------------------------- 1 | import dash 2 | from dash import html, dcc 3 | import dash_bootstrap_components as dbc 4 | from .side_bar import sidebar 5 | 6 | dash.register_page(__name__) 7 | 8 | def layout(): 9 | return html.Div([ 10 | dbc.Row( 11 | [ 12 | dbc.Col( 13 | [ 14 | sidebar() 15 | ], xs=4, sm=4, md=2, lg=2, xl=2, xxl=2), 16 | 17 | dbc.Col( 18 | [ 19 | html.H3('beautiful app 2'), 20 | ], xs=8, sm=8, md=10, lg=10, xl=10, xxl=10) 21 | ] 22 | ) 23 | ]) -------------------------------------------------------------------------------- /Good_to_Know/resume/pages/app3.py: -------------------------------------------------------------------------------- 1 | import dash 2 | from dash import html 3 | import dash_bootstrap_components as dbc 4 | from .side_bar import sidebar 5 | 6 | dash.register_page(__name__) 7 | 8 | def layout(): 9 | return html.Div([ 10 | dbc.Row( 11 | [ 12 | dbc.Col( 13 | [ 14 | sidebar() 15 | ], xs=4, sm=4, md=2, lg=2, xl=2, xxl=2), 16 | 17 | dbc.Col( 18 | [ 19 | html.H3('App 3 - the best of all the apps', style={'textAlign':'center'}), 20 | ], xs=8, sm=8, md=10, lg=10, xl=10, xxl=10) 21 | ] 22 | ) 23 | ]) 24 | -------------------------------------------------------------------------------- /Good_to_Know/resume/pages/contact.py: -------------------------------------------------------------------------------- 1 | import dash 2 | from dash import html, dcc 3 | import dash_bootstrap_components as dbc 4 | 5 | dash.register_page(__name__, order=3) 6 | 7 | green_text = {'color':'green'} 8 | 9 | def layout(): 10 | return dbc.Row([ 11 | dbc.Col([ 12 | dcc.Markdown('# Adam Schroeder', className='mt-3'), 13 | dcc.Markdown('### FC Barcelona Forward', className='mb-5'), 14 | dcc.Markdown('### Personal info', style={'color':'gray'}), 15 | dcc.Markdown('Address', style=green_text), 16 | dcc.Markdown('Barcelona, Spain 08010'), 17 | dcc.Markdown('Phone Number', style=green_text), 18 | dcc.Markdown('212-123-4567'), 19 | dcc.Markdown('Email', style=green_text), 20 | dcc.Markdown('adam@myemail.com'), 21 | dcc.Markdown('Linkedin', style=green_text), 22 | dcc.Markdown('[www.linkedin.com/in/adam-schroeder-17b5a819/](https://www.linkedin.com/in/adam-schroeder-17b5a819/)', link_target='_blank'), 23 | dcc.Markdown('YouTube', style=green_text), 24 | dcc.Markdown('[www.youtube.com/charmingdata](https://www.youtube.com/charmingdata)', link_target='_blank'), 25 | ], width={'size':6, 'offset':2}) 26 | ], justify='center') -------------------------------------------------------------------------------- /Good_to_Know/resume/pages/projects.py: -------------------------------------------------------------------------------- 1 | import dash 2 | from dash import html, dcc, Input, Output, State, callback 3 | import dash_bootstrap_components as dbc 4 | import plotly.express as px 5 | import pandas as pd 6 | from .side_bar import sidebar 7 | 8 | dash.register_page(__name__, title='App1', order=1) 9 | 10 | df = pd.read_csv('assets/Berlin_crimes.csv') 11 | 12 | def layout(): 13 | return html.Div([ 14 | dbc.Row( 15 | [ 16 | dbc.Col( 17 | [ 18 | sidebar() 19 | ], xs=4, sm=4, md=2, lg=2, xl=2, xxl=2), 20 | 21 | dbc.Col( 22 | [ 23 | html.H3('Graffiti Incidents in Berlin', style={'textAlign':'center'}), 24 | dcc.Dropdown(id='district_chosen', 25 | options=df['District'].unique(), 26 | value=["Lichtenberg", "Pankow", "Spandau"], 27 | multi=True, 28 | style={'color':'black'} 29 | ), 30 | html.Hr(), 31 | dcc.Graph(id='line_chart', figure={}), 32 | 33 | ], xs=8, sm=8, md=10, lg=10, xl=10, xxl=10) 34 | ] 35 | ) 36 | ]) 37 | 38 | @callback( 39 | Output("line_chart", "figure"), 40 | Input("district_chosen", "value") 41 | ) 42 | def update_graph_card(districts): 43 | if len(districts) == 0: 44 | return dash.no_update 45 | else: 46 | df_filtered = df[df["District"].isin(districts)] 47 | df_filtered = df_filtered.groupby(["Year", "District"])[['Graffiti']].median().reset_index() 48 | fig = px.line(df_filtered, x="Year", y="Graffiti", color="District", 49 | labels={"Graffiti": "Graffiti incidents (avg)"}).update_traces(mode='lines+markers') 50 | return fig 51 | 52 | -------------------------------------------------------------------------------- /Good_to_Know/resume/pages/side_bar.py: -------------------------------------------------------------------------------- 1 | import dash 2 | from dash import html 3 | import dash_bootstrap_components as dbc 4 | 5 | def sidebar(): 6 | nav_links = [] 7 | for page in dash.page_registry.values(): 8 | if page["path"].startswith("/app"): 9 | nav_links.append( 10 | dbc.NavLink( 11 | [ 12 | html.Div(page["name"], className="ms-2"), 13 | ], 14 | href=page["path"], 15 | active="exact", 16 | ) 17 | ) 18 | elif page["path"]=="/projects": 19 | nav_links.append( 20 | dbc.NavLink( 21 | [ 22 | html.Div("App 1", className="ms-2"), 23 | ], 24 | href=page["path"], 25 | active="exact", 26 | ) 27 | ) 28 | return dbc.Nav(children=nav_links, 29 | vertical=True, 30 | pills=True, 31 | className="bg-dark") -------------------------------------------------------------------------------- /Good_to_Know/resume/requirements.txt: -------------------------------------------------------------------------------- 1 | dash==2.15.0 2 | pandas==1.4.0 3 | dash-bootstrap-components==1.2.1 4 | gunicorn -------------------------------------------------------------------------------- /LangChain/Agents/Plotly AI/Multi Stock/app_file.md: -------------------------------------------------------------------------------- 1 | ### For the app_multiple.py file with the complete code, please visit [Charming Data](https://charming-data.circle.so/c/langchain-education/) for a free 3-day trial. 2 | -------------------------------------------------------------------------------- /LangChain/Agents/Plotly AI/One Stock/app_file.md: -------------------------------------------------------------------------------- 1 | ## For the app.py file with the complete code, please visit [Charming Data](https://charming-data.circle.so/c/langchain-education/). 2 | By joining you'll get a free 3-day trial. 3 | -------------------------------------------------------------------------------- /LangChain/Agents/web-search/.env: -------------------------------------------------------------------------------- 1 | TAVILY_API_KEY="insert-your-tavily-key" 2 | OPENAI_API_KEY="insert-your-openAI-key" 3 | -------------------------------------------------------------------------------- /LangChain/Agents/web-search/requirements.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Coding-with-Adam/Dash-by-Plotly/f53325eb47d610b960b8d97fd48bec2520cf18c1/LangChain/Agents/web-search/requirements.txt -------------------------------------------------------------------------------- /LangChain/Quickstart/llm-chain-exercise1.py: -------------------------------------------------------------------------------- 1 | """ 2 | ChatOpenAI pParameters -- https://api.python.langchain.com/en/latest/chat_models/langchain_openai.chat_models.base.ChatOpenAI.html# 3 | Model Tokens -- https://platform.openai.com/docs/guides/text-generation/managing-tokens 4 | Language models read and write text in chunks called tokens. In English, a token can be as short as one character 5 | or as long as one word (e.g., a or apple). The total number of tokens in an API call affects: 6 | - How much your API call costs, as you pay per token 7 | - How long your API call takes, as writing more tokens takes more time 8 | - Whether your API call works at all, as total tokens must be below the model’s maximum limit (4097 tokens for gpt-3.5-turbo) 9 | 10 | Exercise 1: Update the model's max token limit to 500. 11 | **Solution** can be found in -- https://charming-data.circle.so/c/langchain-education/quickstart-llm-chain 12 | """ 13 | 14 | from dotenv import find_dotenv, load_dotenv 15 | from langchain_openai import ChatOpenAI 16 | 17 | # activate api key 18 | dotenv_path = find_dotenv() 19 | load_dotenv(dotenv_path) 20 | 21 | llm = ChatOpenAI(model_name="gpt-3.5-turbo") 22 | answer = llm.invoke("What will the world look like in 2 years?") 23 | print(answer) 24 | -------------------------------------------------------------------------------- /LangChain/Quickstart/llm-chain-exercise2.py: -------------------------------------------------------------------------------- 1 | """ 2 | ChatOpenAI pParameters -- https://api.python.langchain.com/en/latest/chat_models/langchain_openai.chat_models.base.ChatOpenAI.html# 3 | Temperature -- https://platform.openai.com/docs/guides/text-generation/faq 4 | A model's temperature controls how creative or conservative the generated text is. Temperature is between 0 to 2. 5 | A higher temperature (e.g., 0.7) results in more diverse and creative output, 6 | while a lower temperature (e.g., 0.2) makes the output more deterministic and focused. 7 | ChatOpenAI's default temperature is 0.7. 8 | 9 | Exercise 2: Update the model's temperature to 1.5 and explore the generated text. Then, modify to 0.1 to see what has changed. 10 | Limit the model to 500 tokens to reduce api key usage. 11 | 12 | **Solution** can be found in -- https://charming-data.circle.so/c/langchain-education/quickstart-llm-chain 13 | """ 14 | 15 | from dotenv import find_dotenv, load_dotenv 16 | from langchain_openai import ChatOpenAI 17 | 18 | # activate api key 19 | dotenv_path = find_dotenv() 20 | load_dotenv(dotenv_path) 21 | 22 | llm = ChatOpenAI(model_name="gpt-3.5-turbo") 23 | answer = llm.invoke("What will the world look like in 2 years?") 24 | print(answer) 25 | -------------------------------------------------------------------------------- /LangChain/Quickstart/retrieval-chain.py: -------------------------------------------------------------------------------- 1 | from langchain_community.document_loaders import WebBaseLoader 2 | from langchain_openai import OpenAIEmbeddings 3 | from langchain_community.vectorstores import FAISS 4 | from langchain_core.prompts import ChatPromptTemplate 5 | from langchain.text_splitter import RecursiveCharacterTextSplitter 6 | from langchain.chains.combine_documents import create_stuff_documents_chain 7 | from langchain.chains import create_retrieval_chain 8 | from dotenv import find_dotenv, load_dotenv 9 | from langchain_openai import ChatOpenAI 10 | 11 | # activate api key 12 | # .env file should have: OPENAI_API_KEY="my-openAI-key" 13 | dotenv_path = find_dotenv() 14 | load_dotenv(dotenv_path) 15 | llm = ChatOpenAI(model_name="gpt-3.5-turbo") # load chat model 16 | 17 | 18 | # load HTML pages and parse them with `BeautifulSoup` 19 | loader = WebBaseLoader("https://en.wikipedia.org/wiki/Paris") 20 | docs = loader.load() # load parse text 21 | # print(docs) 22 | # exit() 23 | 24 | 25 | embeddings = OpenAIEmbeddings() # load embedding model to turn text to array of numbers 26 | # split the docs' text into smaller chunks of text (because we have too much text to pass to an LLM) 27 | # and index it into a vectorstore 28 | text_splitter = RecursiveCharacterTextSplitter() 29 | documents = text_splitter.split_documents(docs) 30 | # print(documents) 31 | # exit() 32 | vector = FAISS.from_documents(documents, embeddings) 33 | 34 | 35 | prompt = ChatPromptTemplate.from_template("""Answer the following question based only on the provided context: 36 | 37 | 38 | {context} 39 | 40 | 41 | Question: {input}""") 42 | 43 | document_chain = create_stuff_documents_chain(llm, prompt) # chain the LLM to the prompt 44 | 45 | 46 | # create a chain that will retrieve the most relevant docs (based on the input question) 47 | # and pass them in as the `context` 48 | retriever = vector.as_retriever() 49 | retrieval_chain = create_retrieval_chain(retriever, document_chain) 50 | response = retrieval_chain.invoke({"input": "What was Paris architecture like in the 19th century"}) 51 | print(response["answer"]) 52 | -------------------------------------------------------------------------------- /My-Dear-Supporters.md: -------------------------------------------------------------------------------- 1 | # 🙏 Big Thank You to my Supporters: 2 | - @rdas3 3 | - @sergeSC 4 | - @nickrye 5 | - @Data-Design-Dimension 6 | - @dbpython 7 | -------------------------------------------------------------------------------- /Other/COVID19_women/covid.py: -------------------------------------------------------------------------------- 1 | import pandas as pd #(version 1.0.0) 2 | import plotly #(version 4.5.4) #pip install plotly==4.5.4 3 | import plotly.express as px 4 | import plotly.io as pio 5 | 6 | df = pd.read_csv("final_covid.csv") 7 | df.dropna(subset=['women'], inplace=True) 8 | df['total_employed'] = pd.to_numeric(df['total_employed']) 9 | df['total_employed'] = df['total_employed']*1000 10 | 11 | 12 | scatterplot = px.scatter( 13 | data_frame=df, 14 | x="proximity", 15 | y="exposure", 16 | size="total_employed", 17 | color="Majority Employed", 18 | opacity=0.8, 19 | color_discrete_map={"Women":"red","Men":"greenyellow"}, 20 | custom_data=['occupation'], 21 | 22 | marginal_x='box', 23 | marginal_y='box', 24 | 25 | labels={"exposure":"Exposed to Diseases", 26 | "proximity":"Physical proximity to others"}, 27 | title='Workers at Highest Risk of Coronavirus', 28 | # height=800, 29 | template='ggplot2', # 'ggplot2','plotly_dark' 30 | ) 31 | 32 | scatterplot.update_traces(hovertemplate= 33 | "%{customdata}

" + 34 | "Exposure: %{y}
" + 35 | "Proximity: %{x}
" + 36 | "Total Employed: %{marker.size:,}" + 37 | "", 38 | ) 39 | 40 | scatterplot.data[5].hovertemplate = "
%{y}
" 41 | scatterplot.update_layout(legend=dict(x=.8, y=1)) 42 | scatterplot.write_html("covidwomen.html") 43 | pio.show(scatterplot) 44 | -------------------------------------------------------------------------------- /Other/Create Virtual Environment/mydash1_8.yml: -------------------------------------------------------------------------------- 1 | name: env_dash_1_8_0 2 | dependencies: 3 | - python=3.8.0 4 | - pip 5 | - pip: 6 | - numpy==1.18.1 7 | - pandas==1.0.1 8 | - plotly==4.5.3 9 | - dash==1.8.0 10 | - gunicorn==20.0.4 11 | -------------------------------------------------------------------------------- /Other/DPhi Presentation/bar-plot.py: -------------------------------------------------------------------------------- 1 | # import the libraries---------------------------------------------------- 2 | import plotly.express as px 3 | import pandas as pd 4 | 5 | # read, clean, and filter the data---------------------------------------- 6 | # data source: https://mappingpoliceviolence.org/aboutthedata 7 | df = pd.read_csv("https://raw.githubusercontent.com/Coding-with-Adam/Dash-by-Plotly/master/Other/DPhi%20Presentation/MPVDataset.csv") 8 | 9 | df = df[df["State"].isin(['NY', 'CA', 'TX'])] 10 | df = df[df["Victim's race"].isin(["White", "Black", "Hispanic", "Asian"])] 11 | df["Victim's age"] = pd.to_numeric(df["Victim's age"], errors='coerce') 12 | 13 | df = df.groupby(["Victim's race"])[["Victim's age"]].mean() 14 | 15 | # df['date'] = pd.to_datetime(df['Date of Incident (month/day/year)']).dt.year 16 | # df = df.groupby(['date', "Victim's race"])[["Victim's age"]].mean() 17 | 18 | # df = df.groupby(["Victim's race", "State"])[["Victim's age"]].mean() 19 | 20 | df = df.reset_index() 21 | 22 | 23 | # build the graph--------------------------------------------------------- 24 | fig = px.bar( 25 | data_frame=df, 26 | x="Victim's race", 27 | y="Victim's age", 28 | # animation_frame="date", 29 | # range_y=[0,45], 30 | # facet_col="State" 31 | 32 | ) 33 | 34 | fig.show() 35 | -------------------------------------------------------------------------------- /Other/DPhi Presentation/sunburst.py: -------------------------------------------------------------------------------- 1 | # import the libraries 2 | import plotly.express as px 3 | import pandas as pd 4 | 5 | # read, clean, and filter the data---------------------------------------- 6 | # data source: https://mappingpoliceviolence.org/aboutthedata 7 | df = pd.read_csv("https://raw.githubusercontent.com/Coding-with-Adam/Dash-by-Plotly/master/Other/DPhi%20Presentation/MPVDataset.csv") 8 | 9 | df = df[df["State"].isin(['NY', 'CA', 'TX'])] 10 | df = df[df["Victim's race"].isin(["White", "Black", "Hispanic", "Asian"])] 11 | df["Victim's age"] = pd.to_numeric(df["Victim's age"], errors='coerce') 12 | 13 | # build the graph--------------------------------------------------------- 14 | fig = px.sunburst( 15 | data_frame=df, 16 | path=["Weapon", 'State', "Victim's race"], # Root, branches, leaves 17 | color="Weapon", 18 | # color="Victim's age", 19 | # title="7-year Breakdown of Deaths by Police", 20 | # template='plotly_dark', # 'ggplot2', 'seaborn', 'simple_white', 'plotly', 21 | # # 'plotly_white', 'plotly_dark', 'presentation', 22 | # # 'xgridoff', 'ygridoff', 'gridon', 'none' 23 | 24 | ) 25 | 26 | fig.show() 27 | -------------------------------------------------------------------------------- /Other/DPhi Presentation/z-links.md: -------------------------------------------------------------------------------- 1 | Plotly Express API: https://plotly.com/python-api-reference/plotly.express.html 2 | 3 | Dash Core Components: https://dash.plotly.com/dash-core-components 4 | 5 | Dash HTML Components: https://dash.plotly.com/dash-html-components 6 | 7 | Full Overview of Dash article: https://medium.datadriveninvestor.com/plotly-dash-everything-you-need-to-know-bc09a5e45395 8 | 9 | Introduction to Dash by Plotly: https://medium.com/plotly/introducing-dash-5ecf7191b503 10 | 11 | Dash App Gallery: https://dash-gallery.plotly.host/Portal/ 12 | 13 | ****************************************************************************** 14 | 👉 If you appreciate the education I provide, I would mean a lot to me if you could support my work: 15 | 16 | Patreon: https://www.patreon.com/charmingdata 17 | 18 | GitHub: https://github.com/sponsors/Coding-with-Adam 19 | 20 | YouTube: https://www.youtube.com/channel/UCqBFsuAz41sqWcFjZkqmJqQ/join 21 | ****************************************************************************** 22 | 23 | To Connect with me: 24 | 25 | LinkedIn: https://www.linkedin.com/in/adam-schroeder-17b5a819 26 | 27 | Twitter: https://twitter.com/charmingdata 28 | 29 | Odysee: https://odysee.com/@charmingdata 30 | -------------------------------------------------------------------------------- /Other/Dash_Introduction/the_challenges.txt: -------------------------------------------------------------------------------- 1 | Challenge A: 2 | Use plotly express to plot a Bar chart instead of a choropleth map. 3 | X-axis should represent States 4 | Y-axis should represent % of bee colonies 5 | Challenge B: 6 | Use plotly express to plot a Line chart instead of a choropleth map. 7 | X-axis should represent Year 8 | Y-axis should represent % of bee colonies 9 | Color should represent State (Texas, New Mexico, New York) 10 | Dropdown options should be list of things affecting bees 11 | -------------------------------------------------------------------------------- /Other/Excel_Dash/excel_plotly_dash.py: -------------------------------------------------------------------------------- 1 | import dash 2 | import plotly.express as px 3 | import pandas as pd 4 | 5 | # Data Exploration with Pandas (python) 6 | # ----------------------------------------------------------------- 7 | 8 | df = pd.read_csv("vgsales.csv") # data by GregorySmith from kaggle 9 | 10 | print(df[:5]) 11 | print(df.iloc[:5, [2,3,5,10]]) 12 | print(df.Genre.nunique()) 13 | print(df.Genre.unique()) 14 | print(sorted(df.Year.unique())) 15 | 16 | # Data Visualization with Plotly (Python) 17 | # ----------------------------------------------------------------- 18 | 19 | fig_pie = px.pie(data_frame=df, names='Genre', values='Japan Sales') 20 | fig_pie = px.pie(data_frame=df, names='Genre', values='North American Sales') 21 | fig_pie.show() 22 | 23 | fig_bar = px.bar(data_frame=df, x='Genre', y='Japan Sales') 24 | fig_bar.show() 25 | 26 | fig_hist = px.histogram(data_frame=df, x='Year', y='Japan Sales') 27 | fig_hist.show() 28 | 29 | # Interactive Graphs with Dash (Python, R, Julia) 30 | # ----------------------------------------------------------------- 31 | 32 | import dash_core_components as dcc 33 | import dash_html_components as html 34 | from dash.dependencies import Output, Input 35 | 36 | app = dash.Dash(__name__) 37 | 38 | app.layout=html.Div([ 39 | html.H1("Graph Analysis with Charming Data"), 40 | dcc.Dropdown(id='genre-choice', 41 | options=[{'label':x, 'value':x} 42 | for x in sorted(df.Genre.unique())], 43 | value='Action' 44 | ), 45 | dcc.Graph(id='my-graph', 46 | figure={}), 47 | ]) 48 | @app.callback( 49 | Output(component_id='my-graph', component_property='figure'), 50 | Input(component_id='genre-choice', component_property='value') 51 | ) 52 | def interactive_graphs(value_genre): 53 | print(value_genre) 54 | dff = df[df.Genre==value_genre] 55 | fig = px.bar(data_frame=dff, x='Year', y='Japan Sales') 56 | return fig 57 | 58 | 59 | if __name__=='__main__': 60 | app.run_server() 61 | -------------------------------------------------------------------------------- /Other/Excel_Dash/practice.py: -------------------------------------------------------------------------------- 1 | import dash 2 | import plotly.express as px 3 | import pandas as pd 4 | import dash_core_components as dcc 5 | import dash_html_components as html 6 | from dash.dependencies import Output, Input 7 | 8 | 9 | df = pd.read_csv("vgsales.csv") 10 | 11 | app = dash.Dash(__name__) 12 | 13 | app.layout=html.Div([ 14 | html.H1("Graph Analysis with Charming Data"), 15 | dcc.Dropdown(id='genre-choice', 16 | options=[{'label':x, 'value':x} 17 | for x in sorted(df.Genre.unique())], 18 | value='Action', 19 | style={'width':'50%'} 20 | ), 21 | dcc.Dropdown(id='platform-choice', 22 | options=[{'label': x, 'value': x} 23 | for x in sorted(df.Platform.unique())], 24 | value='PS4', 25 | style={'width':'50%'} 26 | ), 27 | dcc.Graph(id='my-graph', 28 | figure={}), 29 | ]) 30 | @app.callback( 31 | Output(component_id='my-graph', component_property='figure'), 32 | Input(component_id='genre-choice', component_property='value'), 33 | Input(component_id='platform-choice', component_property='value') 34 | ) 35 | def interactive_graphs(value_genre, value_platform): 36 | dff = df[df.Genre==value_genre] 37 | dff = dff[dff.Platform==value_platform] 38 | fig = px.bar(data_frame=dff, x='Year', y='Japan Sales') 39 | return fig 40 | 41 | 42 | if __name__=='__main__': 43 | app.run_server() 44 | 45 | 46 | -------------------------------------------------------------------------------- /Other/Monterrey/exercises.md: -------------------------------------------------------------------------------- 1 | 1. Take the original `mexico-dash.py` app and add room_type dropdown to the layout and callback function 2 | 2. Take the original `mexico-dash.py` app and return a dbc.Alert() if dff is empty (if len(dff)==0) 3 | -------------------------------------------------------------------------------- /Other/Monterrey/figure-px.py: -------------------------------------------------------------------------------- 1 | import plotly.express as px 2 | import pandas as pd 3 | 4 | # https://www.kaggle.com/datasets/tsarina/mexico-city-airbnb?select=listings1.csv 5 | df = pd.read_csv("https://raw.githubusercontent.com/Coding-with-Adam/Dash-by-Plotly/master/Other/Monterrey/airbnb.csv") 6 | 7 | 8 | fig = px.scatter_mapbox(data_frame=df, lat="latitude", lon="longitude", color='price', height=600, 9 | color_continuous_scale=px.colors.sequential.Sunset, 10 | range_color=[0, 1000], zoom=11, 11 | hover_data={'latitude':False, 'longitude':False, 'room_type':True, 12 | 'minimum_nights':True}) 13 | fig.update_layout(mapbox_style="carto-positron") 14 | fig.update_layout(margin={"r":0,"t":0,"l":0,"b":0}) 15 | fig.show() 16 | 17 | -------------------------------------------------------------------------------- /Other/Monterrey/intro_app.py: -------------------------------------------------------------------------------- 1 | from dash import Dash, dcc, html, Output, Input 2 | import dash_bootstrap_components as dbc 3 | 4 | app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP]) 5 | 6 | # my_output = dcc.Markdown() 7 | app.layout = dbc.Container([ # Build Layout to customize the style and display of the page--------------- 8 | my_output := dcc.Markdown(children=''), 9 | my_text := dcc.Input(value='Type Text') 10 | ]) 11 | 12 | @app.callback( # Callback to build powerful interactions----------------------------------- 13 | Output(my_output, 'children'), 14 | Input(my_text, 'value') 15 | ) 16 | def update_graph(el_texto): 17 | return el_texto 18 | 19 | 20 | if __name__ == '__main__': 21 | app.run_server(debug=True) 22 | -------------------------------------------------------------------------------- /Other/Monterrey/resources.md: -------------------------------------------------------------------------------- 1 | # Resources: 2 | - Plotly Forum - https://community.plotly.com 3 | - YouTube channel - https://www.youtube.com/charmingdata 4 | - Dash Docs - https://dash.plotly.com/ 5 | - Dash Example Index - https://dash-example-index.herokuapp.com/ 6 | - Plotly graphs - https://plotly.com/python/ 7 | - Plotly Express parameteres - https://plotly.github.io/plotly.py-docs/plotly.express.html 8 | - Dash Bootstrap Components - https://dash-bootstrap-components.opensource.faculty.ai/ 9 | -------------------------------------------------------------------------------- /Other/Presentation Dash/intro-dash.py: -------------------------------------------------------------------------------- 1 | from dash import Dash, dcc, html, Output, Input 2 | import dash_bootstrap_components as dbc 3 | 4 | app = Dash(__name__, external_stylesheets=[dbc.themes.SOLAR]) 5 | 6 | # my_output = dcc.Markdown(children='') 7 | app.layout = dbc.Container([ # Customize the style and layout of the page-------------------------------- 8 | my_text := dcc.Input(value='Type Text new now'), 9 | my_output := dcc.Markdown(children=''), 10 | # dcc.Dropdown(options=['NYC', 'MTL', 'SF'], value='NYC', id='my-dropdown'), 11 | ]) 12 | 13 | @app.callback( # Callback to build powerful interactions----------------------------------- 14 | Output(component_id=my_output, component_property='children'), 15 | Input(component_id=my_text, component_property='value'), 16 | ) 17 | def update_text(el_texto): 18 | # slice the data set 19 | # build the graph 20 | return el_texto 21 | 22 | 23 | if __name__ == '__main__': 24 | app.run_server(debug=True) -------------------------------------------------------------------------------- /Other/Presentation Dash/intro-plotly.py: -------------------------------------------------------------------------------- 1 | import plotly.express as px 2 | import pandas as pd 3 | # Graphing docs - https://plotly.com/python/ 4 | # High level - https://plotly.com/python-api-reference/plotly.express.html 5 | # https://plotly.com/python/reference/index/ 6 | 7 | df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/salaries-ai-jobs-net.csv') 8 | df = df[df.salary < 251000] 9 | 10 | 11 | fig = px.histogram(data_frame=df, x="salary", nbins=20, color='experience_level', barmode='group') 12 | fig = px.histogram(df, x="salary", nbins=20, facet_col='experience_level') 13 | 14 | # fig = px.histogram(df, x="salary", nbins=20, color='experience_level', barmode='group') 15 | # fig.update_traces(showlegend=False) 16 | 17 | # fig.update_traces(marker_opacity=0.6) 18 | 19 | # fig.update_layout(hoverlabel_font_size=20) 20 | 21 | fig.show() 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /Other/Presentation Dash/more-exercises.md: -------------------------------------------------------------------------------- 1 | 1. Modify the `app.py` app: add room_type dropdown to the layout and callback function 2 | 2. Modify the `app.py` app: return a dbc.Alert() if dff is empty (if len(dff)==0) 3 | -------------------------------------------------------------------------------- /Other/Vizro/Data-apps-Vizro/actions.py: -------------------------------------------------------------------------------- 1 | import vizro.models as vm 2 | import vizro.plotly.express as px 3 | from vizro import Vizro 4 | from vizro.actions import filter_interaction 5 | 6 | df_gapminder = px.data.gapminder().query("year == 2007") 7 | 8 | dashboard = vm.Dashboard( 9 | pages=[ 10 | vm.Page( 11 | title="Filter interaction", 12 | components=[ 13 | vm.Graph( 14 | id="bar_relation_2007", 15 | figure=px.box( 16 | df_gapminder, 17 | x="continent", 18 | y="lifeExp", 19 | color="continent", 20 | points="all", 21 | custom_data=["continent"], 22 | ), 23 | # clicking the custom_data (continent) of box plot will filter (target) 24 | # the dataframe (continent column) of gapminder_scatter graph 25 | actions=[vm.Action(function=filter_interaction(targets=["gapminder_scatter"]))], 26 | ), 27 | vm.Graph( 28 | id="gapminder_scatter", 29 | figure=px.scatter( 30 | df_gapminder, 31 | x="gdpPercap", 32 | y="lifeExp", 33 | size="pop", 34 | color="continent", 35 | ), 36 | ), 37 | ], 38 | ), 39 | ] 40 | ) 41 | 42 | Vizro().build(dashboard).run() 43 | -------------------------------------------------------------------------------- /Other/Vizro/Data-apps-Vizro/filter_data.py: -------------------------------------------------------------------------------- 1 | import vizro.plotly.express as px 2 | from vizro import Vizro 3 | import vizro.models as vm 4 | 5 | df = px.data.iris() 6 | print(df.head()) 7 | 8 | page = vm.Page( 9 | title="My first dashboard", 10 | components=[ 11 | # components consist of vm.Graph or vm.Table 12 | vm.Graph(id="scatter_chart", figure=px.scatter(df, x="sepal_length", y="petal_width", color="species")), 13 | vm.Graph(id="hist_chart", figure=px.histogram(df, x="sepal_width", color="species")), 14 | ], 15 | controls=[ 16 | # controls consist of vm.Filter or vm.Parameter 17 | # filter the dataframe (df) of the target graph (histogram), by column sepal_width, using the dropdown 18 | vm.Filter(column="sepal_width", selector=vm.Dropdown(), targets=["hist_chart"]), 19 | ], 20 | ) 21 | 22 | dashboard = vm.Dashboard(pages=[page]) 23 | 24 | Vizro().build(dashboard).run() 25 | -------------------------------------------------------------------------------- /Other/Vizro/Data-apps-Vizro/multipage.py: -------------------------------------------------------------------------------- 1 | import vizro.models as vm 2 | import vizro.plotly.express as px 3 | from vizro import Vizro 4 | 5 | gapminder = px.data.gapminder().query("year == 2007") 6 | df = px.data.iris() 7 | 8 | page1 = vm.Page( 9 | title="Page 1", 10 | components=[ 11 | vm.Card(text="""This data app will explore the consequences of..."""), 12 | vm.Graph(id="scatter_chart", figure=px.scatter(df, x="sepal_length", y="petal_width", color="species")), 13 | vm.Graph(id="hist_chart", figure=px.histogram(df, x="sepal_width", color="species")), 14 | ], 15 | controls=[ 16 | vm.Filter(column="species", selector=vm.Dropdown(value=["ALL"])), 17 | ], 18 | ) 19 | 20 | 21 | page2 = vm.Page( 22 | title="Page 2", 23 | path="world-order", 24 | components=[ 25 | vm.Graph( 26 | id="sunburst", figure=px.sunburst(gapminder, path=["continent", "country"], values="pop", color="lifeExp") 27 | ) 28 | ], 29 | controls=[ 30 | vm.Filter(column="continent", targets=["sunburst"]), 31 | vm.Parameter(targets=["sunburst.color"], selector=vm.RadioItems(options=["lifeExp", "pop"], title="Color")), 32 | ], 33 | ) 34 | 35 | dashboard = vm.Dashboard(pages=[page1, page2]) 36 | 37 | Vizro().build(dashboard).run() 38 | -------------------------------------------------------------------------------- /Other/Vizro/Data-apps-Vizro/parameters.py: -------------------------------------------------------------------------------- 1 | import vizro.plotly.express as px 2 | from vizro import Vizro 3 | import vizro.models as vm 4 | 5 | df = px.data.iris() 6 | dff = px.data.gapminder() 7 | 8 | page = vm.Page( 9 | title="My first dashboard", 10 | components=[ 11 | vm.Graph(id="scatter_chart", figure=px.scatter(df, x="sepal_length", y="petal_width", color="species")), 12 | vm.Graph(id="hist_chart", figure=px.histogram(dff, x="continent", y="gdpPercap", range_y=[0,5000000])), 13 | ], 14 | controls=[ 15 | # use the dropown to update (target) the x attribute of the scatter chart 16 | # scatter chart attributes: https://plotly.com/python-api-reference/generated/plotly.express.scatter.html#plotly.express.scatter 17 | vm.Parameter(selector=vm.Dropdown(options=["sepal_length","petal_length"], 18 | multi=False, 19 | value="sepal_length", 20 | title="X axis"), 21 | targets=["scatter_chart.x"]), 22 | # use the rangeSlider to update (target) the range_y attribute of the histogram 23 | # histogram attributes: https://plotly.com/python-api-reference/generated/plotly.express.histogram.html#plotly.express.histogram 24 | vm.Parameter(selector=vm.RangeSlider(min=0, 25 | max=9000000, 26 | value=[0,5000000], 27 | step=1000000, 28 | title="Y axis Range"), 29 | targets=["hist_chart.range_y"]) 30 | ], 31 | ) 32 | 33 | dashboard = vm.Dashboard(pages=[page]) 34 | 35 | Vizro().build(dashboard).run() 36 | -------------------------------------------------------------------------------- /Other/Vizro/Data-apps-Vizro/parameters_ex2.py: -------------------------------------------------------------------------------- 1 | import vizro.models as vm 2 | import vizro.plotly.express as px 3 | from vizro import Vizro 4 | from vizro.tables import dash_data_table 5 | 6 | df = px.data.gapminder().query("year == 2007") 7 | 8 | page = vm.Page( 9 | title="Example of a Dash DataTable", 10 | components=[ 11 | vm.Table(id="table", title="Dash DataTable", figure=dash_data_table(data_frame=df, editable=True)), 12 | ], 13 | controls=[ 14 | vm.Parameter(selector=vm.Dropdown(options=[{"label":"True", "value":True}, 15 | {"label":"False", "value":False}], 16 | multi=False, 17 | value=True, 18 | title="Editable Cells"), 19 | targets=["table.editable"]), 20 | ], 21 | ) 22 | dashboard = vm.Dashboard(pages=[page]) 23 | 24 | Vizro().build(dashboard).run() 25 | -------------------------------------------------------------------------------- /Other/my-portfolio.csv: -------------------------------------------------------------------------------- 1 | region,market,balance_dollar,balance_prct,investment,account,platform,owner 2 | International,Equities,37990,14.5,VFWAX,Brokerage,Vanguard,Joint 3 | Domestic,Annuities,56330,21.5,Guaranteed,403b,Empower,Cricket 4 | Domestic,Bonds,13100,5,TIPS,401k,Empower,Cricket 5 | Domestic,Equities,94320,36,S&P 500,401k,Tiaa-Cref,Ladybug 6 | Domestic,Equities,26200,10,S&P 500,Roth IRA,Tiaa-Cref,Ladybug 7 | International,Equities,6550,2.5,VFWAX,IRA,Vanguard,Ladybug 8 | Mix,Equities,12052,4.6,CNRG,Roth IRA,Vanguard,Cricket 9 | Domestic,Equities,10218,3.9,TSLA,Other,Robinhood,Joint 10 | Domestic,Commodities,5240,2,REIT,Other,Fundrise,Cricket 11 | -------------------------------------------------------------------------------- /Other/myscript.js: -------------------------------------------------------------------------------- 1 | alert('If you see this alert, then your custom JavaScript script has run!') 2 | -------------------------------------------------------------------------------- /Plotly_Graphs/BigData/Join_me.md: -------------------------------------------------------------------------------- 1 | # If you forked it, Support it! 2 | A growing number of viewers are looking for high quality, professional content on Dash, which is hard to find. I am trying to fill that gap. 3 | 4 | My goal is to make this a sustainable project for myself and my viewers. This code and videos are time-intensive, so if you appreciate my repository and tutorials and are able support their existence, I would be grateful to you. Become my supporter at: https://www.patreon.com/charmingdata 5 | -------------------------------------------------------------------------------- /Plotly_Graphs/BigData/chicago_shader.py: -------------------------------------------------------------------------------- 1 | import pandas as pd 2 | import datashader as ds 3 | import datashader.transfer_functions as tf 4 | from colorcet import fire, kbc, bmw, gray 5 | import plotly.express as px 6 | 7 | 8 | # Read and filter your dataframe 9 | df = pd.read_csv("Crimes_-_2001_to_Present.csv") 10 | dff = df[['Primary Type', 'Latitude', 'Longitude']] 11 | print(dff['Primary Type'].unique()) 12 | dff = dff[dff['Primary Type'].isin(['PROSTITUTION'])] 13 | dff.dropna(subset=['Latitude', 'Longitude'], inplace=True) 14 | print(dff.shape) 15 | 16 | 17 | # Build an abstract canvas representing the space in which to plot data 18 | cvs = ds.Canvas(plot_width=1000, plot_height=1000) 19 | 20 | # project the longitude and latitude onto the canvas and 21 | # map the data to pixels as points 22 | aggs = cvs.points(dff, x='Longitude', y='Latitude') 23 | 24 | # aggs is an xarray object, see http://xarray.pydata.org/en/stable/ for more details 25 | coords_lat, coords_lon = aggs.coords['Latitude'].values, aggs.coords['Longitude'].values 26 | 27 | # Set the corners of the image that need to be passed to the mapbox 28 | coordinates = [[coords_lon[0], coords_lat[0]], 29 | [coords_lon[-1], coords_lat[0]], 30 | [coords_lon[-1], coords_lat[-1]], 31 | [coords_lon[0], coords_lat[-1]]] 32 | 33 | 34 | # Set the image color, and the legend (how) types 35 | # linear (how=linear), logarithmic (how=log), percentile (how=eq_hist) 36 | img = tf.shade(aggs, cmap=fire, how='eq_hist', alpha=255)[::-1].to_pil() 37 | 38 | # Create a quick mapbox figure with plotly 39 | fig = px.scatter_mapbox(dff[:1], lat='Latitude', lon='Longitude', zoom=10) 40 | 41 | # Add the datashader image as a mapbox layer image 42 | fig.update_layout(mapbox_style="carto-darkmatter", 43 | mapbox_layers=[ 44 | { 45 | "sourcetype": "image", 46 | "source": img, 47 | "coordinates": coordinates 48 | } 49 | ] 50 | ) 51 | fig.show() 52 | -------------------------------------------------------------------------------- /Plotly_Graphs/Heatmaps/An_ask.md: -------------------------------------------------------------------------------- 1 | # If you forked it, Support it! 2 | A growing number of viewers are looking for high quality, professional content on Dash, which is hard to find. I am trying to fill that gap. 3 | 4 | My goal is to make this a sustainable project for myself and my viewers. This code and videos are time-intensive, so if you appreciate my repository and tutorials and are able support their existence, I would be grateful to you. Become my supporter at: https://www.patreon.com/charmingdata 5 | -------------------------------------------------------------------------------- /Plotly_Graphs/Heatmaps/heatmap.py: -------------------------------------------------------------------------------- 1 | import plotly.express as px 2 | import pandas as pd 3 | 4 | df = pd.read_csv("https://raw.githubusercontent.com/Coding-with-Adam/Dash-by-Plotly/master/Plotly_Graphs/Heatmaps/Berlin_crimes.csv") 5 | df = df.groupby(['District'])[ 6 | ['Graffiti','Robbery', 'Agg_assault', 'Burglary']].median().reset_index() 7 | print(df[:15]) 8 | df = pd.melt(df, id_vars=['District'], value_vars=['Graffiti', 'Robbery', 'Agg_assault', 'Burglary'], 9 | var_name='Crime') 10 | print(df[:15]) 11 | df = df.pivot('Crime','District','value') 12 | print(df) 13 | 14 | # https://plotly.com/python/builtin-colorscales/) 15 | fig = px.imshow(df,color_continuous_scale=px.colors.sequential.Plasma, 16 | title="Berlin Crime Distribution") 17 | fig.update_layout(title_font={'size':27}, title_x=0.5) 18 | fig.update_traces(hoverongaps=False, 19 | hovertemplate="District: %{y}" 20 | "
Crime: %{x}" 21 | "
Cases: %{z}" 22 | ) 23 | fig.show() 24 | 25 | 26 | # df = pd.read_csv("https://raw.githubusercontent.com/Coding-with-Adam/Dash-by-Plotly/master/Plotly_Graphs/Heatmaps/Berlin_crimes.csv") 27 | # df = df.groupby(['District'])[ 28 | # ['Graffiti','Robbery', 'Agg_assault', 'Burglary']].median().reset_index() 29 | # data = df[['Graffiti', 'Robbery', 'Agg_assault', 'Burglary']].values.tolist() 30 | # print(data) 31 | # # reshape the list of lists to swap y,x axes in graph 32 | # # data=[list(i) for i in zip(*data)] 33 | # # print(data) 34 | # 35 | # fig = px.imshow(data, 36 | # labels=dict(x="Crime Type", y="District", color="Median Crime"), 37 | # x=['Graffiti', 'Robbery', 'Agg_assault', 'Burglary'], 38 | # y=df['District'], 39 | # color_continuous_scale=px.colors.sequential.Plasma 40 | # ) 41 | # fig.show() 42 | -------------------------------------------------------------------------------- /Plotly_Graphs/Heatmaps/heatmap_churn.py: -------------------------------------------------------------------------------- 1 | import plotly.express as px 2 | import pandas as pd 3 | 4 | df = pd.read_csv("https://raw.githubusercontent.com/Coding-with-Adam/Dash-by-Plotly/master/Plotly_Graphs/Heatmaps/customer_churn.csv") 5 | df = df.groupby(['onboard_month','weeks_subscribed']).size().unstack(fill_value=0) 6 | 7 | df = df.reindex(['January','February','March','April','May','June','July', 8 | 'August','September','October','November','December']) 9 | print(df) 10 | 11 | fig = px.imshow(df,color_continuous_scale=px.colors.sequential.Plasma, 12 | title="Subscription Churn") 13 | fig.update_layout(title_font={'size':27}, title_x=0.5) 14 | fig.update_traces(hovertemplate="Membership bought: %{y}" 15 | "
Weeks subscribed: %{x}" 16 | "
Cancellations: %{z}") 17 | fig.show() -------------------------------------------------------------------------------- /Plotly_Graphs/Heatmaps/heatmap_time.py: -------------------------------------------------------------------------------- 1 | import plotly.express as px 2 | import pandas as pd 3 | 4 | # Data put together by Gabe Salzer on data.world 5 | # Data source: http://www.landofbasketball.com/nba_teams_year_by_year.htm 6 | df = pd.read_csv("https://raw.githubusercontent.com/Coding-with-Adam/Dash-by-Plotly/master/Plotly_Graphs/Heatmaps/Historical%20NBA%20Performance.csv") 7 | df = df.pivot('Team','Year','Winning Percentage') 8 | print(df[:10]) 9 | 10 | df = df[df.index.isin(['Warriors', 'Knicks', 'Celtics', 'Bulls', '76ers'])] 11 | fig = px.imshow(df, color_continuous_scale=px.colors.sequential.YlOrBr, 12 | title="NBA Season Winning Percentage") 13 | fig.update_layout(title_font={'size':27}, title_x=0.5) 14 | fig.update_traces(hoverongaps=False, 15 | hovertemplate="Team: %{y}" 16 | "
Year: %{x}" 17 | "
Winning %: %{z}" 18 | ) 19 | fig.show() 20 | -------------------------------------------------------------------------------- /Plotly_Graphs/Icicle/icicle_chart.py: -------------------------------------------------------------------------------- 1 | import pandas as pd 2 | import plotly.express as px # Plotly version >= 5.0 3 | 4 | # data from: https://data.virginia.gov/Education/Bills-of-Sale-of-Enslaved-Individuals-1718-1862-/j2xt-sjy7 5 | df = pd.read_csv("https://raw.githubusercontent.com/Coding-with-Adam/Dash-by-Plotly/master/Plotly_Graphs/Icicle/Bills_of_Sale_of_Enslaved_Individuals__1718-1862.csv") 6 | print(df.head()[['Period', 'Locality']]) 7 | 8 | fig = px.icicle(df, path=[px.Constant("all"), 'Period', 'Locality'], 9 | values='Slaves') 10 | 11 | # fig = px.icicle(df, path=[px.Constant("all"), 'Period', 'Locality'], 12 | # values='Slaves', color='Locality') 13 | 14 | # fig = px.icicle(df, path=[px.Constant("all"), 'Period', 'Locality', 'Gender'], 15 | # values='Slaves', color='Gender') 16 | 17 | # fig = px.icicle(df, path=[px.Constant("all"), 'Period', 'Locality', 'Enslaver_Buyer'], 18 | # values='Slaves') 19 | 20 | # fig = px.icicle(df, path=[px.Constant("all"), 'Period', 'Locality', 'Enslaver_Buyer'], 21 | # values='Slaves', color='Age') 22 | 23 | # fig = px.icicle(df, path=[px.Constant("all"), 'Period', 'Locality', 'Enslaver_Buyer'], 24 | # values='Slaves', color='Age', color_continuous_scale='RdBu') 25 | 26 | # fig = px.icicle(df, path=[px.Constant("all"), 'Period', 'Locality'], 27 | # values='Slaves', color='Locality') 28 | # fig.update_traces(root_color="lightgrey", tiling=dict(orientation='h', flip='x')) 29 | 30 | # fig = px.icicle(df, path=[px.Constant("all"), 'Period', 'Locality'], 31 | # values='Slaves', color='Locality') 32 | # fig.update_traces(root_color="lightgrey", tiling=dict(orientation='v', flip='y')) 33 | 34 | # fig = px.icicle(df, path=[px.Constant("all"), 'Period', 'Locality'], 35 | # values='Slaves', maxdepth=2) 36 | fig.update_traces(root_color="lightgrey", tiling=dict(orientation='h')) 37 | 38 | fig.show() 39 | -------------------------------------------------------------------------------- /Plotly_Graphs/Pie/pie.py: -------------------------------------------------------------------------------- 1 | import pandas as pd #(version 1.0.0) 2 | import plotly #(version 4.5.4) #pip install plotly==4.5.4 3 | import plotly.express as px 4 | import plotly.io as pio 5 | 6 | #------------------------------------------------------------------------ 7 | # Filter the data 8 | # Data from https://covidtracking.com/api/ 9 | df = pd.read_csv("covid-19-states-daily.csv") 10 | df['dateChecked'] = pd.to_datetime(df['dateChecked']) 11 | df = df[df['dateChecked'].dt.date.astype(str) == '2020-03-17'] 12 | df = df[df['death']>=5] 13 | print (df) 14 | 15 | pie_chart = px.pie( 16 | data_frame=df, 17 | values='death', 18 | names='state', 19 | color='state', #differentiate markers (discrete) by color 20 | color_discrete_sequence=["red","green","blue","orange"], #set marker colors 21 | # color_discrete_map={"WA":"yellow","CA":"red","NY":"black","FL":"brown"}, 22 | hover_name='negative', #values appear in bold in the hover tooltip 23 | # hover_data=['positive'], #values appear as extra data in the hover tooltip 24 | # custom_data=['total'], #values are extra data to be used in Dash callbacks 25 | labels={"state":"the State"}, #map the labels 26 | title='Coronavirus in the USA', #figure title 27 | template='presentation', #'ggplot2', 'seaborn', 'simple_white', 'plotly', 28 | #'plotly_white', 'plotly_dark', 'presentation', 29 | #'xgridoff', 'ygridoff', 'gridon', 'none' 30 | width=800, #figure width in pixels 31 | height=600, #figure height in pixels 32 | hole=0.5, #represents the hole in middle of pie 33 | ) 34 | 35 | # pie_chart.update_traces(textposition='outside', textinfo='percent+label', 36 | # marker=dict(line=dict(color='#000000', width=4)), 37 | # pull=[0, 0, 0.2, 0], opacity=0.7, rotation=180) 38 | 39 | 40 | 41 | pio.show(pie_chart) 42 | -------------------------------------------------------------------------------- /Plotly_Graphs/Plotly_Introduction/plotly_charts.py: -------------------------------------------------------------------------------- 1 | import pandas as pd 2 | import plotly.express as px 3 | dfb = pd.read_csv("bird-window-collision-death.csv") 4 | 5 | df = px.data.tips() 6 | fig = px.pie(dfb, values='Deaths', names='Bldg #', color="Side", hole=0.3) 7 | fig.update_traces(textinfo="label+percent", insidetextfont=dict(color="white")) 8 | fig.update_layout(legend={"itemclick":False}) 9 | fig.show() 10 | 11 | fig.write_image("images/fig1.png") 12 | -------------------------------------------------------------------------------- /Plotly_Graphs/Radar-chart/radar-hotel.py: -------------------------------------------------------------------------------- 1 | import plotly.express as px 2 | import pandas as pd 3 | 4 | # Data src: https://www.kaggle.com/manohar676/hotel-reviews-segmentation-recommended-system 5 | # Credit to: Manohar Reddy 6 | df = pd.read_csv("https://raw.githubusercontent.com/Coding-with-Adam/Dash-by-Plotly/master/Plotly_Graphs/Radar-chart/ExistingHotels_CustomerVisitsdata-1554810038262.csv") 7 | df = df[df['Hotelid'].isin(['hotel_101','hotel_102','hotel_103'])] 8 | print(df.iloc[:20, :8]) 9 | 10 | df = df.groupby('Hotelid')[['Cleanliness_rating', 'Service_rating', 'Value_rating', 11 | 'Rooms_rating','Checkin_rating', 12 | 'Businessservice_rating']].mean().reset_index() 13 | print(df) 14 | 15 | # Convert from wide data to long data to plot radar chart 16 | df = pd.melt(df, id_vars=['Hotelid'], var_name='category', value_name='rating', 17 | value_vars=['Cleanliness_rating', 'Service_rating', 'Value_rating', 18 | 'Rooms_rating','Checkin_rating','Businessservice_rating'], 19 | ) 20 | print(df) 21 | 22 | # radar chart Plotly examples - https://plotly.com/python/radar-chart/ 23 | # radar chart Plotly docs = https://plotly.com/python-api-reference/generated/plotly.express.line_polar.html#plotly.express.line_polar 24 | fig = px.line_polar(df, r='rating', theta='category', color='Hotelid', line_close=True, 25 | line_shape='linear', # or spline 26 | hover_name='Hotelid', 27 | hover_data={'Hotelid':False}, 28 | markers=True, 29 | # labels={'rating':'stars'}, 30 | # text='Hotelid', 31 | # range_r=[0,10], 32 | direction='clockwise', # or counterclockwise 33 | start_angle=45 34 | ) 35 | # fig.update_traces(fill='toself') 36 | fig.show() 37 | -------------------------------------------------------------------------------- /Plotly_Graphs/Radar-chart/radarplot.py: -------------------------------------------------------------------------------- 1 | import plotly.express as px 2 | import pandas as pd 3 | 4 | # Data src: https://llewellynjean.shinyapps.io/NBARefDatabase/ 5 | # Credit to: https://twitter.com/owenlhjphillips 6 | df = pd.read_csv("https://raw.githubusercontent.com/Coding-with-Adam/Dash-by-Plotly/master/Plotly_Graphs/Radar-chart/NBA_Referee_Stats.csv") 7 | df = df[df['Season']=='2016-17'] 8 | df = df[df['Season type']=='Regular Season'] 9 | df = df.iloc[:4, :19] 10 | 11 | # Convert from wide data to long data to plot radar chart 12 | df = pd.melt(df, id_vars=['Referee'], var_name='foul', value_name='stats', 13 | value_vars=['Kicked ball', 'Technical', 'Shooting block'], 14 | ) 15 | print(df) 16 | 17 | # radar chart Plotly examples - https://plotly.com/python/radar-chart/ 18 | # radar chart Plotly docs = https://plotly.com/python-api-reference/generated/plotly.express.line_polar.html#plotly.express.line_polar 19 | fig = px.line_polar(df, r='stats', theta='foul', color='Referee', line_close=True, 20 | hover_name='Referee', 21 | range_r=[5,25] 22 | ) 23 | fig.show() 24 | -------------------------------------------------------------------------------- /Plotly_Graphs/Sunburst/challenge.txt: -------------------------------------------------------------------------------- 1 | -Sunburst with Alabama, Oregon, South Carolina 2 | -Root as “State”, 3 | -Branch as “Unarmed”, 4 | -Leaves as “Victim’s gender” 5 | -Gender color male:pruple, female:greenyellow. Hint: map the colors 6 | -Remove from Hover tooltip: 7 | Gender, labels, id 8 | -------------------------------------------------------------------------------- /Plotly_Graphs/Sunburst/solution_challenge.py: -------------------------------------------------------------------------------- 1 | import plotly.express as px 2 | import pandas as pd 3 | 4 | df = pd.read_csv("MPVDataset.csv") 5 | df = df[df["State"].isin(['AL', 'OR', 'SC'])] 6 | df = df[df["Victim's race"].isin(["White", "Black", "Hispanic", "Asian"])] 7 | 8 | 9 | fig = px.sunburst( 10 | data_frame=df, 11 | path=["State", "Unarmed", "Victim's gender"], 12 | color="Victim's gender", 13 | color_discrete_map={'Male':'purple', 'Female':'greenyellow'}, 14 | # hover_data={"Victim's gender": False, "id":False, "labels":False}, # (Plotly version 4.8.0 or higher) 15 | ) 16 | 17 | fig.update_traces(textinfo='label+percent parent') 18 | fig.update_layout(margin=dict(t=0, l=0, r=0, b=0)) 19 | 20 | fig.show() 21 | -------------------------------------------------------------------------------- /Plotly_Graphs/Sunburst/sunburst.py: -------------------------------------------------------------------------------- 1 | import plotly.express as px 2 | import pandas as pd 3 | import numpy as np 4 | 5 | df = pd.read_csv("MPVDataset.csv") 6 | df["Victim's age"] = pd.to_numeric(df["Victim's age"], errors='coerce').fillna(0).astype(np.int64) 7 | df.rename(columns={'Fleeing (Source: WaPo)': 'Fleeing'}, inplace=True) 8 | 9 | df = df[df["State"].isin(['NY', 'CA', 'TX'])] 10 | df = df[df["Victim's race"].isin(["White", "Black", "Hispanic", "Asian"])] 11 | 12 | 13 | fig = px.sunburst( 14 | data_frame=df, 15 | path=["Unarmed", 'State', "Victim's race"], # Root, branches, leaves 16 | color="Unarmed", 17 | color_discrete_sequence=px.colors.qualitative.Pastel, 18 | # maxdepth=-1, # set the sectors rendered. -1 will render all levels in the hierarchy 19 | # color="Victim's age", 20 | # color_continuous_scale=px.colors.sequential.BuGn, 21 | # range_color=[10,100], 22 | 23 | # branchvalues="total", # or 'remainder' 24 | # hover_name="Unarmed", 25 | # # hover_data={'Unarmed': False}, # remove column name from tooltip (Plotly version >= 4.8.0) 26 | # title="7-year Breakdown of Deaths by Police", 27 | # template='ggplot2', # 'ggplot2', 'seaborn', 'simple_white', 'plotly', 28 | # # 'plotly_white', 'plotly_dark', 'presentation', 29 | # # 'xgridoff', 'ygridoff', 'gridon', 'none' 30 | ) 31 | 32 | fig.update_traces(textinfo='label+percent entry') 33 | fig.update_layout(margin=dict(t=0, l=0, r=0, b=0)) 34 | 35 | fig.show() 36 | -------------------------------------------------------------------------------- /Plotly_Graphs/ViolinBox/challenge_solution.py: -------------------------------------------------------------------------------- 1 | # Solution to Violin Challenge 2 | 3 | import pandas as pd 4 | import plotly 5 | import plotly.express as px 6 | import plotly.io as pio 7 | 8 | #-------------------------------------------------------------------------------- 9 | # Import and filter data 10 | df = pd.read_csv("bees.csv") 11 | df['Value'] = pd.to_numeric(df['Value']) 12 | mapping = {'HONEY, BEE COLONIES, AFFECTED BY DISEASE - INVENTORY, MEASURED IN PCT OF COLONIES':'Disease', 13 | 'HONEY, BEE COLONIES, AFFECTED BY OTHER CAUSES - INVENTORY, MEASURED IN PCT OF COLONIES':'Other', 14 | 'HONEY, BEE COLONIES, AFFECTED BY PESTICIDES - INVENTORY, MEASURED IN PCT OF COLONIES':'Pesticides', 15 | 'HONEY, BEE COLONIES, AFFECTED BY PESTS ((EXCL VARROA MITES)) - INVENTORY, MEASURED IN PCT OF COLONIES':'Pests_excl_Varroa', 16 | 'HONEY, BEE COLONIES, AFFECTED BY UNKNOWN CAUSES - INVENTORY, MEASURED IN PCT OF COLONIES':'Unknown', 17 | 'HONEY, BEE COLONIES, AFFECTED BY VARROA MITES - INVENTORY, MEASURED IN PCT OF COLONIES':'Varroa_mites'} 18 | df['Data Item'] = df['Data Item'].map(mapping) 19 | df.rename(columns={'Data Item':'Affected by', 'Value':'Percent of Colonies Impacted'}, inplace=True) 20 | df = df[df['Affected by']=='Disease'] 21 | print(df[:10][['Year','Period','State','Affected by','Percent of Colonies Impacted']]) 22 | 23 | #-------------------------------------------------------------------------------- 24 | # Build the violin/box plot 25 | 26 | violinfig = px.violin( 27 | data_frame=df.query("State == ['{}','{}']".format('TEXAS','IDAHO')), 28 | x="Affected by", 29 | y="Percent of Colonies Impacted", 30 | orientation="v", 31 | points='all', 32 | box=True, 33 | color='State', 34 | color_discrete_map={"TEXAS": "limegreen" ,"IDAHO":"red"}, 35 | hover_data=['Period'], 36 | 37 | 38 | labels={"State":"STATE"}, 39 | title='What is killing our Bees', 40 | width=1400, 41 | height=600, 42 | template='plotly_dark', 43 | ) 44 | 45 | violinfig.update_traces(meanline_visible=True, meanline_color='blue') 46 | 47 | pio.show(violinfig) 48 | -------------------------------------------------------------------------------- /Plotly_Graphs/ViolinBox/violin_challenge.txt: -------------------------------------------------------------------------------- 1 | Build plot that compares impact 2 | of Disease on IDAHO and TEXAS, 3 | with boxplot and a blue meanline. 4 | 5 | Use colors limegree and red for 6 | each state. 7 | 8 | Add all point & "Period" to hover_data 9 | 10 | Tip: to add meanline to box plot, click on Violin, under Distributions section, in this documentation: 11 | https://plotly.com/python-api-reference/plotly.graph_objects.html# 12 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # If you Forked it, Support it 2 | A growing number of viewers are looking for high quality, professional content on Dash, which is hard to find. I am trying to fill that gap and help you grow in the area of analytic web apps in Python. 3 | 4 | My goal is to make this a sustainable project for myself and my viewers. This repository and my Charming Data channel is a 100% member-supported educational channel. Your support would mean a lot to me 🙏 5 | - [Github support](https://github.com/sponsors/Coding-with-Adam) 6 | - [Patreon support](https://www.patreon.com/charmingdata) 7 | 8 | ## Dash-by-Plotly 9 | This Repository is dedicated to teaching Dash and Plotly to anyone that is interested. 10 | Dash is a powerful platform that can benefit anyone that works with data: analytical consultants, data analysts, professors, 11 | business owners, financial analysts, or those that work in marketing, social media, the medical field... If you work with data, Dash Plotly is a great tool to have. 12 | 13 | - [User Guide](https://dash-docs.herokuapp.com/introduction) 14 | 15 | ## Installation 16 | I recommend installing pandas, since you will most likely use it. 17 | 18 | $ pip install pandas 19 | 20 | Then, just install Dash. Plotly comes with Dash 21 | 22 | $ pip install dash 23 | 24 | If you'd like to control the version of Plotly installed, you can do for example: 25 | 26 | $ pip install plotly==5.7.0 27 | 28 | ## To Get Help 29 | - [Plotly Community Forum](https://community.plotly.com/) 30 | 31 | This is a wonderful community of people dedicated to supporting others learning Dash. You can find me there as well under the name CharmingData. 32 | 33 | ## Execute Code in Browser 34 | If you prefer to run the code of this repository directly online instead of on your computer, paste my Workspace link into your browser and follow the gif below. 35 | 36 | > [Workspace Snapshot](https://gitpod.io#snapshot/1ff675a6-2270-405c-ade8-285cc3a049e8) 37 | 38 | ![gitpod-demo](https://user-images.githubusercontent.com/32049495/167286451-f53e5e40-b5eb-4fc6-ad53-f7ca0e660942.gif) 39 | 40 | -------------------------------------------------------------------------------- /Supporters/add-image/image_to_graph.py: -------------------------------------------------------------------------------- 1 | import dash 2 | import dash_bootstrap_components as dbc 3 | import dash_html_components as html 4 | import dash_core_components as dcc 5 | import plotly.express as px 6 | import pandas as pd 7 | 8 | # data source: https://www.kaggle.com/chubak/iranian-students-from-1968-to-2017 9 | # data owner: Chubak Bidpaa 10 | df = pd.read_csv('https://raw.githubusercontent.com/Coding-with-Adam/Dash-by-Plotly/master/Bootstrap/Side-Bar/iranian_students.csv') 11 | 12 | app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP]) 13 | 14 | app.layout = html.Div([ 15 | html.H1('Kindergarten in Iran', 16 | style={'textAlign': 'center'}), 17 | 18 | dcc.Graph(id='bargraph', 19 | figure=px.bar(df, barmode='group', x='Years', 20 | y=['Girls Kindergarten', 21 | 'Boys Kindergarten'] 22 | ).add_layout_image( 23 | dict( 24 | source="https://raw.githubusercontent.com/Coding-with-Adam/Dash-by-Plotly/master/dash-plotly-logo.png", 25 | # source="assets/dash-plotly-logo.png", 26 | xref="paper", 27 | yref="paper", 28 | x=0, 29 | y=1, 30 | sizex=1, 31 | sizey=1, 32 | sizing="stretch", 33 | opacity=0.5, 34 | layer="below" 35 | ) 36 | ).update_layout( 37 | template="plotly_white") 38 | ) 39 | ]) 40 | 41 | 42 | if __name__=='__main__': 43 | app.run_server(debug=True, port=3000) 44 | -------------------------------------------------------------------------------- /dash-plotly-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Coding-with-Adam/Dash-by-Plotly/f53325eb47d610b960b8d97fd48bec2520cf18c1/dash-plotly-logo.png -------------------------------------------------------------------------------- /z-share-doc.md: -------------------------------------------------------------------------------- 1 | [Google doc for live sharing](https://docs.google.com/document/d/1ADeh5z7uY5sIjJ_LDbnFRm7BxKelP2amJj0SXUsNgS4/edit?usp=sharing) 2 | --------------------------------------------------------------------------------