title
Introduction to Dash Plotly - Data Visualization in Python

description
An introduction to the Dash web application framework. Dash is used to create browser-based interactive data visualization interfaces with Python. My goal is for you to understand how to use Dash. 👉 A newer version of this video can be found here - https://youtu.be/7m0Bq1EGPPg The Code: https://github.com/Coding-with-Adam/Dash-by-Plotly/blob/master/Other/Dash_Introduction/intro.py View my book - The Book of Dash: https://www.amazon.com/Python-Dash-Analysis-Visualization-Plotly/dp/1718502222 https://github.com/DashBookProject/Plotly-Dash The Data: https://drive.google.com/file/d/19xeIpigGi9ti51_GfJuRCb9GKv4nR0dB/view?usp=sharing Dash App Gallery: https://dash-gallery.plotly.host/Portal/ Dash Components: https://dash.plotly.com/dash-core-components Plotly Graphs: https://plotly.com/python/ The Callback: https://dash.plotly.com/basic-callbacks Plotly Express: https://plotly.com/python-api-reference/plotly.express.html Dash Plotly Community Forum: https://community.plotly.com/c/dash/16 Video Layout: 00:00 - Introduction to Dash 01:57 - 3 pillars of Dash 05:17 - the Data 06:35 - the Code 08:38 - App Layout section 13:31 - the Callback 26:18 - Tutorial Challenge 28:35 - Plotly-Dash Community Forum

detail
{'title': 'Introduction to Dash Plotly - Data Visualization in Python', 'heatmap': [{'end': 528.57, 'start': 504.572, 'weight': 0.725}, {'end': 779.69, 'start': 738.363, 'weight': 0.837}, {'end': 829.643, 'start': 808.572, 'weight': 0.726}], 'summary': 'Provides an introduction to dash plotly for data visualization in python, covering the theory and pillars of dash, connecting components and input/output, creating choropleth maps using plotly express, and using plotly express and graph objects to build web application dashboards with python.', 'chapters': [{'end': 661.428, 'segs': [{'end': 49.691, 'src': 'embed', 'start': 23.57, 'weight': 1, 'content': [{'end': 34.16, 'text': 'The goal of this tutorial is to show you how Dash is used to create all kinds of analytic web applications, anywhere from financial to web-based,', 'start': 23.57, 'duration': 10.59}, {'end': 37.923, 'text': 'to machine learning, to medical and manufacturing dashboards.', 'start': 34.16, 'duration': 3.763}, {'end': 41.806, 'text': 'Everything can be done right with Python.', 'start': 38.123, 'duration': 3.683}, {'end': 43.487, 'text': "You don't need to know CSS.", 'start': 42.226, 'duration': 1.261}, {'end': 47.89, 'text': "You don't need to know JavaScript or HTML, all in Python using Dash.", 'start': 43.507, 'duration': 4.383}, {'end': 49.691, 'text': 'So here are a few examples.', 'start': 48.391, 'duration': 1.3}], 'summary': 'Dash enables creation of diverse analytic web apps, from finance to ml, without css/js/html, all in python.', 'duration': 26.121, 'max_score': 23.57, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hSPmj7mK6ng/pics/hSPmj7mK6ng23570.jpg'}, {'end': 130.176, 'src': 'embed', 'start': 105.692, 'weight': 0, 'content': [{'end': 116.526, 'text': "What we're going to do next is I'm going to teach you the theory behind Dash and the most important three pillars of Dash that will allow you to understand how to build these kind of applications on your own.", 'start': 105.692, 'duration': 10.834}, {'end': 119.028, 'text': 'So, the three pillars.', 'start': 117.627, 'duration': 1.401}, {'end': 121.95, 'text': 'Dash components.', 'start': 121.13, 'duration': 0.82}, {'end': 130.176, 'text': 'Dash components are anything from the slider, the checkbox, the date picker, the dropdown.', 'start': 122.651, 'duration': 7.525}], 'summary': 'Teaching the theory and three pillars of dash for building applications.', 'duration': 24.484, 'max_score': 105.692, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hSPmj7mK6ng/pics/hSPmj7mK6ng105692.jpg'}, {'end': 208.739, 'src': 'embed', 'start': 174.865, 'weight': 2, 'content': [{'end': 175.826, 'text': 'I have a video on that.', 'start': 174.865, 'duration': 0.961}, {'end': 179.227, 'text': "We're going to have to use a DCC graph to put the graph in there.", 'start': 176.046, 'duration': 3.181}, {'end': 187.371, 'text': "Um, the, the radio items, the slider, there's many different components that we're going to review over time.", 'start': 180.008, 'duration': 7.363}, {'end': 190.373, 'text': 'Second, plotly graphs.', 'start': 188.912, 'duration': 1.461}, {'end': 199.613, 'text': 'So polygraphs are graphs, charts, and other types of data visualization plots that allow the user to visualize data.', 'start': 190.713, 'duration': 8.9}, {'end': 208.739, 'text': 'So they range anywhere from the map box, the scatter plot, the line chart, the bar chart.', 'start': 199.913, 'duration': 8.826}], 'summary': 'Discussing dcc graph and plotly graphs for data visualization.', 'duration': 33.874, 'max_score': 174.865, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hSPmj7mK6ng/pics/hSPmj7mK6ng174865.jpg'}, {'end': 331.423, 'src': 'embed', 'start': 305.206, 'weight': 3, 'content': [{'end': 310.23, 'text': "you'll be able to create any type of web application dashboard that you want, from the simplest one.", 'start': 305.206, 'duration': 5.024}, {'end': 314.098, 'text': 'with practice, you can also create all the way up to the most complex ones.', 'start': 310.737, 'duration': 3.361}, {'end': 317.319, 'text': "So let's dive right into the code and see how we do this.", 'start': 314.718, 'duration': 2.601}, {'end': 323.421, 'text': "So the data I'm going to use is going to be data on bees.", 'start': 318.579, 'duration': 4.842}, {'end': 325.661, 'text': 'I want to raise awareness on bees.', 'start': 323.821, 'duration': 1.84}, {'end': 327.562, 'text': 'I think bees are very important.', 'start': 326.321, 'duration': 1.241}, {'end': 328.782, 'text': 'I know bees are very important.', 'start': 327.602, 'duration': 1.18}, {'end': 331.423, 'text': "And sadly, they're dying in the millions.", 'start': 329.102, 'duration': 2.321}], 'summary': 'Learn to create diverse web dashboards, from simple to complex, using bee data to raise awareness.', 'duration': 26.217, 'max_score': 305.206, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hSPmj7mK6ng/pics/hSPmj7mK6ng305206.jpg'}, {'end': 528.57, 'src': 'heatmap', 'start': 504.572, 'weight': 0.725, 'content': [{'end': 511.556, 'text': "they're affected by disease, the state code and the percent of colon is impacted for that year, that disease in Alabama.", 'start': 504.572, 'duration': 6.984}, {'end': 515.607, 'text': 'Play around with the data and print it out in different ways if you want.', 'start': 512.947, 'duration': 2.66}, {'end': 517.488, 'text': 'So this is a section of the data.', 'start': 515.948, 'duration': 1.54}, {'end': 523.129, 'text': 'The next section, which is probably one of the most important sections in your code, is the app layout.', 'start': 518.028, 'duration': 5.101}, {'end': 528.57, 'text': 'App layout starts from here, right, all the way here, and it closes here.', 'start': 523.609, 'duration': 4.961}], 'summary': 'Data shows disease impact on colon percent in alabama.', 'duration': 23.998, 'max_score': 504.572, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hSPmj7mK6ng/pics/hSPmj7mK6ng504572.jpg'}], 'start': 0.779, 'title': 'Dash framework and interactive data visualization', 'summary': 'Introduces dash, a python library for building interactive web application dashboards, with examples of financial, machine learning, and medical web applications, focusing on teaching the theory and three pillars of dash: dash components, dash core components, and dash html components. it also covers the use of dcc graph, plotly graphs, and callbacks to create an interactive web application dashboard, emphasizing the importance of understanding how to connect components and graphs to create any type of web application dashboard.', 'chapters': [{'end': 174.545, 'start': 0.779, 'title': 'Introduction to dash framework', 'summary': 'Introduces dash, a python library for building interactive web application dashboards, with examples of financial, machine learning, and medical web applications, and focuses on teaching the theory and three pillars of dash: dash components, dash core components, and dash html components.', 'duration': 173.766, 'highlights': ['Dash is a wonderful library framework all in Python that allows you to build interactive web application dashboards. Highlights the key feature of Dash as a Python library for building interactive web application dashboards.', 'The goal of this tutorial is to show you how Dash is used to create all kinds of analytic web applications, anywhere from financial to web-based, to machine learning, to medical and manufacturing dashboards. Emphasizes the goal of the tutorial to demonstrate the versatility of Dash in creating various analytic web applications.', 'Examples of web application dashboards that Dash allows you to build include map-based applications, financial web applications, machine learning object identification, and medical applications. Provides specific examples of the types of web application dashboards that can be built using Dash.', 'The chapter introduces the theory behind Dash and the three pillars of Dash: Dash components, Dash core components, and Dash HTML components, which are essential for building interactive data visualization dashboards. Outlines the focus of the chapter on teaching the theory and three essential pillars of Dash for building interactive data visualization dashboards.']}, {'end': 661.428, 'start': 174.865, 'title': 'Interactive data visualization with plotly', 'summary': 'Covers the use of dcc graph, plotly graphs, and callbacks to create an interactive web application dashboard, emphasizing the importance of understanding how to connect components and graphs to create any type of web application dashboard.', 'duration': 486.563, 'highlights': ['The importance of understanding how to connect components and graphs to create any type of web application dashboard. Emphasizes the importance of understanding how to connect components and graphs to create any type of web application dashboard.', 'The use of DCC graph and Plotly graphs to create interactive data visualization plots. Discusses the use of DCC graph and Plotly graphs to create interactive data visualization plots.', 'The significance of callbacks in connecting Dash components and Plotly graphs to create interactive capabilities. Highlights the significance of callbacks in connecting Dash components and Plotly graphs to create interactive capabilities.', 'The emphasis on raising awareness about the declining bee population using data visualization. Emphasizes the importance of raising awareness about the declining bee population using data visualization.', 'The demonstration of importing and cleaning data, specifically using a CSV file and Pandas data frame. Demonstrates importing and cleaning data, specifically using a CSV file and Pandas data frame.']}], 'duration': 660.649, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hSPmj7mK6ng/pics/hSPmj7mK6ng779.jpg', 'highlights': ['The chapter introduces the theory behind Dash and the three pillars of Dash: Dash components, Dash core components, and Dash HTML components, which are essential for building interactive data visualization dashboards.', 'The goal of this tutorial is to show you how Dash is used to create all kinds of analytic web applications, anywhere from financial to web-based, to machine learning, to medical and manufacturing dashboards.', 'The use of DCC graph and Plotly graphs to create interactive data visualization plots.', 'The importance of understanding how to connect components and graphs to create any type of web application dashboard.', 'Examples of web application dashboards that Dash allows you to build include map-based applications, financial web applications, machine learning object identification, and medical applications.']}, {'end': 1164.814, 'segs': [{'end': 800.93, 'src': 'heatmap', 'start': 738.363, 'weight': 1, 'content': [{'end': 742.125, 'text': 'uh, on your data frame, on your pandas data frame.', 'start': 738.363, 'duration': 3.762}, {'end': 749.389, 'text': 'okay, so we have the options of the drop down and we have an empty space here and we have an empty graph.', 'start': 742.125, 'duration': 7.264}, {'end': 759.914, 'text': "so if i just run this and i hashtag all these out because i don't want to see this, and i just run this here, let's see what we get.", 'start': 749.389, 'duration': 10.525}, {'end': 763.697, 'text': 'Remember, I only have the app layout, nothing else.', 'start': 761.175, 'duration': 2.522}, {'end': 767.9, 'text': 'What we get is this.', 'start': 764.157, 'duration': 3.743}, {'end': 779.69, 'text': "We get just an empty graph because there's nothing in there, just a dropdown with the options.", 'start': 775.266, 'duration': 4.424}, {'end': 784.234, 'text': "But if I click on the options, it doesn't change anything because there are just empty options.", 'start': 779.75, 'duration': 4.484}, {'end': 795.428, 'text': 'In order to create a full dashboard, we actually need to connect the Dash components with the graph that are inside the app layout here.', 'start': 785.014, 'duration': 10.414}, {'end': 800.93, 'text': "So we have to connect all these together and we're going to do that by using the callback.", 'start': 795.908, 'duration': 5.022}], 'summary': 'Connecting dash components with graph using callback for full dashboard.', 'duration': 62.567, 'max_score': 738.363, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hSPmj7mK6ng/pics/hSPmj7mK6ng738363.jpg'}, {'end': 847.571, 'src': 'heatmap', 'start': 808.572, 'weight': 0, 'content': [{'end': 810.313, 'text': 'Okay, so the callback.', 'start': 808.572, 'duration': 1.741}, {'end': 816.614, 'text': 'The callback is going to use the IDs and the component property.', 'start': 812.073, 'duration': 4.541}, {'end': 821.799, 'text': 'The component ID and the property in order to connect the two or three things.', 'start': 816.814, 'duration': 4.985}, {'end': 826.741, 'text': "The first thing you're going to do is you're going to put, you're going to have, a callback has an output and has an input.", 'start': 822.339, 'duration': 4.402}, {'end': 829.643, 'text': 'In this case, we have multiple outputs.', 'start': 827.762, 'duration': 1.881}, {'end': 836.586, 'text': "We have two outputs because I'm going to output information into my B app and into my output container.", 'start': 829.663, 'duration': 6.923}, {'end': 842.168, 'text': 'My B app is the component ID that belongs to graph, as you can see here.', 'start': 836.926, 'duration': 5.242}, {'end': 847.571, 'text': 'And my output container is a component ID that belongs to this div.', 'start': 843.709, 'duration': 3.862}], 'summary': 'The callback uses component ids and properties to connect outputs to two components, with two outputs for information transfer.', 'duration': 38.999, 'max_score': 808.572, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hSPmj7mK6ng/pics/hSPmj7mK6ng808572.jpg'}, {'end': 1042.785, 'src': 'embed', 'start': 1013.058, 'weight': 2, 'content': [{'end': 1014.639, 'text': 'You can really change anything you want.', 'start': 1013.058, 'duration': 1.581}, {'end': 1016, 'text': "That's what's so cool about Dash.", 'start': 1014.719, 'duration': 1.281}, {'end': 1023.304, 'text': "In this case, we're just going to take the value to input information into the graph and into the div.", 'start': 1016.88, 'duration': 6.424}, {'end': 1027.742, 'text': "Okay So we're taking the option that's chosen by the dropdown.", 'start': 1024.602, 'duration': 3.14}, {'end': 1029.403, 'text': "I'm going to print them out here.", 'start': 1028.002, 'duration': 1.401}, {'end': 1036.884, 'text': 'Just good practice because I want to see what, what it prints out, what type of value that is and what the value looks like in case I forget.', 'start': 1029.782, 'duration': 7.102}, {'end': 1038.324, 'text': 'And I have million different values.', 'start': 1036.964, 'duration': 1.36}, {'end': 1042.785, 'text': "And then I'm going to say a container, create an object.", 'start': 1039.744, 'duration': 3.041}], 'summary': 'Using dash to input information into graphs and divs, and creating objects for a million different values.', 'duration': 29.727, 'max_score': 1013.058, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hSPmj7mK6ng/pics/hSPmj7mK6ng1013058.jpg'}, {'end': 1167.815, 'src': 'embed', 'start': 1141.667, 'weight': 4, 'content': [{'end': 1146.669, 'text': "The second I'm returning the fig, which refers to the figure here.", 'start': 1141.667, 'duration': 5.002}, {'end': 1147.569, 'text': 'All right.', 'start': 1146.689, 'duration': 0.88}, {'end': 1150.09, 'text': "So remember, two outputs, you're returning two things.", 'start': 1147.689, 'duration': 2.401}, {'end': 1152.07, 'text': "Three outputs, you're returning three things.", 'start': 1150.41, 'duration': 1.66}, {'end': 1157.392, 'text': 'And the argument of the function always refers to the input.', 'start': 1153.891, 'duration': 3.501}, {'end': 1158.692, 'text': 'All right.', 'start': 1158.452, 'duration': 0.24}, {'end': 1162.533, 'text': 'Okay So we saw how we returned the container.', 'start': 1159.733, 'duration': 2.8}, {'end': 1164.194, 'text': 'Now we want to return a figure.', 'start': 1162.853, 'duration': 1.341}, {'end': 1164.814, 'text': 'All right.', 'start': 1164.214, 'duration': 0.6}, {'end': 1167.815, 'text': "So let's go ahead and build a figure so we can return the choropleth map.", 'start': 1164.834, 'duration': 2.981}], 'summary': "Explaining the function's outputs and returning a choropleth map", 'duration': 26.148, 'max_score': 1141.667, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hSPmj7mK6ng/pics/hSPmj7mK6ng1141667.jpg'}], 'start': 662.808, 'title': 'Connecting dash components and input/output', 'summary': 'Covers connecting a dcc dropdown to a pandas data frame, using a callback to update a graph based on selected year, and demonstrates the use of dropdown input to dynamically update a graph and a div in a dash app. it emphasizes understanding the relationship between input, output, and function arguments.', 'chapters': [{'end': 963.734, 'start': 662.808, 'title': 'Connecting dash components with callbacks', 'summary': 'Explains how to connect a dcc dropdown to a pandas data frame, use a callback to update a graph based on the selected year from the dropdown, and output information into specified components.', 'duration': 300.926, 'highlights': ['The DCC dropdown requires an ID, options for the user to see, and other parameters, with the value for the key label being what the user sees, and for the key value being 2015 and 16 in integer mode, sourced from a Pandas data frame.', "To create a full dashboard, it's necessary to connect Dash components with the graph inside the app layout using a callback, which utilizes the IDs and component properties to output information into specified components, with the output container being the children of a specified div and the figure of a specified component ID.", 'The callback has an output and input, with multiple outputs possible, and uses a function definition to connect each argument to an input, with the selected year from the dropdown being used to filter data and output a figure and information into the output container.']}, {'end': 1164.814, 'start': 964.054, 'title': 'Dash input and output', 'summary': 'Explains how to use dropdown input to dynamically update a graph and a div in a dash app, demonstrating the process of taking user input, formatting it, and displaying it, while emphasizing the importance of understanding the relationship between input, output, and function arguments.', 'duration': 200.76, 'highlights': ['Emphasizes the importance of understanding the relationship between input, output, and function arguments The chapter stresses the significance of comprehending the connection between input, output, and function arguments, illustrating how the function argument refers to the input and how the returned values correspond to the output, with an example of returning two objects as outputs.', "Demonstrates the process of taking user input, formatting it, and displaying it The chapter demonstrates the process of taking user input from a dropdown, formatting it into a string that reflects the user's choice, and then displaying this formatted information in a container, highlighting the dynamic updating of the graph and div based on user input.", 'Explains how to use dropdown input to dynamically update a graph and a div in a Dash app The chapter explains the utilization of dropdown input to dynamically update a graph and a div in a Dash app, providing insights into how the selected option from the dropdown is used to input information into the graph and the div, showcasing the practical application of user input for real-time updates.']}], 'duration': 502.006, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hSPmj7mK6ng/pics/hSPmj7mK6ng662808.jpg', 'highlights': ['The callback has an output and input, with multiple outputs possible, and uses a function definition to connect each argument to an input, with the selected year from the dropdown being used to filter data and output a figure and information into the output container.', "To create a full dashboard, it's necessary to connect Dash components with the graph inside the app layout using a callback, which utilizes the IDs and component properties to output information into specified components, with the output container being the children of a specified div and the figure of a specified component ID.", "Demonstrates the process of taking user input, formatting it, and displaying it The chapter demonstrates the process of taking user input from a dropdown, formatting it into a string that reflects the user's choice, and then displaying this formatted information in a container, highlighting the dynamic updating of the graph and div based on user input.", 'Explains how to use dropdown input to dynamically update a graph and a div in a Dash app The chapter explains the utilization of dropdown input to dynamically update a graph and a div in a Dash app, providing insights into how the selected option from the dropdown is used to input information into the graph and the div, showcasing the practical application of user input for real-time updates.', 'Emphasizes the importance of understanding the relationship between input, output, and function arguments The chapter stresses the significance of comprehending the connection between input, output, and function arguments, illustrating how the function argument refers to the input and how the returned values correspond to the output, with an example of returning two objects as outputs.']}, {'end': 1400.469, 'segs': [{'end': 1256.239, 'src': 'embed', 'start': 1164.834, 'weight': 1, 'content': [{'end': 1167.815, 'text': "So let's go ahead and build a figure so we can return the choropleth map.", 'start': 1164.834, 'duration': 2.981}, {'end': 1173.28, 'text': 'So the first thing you want to do is make a copy of your data frame.', 'start': 1169.338, 'duration': 3.942}, {'end': 1176.861, 'text': 'The data frame that you filtered all above the app layout.', 'start': 1173.3, 'duration': 3.561}, {'end': 1180.183, 'text': "you want to make a copy of it because you don't want to play around with it inside the function.", 'start': 1176.861, 'duration': 3.322}, {'end': 1182.844, 'text': 'Only play around with a copy of the data frame.', 'start': 1180.683, 'duration': 2.161}, {'end': 1185.545, 'text': 'And the copy is going to be DFF.', 'start': 1184.265, 'duration': 1.28}, {'end': 1194.129, 'text': "And I'm going to say that the option that the user selected, 2016 or 17, that's going to filter our data frame rows.", 'start': 1185.645, 'duration': 8.484}, {'end': 1198.751, 'text': "So I'm only going to take rows with the year that the user selected.", 'start': 1194.289, 'duration': 4.462}, {'end': 1204.028, 'text': "let's say 2016, so now the data frame is only going to have rows of 2016 in it.", 'start': 1199.124, 'duration': 4.904}, {'end': 1213.577, 'text': "By default, remember, this is 2015, right? If the user doesn't choose anything, this is 2015 because here it says value 2015.", 'start': 1206.05, 'duration': 7.527}, {'end': 1218.837, 'text': "So we're going to choose those rows for 2015.", 'start': 1213.577, 'duration': 5.26}, {'end': 1225.121, 'text': "And then I'm going to say, no matter what the user chooses, I only want rows where bees are affected by varroa mites.", 'start': 1218.837, 'duration': 6.284}, {'end': 1227.062, 'text': "It's a type of a disease, it's a type of mite.", 'start': 1225.301, 'duration': 1.761}, {'end': 1228.302, 'text': 'I only want those rows.', 'start': 1227.342, 'duration': 0.96}, {'end': 1229.583, 'text': "I don't want the other diseases.", 'start': 1228.402, 'duration': 1.181}, {'end': 1238.188, 'text': "So now I have my filter data frame and now I'm ready to use Plotly Express to build a coropleth map.", 'start': 1230.384, 'duration': 7.804}, {'end': 1248.233, 'text': 'All these parameters for Plotly Express inside the coropleth map, you can see in the documentation here, also below the video, Corp with Map.', 'start': 1239.389, 'duration': 8.844}, {'end': 1249.534, 'text': "Actually, let's go one back.", 'start': 1248.313, 'duration': 1.221}, {'end': 1250.955, 'text': 'Go here to Plotly Express.', 'start': 1249.714, 'duration': 1.241}, {'end': 1253.016, 'text': "I'm going to share this link in the video.", 'start': 1250.995, 'duration': 2.021}, {'end': 1256.239, 'text': 'And these are all the different graphs that you can create with Plotly Express.', 'start': 1253.677, 'duration': 2.562}], 'summary': 'Build a choropleth map using filtered data frame for 2016 or 2017, focusing on bees affected by varroa mites.', 'duration': 91.405, 'max_score': 1164.834, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hSPmj7mK6ng/pics/hSPmj7mK6ng1164834.jpg'}, {'end': 1400.469, 'src': 'embed', 'start': 1316.759, 'weight': 0, 'content': [{'end': 1324.025, 'text': 'So remember on the Pandas data frame from the Excel sheet, it has AL for Alabama, AS I think for Alaska.', 'start': 1316.759, 'duration': 7.266}, {'end': 1328.689, 'text': "So that's how it knows how to put the information in there.", 'start': 1324.245, 'duration': 4.444}, {'end': 1339.285, 'text': 'Um, and and once you do this, once you finish with this, now we have you actually have everything inside the figure, and because the figure is ready,', 'start': 1330.582, 'duration': 8.703}, {'end': 1341.345, 'text': 'then you just have to output it right?', 'start': 1339.285, 'duration': 2.06}, {'end': 1343.706, 'text': 'Remember, this is the second output.', 'start': 1342.146, 'duration': 1.56}, {'end': 1353.189, 'text': 'This is a second return object because the out this, uh, the figure was the second output, right? Um, a tip.', 'start': 1343.746, 'duration': 9.443}, {'end': 1355.67, 'text': 'If you only have one output, take out the list.', 'start': 1353.569, 'duration': 2.101}, {'end': 1356.99, 'text': "Don't don't use the brackets.", 'start': 1355.77, 'duration': 1.22}, {'end': 1359.371, 'text': 'If you only have one output, do not use brackets.', 'start': 1357.05, 'duration': 2.321}, {'end': 1362.735, 'text': 'But here we have two, so we need to use the list.', 'start': 1360.734, 'duration': 2.001}, {'end': 1364.656, 'text': 'All right.', 'start': 1364.336, 'duration': 0.32}, {'end': 1365.797, 'text': "So let's see how this looks.", 'start': 1364.716, 'duration': 1.081}, {'end': 1367.718, 'text': 'So now we have a year.', 'start': 1366.657, 'duration': 1.061}, {'end': 1369.819, 'text': 'We choose a year, 2017.', 'start': 1367.758, 'duration': 2.061}, {'end': 1375.602, 'text': "And the color of the graph changes because I'm returning a new figure based on new year, 2018.", 'start': 1369.819, 'duration': 5.783}, {'end': 1377.523, 'text': 'And you can see a new figure.', 'start': 1375.602, 'duration': 1.921}, {'end': 1382.165, 'text': 'I think there was something I wanted to tell you here about this.', 'start': 1379.824, 'duration': 2.341}, {'end': 1386.488, 'text': "Oh, by default, if you load it, you'll see that it's 2015.", 'start': 1383.786, 'duration': 2.702}, {'end': 1386.708, 'text': 'All right.', 'start': 1386.488, 'duration': 0.22}, {'end': 1393.185, 'text': 'Hawaii is really suffering from varroa mites.', 'start': 1390.464, 'duration': 2.721}, {'end': 1400.469, 'text': "There's 52% of bee colonies that died from varroa mites in 2015.", 'start': 1393.586, 'duration': 6.883}], 'summary': 'The transcript discusses creating and outputting a figure based on data from a pandas data frame, with a focus on bee colony deaths from varroa mites in hawaii in 2015.', 'duration': 83.71, 'max_score': 1316.759, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hSPmj7mK6ng/pics/hSPmj7mK6ng1316759.jpg'}], 'start': 1164.834, 'title': 'Creating choropleth maps and using plotly express', 'summary': 'Discusses creating choropleth maps with plotly express, filtering data based on user selection, emphasizing the importance of understanding parameters, and manipulating pandas data frames to visualize data, with a notable example of 52% bee colony loss in hawaii in 2015.', 'chapters': [{'end': 1238.188, 'start': 1164.834, 'title': 'Building choropleth map with plotly express', 'summary': 'Discusses creating a choropleth map using plotly express, including making a copy of the data frame, filtering rows based on user selection, and using plotly express to visualize the filtered data.', 'duration': 73.354, 'highlights': ['Making a copy of the data frame to avoid modifying the original inside the function, which helps maintain data integrity and avoid unintended changes.', 'Filtering rows based on the user-selected year, such as 2016, to ensure the data frame only contains rows from the specified year.', 'Applying additional filtering to only include rows where bees are affected by varroa mites, excluding other diseases to focus on specific data for visualization.']}, {'end': 1316.739, 'start': 1239.389, 'title': 'Plotly express parameters and coropleth map', 'summary': 'Covers the usage of parameters for plotly express in creating a coropleth map, emphasizing the importance of understanding the parameters for different graphs and demonstrating the use of specific parameters for creating the coropleth map with plotly express.', 'duration': 77.35, 'highlights': ['The chapter emphasizes the importance of understanding the parameters for different graphs and demonstrates the use of specific parameters for creating the coropleth map with Plotly Express.', 'The video shares the link to Plotly Express and highlights the usage of parameters for creating different graphs with Plotly Express.', 'The presenter mentions the importance of knowing the parameters used for each graph and explains the specific parameters used for creating the coropleth map with Plotly Express.']}, {'end': 1400.469, 'start': 1316.759, 'title': 'Pandas data frame and figure output', 'summary': 'Covers how to use pandas data frame to create a figure output, including manipulating the data and changing the graph based on different years, with a notable example of 52% bee colony loss in hawaii due to varroa mites in 2015.', 'duration': 83.71, 'highlights': ['The figure output is the second return object, and if there is only one output, brackets should be avoided (as explained in the tip).', 'Hawaii experienced a significant 52% bee colony loss due to varroa mites in 2015, highlighting a critical issue in the region.', "The Pandas data frame is utilized for organizing information from an Excel sheet, associating state abbreviations with data, such as 'AL for Alabama' and 'AS for Alaska'.", 'Graph color changes based on the year selected, demonstrating the ability to dynamically update the figure output based on different data inputs.']}], 'duration': 235.635, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hSPmj7mK6ng/pics/hSPmj7mK6ng1164834.jpg', 'highlights': ['Hawaii experienced a significant 52% bee colony loss due to varroa mites in 2015, highlighting a critical issue in the region.', 'Graph color changes based on the year selected, demonstrating the ability to dynamically update the figure output based on different data inputs.', 'Applying additional filtering to only include rows where bees are affected by varroa mites, excluding other diseases to focus on specific data for visualization.', 'The chapter emphasizes the importance of understanding the parameters for different graphs and demonstrates the use of specific parameters for creating the choropleth map with Plotly Express.', 'Filtering rows based on the user-selected year, such as 2016, to ensure the data frame only contains rows from the specified year.', "The Pandas data frame is utilized for organizing information from an Excel sheet, associating state abbreviations with data, such as 'AL for Alabama' and 'AS for Alaska'.", 'Making a copy of the data frame to avoid modifying the original inside the function, which helps maintain data integrity and avoid unintended changes.', 'The video shares the link to Plotly Express and highlights the usage of parameters for creating different graphs with Plotly Express.', 'The presenter mentions the importance of knowing the parameters used for each graph and explains the specific parameters used for creating the choropleth map with Plotly Express.', 'The figure output is the second return object, and if there is only one output, brackets should be avoided (as explained in the tip).']}, {'end': 1758.306, 'segs': [{'end': 1528.498, 'src': 'embed', 'start': 1502.64, 'weight': 0, 'content': [{'end': 1508.528, 'text': 'So I would recommend using Plotly Express whenever you can instead of Plotly Graphs.', 'start': 1502.64, 'duration': 5.888}, {'end': 1514.011, 'text': 'However, there are certain graphs that can only be built with Plotly Graphs and in a few years, Graph Objects.', 'start': 1508.748, 'duration': 5.263}, {'end': 1521.635, 'text': 'In a few years from now, this will probably be a nice nostalgic data point to see how this was created.', 'start': 1514.471, 'duration': 7.164}, {'end': 1525.156, 'text': 'But most of them can be created with Plotly Express.', 'start': 1523.235, 'duration': 1.921}, {'end': 1528.498, 'text': 'If you want to use Graph Objects, just make sure that you do it this way.', 'start': 1525.377, 'duration': 3.121}], 'summary': 'Use plotly express for most graphs, but some require graph objects; in a few years, graph objects will be nostalgic.', 'duration': 25.858, 'max_score': 1502.64, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hSPmj7mK6ng/pics/hSPmj7mK6ng1502640.jpg'}, {'end': 1570.83, 'src': 'embed', 'start': 1546.416, 'weight': 1, 'content': [{'end': 1552.818, 'text': 'Remember the three pillars, Dash components, Plotly graphs, and connecting the two using a callback.', 'start': 1546.416, 'duration': 6.402}, {'end': 1559.181, 'text': 'If you know this, you know how to create from the simplest to the most complex dashboards with Python alone.', 'start': 1553.178, 'duration': 6.003}, {'end': 1564.204, 'text': 'If you like this tutorial, make sure to hit the like button, make sure to share with your friends,', 'start': 1560.461, 'duration': 3.743}, {'end': 1567.728, 'text': 'make sure to subscribe below and turn on your notification for this channel.', 'start': 1564.204, 'duration': 3.524}, {'end': 1570.83, 'text': 'So every year, every year, every week, hopefully,', 'start': 1567.988, 'duration': 2.842}], 'summary': 'Learn to create dashboards with python using dash components, plotly graphs, and callbacks.', 'duration': 24.414, 'max_score': 1546.416, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hSPmj7mK6ng/pics/hSPmj7mK6ng1546416.jpg'}, {'end': 1654.689, 'src': 'embed', 'start': 1632.338, 'weight': 2, 'content': [{'end': 1640.065, 'text': "You're going to have a bar chart with the states here the percent of the colonies of bee colonies here affected by, I think, varroa,", 'start': 1632.338, 'duration': 7.727}, {'end': 1642.226, 'text': 'mites or whatever the default is, and the year.', 'start': 1640.065, 'duration': 2.161}, {'end': 1645.227, 'text': 'You can actually go in here and focus and do more of that.', 'start': 1642.246, 'duration': 2.981}, {'end': 1647.967, 'text': 'All right, challenge B.', 'start': 1646.387, 'duration': 1.58}, {'end': 1652.468, 'text': 'Use Plotly Express to plot a line chart instead of the corpus map.', 'start': 1647.967, 'duration': 4.501}, {'end': 1654.689, 'text': 'Now, this is going to be a bit more complex.', 'start': 1653.089, 'duration': 1.6}], 'summary': 'Use plotly express to plot a bar chart showing the percentage of bee colonies affected by varroa mites by state and year.', 'duration': 22.351, 'max_score': 1632.338, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hSPmj7mK6ng/pics/hSPmj7mK6ng1632338.jpg'}, {'end': 1745.739, 'src': 'embed', 'start': 1718.314, 'weight': 3, 'content': [{'end': 1723.995, 'text': 'This is a great community of Plotly and Dash where you can create your own account.', 'start': 1718.314, 'duration': 5.681}, {'end': 1729.668, 'text': "You can create a new topic if you can't find the answers, for any of the things that people have asked before.", 'start': 1724.035, 'duration': 5.633}, {'end': 1733.431, 'text': 'You can go into the category of Dash if you want to focus on Dash.', 'start': 1730.008, 'duration': 3.423}, {'end': 1736.673, 'text': 'Here I am, so you can ask me questions as well.', 'start': 1733.911, 'duration': 2.762}, {'end': 1741.556, 'text': 'But I recommend most of the questions that you probably have, people have already answered.', 'start': 1736.913, 'duration': 4.643}, {'end': 1745.739, 'text': 'So just search for it using this or just searching on Google and Plotly Forum.', 'start': 1741.596, 'duration': 4.143}], 'summary': 'Join the plotly and dash community to find answers and resources for your questions.', 'duration': 27.425, 'max_score': 1718.314, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hSPmj7mK6ng/pics/hSPmj7mK6ng1718314.jpg'}], 'start': 1400.469, 'title': 'Using plotly express for web application dashboards with python', 'summary': 'Discusses using plotly express and graph objects to create web application dashboards with python, emphasizing the advantages of plotly express, understanding dash components, and using callbacks. it also covers creating bar and line charts with guidance on dropdown options and the plotly forum as a helpful resource.', 'chapters': [{'end': 1610.42, 'start': 1400.469, 'title': 'Using plotly express and graph objects', 'summary': 'Discusses the use of plotly express and graph objects for creating web application dashboards with python, emphasizing the advantages of plotly express and the importance of understanding dash components, plotly graphs, and using callbacks to create dashboards.', 'duration': 209.951, 'highlights': ['The chapter emphasizes the advantages of using Plotly Express over Plotly Graph Objects for building graphs, due to its speed and simplicity.', 'It teaches how to use Plotly Graph Objects for building graphs and provides guidance on accessing the documentation and parameters.', 'The importance of understanding Dash components, Plotly graphs, and using callbacks to create dashboards with Python alone is highlighted as the foundation for creating dashboards.', 'The chapter encourages engagement with the tutorial content, including liking, sharing, subscribing, and turning on notifications for future videos.', 'It promotes practice and interactive learning by providing challenges for users to solve, with solutions available on GitHub.', 'The speaker recommends attempting the challenges and practicing even if the solution is not immediately apparent, as the practice will be beneficial.']}, {'end': 1758.306, 'start': 1611.38, 'title': 'Using plotly express for bar and line charts', 'summary': 'Covers using plotly express to create bar and line charts representing the percentage of bee colonies affected by varroa mites or other factors across different states and years, providing guidance on dropdown options and highlighting the plotly forum as a helpful resource for further assistance.', 'duration': 146.926, 'highlights': ['The chapter emphasizes the use of Plotly Express to plot bar and line charts representing the percentage of bee colonies affected by varroa mites or other factors across different states and years, providing specific instructions on axis representation and dropdown options.', 'The chapter promotes the Plotly forum as a valuable community resource for seeking assistance and answers related to Plotly and Dash, encouraging users to engage with the community and utilize the platform for support and knowledge sharing.', 'The chapter encourages independent problem-solving and practice, offering a solution for reference if needed and emphasizes the importance of perseverance and enjoyment in the process of creating visually appealing charts with Dash.']}], 'duration': 357.837, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hSPmj7mK6ng/pics/hSPmj7mK6ng1400469.jpg', 'highlights': ['The chapter emphasizes the advantages of using Plotly Express over Plotly Graph Objects for building graphs, due to its speed and simplicity.', 'The importance of understanding Dash components, Plotly graphs, and using callbacks to create dashboards with Python alone is highlighted as the foundation for creating dashboards.', 'The chapter emphasizes the use of Plotly Express to plot bar and line charts representing the percentage of bee colonies affected by varroa mites or other factors across different states and years, providing specific instructions on axis representation and dropdown options.', 'The chapter promotes the Plotly forum as a valuable community resource for seeking assistance and answers related to Plotly and Dash, encouraging users to engage with the community and utilize the platform for support and knowledge sharing.']}], 'highlights': ['The chapter emphasizes the advantages of using Plotly Express over Plotly Graph Objects for building graphs, due to its speed and simplicity.', 'The importance of understanding Dash components, Plotly graphs, and using callbacks to create dashboards with Python alone is highlighted as the foundation for creating dashboards.', 'The chapter emphasizes the use of Plotly Express to plot bar and line charts representing the percentage of bee colonies affected by varroa mites or other factors across different states and years, providing specific instructions on axis representation and dropdown options.', 'The chapter promotes the Plotly forum as a valuable community resource for seeking assistance and answers related to Plotly and Dash, encouraging users to engage with the community and utilize the platform for support and knowledge sharing.', 'The callback has an output and input, with multiple outputs possible, and uses a function definition to connect each argument to an input, with the selected year from the dropdown being used to filter data and output a figure and information into the output container.', "To create a full dashboard, it's necessary to connect Dash components with the graph inside the app layout using a callback, which utilizes the IDs and component properties to output information into specified components, with the output container being the children of a specified div and the figure of a specified component ID.", 'The chapter introduces the theory behind Dash and the three pillars of Dash: Dash components, Dash core components, and Dash HTML components, which are essential for building interactive data visualization dashboards.', 'The goal of this tutorial is to show you how Dash is used to create all kinds of analytic web applications, anywhere from financial to web-based, to machine learning, to medical and manufacturing dashboards.', 'The use of DCC graph and Plotly graphs to create interactive data visualization plots.', 'The importance of understanding how to connect components and graphs to create any type of web application dashboard.', 'Examples of web application dashboards that Dash allows you to build include map-based applications, financial web applications, machine learning object identification, and medical applications.']}