Add interactive plotly example to distill post (#1027)

_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:
+
+<div class="l-page">
+  <iframe src="{{ '/assets/plotly/demo.html' | relative_url }}" frameborder='0' scrolling='no' height="500px" width="100%" style="border: 1px dashed grey;"></iframe>
+</div>
+
+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.