Data Visualization

The Visual Execution Problem

When you execute a script locally that generates a graph, Python attempts to open a native window (like a Tkinter UI window) to display the image. In a headless cloud environment, this default behavior will instantly crash the script because there is no physical monitor to draw the window on.

Python Online solves this gracefully using the Plot Injection Bridge, which intercepts graphics commands and routes them directly to your browser.

How the Injection Bridge Works

When you click "Run", the execution engine scans your code for common data science imports (like matplotlib, seaborn, or plotly). If detected, it applies a hidden patch to your environment.

1. It forces Matplotlib to use the Agg backend, preventing it from trying to open a native OS window.
2. It overrides the standard plt.show() or fig.show() methods.
3. Instead of drawing to a screen, the patch translates the graph into a rich HTML string (using the mpld3 library for Matplotlib).
4. It encodes this HTML into Base64 and sends it through the stdout stream to the frontend.
5. The Native Output Console detects this specific data packet, decodes it, and renders the interactive plot.

Interactive Matplotlib

Because the engine translates Matplotlib figures into HTML using mpld3, your plots are not static images. You can hover over data points, pan across the axes, and zoom into specific areas of the graph exactly as you would in a Jupyter Notebook.

# Required: Install 'matplotlib' and 'mpld3' via the Packages Panel
import matplotlib.pyplot as plt
import numpy as np

# Generate data
x = np.linspace(0, 10, 100)
y = np.sin(x)

# Create the plot
plt.plot(x, y, label='Sine Wave')
plt.title('Interactive Matplotlib on Python Online')
plt.legend()

# Triggers the Injection Bridge
plt.show()

Plotly Integration

Plotly is designed from the ground up for the web. Our bridge natively supports Plotly figures, injecting the full Plotly.js engine into the output frame.

# Required: Install 'plotly' via the Packages Panel
import plotly.express as px
import pandas as pd

# Create a simple DataFrame
df = pd.DataFrame({
    "Fruit": ["Apples", "Oranges", "Bananas", "Apples", "Oranges", "Bananas"],
    "Amount": [4, 1, 2, 2, 4, 5],
    "City": ["SF", "SF", "SF", "Montreal", "Montreal", "Montreal"]
})

# Generate a bar chart
fig = px.bar(df, x="Fruit", y="Amount", color="City", barmode="group")

# Triggers the Injection Bridge
fig.show()

Static Output & Saving Images

If you prefer to generate static images (e.g., to use in a report or website) rather than rendering them in the console, you can bypass the show() command entirely and write the figure directly to your Virtual File System.

The Reality Sync engine will automatically detect the newly generated image and add it to your Explorer panel. You can then click the image file in the sidebar to open it in a dedicated viewing tab.

import matplotlib.pyplot as plt
import numpy as np

x = np.linspace(0, 10, 100)
y = np.cos(x)

plt.plot(x, y)

# Save to disk instead of calling plt.show()
# This file will instantly appear in your left sidebar
plt.savefig('cosine_wave.png')