Interactive Plot Blog Posting

While summarizing papers, I drew and uploaded several images randomly, but I wasn’t quite satisfied with them. I thought about directly generating and uploading charts, but the issue was that these charts were 3D figures, making it difficult to find an angle that provides a clear view at first glance. So I wanted to create an interactive chart that could be rotated and viewed from different angles. In this post, I will document how to create Plotly charts in HTML and upload them to a blog.

Creating Plotly Charts

With the code below, you can create Plotly charts and export them as HTML files.

import numpy as np
import plotly.express as px
import plotly.graph_objects as go

# Creating dataset
N = 2000
x = np.random.uniform(low=-3.0, high=3.0, size=N)
y = np.random.uniform(low=-3.0, high=3.0, size=N)
z = np.cos(0.2 * x) + np.sin(0.1 * y)

# Interactive plot with plotly
data = go.Scatter3d(
    x = x,
    y = y,
    z = z,
    mode = 'markers',
    marker = dict(
        size = 0.7,
        color = z,
        colorscale='Viridis',
        opacity = 0.8
    )
)
fig = go.Figure(data = data)

fig.update_layout(margin = dict(l=0, r=0, b=0, t=0))
fig.write_html("test.html")
fig.show()

Upload html

After uploading the resulting test.html to _include (in my case, I created a new folder called _include/plots to store the file), you can add the following code to your markdown file to display an interactive chart on your blog.

 {% include plots/test.html %}