시작하기무료로 시작하기

Select으로 선 그래프 바꾸기

마지막 과제로, 헤지 펀드에서 Electronic Arts의 주가 성과를 분석할 수 있는 시각화를 만들어 달라고 요청했습니다.

여러 지표를 전환할 수 있도록 Select 위젯이 적합하다고 판단했어요. 전환할 지표는 close, market_cap, volume입니다.

stocks 데이터셋은 EA로 필터링되어 있습니다. 각 지표에 대한 세 개의 figure(close, market_cap, volume)와 글리프 세트(close_line, market_cap_line, volume)가 미리 생성되어 로드되어 있어요.

이 연습은 강의의 일부입니다

Bokeh로 배우는 인터랙티브 데이터 시각화

강의 보기

연습 안내

  • Select()를 호출해 menu를 생성하세요. 이때 options 인수에는 "Close", "Market Cap", "Volume"(이 순서)로 이루어진 리스트를 전달하고, value는 "Close", title은 "Metric"으로 설정하세요.
  • 위젯의 "value"를 callback에 연결하도록 적절한 menu 메서드를 호출하세요.
  • show 안에서 layout을 호출해, 위젯을 close, market_cap, volume figure 위에 배치해 표시하세요.

실습형 인터랙티브 연습

이 예제를 이 샘플 코드를 완성하여 풀어보세요.

# Create menu
menu = ____
callback = CustomJS(args=dict(plot_one=close, plot_two=market_cap, plot_three=volume, line_1=close_line, line_2=market_cap_line, line_3=volume_line), code="""
plot_one.visible = true
plot_two.visible = true
plot_three.visible = true
line_1.visible = true
line_2.visible = true
line_3.visible = true
if (this.value == "Close") {plot_two.visible = false
                            plot_three.visible = false
                            line_2.visible = false
                            line_3.visible = false}
    else {plot_one.visible = false
          line_1.visible = false} 
if (this.value == "Market Cap") {plot_one.visible = false
                                 plot_three.visible = false
                                 line_1.visible = false
                                 line_3.visible = false} 
    else {plot_two.visible = false
          line_2.visible = false}
if (this.value == "Volume") {plot_one.visible = false
                             plot_two.visible = false
                             line_1.visible = false
                             line_2.visible = false}
    else {plot_three.visible = false
          line_3.visible = false}
""")

# Set up the interaction
____

# Display the layout
output_file(filename="stock_metrics.html")
____
코드 편집 및 실행