Hi, and welcome to this lecture, it's time to build yet another type of plot, this time adding a new feature to our application arrange tool. Let me show you what I mean. So on this chart right here, we have the price evolution of Bitcoin over a period of one month, and we're going to discuss the details about this plot in a moment. Right underneath this figure, notice we have a separate figure, which is the actual range tool I was talking about. Now if you look carefully, you can notice that the line illustrated in the first larger picture is the same as the portion highlighted in the gray on the second smaller figure. This gray segment right here is called a range.

Moreover, you can increase or decrease the size of this range by simply dragging one or both of its edges. So like this or like this, as you drag one out Notice that the figure above changes accordingly. Critical, right? This range functionality enables you to basically zoom in and out of your plot and analyze the chart in greater detail for a customized experience. Another thing you can do with this range apart from moving its edges is to simply click on the highlighted area, notice this little hand cursor and just move the entire range according to your needs. This way, you can use this zoomed in view to go through the entire plot.

Great. Now it's time to see the code and I'm going to paste it into a new Jupiter notebook. So let me create this notebook. And I'm going to call it range. And now let's paste in the code. You can find this code in the lecture following this video as well.

Now, unlike in the previous applications in this section, where we use lists, Excel files, CSV files, Even bouquets on sample data. In this lecture in this application, we are going to read and load the necessary data right from a website using, of course, the read HTML method from within the pandas module. The website is called coin market cap.com. And since we are interested in plotting the price of bitcoin, I'm going to click on Bitcoin right here, and then I'm going to select historical data. Scroll down a bit. Further more, I will select a certain time interval by clicking on custom range right here.

And then I'm going to select let's say, February 20 of 2019. Up to march 20 of the same year, hit Apply. At this point, the site generates this table right here showing the date open, highest, lowest and closing prices for that day, as well as the daily volume. The market capitalization. Now let's open up the Python interpreter and load this table into a panda's data frame using the read HTML method, and the link to this webpage, so I'm going to simply copy this and paste it into the Python interpreter import import pandas. Now let's see our data frame df.

Notice that the result is actually a list of two elements, two tables that have been identified on the webpage we provided. So looking at the page, once again, notice that we have another table down below on the page. That's why we got two elements inside the list. Now of course, we are interested only in the first table. So we should specify this when creating the data frame by simply adding index zero to reference the first element of the list. Now before doing this, let's look at this table once again, and notice that the table starts by showing the data for the most recent date March 20.

However, in order to create our bitcoin price evolution plot, we will need our data set to start with the price recorded on February 20, and end with the price Bitcoin had on March 20. So we need to consider the normal timeline, not a reversed one. That's why we need to reverse the current order of elements in this table. And what better way to do that than to simply use a step of minus one. So let's see this in action. I'm going to load this data once again.

Sorry. So I said that we need the first table that would be the one at index zero in that list. And also we want the data to be reversed. So we have colon minus one. Okay, enter. Now let's see the F once again.

This time we got only the data frame that we need. And we've also reversed its rows to reflect on normal timeline from February 20, up to march 20. Great. Now let's get back to the code inside the Jupiter notebook. While importing the necessary modules up here, notice that the range tool has been imported as well from the bulky library. We are loading the table in a panda's data frame using the syntax we've just discussed.

And then we are converting the data column in our table right here to the proper date time format to use further into a NumPy array. So let's try this in the Python interpreter as well and see what does the date column look like and how to convert it to another format. So for this, I'm going to use df of date, the name of the column. Okay, now we can convert this format right here. To a NumPy friendly format using the to date time method from within the pandas module. So to do that, df dot date equals pandas.to date time of, and in between parentheses we have df dot date, because we are converting the dates in that column, enter.

Now let's see df. Once again, looking at our data frame. Now, notice that the date format has been changed, and also that the change has been made in place using this line of code right here. This means that the changes have been permanently saved to our data frame. On the next line of code right here, we are converting the date column from our data frame to a NumPy array by simply using the to NumPy method applied on the data frame column itself. We're also specifying the D type the type of array Which is the time 64 as you've already seen in the previous lecture, with this additional D in between square brackets, which stands for days, the smallest unit that we need to express the date in, actually, let's run this line in the Python interpreter as well, so you can see what I mean.

So I'm going to copy and paste this right here. Now let's see dates. So this is the NumPy array we are looking for. As a bonus, let me show you how to change the daytime unit when using the D type argument in order to also include smaller units of time for each date. So let's say that we have, instead of capital D, we have s for seconds if we want to have seconds displayed as well, dates, we have lowercase M for minutes. Let's say this again.

So notice that the seconds we had up here have disappeared. You can also specify hours, lowercase h dates. And as we've seen already, we have capital D for days. We also have capital M for showing only the month. So dates. And of course, as you might have guessed already, we have capital Y for only displaying the year.

Okay, back to the code now. Next we are creating the column data source object as we did earlier in this section to build a mapping between the date inside the NumPy array and the closing prices in the close column of the data frame. This column data source object is going to be later passed to the source argument when drawing the line as you can see, down here, next we are building the figure object for the first figure. The one on the top we are passing Multiple arguments that we've already discussed and tested in previous video in this section of the course. So I won't do it again here. However, the only thing I should mention is the use of the x range argument.

You can see this argument here, its role is to define the default range displayed when generating the figure. So in this case, I chose a random time range from this array. Let's see this in the interpreter. So I have dates of 12, up to date of 20. Sorry, my mistake, I should first set this back to these. And now let's see these are dates of 12 against and dates of 20.

Okay, so our default plot should display the evolution of the closing price of bitcoin between March 4 and march 12. And if you look carefully at the x axis of our plot, sorry, let's go generated once again. So if you look very carefully at the x axis, you can see that these are indeed the default limits of this range. So we have March 4, up here in the top left corner, up to march 12 in the top right corner along the x axis. Okay, back to the code. Next, we are simply drawing the line based on the data we've already generated above.

And we're also setting a label for the y axis, the one showing the closing prices of Bitcoin. Moving further, we have to also create the second figure the range to itself. For this, we need to use the figure function once again, and provide various arguments to customize the look and feel of this figure. We've already discussed these arguments in previous examples, so I won't waste your time providing the same explanations. Once again, you are free to test and play around with these arguments and their values. To change the way your figure is displayed.

Next we are creating the range functionality itself using the range tool class from within the bulky library. We are also passing a single argument here, which is x range. And this argument is basically referencing the same x range value that we used for the first figure up here. Actually, you should notice that we are setting the x range argument to be that x range so that the range highlighted in gray in the bottom figure will be the same as the one shown in the top figure. Okay, on the next several lines, we are customizing various styling aspects like the field color or the grid line color, and we are also using the line method as you can see down here to draw the same line once again, this time on the bottom figure as you can see on the chart as well. Next, we are adding the arranged All that we have created to the second figure in this line over here, referencing the Select variable.

And then we are also specifying that this is a so called active multi gesture tool, meaning you have multiple actions available. In this case, we can both drag the edges of this range and also Select and Move the entire range as shown earlier. Finally, as always, we are configuring the output HTML file and then showing the final result the two figures using the column function which tells our application to display the two figures as a column, one on top of the other. The shell function takes the result of the column function as an argument and generates the final result. So this is our final result. This is our bitcoin price chart and our range tool.

I hope you enjoyed watching this video and I'll see you in the next lecture.