diff --git a/_posts/2018-12-22-distill.md b/_posts/2018-12-22-distill.md
index f919d3f..39a6cc8 100644
--- a/_posts/2018-12-22-distill.md
+++ b/_posts/2018-12-22-distill.md
@@ -36,6 +36,7 @@ toc:
- name: Citations
- name: Footnotes
- name: Code Blocks
+ - name: Interactive Plots
- name: Layouts
- name: Other Typography?
@@ -74,7 +75,6 @@ $$
Note that MathJax 3 is [a major re-write of MathJax](https://docs.mathjax.org/en/latest/upgrading/whats-new-3.0.html) that brought a significant improvement to the loading and rendering speed, which is now [on par with KaTeX](http://www.intmath.com/cg5/katex-mathjax-comparison.php).
-
***
## Citations
@@ -123,6 +123,39 @@ function(x) {
***
+## Interactive Plots
+
+You can add interative plots using plotly + iframes :framed_picture:
+
+
+
+
+
+The plot must be generated separately and saved into an HTML file.
+To generate the plot that you see above, you can use the following code snippet:
+
+{% highlight python %}
+import pandas as pd
+import plotly.express as px
+df = pd.read_csv(
+ 'https://raw.githubusercontent.com/plotly/datasets/master/earthquakes-23k.csv'
+)
+fig = px.density_mapbox(
+ df,
+ lat='Latitude',
+ lon='Longitude',
+ z='Magnitude',
+ radius=10,
+ center=dict(lat=0, lon=180),
+ zoom=0,
+ mapbox_style="stamen-terrain",
+)
+fig.show()
+fig.write_html('assets/plotly/demo.html')
+{% endhighlight %}
+
+***
+
## Layouts
The main text column is referred to as the body.
diff --git a/assets/plotly/demo.html b/assets/plotly/demo.html
new file mode 100644
index 0000000..b78329e
--- /dev/null
+++ b/assets/plotly/demo.html
@@ -0,0 +1,71 @@
+
+
+
+
+
+
\ No newline at end of file