diff --git a/docs/examples/plotly-example.rst b/docs/examples/plotly-example.rst new file mode 100644 index 00000000..46e3ba78 --- /dev/null +++ b/docs/examples/plotly-example.rst @@ -0,0 +1,99 @@ +============== +Plotly Example +============== + +Thebe can display output from plotly.py_. + +.. _plotly.py: https://github.com/plotly/plotly.py + +Setup +===== + +Be sure to load require.js before any of your thebe activation code so that the +Jupyter widgets can function: + +.. code-block:: html + + + +Configure thebe and load it: + +.. code-block:: html + + + + +Create a button to activate thebe: + +.. code-block:: html + + + + +Now add code cells between these HTML tags: + +.. code-block:: html + +

+
+Example
+=======
+
+.. raw:: html
+
+   
+   
+   
+
+Press the "Activate" button below to connect to a Jupyter server:
+
+.. raw:: html
+
+   
+   
+
+Here is a distribution plot example from https://plotly.com/python/distplot/
+(MIT License):
+
+.. raw:: html
+
+   
+   import plotly.express as px
+   df = px.data.tips()
+   fig = px.histogram(df, x="total_bill", y="tip", color="sex", marginal="rug",
+                      hover_data=df.columns)
+   fig.show()
+   
diff --git a/docs/index.rst b/docs/index.rst index c4cf1e8c..63b32dde 100644 --- a/docs/index.rst +++ b/docs/index.rst @@ -102,5 +102,6 @@ Horizon 2020 European Research Infrastructure project (676541). howto/initialize_cells minimal_example examples/ipyleaflet_example + examples/plotly-example contribute api