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