Skip to main content

Plots

MecSimCalc supports the two most popular plotting libraries:

  1. Matplotlib
  2. Plotly

Matplotlib

Matplotlib is a comprehensive library for creating static, animated, and interactive visualizations in Python.

Visit matplotlib.org for full documentation on how to use Matplotlib:

Once your Matplotlib figure is ready to be displayed, convert it to a HTML string with the <img> tag that can be embedded into the outputs step. As follows:

Code

import matplotlib.pyplot as plt
import numpy as np
import base64
import io


def plt_show(plt, width=500, dpi=100):
# Converts matplotlib plt to image data string
# plt is the matplotlib pyplot or figure
# width is the width of the graph image in pixels
# dpi (dots per inch) is the resolution of the image
bytes = io.BytesIO()
plt.savefig(bytes, format='png', dpi=dpi) # Save as png image
if hasattr(plt, "close"):
plt.close()
bytes.seek(0)
base64_string = "data:image/png;base64," + \
base64.b64encode(bytes.getvalue()).decode("utf-8")
return "<img src='" + base64_string + "' width='" + str(width) + "'>"

def main(inputs):
# Create matplotlib figure
x = np.arange(0, 2, 0.01)
y = 2*(np.cos(4*x))
plt.plot(x, y)

# Convert figure to html using plt_show()
plot_html = plt_show(plt)
return {"plot": plot_html}

Output

{{ outputs.plot }}

See Example 2 in the introduction section for a detailed example on using Matplotlib.

Plotly

Plotly's Python graphing library makes interactive, publication-quality graphs.

Visit plotly.com/python for full documentation on how to use Plotly:

Once your Plotly figure is ready to be displayed, convert it to a HTML string that can be embedded into the outputs step. As follows:

Code

import plotly.express as px
import pandas as pd
import numpy as np


def main(inputs):
# Create plotly figure
x = np.arange(0, 2, 0.01)
y = 2*(np.cos(4*x))
fig = px.line(x, y, title="Cosine")

# Convert figure to html using to_html()
plot_html = fig.to_html(include_plotlyjs=True, full_html=False)
return {"plot": plot_html}
caution

In .to_html(), include_plotlyjs must be set to True for the plot to be displayed.

Output

{{ outputs.plot }}