PlotlyをTwitterのタイムラインに埋め込む

動作は以下の通りになっておりランダムウォークをTwitterのタイムラインからぐりぐりできます．(PCでのみ可能)

###コードは以下の通りです．

```plotly_test.html
<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
    <meta name="twitter:card" content="player" />
    <meta name="twitter:title" content="plotlyテスト" />
    <meta name="twitter:description" content="plotlyテスト" />
    <meta name="twitter:site" content="@whisponchan" />
    <meta name="twitter:image" content="https://whispon.com/plotly/preview.jpg" />
    <meta name="twitter:player" content="https://whispon.com/plotly/plotly_test.html" />
    <meta name="twitter:player:width" content="320" />
    <meta name="twitter:player:height" content="450" />
  </head>
  <body>
    <div id="myDiv" style="width:100%;height:100%"></div>
    <script>
	  Plotly.d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/_3d-line-plot.csv', function(err, rows){
      function unpack(rows, key) {
          return rows.map(function(row) 
          { return row[key]; });
      }

      var trace1 = {
        x: unpack(rows, 'x1'),
        y: unpack(rows, 'y1'),
        z: unpack(rows, 'z1'),
        mode: 'lines',
        marker: {
          color: '#1f77b4',
          size: 12,
          symbol: 'circle',
          line: {
            color: 'rgb(0,0,0)',
            width: 0
          }},
        line: {
          color: '#1f77b4',
          width: 1
        },
        type: 'scatter3d'
      };
      
      var trace2 = {
        x: unpack(rows, 'x2'),
        y: unpack(rows, 'y2'),
        z: unpack(rows, 'z2'),
        mode: 'lines',
        marker: {
          color: '#9467bd',
          size: 12,
          symbol: 'circle',
          line: {
            color: 'rgb(0,0,0)',
            width: 0
          }},
        line: {
          color: 'rgb(44, 160, 44)',
          width: 1
        },
        type: 'scatter3d'
      };
      
      var trace3 = {
        x: unpack(rows, 'x3'),
        y: unpack(rows, 'y3'),
        z: unpack(rows, 'z3'),
        mode: 'lines',
        marker: {
          color: '#bcbd22',
          size: 12,
          symbol: 'circle',
          line: {
            color: 'rgb(0,0,0)',
            width: 0
          }},
        line: {
          color: '#bcbd22',
          width: 1
        },
        type: 'scatter3d'
      };
      
      var data = [trace1, trace2, trace3];
      var layout = {
        title: '3D Line Plot',
        autosize: false,
        width: 500,
        height: 500,
        margin: {
          l: 0,
          r: 0,
          b: 0,
          t: 65
        }
      };
      Plotly.newPlot('myDiv', data, layout); 
      });
       
    </script>
  </body>
</html>

```

CSVを読み込んでるので毎回ランダムウォークの結果は変わりませんが，そのように書けば読み込むごとに結果が変わり楽しいと思います．

###実際の動作です．

![May-08-2018 00-37-09.gif](https://qiita-image-store.s3.amazonaws.com/0/33329/ae99338f-7a77-4a21-028a-838064e6d834.gif)

###該当ツイート

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">OGPでタイムラインにランダムウォークを張ることに成功した．<a href="https://t.co/J0U4iu2gxX">https://t.co/J0U4iu2gxX</a></p>&mdash; NoriakiOshita (@whisponchan) <a href="https://twitter.com/whisponchan/status/993509050896691201?ref_src=twsrc%5Etfw">2018年5月7日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>





>参考
>「Twitterのタイムライン上で動くブラウザゲームをJSで作りました」
>@laineus さん
>https://qiita.com/laineus/items/a71d8fa4efae39119ef1