Plotlyを使ってインタラクティブなグラフを描いてみたら、思っていた以上だった。

# はじめに

この記事は[jupyter notebook Advent Calender 2016](http://qiita.com/advent-calendar/2016/jupyter)の12/18分の投稿です。

なお、著者はJpyter notebook初心者です。悪しからず。

今回紹介するのは[plotly](https://plot.ly/)をjupyter notebook上で利用するための簡単な手順についてです。  

plotlyはデータ可視化プラットホームです。さまざまなグラフをオンラインで編集したり、共有したりすることが可能です。Matplotlibよりお洒落なグラフが書けます。  
オンラインと言いましたが、もちろん、ローカルで使用することも可能です。（昔はできなかったらしい！）  
基本的にはどの機能も無料で利用できます。  
ちなみにカナダのモントリオールに開発している企業があるそうです。  
  
RythonやRをはじめMatlab,JavaScript,Ruby,Go...などの言語、ArduinoやRasberryPiといったハードウェアと連携した利用も可能です。 
  
3Dプロットなどの一部の機能は過去、有料だったようですが昨年末ごろオープンソース化されたことをきっかけにこれらも無料となりました。やったね。
  
素人ながらすごい便利だと感じたものの、日本では（？）あまり流行っていないようです。  
  
とここまで書いておいてなんですが、似たようなサービスである[Bokeh](http://bokeh.pydata.org/en/latest/)について、すでにおとといのAdvent Calenderでdrillerさんがしっかりとまとめられていました。
  
[ipywidgetsとBokeh使ってインタラクティブな可視化をする](http://qiita.com/driller/items/0730325bf5c1cd689979)
  
  
余談ですが、[Anaconda](https://www.continuum.io/downloads)で有名なContinuum Analysis社が主にBokehを開発している、一方で最近話題の[Exploratory](https://exploratory.io/)というRをベースとしたソフトウェアの影響もあって、  
  
+ Bokeh -> Python
+ Plotly -> R
  
の構図ができありつつあるようです。（違ったらすいません。）

# まずは準備

①ターミナルまたはコマンドプロントで    
`$ pip install plotly`  
あるいはanacondaを導入している場合は  
`$ conda install plotly`  
を実行して、PlotlyのPythonパッケージをインストールします。  
すでにインストールされている場合は適宜アップグレードします。  
  
②plotlyのサイトからログインします。  
アカウントを持っていない場合はサインアップします。  
2016年12月時点ではfacebook,Google+,Twitter,GitHubでのサインアップが可能です。  

③無事サインアップ後、accounts@plot.lyから確認のメールが来るので確認します。  

④ユーザーページのSettingから自身のAPIキーを確認します。  

⑤必要であればcredentials file(認証用ファイル)を設定します。  
  
Jupyter notebook上で  
`plotly.tools.set_credentials_file(username="xxxxxxx", api_key="yyyyyyy"`  
を実行します。  
  
（これをせずにPlotlyを実行するたびに  
`py = plotly.plotly(username='<your-username>', key='<your-api-key>')`  
のように記述しても構いません。）
  
これで準備は終了です。

# とりあえず使ってみる


```python
import plotly
plotly.__version__
```




 `>>> 1.12.9`   




```python
import plotly.plotly as py
import plotly.graph_objs as go
from plotly.tools import FigureFactory as FF

import pandas as pd
import numpy as np
import string
```


```python
x1 = np.random.randn(100)-2  
x2 = np.random.randn(100)  
x3 = np.random.randn(100)+2  
hist_data = [x1, x2, x3]

group_labels = ['Shibuya', 'Shinagawa', 'Shinjuku']
colors = ['rgb(50, 0, 200)', 'rgb(200, 50, 0)','rgb(0, 200, 50)']

fig = FF.create_distplot(hist_data, group_labels,colors=colors, bin_size=.1)

py.iplot(fig, filename='Compare with 3 city', validate=False)
```

https://plot.ly/~Tearon/32

![fig1.PNG](https://qiita-image-store.s3.amazonaws.com/0/135725/7f7e9198-c43d-1935-7c57-bc7f58d7493b.png)



<iframe id="igraph" scrolling="no" style="border:none;" seamless="seamless" src="https://plot.ly/~Tearon/32.embed" height="525px" width="100%"></iframe>




```python
N = 100
y_vals = {}
for letter in list(string.ascii_uppercase):
     y_vals[letter] = np.random.randn(N)+(3*np.random.randn())
        
df = pd.DataFrame(y_vals)

data = []

for col in df.columns:
    data.append(  go.Box( y=df[col], name=col, showlegend=False ) )

data.append( go.Scatter( x = df.columns, y = df.mean(), mode='lines', name='mean line' ) )

py.iplot(data, filename='pandas-box-plot', validate=False)
```




<iframe id="igraph" scrolling="no" style="border:none;" seamless="seamless" src="https://plot.ly/~Tearon/30.embed" height="525px" width="100%"></iframe>


https://plot.ly/~Tearon/30

![fig2.PNG](https://qiita-image-store.s3.amazonaws.com/0/135725/10dcf6a1-1ab7-a08f-a773-da63640a0239.png)


[公式のチートシート](https://images.plot.ly/plotly-documentation/images/python_cheat_sheet.pdf)があるので簡単な文法はここで確認できます。

# まとめ

いかがだったでしょうか。今回はすごい単純なグラフしかお見せできませんでしたが、公式サイトをざっと見ただけでも様々なインタラクティブな作図が可能なのことがわかると思います。  
気になる方は、ぜひお試しください。