Help us understand the problem. What is going on with this article?

Plotly.js ではじめる簡単グラフ表示(Scatter 編)

More than 1 year has passed since last update.

はじめに

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
<head>
    <script src="plotly-latest.min.js"></script>
</head>

scatter (散布図) を表示する

scatter.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Pragma" content="no-cache">
<meta charset="utf-8">
<script type="text/javascript" src="plotly-latest.min.js" charset="utf-8"></script>

<title>scatter test</title>
</head>

<body>

<div id="scatter"></div>

<script language="JavaScript" type="text/javascript">

<!--
var xValues = [1,2,3,4,5,6,7,8,9,10,1];
var yValues = [2,4,6,3,5,10,9,8,7,6,1];
var textValues = ["A","B","C","D","E","F","G","H","I","J","K"];
var data = [
{
    x:xValues,
    y:yValues,
    text:textValues,
    hoverinfo:'text+x+y',
    type:'scatter',
    mode:'markers',
}
    ];

var layout = {
    hovermode:'closest',
    autosize: false, width:500, height:500 
}   ;

Plotly.newPlot('scatter', data, layout, {displayModeBar: false});
//-->

</script>

</body>
</html>

scatter_markers.png


div タグで指定した場所にグラフがレンダリングされます。
(Plotly.newPlot() を呼び出す際に、div タグに指定したID を渡す。)
グラフの種類は、type で決まります。
散布図の場合は、 type:'scatter' と書けばOK。

scatter (散布図) カスタマイズ その1

mode:'markers' とすると点ですが、 mode:'lines' とすれば 線になります。
重ね技もできて、 mode:'markers+lines' とすれば点と線で表示となります。

mode:'lines'  の例
scatter_lines.png

mode:'markers+lines' の例
scatter_markerslines.png

scatter (散布図) カスタマイズ その2

marker の色を変えてみます。
colorscale を利用してイイ感じに色を変えます。
color に rgb で指定してもいいのですが、colorscale だと色のバリエーションを考えなくてもよいので
おすすめです。
https://plot.ly/javascript/colorscales/

colorscale自体をカスタマイズすることもできます。
ヒートマップのグラフ作成時に試したので、その記事に載せます。

なお、以下の例では、markerのサイズと透明度も指定しています。

scatter.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Pragma" content="no-cache">
<meta charset="utf-8">
<script type="text/javascript" src="plotly-latest.min.js" charset="utf-8"></script>

<title>scatter test</title>
</head>

<body>

<div id="scatter"></div>

<script language="JavaScript" type="text/javascript">

<!--
var xValues = [1,2,3,4,5,6,7,8,9,10,1];
var yValues = [2,4,6,3,5,10,9,8,7,6,1];
var textValues = ["A","B","C","D","E","F","G","H","I","J","K"];
var data = [
{
    x:xValues,
    y:yValues,
    text:textValues,
    hoverinfo:'text+x+y',
    type:'scatter',
    mode:'markers',
    marker:{
        colorscale:'Viridis',
        color : yValues,
        opacity:0.8,
        size:12
    }
}
    ];

var layout = {
    hovermode:'closest',
    autosize: false, width:500, height:500 
}   ;

Plotly.newPlot('scatter', data, layout, {displayModeBar: false});
//-->

</script>

</body>
</html>

colorscale :'Viridis' の例

scatter_color.png

おわりに

Plotly を利用した Python の例は数あれど、JavaScript の例が少ないので書いてみました。
グラフは X, Y 軸にどのようなデータを使うかが重要ですが、Plotly を使えば試行錯誤が簡単です。
様々なパターンでグラフ表示してみて、訴求力のあるものをつくりたいですね。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした