<jupyter_start><jupyter_text>Bokeh Userguidehttps://docs.bokeh.org/en/latest/docs/user_guide.html  Quickstart보캡(Bokeh)은 웹프라우저를 통해 구현하기 위한 동적인 시각화 라이브러리입니다. 간단하게 동적인 데이터 시각화를 가능하게 하면서 동시에 강력한 시각화 툴로서 기능하기 위해서 보캡은 사용자에게 두가지 인터페이스를 제공합니다. * bokeh.models: 낮은 수준의 인터페이스로 개발자가 보다 자신의 의도를 반영해 동적그래프를 완성시킬 수 있게 합니다. * bokeh.plotting: 높은 수순의 인터페이스로 보다 손쉽게 동적그래프를 완성키실 수 있게 합니다.  Getting Started _ bokeh.plotting bokeh.plotting의 사용 순서1. 파이썬의 list, 넘파이의 array, 판다스의 series 형태의 데이터을 준비한다.2. bokeh의 결과물 저장 코드를 작성한다.(output_file() 혹은 output_notebook()을 사용한다)3. 도화지 객체(figure)를 생성하고 세부 옵션을 설정해준다.4. 그래프 메소드(예시. line)를 작성하고 세부 옵션을 설정해준다.5. show()나 save() 메소드를 사용해서 결과물을 처리한다.보캡의 첫 시작으로 간단한 선형 그래프(line plot)를 그려봅시다. (아래 코드를 쥬피터노트북에서 돌린다면 새로운 페이지에 그래프가 나타날 것입니다.)   jupyter notebook에서 그래프 출력하기* output_file("파일명.html")을 입력해주면 결과값이 html 파일형태로 저장됨과 동시에 웹브라우저의 새로운 탭이 열리면서 해당 html 파일(결과값)이 출력된다. 우리는 현재 bokeh에서 그래프를 그리는 주요 기능을 연습하고 있기에 쥬피터 노트북 상에서 그래프가 표현되도록 하자.   (이를 위해 각 코드에 output_file() 코드가 있다면 이를 주석처리해서 남겨두었다.)* 아래 코드는 bokeh의 그래프를 jupyter notebook 상에 표현하는 방법이다.(링크: https://stackoverflow.com/questions/51512907/how-to-stop-bokeh-from-opening-a-new-tab-in-jupyter-notebook)  이렇게 설정을 한번 해주면 각 그래프를 그릴때 따로 저장설정을 안해줘도 바로 jupyter notebook 상에 표현된다.<jupyter_code>import bokeh.io

# bokeh 결과값의 표현 방법을 reset해준다.
bokeh.io.reset_output()
# bokeh 결과값의 표현 방법을 
bokeh.io.output_notebook()
# 보캡에서 간단하게 그래프를 그리는 인터페이스인 bokeh.plotting에서 원하는 모듈을 가져옵시다.
# figure : matplotlib에서와 마찬가지로 도화지 역할을 합니다.
# output_file : 최종 결과물을 어떤 이름, 어떤 형식으로 저장할 것인지 설정합니다.
# show : 그림을 보여주는 역할을 합니다.
from bokeh.plotting import figure, output_file, show


# 데이터를 준비합니다. 
x = [1, 2, 3, 4, 5]
y = [6, 7, 2, 4, 5]

# # 시각화 결과물을 lines라는 이름의 html 문서로 저장함을 선언합니다.
# output_file("lines.html")

# figure를 통해서는 도화지의 옵션을 설정할 수 있습니다.
# title는 도화지의 제목, x_axis_label는 x축에 어떤 값들이 오는지, y_axis_label은 y축에 어떤 값들이 오는지
p = figure(title="simple line example", x_axis_label='x', y_axis_label='y')

# 선형 그래프(line)을 그려줍니다.figure을 객체로하고 line을 메소드로 해서 작성합니다. 
p.line(x, y, legend="Temp.", line_width=2)

# show로 해당 그래프를 봅니다. 
show(p)<jupyter_output><empty_output><jupyter_text>다양한 그래프를 하나의 figure에 표현하기 _ bokeh.plotting<jupyter_code>from bokeh.plotting import figure, output_file, show

# 그래프로 표현할 데이터를 준비한다.
x = [0.1, 0.5, 1.0, 1.5, 2.0, 2.5, 3.0]
y0 = [i**2 for i in x]
y1 = [10**i for i in x]
y2 = [10**(i**2) for i in x]

# # 결과값을 저장할 형태를 설정한다.(html 문서로 저장)
# output_file("log_lines.html")

# figure를 만들고 설정해준다.

# tools = 해당 그래프의 기능을 설정해준다.(아래 세부 설명)
## >>> pan : 그래프를 움직일 수 있다, box_zoom : 그래프를 줌인 할 수 있다 
## >>> reset : 그래프를 원상태로 되돌릴 수 있다. save : 그래프를 png 파일로 저장할 수 있다.

# y_axis_type = y축의 값으로 받는 데이터를 어떤 형태로 가공해서 표현할지 정한다. 
## >>> y_axis_type = "log"의 경우 y축 인자로 받는 값들에 대해 log를 취해준다.

# y_range = y축의 값의 범위를 설정해준다. 
## x_axis_label(y_axis_label) = x축, y축의 이름을 붙여준다.
p = figure(
   tools="pan,box_zoom,reset,save",
   y_axis_type="log", y_range=[0.001, 10**11], title="log axis example",
   x_axis_label='sections', y_axis_label='particles'
)


# 기본색으로 선을 만들고 해당 선은 범례에 y=x라는 이름으로 들어간다.
p.line(x, x, legend="y=x")

# x,x 좌표에 기본색으로 원을 그리고 그 안을 white로 채운다.
## circle메소드에 fill_color로 원 안의 색을 채울 수 있다.
p.circle(x, x, legend="y=x", fill_color="white", size=8)

# line 메소드의 line_width 옵션으로 해당 그래프의 굵기를 정할 수 있다.
p.line(x, y0, legend="y=x^2", line_width=3)

# line 메소드의 line_color 옵션으로 해당 그래프의 색상을 정할 수 있다. 
p.line(x, y1, legend="y=10^x", line_color="red")

# circle 메소드의 line_color 옵션으로 원 테두리 선의 색상을 정할 수 있다.
p.circle(x, y1, legend="y=10^x", fill_color="red", line_color="red", size=6)

# line 메소드의 line_dash 옵션은 해당 값(픽셀)을 간격으로 그래프를 표현한다.
p.line(x, y2, legend="y=10^x^2", line_color="orange", line_dash="4 4")


# 결과값을 출력한다.
show(p)<jupyter_output><empty_output><jupyter_text>bokeh과 다른 것들의 관계 github과 bokehbokeh은 github에서 제공하는 notebook preview로 미리보기가 제공되지 않는다. 그 이유는 bokeh은 자바스크립트로 작성되어있는데 github은 미리보기에서 모든 자바스크립트코드를 지워버리기 때문이다. R과 bokeh, Scala와 bokehbokeh은 R과 Scalar에서도 작동한다. bokeh의 sample data 다운로드bokeh은 그래프를 그려볼 수 있는 샘플데이터를 제공하는데, window command line이나 window bash에서 아래의 명령어로 다운로드 가능하다.             bokeh sampledata       bokeh의 주요 개념들1. plot   plot는 figure에 그려지는 것들을 통칭하는 용어다.   아래 후술하는 glyphs와 guide, annotation, range 등등은   모두 plot를 구성하는 요소들이다.2. glyphs    glyphs는 figure에 그려지는 도형(선이나 원)을 의미한다.3. guides and annotations   guide는 figure 정보를 도와주는 도구로 grid(격자)와    bands(묶음)등을 포괄한다. annotation은 그래프의 x,y축의    라벨 그리고 타이틀을 의미한다.4. ranges   ranges는 plot의 x축,y축에 표기되는 숫자의 범위를 의미한다.   구체적으로 figure 객체의 x_range, y_range 옵션을 사용해    설정된다. 값은 리스트나 튜플 형태로 입력되며 (범위시작,   범위 끝) 혹은 [범위시작 , 범위끝]으로 표현된다.5. resources   resources는 결과물을 어떤 형태로 출력할 것인지를 정하는   것으로 보통 output_file()이 사용된다. 하지만 출력단에서    바로 확인하고 싶다면 output_file()의 옵션으로 mode =    "inline"을 사용하자.  아래 코드 실습을 위한 numpy 기능 예습_np.random.random* np.random.random(N): 0부터 1사이의 랜덤실수 N개를 인자로하는 array를 반환한다.* array * K = array의 각 인자에 K를 곱한 결과를 출력한다.<jupyter_code>import numpy as np
np.random.random(2)
k = np.random.random(size=10) * 100<jupyter_output><empty_output><jupyter_text>실습: 색깔과 크기를 벡터화한 그래프를 그려보자<jupyter_code>import numpy as np

from bokeh.plotting import figure, output_file, show


# 데이터를 구성한다.
N = 4000
# np.random.random(size = 숫자)
## >> np.random.random(size = 숫자)는 해당 숫자에 해당하는 사이즈의 array를 반환한다. 
## >> (np.random.random(N)은 0이상 1이하의 숫자 N개를 랜덤으로 반환한다.)
## >> numpy의 array에 단순곱을 하면 각 요소별로 곱셈을 하게 된다.(내적곱이 아니다)
x = np.random.random(size=N) * 100
y = np.random.random(size=N) * 100
radii = np.random.random(size=N) * 1.5

# color의 리스트를 만들어준다.
## >> color 코드는 16진수(hex)여야 한다. 따라서 16진수 형태로 컬러코드를 만들어준다. 
## >> %02x는 16진수 표현형태를 의미한다.
## >> 150을 16진수로 바꿔주면 96이된다.
colors = [
    "#%02x%02x%02x" % (int(r), int(g), 150) for r, g in zip(50+2*x, 30+2*y)
]


# # html 파일로 결과값을 받고 cdn 모드를 사용하여 해당 파일을 저장한다.
# output_file("color_scatter.html", title="color_scatter.py example", mode="cdn")

# 사용할 tool들을 정의해준다.(정의된 순서로 기능이 나열되는 것은 아니다. 나열순서는 따로 정해져 있음) 
# crosshair의 경우 십자선의 커서를 제공하는 기능이다.
# pan의 경우 그래프를 이동하는 기능이다. 
# wheel_zoom의 경우 스크롤을 이용해서 확대를 하는 기능이다. 
# box_zoom의 경우 박스를 선택해 확대를 하는 기능이다.
# box_select의 경우 박스를 선택하는 기능이다(선택이외의 영역만 색 표시)
# lasso_select의 경우 원하는 형태의 도형으로 영역을 선택하는 기능이다.
TOOLS = "crosshair,pan,wheel_zoom,box_zoom,reset,box_select,lasso_select"



# 도화지(figure)를 셋팅한다. 위에서 정의한 tool을 불러오고 x_range와 y_range 옵션으로 x,y축의 범위를 설정해준다.
p = figure(tools=TOOLS, x_range=(0, 100), y_range=(0, 100))

# add a circle renderer with vectorized colors and sizes
# x와 y리스트를 이용해서 원을 그려준다. radius(반지름)도 값을 준다. 
# fill_colord값으로 앞서 만든 color들의 리스트를 입력해준다. 
# fill_alpha는 색의 선명도에 관련된 옵션으로 1의 경우 해당 색을 온전히 표현하는 것이고 1 이하는 투명도를 주는 것이다.
# line_color는 원의 테두리 옵션으로 None을 주면 원이 테두리 없이 표현된다. 
p.circle(x, y, radius=radii, fill_color=colors, fill_alpha=0.6, line_color=None)

# show the results
show(p)<jupyter_output><empty_output><jupyter_text>여러 그래프에 걸쳐서 Tool의 기능을 연동시키기 (panning, brushing)* panning: 도화지를 드래그해서 도화지 내에서 시각이 움직이는 기능이다.* brushing: 위의 두 기능은 보통 하나의 그래프에서 작동하지만 여러개의 그래프를 동시에 그려서 동시에 여러개의 그래프에서 작동시키는 것또한 가능하다.  일단 여러개의 그래프에서 panning을 구현하는 코드를 보자<jupyter_code>import numpy as np

from bokeh.layouts import gridplot
from bokeh.plotting import figure, output_file, show

# 표현할 데이터를 준비하자
N = 100
## np.linspace(출발, 끝, 나눌 덩어리 수) : 출발지점부터 끝 지점까지 같은 간격으로 나눌덩어리수 만큼 쪼갠 리스트를 의미한다.
x = np.linspace(0, 4*np.pi, N)
y0 = np.sin(x)
y1 = np.cos(x)
y2 = np.sin(x) + np.cos(x)

# # 결과물 출력형태를 설정한다.
# output_file("linked_panning.html")

# 도화지를 새로 세팅해준다. >> 그래프가 3개라면 도화지 역시 3개를 세팅해야한다
s1 = figure(width=250, plot_height=250, title=None)
# circle r그래프를 그려준다. 여기서 alpha는 원의 투명도를 의미한다.
s1.circle(x, y0, size=10, color="navy", alpha= 0.1)

#  두번째 도화지를 만들고 range는 첫번째 도화지의 값을 받는다.
s2 = figure(width=250, height=250, x_range=s1.x_range, y_range=s1.y_range, title=None)
s2.triangle(x, y1, size=10, color="firebrick", alpha=0.5)

# 세번째 도화지와 그래프를 그려준다.
s3 = figure(width=250, height=250, x_range=s1.x_range, title=None)
s3.square(x, y2, size=10, color="olive", alpha=0.5)

# 3개의 그래프를 gridplot을 이용해서 묶어준다.
# >> gridplot()는 figure들을 하나로 묶어주는 객체이다.
# >> 이때 인자는 그래프들의 리스트를 또 한번 중괄호해서 받는다.
# 옵션값으로 toolbar_location의 값을 None으로 받아서 tool 섹션을 숨겨준다.
p = gridplot([[s1, s2, s3]], toolbar_location=None)

# show the results
show(p)<jupyter_output><empty_output><jupyter_text>여러 그래프에 걸쳐서 brushing을 사용해보자> 여러그래프에서의 brushing이란 하나의 그래프에서의 어떤 영역을 선택하면 다른 그래프에서 해당 영역이 선택되는 것을 의미한다.> 이를 위해서는 두 그래프(plot)이 공통 요소를 포함하고 있어야 한다. 예를 들어서 두 그래프의 x축의 값(데이터)이 같아야 한다. 이 경우 한 그래프에서의 특정 영역을 선택하면 해당 영역의 x값들에 해당하는 다른 그래프의 영역을 보여주는 형식이다.<jupyter_code>import numpy as np
from bokeh.plotting import *
from bokeh.models import ColumnDataSource

# 데이터 셋을 준비한다.
N = 300
x = np.linspace(0, 4*np.pi, N)
y0 = np.sin(x)
y1 = np.cos(x)

# # 저장형태를 html 형식으로 설정한다.
# output_file("linked_brushing.html")

# plot에 들어갈 총 데이터들을 dictionary로 만들어서 ColumnDataSource 객체 형성을 위해 인자로 넣어준다.
# 이 ColumnDataSource 객체는 이후 그래프에 source 옵션의 값으로 들어가서
# 이 그래프의 어떤 요소가 다른 그래프의 어떤 요소와 같은지 파악하는데 사용된다.
source = ColumnDataSource(data=dict(x=x, y0=y0, y1=y1))

TOOLS = "pan,wheel_zoom,box_zoom,reset,save,box_select,lasso_select"

# 도화지(figure)를 만들어주고 그림(renderer)을 그려준다
left = figure(tools=TOOLS, width=350, height=350, title=None)
left.circle('x', 'y0', source=source)

# 도화지를 생성하고 그림을 그려준다.
right = figure(tools=TOOLS, width=350, height=350, title=None)
right.circle('x', 'y1', source=source)

# 두 그래프(두개의 도화지)를 하나로 묶어준다.(gridplot()를 이용)
p = gridplot([[left, right]])

# show the results
show(p)
# 아래 코드를 실행시키려면 stocks 데이터가 필요하다

import bokeh.sampledata

bokeh.sampledata.download("stocks")
import numpy as np

from bokeh.plotting import figure, output_file, show
from bokeh.sampledata.stocks import AAPL

# Sampledata에 있는 AAPL 데이터는 dict 형태의 데이터로 
# ['date', 'open', 'high', 'low', 'close', 'volume', 'adj_close']를 키로 가지고 있다.
# print(type(AAPL))
# print(AAPL.keys())

# 샘플데이터에서 필요한 데이터만 뽑아서 변수로 지정해준다.
aapl = np.array(AAPL['adj_close'])
aapl_dates = np.array(AAPL['date'], dtype=np.datetime64)


window_size = 30
# np.ones(K): K개의 1로 이루어진 array를 생성한다.
# np.one(K)/float(window_size): numpy의 array에 그냥 '*' 혹은 '/'를 사용하면 각 요소에 곱하기 혹은 나누기가 적용된다.
window = np.ones(window_size)/float(window_size)
# np.convolve는 합성곱을 해주는 것이다. (array1, array2, 합성곱모드)를 인자로 받는다.
aapl_avg = np.convolve(aapl, window, 'same')

# # 저장형태를 설정한다.
# output_file("stocks.html", title="stocks.py example")

# 새로운 도화지를 만들어준다. x축의 값의 유형(type)을 설정해준다(x_axis_type를 이용한다)
p = figure(plot_width=800, plot_height=350, x_axis_type="datetime")

# 도화지 위에 그래프를 그려준다. 
p.circle(aapl_dates, aapl, size=4, color='darkgrey', alpha=0.2, legend='close')
p.line(aapl_dates, aapl_avg, color='navy', legend='avg')


p.title.text = "AAPL One-Month Average"
# <figure>.legend.location으로 범례의 위치를 지정할 수 있으며, 값으로 숫자가 아닌 문자열을 받는다. 
p.legend.location = "top_left"
# <figure>.grid.grid_line_alpha는 도화지 상의 grid(격자)의 투명도를 의미한다. 0부터 1사이의 값으로 설정할 수 있다. 
p.grid.grid_line_alpha = 1
p.xaxis.axis_label = 'Date'
p.yaxis.axis_label = 'Price'
# <figure>ygrid.band_fill_color는 도화지 위의 격자 가로줄에 색상을 넣어주는 옵션이다.
p.ygrid.band_fill_color = "olive"
p.ygrid.band_fill_alpha = 0.1

# show the results
show(p)<jupyter_output><empty_output>
{'fraction_non_alphanumeric': 0.11767935578330893, 'fraction_numerical': 0.02223645680819912, 'mean_word_length': 4.2695274831243974, 'pattern_counts': {'":': 0, '<': 28, '<?xml version=': 0, '>': 57, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 1, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'chain_length': '6', 'dir': 'jupyter-structured-clean-dedup', 'id': '146922', 'license': 'MIT', 'n_tokens_mistral': 7205, 'n_tokens_neox': 8795, 'n_words': 1430, 'path': 'Bokeh in Korean/01. Bokeh User Guide [Quickstart].ipynb', 'repo_name': 'itsmehank/til', 'size': '10928'}