<jupyter_start><jupyter_text>Activity: Create interactive temporal visualization  In this activity we will combine all the knowledge of time-series manipulation and range-slider learned inprevious exercises. Interactive slider is commnly used in time-series visualization **import the required libraries**<jupyter_code>from bokeh.io import show
from bokeh.layouts import column
from bokeh.models import ColumnDataSource, RangeTool
from bokeh.plotting import figure
from bokeh.io import push_notebook, show, output_notebook
from pathlib import Path
import pandas as pd
import numpy as np
from ipywidgets import interact
%matplotlib inline<jupyter_output><empty_output><jupyter_text>**setup the output to jupyter notebook**<jupyter_code>DATA_PATH = Path("../datasets/chap5_data/")
output_notebook()<jupyter_output><empty_output><jupyter_text>**create a dataframe `microsoft_df` and parse the date column**<jupyter_code>microsoft_df = pd.read_csv(DATA_PATH / "microsoft_stock.csv", parse_dates=['date'])
microsoft_df.head()<jupyter_output><empty_output><jupyter_text>**Set the index as date**<jupyter_code>microsoft_df.index = microsoft_df.date<jupyter_output><empty_output><jupyter_text>**create `date` numpy array and `source` as ColumnDataSource. We will use these to draw line plot.**<jupyter_code>dates = np.array(microsoft_df['date'], dtype=np.datetime64)
source = ColumnDataSource(data=dict(date=dates, high=microsoft_df['high']))<jupyter_output><empty_output><jupyter_text>**initialize the figure and drwa the line**<jupyter_code>p = figure(title="Time Series Stock Data for Microsoft", plot_height=300, plot_width=800,
           x_range=(dates[1000], dates[1800]), x_axis_location="above", x_axis_type="datetime", 
           tools="xpan", toolbar_location=None,
           background_fill_color="#ffefef")

p.yaxis.axis_label = 'High Price for Day'
r = p.line('date', 'high', source=source)<jupyter_output><empty_output><jupyter_text>**Create range slider using `RangeTool`**<jupyter_code>select = figure(title="Drag To See More Data",plot_width=800, y_range=p.y_range,
                x_axis_type="datetime", y_axis_type=None, plot_height=130,
                tools="", background_fill_color="#ffefef", toolbar_location=None,)

range_tool = RangeTool(x_range=p.x_range)
range_tool.overlay.fill_color = "green"
range_tool.overlay.fill_alpha = 0.2<jupyter_output><empty_output><jupyter_text>**Write a custom update function which aggregate data by `month`, `year` and `day`**<jupyter_code>def update(f):
    if   f == "day":
        r.data_source.data = dict({
            'date': microsoft_df.index,
            'high': microsoft_df.high
        })
    elif f == "month":
        month = microsoft_df.groupby(pd.Grouper(freq="M"))[['high']].mean()
        r.data_source.data = dict({
            'date': month.index,
            'high': month.high
        })
    elif f == "year":
        year = microsoft_df.groupby(pd.Grouper(freq="Y"))[['high']].mean()
        r.data_source.data = dict({
            'date': year.index,
            'high': year.high
        })
    
    push_notebook()
    
select.line('date', 'high', source=source)
select.ygrid.grid_line_color = None
select.add_tools(range_tool)
select.toolbar.active_multi = range_tool
show(column(p, select), notebook_handle=True)<jupyter_output><empty_output><jupyter_text>**Plot both range slider and aggregator on figure**<jupyter_code>select.line('date', 'high', source=source)
select.ygrid.grid_line_color = None
select.add_tools(range_tool)
select.toolbar.active_multi = range_tool
show(column(p, select), notebook_handle=True)
interact(update, f=["day", "month", "year"])<jupyter_output><empty_output>
StarcoderdataJupyterStructuredCleanDedup