--- title: Plotly.js ではじめる簡単グラフ表示(Scatter 編) tags: plotly JavaScript HTML author: mihoko_az slide: false --- # はじめに Plotly.js は d3.js をベースとしたグラフ用 JavaScript ライブラリです。 お手軽にきれいなグラフが作れます。 https://plot.ly/javascript/ # 準備するもの JavaScript ライブラリをダウンロードします。 以下のページの「Download plotly.js」をクリックするとライブラリのダウンロードが開始します。 https://plot.ly/javascript/getting-started/#download 「plotly-latest.min.js」という名前でファイルがダウンロードできたら、 あとは、HTMLに記述するだけ。 ```scatter.html ``` # scatter (散布図) を表示する ```scatter.html scatter test
``` ![scatter_markers.png](https://qiita-image-store.s3.amazonaws.com/0/59985/0e9c6092-836e-8c07-c193-58d8921880b9.png) ---- div タグで指定した場所にグラフがレンダリングされます。 (Plotly.newPlot() を呼び出す際に、div タグに指定したID を渡す。) グラフの種類は、type で決まります。 散布図の場合は、 **type:'scatter'** と書けばOK。 # scatter (散布図) カスタマイズ その1 **mode:'markers'** とすると点ですが、 **mode:'lines'** とすれば 線になります。 重ね技もできて、 **mode:'markers+lines'** とすれば点と線で表示となります。 **mode:'lines'**  の例 ![scatter_lines.png](https://qiita-image-store.s3.amazonaws.com/0/59985/df767d3e-82d2-457d-af7f-22d521d5670c.png) **mode:'markers+lines'** の例 ![scatter_markerslines.png](https://qiita-image-store.s3.amazonaws.com/0/59985/2656d850-6ca4-1410-2905-dc2a9b7b2416.png) # scatter (散布図) カスタマイズ その2 marker の色を変えてみます。 colorscale を利用してイイ感じに色を変えます。 color に rgb で指定してもいいのですが、colorscale だと色のバリエーションを考えなくてもよいので おすすめです。 https://plot.ly/javascript/colorscales/ colorscale自体をカスタマイズすることもできます。 ヒートマップのグラフ作成時に試したので、その記事に載せます。 なお、以下の例では、markerのサイズと透明度も指定しています。 ```scatter.html scatter test
``` **colorscale :'Viridis' の例** ![scatter_color.png](https://qiita-image-store.s3.amazonaws.com/0/59985/71afdec9-c77b-afbc-75e1-5fd8cea5952a.png) # おわりに Plotly を利用した Python の例は数あれど、JavaScript の例が少ないので書いてみました。 グラフは X, Y 軸にどのようなデータを使うかが重要ですが、Plotly を使えば試行錯誤が簡単です。 様々なパターンでグラフ表示してみて、訴求力のあるものをつくりたいですね。