Create 3D Scatter Plot -- Python Plotly

welcome back to charming date everybody I hope you had a good week in this tutorial we are going to look over the 3d plotting we're gonna do that in plotly and python I'm gonna cover my five fundamentals of 3d plotting first we're gonna learn how to create the 3d scatter plot then we're going to learn how to style it we're gonna see how to animate it we're gonna learn how to share it with others so not only you but also your friends and colleagues and bosses can enjoy the great beautiful data visualization that you've just created and last we're going to cover the do and do nots of 3d plotting the goal of this tutorial is for you to have a comprehensive understanding of 3d plotting and the necessary knowledge of coding and the docket documentation so you can create your own 3d plots alright so let's break it down first creating the 3d scatter plot so this is the scatter plot that we're actually going to create I'm going to show you how to do the x-axis how to put data on the y axis the z axis and how to create the legend and the title so you come up with something as beautiful as a so you can turn and visualize and see the depths and understand how the data interact with each other second I'm going to show you how to style your your 3d plot so we're going to change the colors we're gonna see how to change that we're gonna see how to change opacity so it's not as dark we're gonna see how to include marks so you see diamonds and and circles you can include any marks you want we're gonna we're gonna create a bubble 3d plot so it's the same 3d plot but now it's bubbles because it depends on size we're also going to look into the how you play around with the log scale of an access you see this is a bit shorter here and here it's a bit longer we'll go over that I'll show you all about the log scale later we're going to we're going to play with the range of the access so a shorter and you can see more dots on it we're also going to play with a palm template so you can have different templates here in a different background this is actually the Seabourn template and we're also going to play around with a hover so you can include any type of hover that you want just like you have here one with the mouse on the screen third we're going to learn how to animate the 3d plot so here I'm animating by years so if i click play you will see that the dots or the marks are moving according to the years so it's a really cool animation that really explains how the data moves over time in this case the economic activity of women in the labor force I'm going to offer you another animation and I'm going to give you the code which is which is a big part of code that you can apply for other animations or other 3d plots as well not only the scatter plot and this code gives you a play button so you can share with others and just as soon as you hit it it just turns on itself you see how I was just turning you can turn it this speed or you can turn it at a slower speed I'll show you how to manage a speed so you can choose whatever you want you can't really faster or less as fast okay but before we jump into the code let's look into the data the data we're going to use is this excel sheet that's under the video make sure you open under the video all the links including this data and the code so you can follow along this data is going to show you that we're using different columns such as Italy and the years we're going to focus on 2010 more than anything but different countries different years economic activity this refers to the percent of the female population that is economically active GDP per capita the population was the average year that women go to school in that country and then the continent I only did Europe and Africa but I'm sure you know how you on your own you can add different continents on there I took this data from our world end day this is a wonderful website that has all kind of data graphs and they have all their data for free that you can download so any graph you'll click on you'll see a cool interactive graph they can usually download the data for I just cleaned the date a little bit and combined it with like two or three data frames so it's probably better to use this excel sheet but you can also find it on the website okay so this is the code that we're going to use you can read before or after this tutorial make sure to read all about the 3d scatter plot in plot Li which is what we are actually going to use it's a wonderful library to create plots very quickly with very little code so this is a webpage under the video so take a look at this it gives you beautiful examples of 3d plots and specifically if you want to go over the parameters that we're gonna use all these parameters in plot Lee expressed scatter 3d make sure you open this up as well so you can review all these parameters we're going to use most of them but not all of them so definitely think the opportunity take the time to read over some of these so you have a better understanding of what they're used for okay so let's get back right into the code and you'll see how we're going to create that first 3d scatter plot with I think like 20 lines of code that's it okay so the first thing you want to do you want to import these libraries pandas hopefully you know by now what pandas is but if you don't just pip install pandas very easy it's like Excel on steroids then you want to import poly express as P X if you don't have it just pip install plotly because Polly Express comes with Impala I'm using version 4.7 so you can just say pip install I think you do pip install equals four point seven point zero but just go on the plot of the website and they'll tell you how to do that very very easy and then I'm gonna do this so I can actually call the image and these libraries I'm going to use later for the animation I'm also going to use this later for the animation where it just spins around so we'll talk about this later so the first thing I'm going to do I'm going to use the excel sheet and import it into a date pandas dataframe this is a female labor cleaned excel sheet we're only gonna do 2010 because our world and data the website only has information on average years of schooling every five years so I'm gonna take 2010 and I'm only gonna do the continents Europe and Africa because that's what I have on the excel sheet or the pandas dataframe if you want more feel free to add those continents there and this we're going to use later I'll show you later alright so let's create the first 3d scatter plot what you want to do Figg equals px thought and call the method scatter underscore 3d and open the parentheses the parentheses starts here and finishes here but you don't need all this there's all this hashtag out these are for the rest of the tutorial you can even erase them if you want all you need is these these lines of code so all about 20 25 lines of code and you got this scatter plot so the first thing you want is actually obviously the data frame so we have the DF as a data frame because we already cleaned it and this is what we have here then you want to use on the x-axis you want to use the GDP per capita remember the GDP per capita is this axis right here is this column it's inside the data frame right now is a panda's data frame we are going to use this for as the x axis then the y axis is going to be the percentage of economic activity so this is in I change a little bit the labels but what this means is a percentage of women that are economically active in that specific whatever country or whatever year and then the axis Z is going to be years in school average the average years of school years that women are in school in each country in each continent the color is going to be continent and that's how I create the legend the legend here is going to be the color so you're going to have two different colors Africa and Europe because you have two different continents only I'm going to the color discrete sequence I'm going to say that the first con is going to be magenta color and the second continent is going to be a green color I'm going to use the log X true we'll go over that later I'll show you what that means we're going to use a ggplot2 template and that's how you get the different colors and the lines that you see but all these are the different templates so feel free to use and play around with all the different templates this is a title I'm going to give it I'm going to change the labels this labels as a parameter that allows you to change the certain data inside your plot so years in school average was I think my x-axis or one of the columns I'm going to change it to years women are in school sounds better I'll just do it that way but you can change pretty much any type of data you want in here this is the labels parameter I'm also going to have a hover I'm going to add the country of the hover and the height is going to be 700 because I want it 700 pixels high and that's it closed close the parentheses of the px dot scatter mat scatter 3d method as you see on top on the left and then don't have to pay attention to all this because this is only for animation go all the way down and that's it then this is how you print it so as soon as you run this code you will get where is it this as soon as you run this code you will get this we have just created the ski 3d scatter plot within several lines of code that's it that's really cool and you can see here really really interesting data how for example as GD but you see a very positive correlation where the more G deep the higher the GDP per capita this is 1000 this is 10,000 the more years women tend to spend in school all right for both Africa and Europe seems to have the same kind of correlation a positive correlation it's not necessarily like that with all the data for example here we see that economic activity for African countries the green countries they are anywhere from 80 all the way to 30 but years lumen are in school is pretty much the same it doesn't really change its anywhere from from two years to about six years and there is no positive or negative correlation there is no angle it doesn't really matter what kind of economic percent of the population is economically active it doesn't really affect the years of women are in school so you can play around with it when you when you shift it when you turn it around or were it will reveal very interesting information that's why I really love the 3d scatter plot all right now let's look how we style our 3d plot the first thing we're going to do is we're going to learn how to how to change the color so here I'm going to choose Africa's nemyt be yellow and Europe is going to be black to do that just go in here and go all the way up and you'll see that to change the color all you have to do is hashtag this back in and you'll see color discrete map this is one of the parameters if you want to read more about it don't forget to open the link below right here and you'll see just blue control F color discrete you'll see color discrete math is right here and they'll tell you all about how it is how it's a dictionary with strings and keys and values so this is exactly what we did here we put the first key is going to be the continent because that's the continent as part of the color is part of the legend and then you choose the color I want it black and then Africa is going to be yellow and that is how we got the different colors the next chart you will see is the opacity so if you want to change the opacity the opacity goes anywhere between zero and one zero point three which is not very dark is actually pretty light we'll give you this you see a light color opacity so you can pretty much see through them all right the next thing we're going to create is marks so you see how these are different marks you have the diamond and you have the circle we created this by let's go back here let's hashtag this out let's hashtag the color out and the is by symbol to create the marks the the different symbols you do this so we're going say but the year column is going to represent different symbols or the symbols are going to represent the year and we're going to say well let's start with this this is just us the year column now I have only 2010 so it doesn't make any sense this won't mean anything so what I should do is I should add 2005 to this it's at 2005 right here and this is how you get 2005 2010 and the symbol here is based on year this is how you will get this chart you see how you have 2005 and 2010 for the different the different symbols alright there's a lot of data on here so be careful with combining symbols and color on the same 3d plot now another thing you can do is this you can actually change the different symbols on the marks so they don't so they're not by default what what plotly chooses which is diamonds you can say I want them to be crosses and boxes to do that you use the symbol map parameter so make sure to keep the symbol on there and you are active make sure to hashtag this in back in and make sure to say I want 2005 to be a square open symbol and I want 2000 tend to be symbol number 3 plotly symbol webpage has all these values for each symbol so you can tell you what 3 means what 10 means what 11 means I'll add that below the video so you can see all those symbols and the mapping and you can choose any symbol you want alright the next thing we're going to do we're going to hashtag this out I'm gonna focus on size so maybe I want to create something like this maybe I want to create bubble 3d plot so a bubble 3d plot is just playing around with the size of the marks or the marker sorry and in this case I'm going to have the size be the population so the bigger dots have a bigger population you see here the the population is zero well I have to change the hover here but you see 0.4 just times a million that's I think one how much is it a hundred million didn't I do I got to change that hover over there I'm sorry I didn't do that for four here I forgot but this resized population I'm resizing it right here and I'm dividing it I think by 10 million or 100 million just because I didn't want the bubbles to be too big so I just divided it and now after dividing it it actually plots so the bigger ones are obviously Egypt has a bigger population in a small country such as Swaziland that's somewhere in South Africa in between kind of a cool country and been named that are very small and then the bigger ones are obviously Tanzania and Kenya and in Europe Italy is a very big country and so on and so on later on I'm going to show you how to create how to play around with a hover data so you will see instead of seeing 0.8 resize population you'll see that 882 million something instead of this okay so you played around with the size by doing size parameter and the size max I want the size maximum to be 50 because it right now that I divided them by 10 or 100 million the sizes range anywhere from 0 to I don't know 40 something so I want it to be max 50 you can have it max 100 million but then it's going to be too big that's why you have to play around with it and resize it a little bit alright or not use population maybe use something else for for resizing for for the bubble chart let's hashtag this out the next thing we're going to learn oh let's take out 2005 before we forget alright so the next thing we're going to see is how to play around with the log scale of any axis so take a look at this look at this log scale Vegas long and not sorry this is not a lot here let's take a look at this axis a GDP per capita it goes anywhere from zero to a hundred thousand in increments of 20 thousand right but when you see this it's real everything is like goop to get it's really hard to see the African countries where they lie between 0 and 20 is this higher is this lower you don't really know so if you log scale this axis a GDP per capita you will get this log scale in GDP per capita now you see that it starts from 0 or 700 and it goes all the way up to 10,000 and then it jumps like to a hundred thousand so now you can see the dots of each country in Africa a lot clearer and a lot better where they stand on GDP capita compared to do something like this so to do that all you have to do is see where the GDP capita axis is it's on the x-axis and then you just do log X true so you're doing a log scale on that axis you can also do a log scale on the y-axis and on the z axis so it depends which one you want to use ok the next thing we're going to see is range if you want for example let's see this you can also play around with the range of the axis so look at this here the European countries are in the years women are in school anywhere from like nine and a half or ten to to twelve but they're so up there at the very top that it's hard to see which one is where so if you want to have a better understanding you can actually change the range of this axis now this axis let's see where it is the years women are in school is the z axis so just go to range Z and then put the list where you want it to start and where you want it to end so we did 9 to 13 and if you do that you will get this so now you don't see all the green all the Africa because they're out of that range but at least you can see the European countries a lot easier when it comes to years women are in school you can see that clearly the Portugal has an average of a lot lower a number of years in school compared to a country like Iceland or Switzerland which is not very easy to see in this kind of chart okay so just all you have to do is change the range of that axis you can also change the range of the y axis and the x axis so it's hashtag this out we already saw that we can change the template this is Gigi plot 2 which looks like this if you want to have a seaborne template you want to do this this is a seaborne template so these are the colors or Seabourn but play around with it you can use different colors you can use not colors but different templates simple white plotly presentations these are all the templates that are in there I never tried none maybe it's completely white or maybe just nothing there it all disappears um but if you if you find interesting please comment below and let me know ok the next thing we're going to see is the hover so let's play around with the hover you see look at this look at this hover that we have here let's compare it this hover of Iceland right here or is Iceland right here right here Iceland right here says continent Europe and then he has GDP per capita 38.9 K well maybe I don't want it to say that maybe I don't care I don't want it to say continent because it's obvious that the Blues are Europe so let's say I want to take continent out and let's say instead of GDP cap it up 38.9 K I wanted to have the whole number 38 thousand 978 so to do that you can play around with a hover by doing this go into hover data parameter the hover data parameter in the 3d scatter plot the key it's a dictionary the key is going to be the continent because that is the legend that you're trying to do that's something that you're trying to change inside the hover and you're gonna say false because you do not want to see it you're going to see it by default because you plotted it right here in color so if you want plotly not to show it then just say false GDP per capita is another thing you're going to see and another piece of data you're going to see in the hover by default because it's one of the accesses so it's going to show you so I wanted to show it so that's company okay I wanted to be true but I wanted to be in this type of format this is a string format and by doing this I'm saying show the whole number and only one digit after the dot so if I do that I get this Iceland you'll see GDP perk you see no continent there's nothing in continent and GDP capita will say thirty eight thousand nine hundred and seventy eight instead of thirty eight K all right okay so now that we learn how to create the 3d scatter plot and we learn how to style it now we're going to learn how to animate it I'm going to give you two types of animation the first animation is going to be years so if I click play you're going to see how over the years all these countries have been doing from 1990 all the way to 2010 and it's really cool because it gives you a nice understanding of how things have changed over time in this case you see that over time the countries both Africa and European countries have had higher GDP per capita and are going up in years women are in school so they're women are going more to school on average and countries are gaining more and more GDP per capita at least people are supposedly making more of an income supposedly to do this animation what you have to do is what's gonna leave this hover data out to do this animation you need to do this I'm gonna go years so I'm gonna animate from 2000 from 1990 all the way to 2010 to do that what you want to do is hashtag this out because I want I don't want to focus only 2010 and hashtag this in I want all these dates all these years 19 1995 2000 remember it jumps by years of 5 because in the data that's only what we have right now every 5 years that's what the the webpage gave us only this data plus maybe I don't want to do it every year maybe five years is enough so this is what I wanted the years and then so the animation frame is going to be here because that's going to be the play button it's gonna animate years and then you want to make sure to set the ranges we went over this ranges right here above the right range Z is how you can set the range you want to make sure to hash like this out so you don't have double ranges II don't have it twice and then set the ranges if you do not set the ranges it bounces bounces around different years have different ranges you want to make sure that you take the minimum year like the country with a minimum data point to the maximum data point and make sure that that's on the range for example let's look at the range C range D refers to years in school and average so if we look at the plot years in school we know that in 1990 we have anywhere from this looks to be the lowest the years in school years in school 0.47 years to the highest is eleven point five but that may change so we know now it's between zero to two eleven point five but that may change like in 2010 maybe the highest is somewhere around twelve point seven so if you don't set the range from the lowest to the highest it's going to be jumpy so make sure that we know if the highest is twelve point seven and the lowest is zero point five to set it from zero to fourteen justly it's easier to see or zero to fifteen okay so I did the same thing with the range X and I did the same thing with range Y alright so if you unhatched AG these oh my god my cat is really hungry is killing me I won't have to feed him so okay so if it hashtag these in you'll be able to create the animation frame but have police and fire truck the receipt is going crazy today and don't really don't forget to put these in there as well not only 2010 all right let's hashtag these out because we are going to learn how to do another animation hashtag this out and hashtag this back out as well alright so now you're left with this you left hi hover name template blog just the basic data we had from the very beginning Oh bring back 2010 you need 2010 because it needs some kind of year and there and not all the years all right now that you have all this I'm going to show you with all this data how to create this animation where if you click play you're gonna be able to automatically rotate the 3d plot and rotating the plot is very important we're going to cover it in fundamental number five okay so as I do this one it your I'm gonna show you I'm not even going the specifics of how to of the code because it's a lot of code and I'm not sure I understand every single thing in there but what I can tell you is that you can pretty much copy paste this code and probably use it for any other 3d plots that you create and plotly where you can have that plot a rotate on itself so make sure to use we're gonna create these objects which are going to be the eye of the camera the different angles right here and then we're going to go all the way down outside of the parentheses and we're gonna go we're gonna run half tag this just like this oh also this hash tag this out as well right down here all the way down here let's see if I did everything on this always perfect so hash tag all this out like that and by doing that this is the code if you just copy and paste you'll be able to use it in different plots as well to create this exact animation or if you click on play it will rotate on its own now it's rotating pretty fast if you want to rotate it slower what you could do is go into here into the dictionary duration the frame duration and not the transition duration but the frame duration and change that to let's say 250 or 500 250 is actually this speed right here look at this playing so this is 250 500 is obviously twice but this is really really great could is allow your audience to see the depth and the act each of all three accesses you can see the depth of the z-axis you can see the y axis the x axis and how they compare to each other and among themselves each continent okay one thing I forgot to tell you is is this right here this two lines of code actually belongs to this so this belongs to the Year animation if you want this is also the same thing where you can create you can control the duration so this is a speed of the speed of the frames changing so they can change every one second is 1000 milliseconds every half a second you can control the speed for that duration but again this only refers to this okay all right so let's go back to perfect alright so we learn how to create the 3d scatter plot we learn how to style it we'll learn how to animate it and I also gave you code that you can animate other 3d plots now the before we're going to learn how to share it to share it and you're going to create an HTML file just like this so you see this HTML file that I just created in the code when you have this HTML file you can send it to your friends or your colleagues and they can actually use it to open it on their browser I'm going to open it let's say using well you can open it anywhere you want Google or Microsoft if you open it you'll be able to see whichever figure you saved so I think I say this figure so if I share this this is something that if I if I sent you this sorry if I sent you this HTML file you'll be able to see this and and interact with it you'll be able to do this you'll be able to do that you can also share the play button I think I haven't tried this but you can share this exactly how do you do that you just go into here let's say this is the last code that we created for the animation rotation animation all you have to do since everything is saved under the figure just unhatched AG this you'll say fate right HTML and then call it whatever you want dot HTML and that is how you create that file and this if you want it to be in a different place this creates it wherever your project is in my project is inside where is it right now I can't see it by my project right now this code is inside this the 3ds scatter file so I automatically created in here I I moved it to additional but it will automatically ate it in here if you want to move it somewhere else just just declare what path you want this in and then just call it my 3d plot HTML you can call it whatever you want alright so we learn also how to share the last thing we're going to learn is how to when to use and not use 3d plots alright see here okay so the first thing you want to know is never use 3d plots if they do not help to convey more data this information was taken from the fundamentals of data validation by Klaus Wilk his book and you can see this image that is from his book where 3d pie chart doesn't necessarily help this is a 2d pie chart very clear this slice is 75% this slice is 25% but when you try and flip it and you add depth to it then it's not necessarily clear because this is 75% looks a lot bigger a lot bigger than this so this looks very small not like 25% even smaller so it's confusing if this didn't have the number in it here you also you see you have a depth to it I'm as a user might say well what does this depth mean this thickness here does it mean anything does it add more data it doesn't so when the data is not when the 3d plot is not adding data to the user or your audience then no need to use it ok this bar plot a bar chart 3d bar chart I took this image from Naomi Robbins from her Forbes article and it talks about how you do not want to use the 3d plot just for a duration or or so to embellish to make it look beautiful yes this pot really looks nice you see how it's pretty you have the different colors and it looks like different mountains but you're trying to plot a lot of data and it's it's hard to understand is tom tom is probably there's 40 Tom's in the north part of the city but what about Dick and Harry what what are they at 40 of a at 50 it's really hard to say where look at this green one it's really hard to say how many hair is he have on the east side of a certain City so it will be a lot easier with something like this right two dimensional bar chart that's on two columns and 3 rows and you can have a better understanding of how many Peters there on the north side or on the east side and so on and saw with all the other names so don't use a 3d plot if it doesn't convey more data than it's a 2d plot and don't use it if it just embellishes it makes it pretty but it's just confusing when when do you actually want to use a 3d plot you want to use a 3d plot for real life 3d objects so a mountain or topography is a good example of the real-life 3d object so they can look at this example this is a nice image from plotly web page and it shows how this mountain has a peak right here and there's a color that helps understand the different heights and levels and the different depths on the webpage you can actually interact and move it around the second reason you would use a 3d plot is when you have it in augmented reality or maybe in virtual reality because then the audience will be able to see the plot from different angles another good way to use a 3d plot is to make sure that if you use it just like we did with their scatter plot right here that you're able to you're allowing the user interactive capabilities so you're allowing the user or you yourself with a rotate button to rotate it around if you just give it like this it's hard to see the depth but if you play around with it if you move it for them it's a lot easier to see how the points and the data are related to each other okay so you can use it you do it this way or you can do it with a rotate button that we just created that you have the code for or also make sure that you have a hover so it allows them you see this black box it is created every time you move the mouse that comes by default with plotly so this is also a great tool to see to see depths if you want to learn more about what you should avoid in 3d plotting or what you should do in 3d plotting make sure to read on the web page that talks about the fundamentals of data visualization by Kyle's Wilkie and his book I'll add the link below the video I hope you liked this video if you did show your support click the like button share with your friends and most importantly subscribe below and turn on your notifications for this video so you can receive a new video every week about different cool and powerful data visualizations in python have a good week

Channel: Charming Data

Views: 7,196

Rating: 4.9235668 out of 5

Keywords: LEARN PLOTLY - 3D PLOT, 3D Plotting in Python: 3D Scatter Plot, 3d scatter plot, 3d graph series, 3-dimensional graph types is 3D scatter plots, The idea of 3D scatter plots, How to generate interactive 3d scatterplots, building a powerful 3D plot, 3 dimensional graphs, plotly dash, plotly, plotly express, 3d plot with animation, animated 3d plots, interactive 3d visualization, create 3d scatter plot, 3d, dash, 3d plot, three dimensional graph, 3-dimensional graphs, python dash

Id: -Mx89Jcn2E4

Length: 36min 56sec (2216 seconds)

Published: Wed May 27 2020