Introduction to Plotly Data Visualization

hey everybody welcome back to trauma data i hope you had a wonderful week and a good rest in this tutorial which i'm very excited to teach you i'm going to give you an in-depth overview of plotly i'm also going to show you the difference between plotly express and plotly graph objects and i'm going to show you how to navigate plot these documentation so you can create any graph that you would like with plotly all these pie charts bar charts scatter plots maps statistical artificial intelligence machine learning graphs scientific and financial all of these hopefully you'll be able to create on your own because i'm going to show you how to navigate plotly's documentation to do that so by the end of this tutorial you're going to learn four things you're going to know why you should use poly and not other data visualization platforms you're going to know how to navigate plot these documentation so you can create any graph that you want you're also going to learn how to join the family and get some love from us and get the support that you need when you get stuck and when you need it and lastly i'm going to show you how to share your graphs and data visualizations with the rest of the world okay if you don't have time to see the whole tutorial i would really recommend seeing point number two which is um the navigating qualities documentation to create the graphs that you want because this is the core of the tutorial and will really help you save a lot of time in the future to do so just open under the video open up all the links but specifically go to video layout and choose the section that you would like to see all right so let's get started why plotly why you should use poly other platforms for several reasons um the first reason is plotly is one of the only platforms out there where you can create interactive data visualization dashboards and graphs using pure python and also deploying them to the web as web apps there's really very very few platforms out there to do that and and this is the biggest advantage that probably has the second reason is plotline you can use plotly um with r or with julia and a few other languages in case you do not know python um the other reason is plowy is um very efficient so you can create very powerful graphs uh with just a very few lines of code like you see here this is what two three lines of code and we have a box plot here and another three lines of code with a box plot here so it's very quick and it's very a powerful tool to use for any type of graph that you want to use plus there's like a gazillion different graphs that you can do with poly to start and to install which is also very easy all you have to do is go into your command prompt like this open this right here oh it's not opening okay command prompt and just cd into your uh whatever project folder it is and then just do pip install plotly or if you're using conda just type this conda line and it will install poly through conda it will install the latest version unless you tell it what version you want to install uh you can do the same thing with the terminal you don't have to do it through command prompt just open your pycharm or visual studios or spider terminal and just do pip install plotline if you want to use jupiter notebooks you can also do that in a very similar way but i would recommend seeing the video above if it's helpful for you i i will in the video i teach how to set up and install jupyter lab and use jupiter dash and plotly inside jupiter lab you don't have to install or use the dash part if you want to you can just use the plotted part if that's what you prefer okay so uh why how can we navigate the plot documentation so you can use um any or build any type of chart that you want before i'll show you my strategy of navigating the documentation i want to make clear the difference between plotly express and plotly graph objects plotly express is to plotly graph objects as seaborn is to map plotlib in other words polyexpress is very similar to seaborn it's a quick way to create power powerful graphs with just a few attributes if you're doing a scatter plot all you have to define is the x-axis the y-axis and the data that you're using that's it it calculates a bunch of different attributes on the back end and you have a beautiful scatter plot for for you to use if you want to use graph objects which will you will eventually use um you have to build everything from the bottom up so to use the graph objects let's go here for example into the bar charts you have to define the data you have to define the layout and you have to define sometimes the frame if you're going to use frames as well so the strategy is my general recommendation start with plotly express build whatever you can build with that and then if you need to further customize your graph then you should use plotly graph objects so i'm going to show you how to do exactly that right now so open this documentation under the video and go all the way down let's go down here right there and i'm going to step number a so the first thing you want to do is initiate your graph with plotly sample code and adapt it to your data so take take the sample code or at least open this this web page that is what you saw a second ago with all the different graphs and just take your data and scroll here and just decide what graph would work the best with your data all right so as an example let's do a real life example that's easier to understand we're going to use this data this data is data that was taken from virginia tech and this website the prj and it's data that talks about birds that die due to the fact that they collide against windows it's very sad but i want to raise awareness on on birds and what we can do to help them because almost 1 billion birds a year die in the u.s from from colliding inside windows because they mistaken the window for the sky and so um i want to make sure that we that we we can do something about it so this is the data from 2013 to 2015 and virginia tech did an analysis observation of building number and from their buildings how many deaths per buildings so looking at this data what i would like to do you can do many different graphs what i would like to do here is a pie chart because i want to compare between the number of deaths per building i want to see the the relationship between those so according to step one initiate your gas with the sample code and adapt it to your data so let's take the sample code let's go let's close this we'll take the sample code that we just opened up basic chart let's go to pie chart because that's what we want to create and then we're going to go to you can look all the different sample codes that they have here you can look at the pie chart that you think is going to be um the most similar to the type of data you're going to use i'm going to going to take the basic one that's polyexpress px right here and i'm just going to copy paste it right i'm going to put it in here we're going to copy paste save it and then we're going to run it so now we'll see this pie chart that comes up right here all right so we have the days and this is tips this is analysis of tips inside a restaurant now i'm going to adapt my data to this graph so instead of days i'm going to put building number and instead of tips i'm going to put deaths values tip let's put deaths of birds this don't forget this is a data frame that is inside dfb i already put this in there this is a pandas data frame that is reading the csv excel sheet so each column is a column inside the pandas data frame so i'm going to use the pandas data frame the value is going to be death and the name is going to be bl building i think oh how did they spell build a bldg yeah bldg underscore save okay so let's see what we come up with instead of days we'll create a new chart when we run this with building number and the averages in each building and we see that building number 12 and building number 11 has the highest amount of of percentage of birds that die maybe they have more windows or for whatever reason an interesting analysis so we just completed step number one we adapted our data to the sample code in plot leaf step number two enhance your graph with plotly express high level interface so rarely are you going to use only only the attributes inside the sample code you're probably going to you want to use more attributes plotly express high interface has those attributes so go into this open where step two open the plotly express high level interface documentation and here you see all the different charts that you can graph so you can create with with plotly express going to the pi because that is what you are creating right now and here you see all the different attributes plotly has um thousands of different attributes but that's in graph objects that's later in step three if we want to customize even more our plot right now we're just going to do use these attributes to enhance our our graph so here you can read all over the different attributes and what they do you can manage the hover data you can look into the labels the title i want to change the color so the color is not by building but it's going to be by side so each side represents a different color of the building and i'm going to manage the whole because i want it to be a donut instead of a pie so you see whole means float so i gotta oops don't need to open that i need to define it as a float and the color i can just define as a pandas dataframe one of the columns so let's do exactly that let's go here and we'll say color is going to be side that is one of the columns in data frame and the whole let's then make it 0.3 size so now if i save it and i run it instead of this we're going to get a donut and we're going to get the colors it's not colors of buildings but it's color of a of size of the building so this side is side e and then you can see that the purple which is side b has a great majority of the of the birds that collide against that side of the building maybe it's because it's facing north and the birds are coming from the north not sure but it's a very interesting analysis okay so we looked at the plotly express in high level interface now there might be some things that you want to do that do not exist here because we don't have all the attributes the plotly graph objects has we only have this so for example let's say you want to um change the text inside the slices inside the markers so it has a different color to it they're all white and maybe you want to add the label instead of percentage you also want to add the building number inside as text so it's not only in the hover but it's inside the slice well you're going to plot the express interface and you'll see that does not exist there's nothing in here that talks about changing the text inside the slice or changing the color of it that is where step 3 comes in and then we're talking about the polygraph objects okay and we're going to use fig update to update those attributes let's start slowly click on this and this will open the main page of the figure reference and here you'll see that it's divided into two separate well many sections but i'm going to highlight two sections anything that is under here the trace types and all these graphs are things that you will use when you want to do update traces okay i'll explain this in a sec remember anything under here is update traces right and anything under layout is update layout what do i mean by that to further customize your graph using graph objects you will have to do fig dot update underscore and here are all the different options of update and plotly there's about 12 or 13 options the ones you are going to use the most are layout and traces the first two right so i gave you an example here layout and tracers are the ones you're going to use the most there's a few more common ones but almost always you're going to use these top two the difference between the two is layout represents as you can see here layout represents the the attributes or the charts so it represents the color the tick the hover the legend really how to different ways that you can uh change the chart so it embellishes it and looks prettier and more user-friendly for for your user or for yourself traces represents the data very important to remember traces represents the data that goes inside the layout now you won't necessarily remember or know exactly what you want what is defined as trace and what is defined as layout but that is completely fine because what you know is what you want to do once you know what you want to do with your graph then you can start looking for it and searching in the documentation and see if it falls under traces or if it falls under layout so let's do let's continue uh based on our example and see see where where we land where we go from here so let's say we say we wanted to control the text inside the slices so now we also have the label inside and not only the percentage we also want the label of the building so my recommendation is go into this page and then open your pi graph because this is a graph that you're using and then when you're in here just hit ctrl f in your browser so you can um so this search box is open and now think of the keyword that you want to use um that will lead you to what you want to do with your graph so here i want to do something about text i want to do something about text inside so i'm going to look at inside because there's probably fewer inside than text and you'll see that here text position is an attribute is not necessarily what we want we want to do the text inside we want to change the add label inside text font is not what we want so continue enter enter enter cite text orientation not here with that over 8 we're not successful it's not we shouldn't use the word inside it doesn't make sense we couldn't find what we wanted so let's use we we know we want to change the um label and percents maybe we'll go into percent and we'll look for percent percent here percent hover it's not there okay text info so this is actually now we found the attribute that we want we want text info because test info tells us that it determines which trace information appears on the graph we have three options label text and value and we can do plus or if we to decide what we want inside those slices okay so how do we implement this into the update what we have to do here is we have to see if the parent says data which it will always say because you're under the traces then you have to do update traces okay complete this by update traces now inside you see this attribute it says text info this is what you have to copy paste just go into text info text info equals and now choose it says it's a string right it's a string so now choose whatever you want so we want percent and label inside our graph here's our pie so open the string let's do label plus percent save it play it and now we will see then instead of this we'll get a new chart with percent and the label of the building so i don't have to hover i can already see what building is in each pie slice let's do another thing instead of um in addition to this let's change the color of the of the text inside the slices so you will do exactly the same thing go back to your step three to the graph objects page go into the pie and open ctrl f and look for now we want to change the color right color color has 41 different options here it's really hard to find um so maybe let's not use color maybe we'll use uh inside maybe it's text or text info i think it's called text info so we're going to info info okay text info um no it's not actually not that so we'll keep on looking inside inside text info so you'll see this is the the attribute and inside text info we have family and size and we have color so we'll do the same thing you know that the parent is data so we know we have to do update traces we'll copy paste this and we'll do update traces we have update traces here so we'll just do this equals and now the next level down is color but we can't just do because color has another is an attribute that has a value to it we have to open a dictionary we can't just do color equals white that doesn't make sense and it doesn't work it's not pythonic so if you have more than one level down if you have a gray bar here that usually means that you have more than one level down you have to start opening a dictionary so open a dictionary just like this and here you can put color attribute equals and now you can choose the color string that you would want so if i want white i'll put white let's save this and let's see how it updates our chart from this to a chart with white text inside of it just like this okay so we did this with um the update traces but let's say i want to change something in the legend as an example because now when i click on the legend it unclicks it it makes the slice disappear from the pie chart i click on one it makes the one disappear from the pie chart and there's just too many building numbers here i do not want to give the user this option so i want to take that click option away from the legend usually legend is is part of a layout update if you go in here you'll see you'll see a layout you'll see legend but you might not know this you might not know if what you want to change is layout or is it traces so just start with traces go to the trace open your pi do control f again and just look for legend there's a lot of legends here and you'll see this it talks about a visible attribute so it's not what we want we want to look more about click it's show legend it is legend group so it just doesn't have it here it's not under the traces so the next place you want to look into is the layout which is under here anything under here is layout so we'll go into legend and here you'll see if you control find let's put instead of legend let's do click because we want to change the click and it happens to be the first attribute says item click and it will say determines the behavior on legend item click so you can have either toggle or toggle others or false so because the parent is layout because it was under this section of the of the page under the layout and because the parent is layout you have to do update layouts so enter here go open a new line to fig update layout like this and inside let's see we have a gray line here that usually means that it's two levels down and when it's two levels down you're gonna have to open a dictionary if it's three levels down you're gonna have to open two dictionaries and so on and so on so here we see that the parent is layout legend so let's put legend as a value of the the first attribute inside update layout and now we'll open the dictionary and inside let's do it differently instead of this we'll just open a dictionary like that item clicked what do i do i didn't click item item click and here because this is a dictionary we'll do like this and then we'll do that's the key and the value will be false because i don't want the item to be clicked so i'll click on false perfect and now i save this i'll see that i cannot click on an item if i click on an item it doesn't work if i double click it will probably change it because there's a double click in here but if i click once it doesn't change anything so we just learned how to use traces and how to use the layout now what we're going to do is we're going to see what um what to do in case you get stuck my first recommendation if you get stuck after reading all the documentation is don't forget to read this go in here and read this fundamental documentations if you missed it just make sure to go over this at least once this fundamentals part will talk to you all about formatting ticks and legends and axes multiple axes hover text all of which is inside this big api documentation but it gives you many different examples that you can just copy paste and use instead of looking for everything inside the documentation so this is one great tip of of that really helped me um if i get stuck the second thing you can do if you get stuck is join the plotly family and to join the poly family just go into plotly form if you don't have uh if you haven't signed up just open this and just sign up by um but this is my logo here feel free to write me whenever you want but just go into uh plotly and then you'll see sign sign up you'll be able to um with an email and password you'll create your new membership and then you can join the platform and you can ask any questions you want before you ask any questions please please please just just search for what you're looking for and this is so many questions have been answered before so you'll probably 99 of the time you'll find what you need um you have questions about how to change a label inside legend right and you have seven different results of people that wanted to change labels inside legend and how uh on different graphs and how they did it and you can click on it and see it you can all actually use advanced search if you want to go into focus on like categories on poly python or an r or maybe you want to use dash instead um just categorize by by doing that okay so that was um how to get help if you get stuck the next and last thing i want to teach you is how to share your documentation your your your graph been talking about documentation now that's only the only thing i'm saying so to share your graph um you want to install collido this is a great great prop platform very powerful that plotly just created so to do that um collato let's double click on this we'll go over a in a sec um click on that and that will open um did it open it okay here you go so kaleido uh hopefully i'm saying it correctly is a is a great way to save your your your graphs using um using either as png or jpeg but you have to use the right image method so first things first make sure you install kaledo because it doesn't come automatically with poly not yet maybe in future versions so just pip install uh kaledo inside your terminal or command prompt and then all you have to do once you have your figure created you just go in there and save it however you want to save it so let's say i want to save it as png copy paste we'll go in here and we'll go png make sure that you have i'm going to save it inside an image folder images folder so make sure you have an images folder or not if you don't just do like this if you want to save it and sign the same the same folder as your as your python file so i'm going to say this png that is going to run it again and i'm going to open the images folder and now i'll see images where is it there you go phase now if i double click on this i have a png image that saved beautifully as as the pie chart that i can actually send via email to my friends or the rest of the world another way to share your images or your graphs with the rest of the world is by using dash if you learn a little bit of dash which is what my channel is all about uh very quickly you'll be able to create a powerful interactive dashboards that you can share with the world using heroku you can use many different uh platforms i have a video up here that talks about how to use heroku uh within a few files and modifications that you can just upload um to the web and then all you have and then you'll have your own url so you can just share the url with anybody else and they can play around with interactivity with the plots um on the web page as as as a website because you're actually creating your own web app i hope you enjoyed the video i hope you learned a lot if you did click the like button subscribe to my channel and turn on your notifications so you can receive every week every saturday morning i do a video on different data visualizations and all the cool things you can do with potly and dash um so don't forget to turn on your notifications and please please please um i want to want to raise awareness about birds millions and millions of them die every year because they collide against windows when they think they're flying into the sky so just make sure that if you're inside your apartment to put something inside right by the window so they don't think it's the sky and you can save a lot of little birds lives um keep practicing never give up and don't forget we're better together so always help other people out thank you and i'll see you next saturday

Channel: Charming Data

Views: 25,637

Rating: 4.9788361 out of 5

Keywords: LEARN PLOTLY - INTRODUCTION, Plotly is an incredibly powerful library, tutorial with python in dash, browser-based interactive data visualization, Data Visualization GUIs with Dash, plotly dash, learn plotly, Getting Started with Plotly, Plotly is a plotting library for python, Plotly Dash Tutorial, introduction dash plotly, Dash series for Python, Dash and plotly tutorial series, web app dashboards, web application dashboard, python, ploty, sentdex dash, plotly tutorial, plotly

Id: _b2KXL0wHQg

Length: 27min 26sec (1646 seconds)

Published: Sat Aug 22 2020