title: How to display plotly outputs in google collaboratory notebooks?
body: <p>I searched whole day how to display the outputs of plotly plots in google colaboratory jupyter notebooks. There is a stackoverflow question and also official tutorial from google colaboratory but both of them did not work for me.</p>
  
  <p>official link:<br>
  <a href="https://colab.research.google.com/notebooks/charts.ipynb#scrollTo=hFCg8XrdO4xj" rel="noreferrer">https://colab.research.google.com/notebooks/charts.ipynb#scrollTo=hFCg8XrdO4xj</a>  </p>
  
  <p>stackoverflow question:<br>
  <a href="https://stackoverflow.com/questions/47230817/plotly-notebook-mode-with-google-colaboratory">Plotly notebook mode with google colaboratory</a><br>
  <a href="https://colab.research.google.com/drive/14oudHx5e5r7hm1QcbZ24FVHXgVPD0k8f#scrollTo=8RCjUVpi2_xd" rel="noreferrer">https://colab.research.google.com/drive/14oudHx5e5r7hm1QcbZ24FVHXgVPD0k8f#scrollTo=8RCjUVpi2_xd</a>  </p>
  
  <p>The built-in google colaboratory plotly version is 1.12.12.</p>
  
  <h1>Test plotly version</h1>
  
  <pre><code>import plotly
  plotly.__version__
  1.12.12
  </code></pre>
  
  <h1>Load libraries</h1>
  
  <pre><code>import numpy as np
  import pandas as pd
  import matplotlib.pyplot as plt
  import seaborn as sns
  </code></pre>
  
  <h1>Mount google drive</h1>
  
  <pre><code>from google.colab import drive
  drive.mount('/content/drive')
  
  dat_dir = 'drive/My Drive/Colab Notebooks/data/'
  </code></pre>
  
  <h1>Official google colaboratory method (FAILED)</h1>
  
  <pre><code># https://colab.research.google.com/notebooks/charts.ipynb#scrollTo=hFCg8XrdO4xj
  def enable_plotly_in_cell():
    import IPython
    from plotly.offline import init_notebook_mode
    display(IPython.core.display.HTML('''
          &lt;script src="/static/components/requirejs/require.js"&gt;&lt;/script&gt;
    '''))
    init_notebook_mode(connected=False)
  </code></pre>
  
  <h2>Test official suggestion (FAILED)</h2>
  
  <pre><code>import plotly.plotly as py
  import numpy as np
  from plotly.offline import iplot
  from plotly.graph_objs import Contours, Histogram2dContour, Marker, Scatter
  
  enable_plotly_in_cell()
  
  x = np.random.randn(2000)
  y = np.random.randn(2000)
  iplot([Histogram2dContour(x=x, y=y, contours=Contours(coloring='heatmap')),
         Scatter(x=x, y=y, mode='markers', marker=Marker(color='white', size=3, opacity=0.3))], show_link=False)
  </code></pre>
  
  <h1>Stackoverflow Bob Smith Method</h1>
  
  <pre><code># https://stackoverflow.com/questions/47230817/plotly-notebook-mode-with-google-colaboratory
  def configure_plotly_browser_state():
    import IPython
    display(IPython.core.display.HTML('''
          &lt;script src="/static/components/requirejs/require.js"&gt;&lt;/script&gt;
          &lt;script&gt;
            requirejs.config({
              paths: {
                base: '/static/base',
                plotly: 'https://cdn.plot.ly/plotly-1.5.1.min.js?noext',
              },
            });
          &lt;/script&gt;
          '''))
  </code></pre>
  
  <h2>Test Bob Smith method (FAILED)</h2>
  
  <pre><code># https://colab.research.google.com/drive/14oudHx5e5r7hm1QcbZ24FVHXgVPD0k8f#scrollTo=8RCjUVpi2_xd
  import plotly.plotly as py
  import numpy as np
  from plotly.offline import init_notebook_mode, iplot
  from plotly.graph_objs import Contours, Histogram2dContour, Marker, Scatter
  
  configure_plotly_browser_state()
  
  init_notebook_mode(connected=False)
  
  x = np.random.randn(2000)
  y = np.random.randn(2000)
  iplot([Histogram2dContour(x=x, y=y, contours=Contours(coloring='heatmap')),
         Scatter(x=x, y=y, mode='markers', marker=Marker(color='white', size=3, opacity=0.3))], show_link=False)
  </code></pre>
  
  <h1>Questions</h1>
  
  <p><strong>How to display the plotly output in google colaboratory?</strong>    </p>
  
  <p><strong>Is is possible ? If so which version of plotly or cufflinks is working for you?</strong>    </p>
  
  <p><strong>If it is not possible to display, can we save the output file as <code>.html</code> in our google drive and open them manually and see them?</strong> </p>
  
  <p>I appreciate your help. </p>