Outputs¶

Projects should return outputs that are in the following format:

{
  "renderable": [
    {
      "media_type": "PNG",
      "title": "My PNG",
      "data": "picture bytes here..."
    }
  ],
  "downloadable": [
    {
      "media_type": "CSV",
      "title": "My CSV",
      "data": "comma,sep,values\n"
    }
  ]
}

There are two categories of outputs: “renderable” and “downloadable.” Renderable outputs will be displayed on the outputs page while downloadable outputs are saved by the user as a zipfile. These categories are represented as the two top-level members in the JSON structure above. They point to a List of Output Objects. Each Output Object has three members: media_type, title, and data. Supported media types are:

bokeh
table
CSV
PNG
JPEG
MP3
MP4

Here’s an example for how to create a full result in Python:

def append_output(df, title, renderable, downloadable):
  	js, div = make_my_plot(df, title)
    renderable.append(
        {
            "media_type": "bokeh",
            "title": title,
            "data": {
                "javascript": js,
                "html": div
            }
        }
    )
    downloadable.append(
        {
            "media_type": "CSV",
            "title": title,
            "data": df.to_csv()
        }
    )

downloadable = []
renderable = []

append_output(my_df, "My results", renderable, downloadable)
append_output(my_other_df, "My other results", renderable, downloadable)

A full example can be found in the Matchups package.

Examples¶

bokeh¶

JSON format:

{
  "media_type": "bokeh",
  "title": "My Bokeh Plot",
  "data": {
    "root_id": "abc",
    "target_id": "123",
    "doc": "<script>...</script>"
  }
}

Python example:

from bokeh.plotting import figure
from bokeh.embed import json_item

# see: https://bokeh.pydata.org/en/latest/docs/user_guide/quickstart.html#getting-started

# prepare some data
x = [1, 2, 3, 4, 5]
y = [6, 7, 2, 4, 5]

# create a new plot with a title and axis labels
p = figure(title="simple line example", x_axis_label='x', y_axis_label='y')

# add a line renderer with legend and line thickness
p.line(x, y, legend="Temp.", line_width=2)

# get the results
data = json_item(p)

output = {
  "media_type": "bokeh",
  "title": "simple line example",
  "data": data
}

table¶

JSON format:

{
  "media_type": "table",
  "title": "My Table",
  "data": "<table>...</table>"
}

Python example:

import pandas as pd

df = pd.DataFrame({"a": [1, 2, 3], "b": [4, 5, 6]})
table = df.to_html()

output = {
    "media_type": "table",
    "title": "My Table",
    "data": table
}

CSV¶

JSON format:

{
  "media_type": "CSV",
  "title": "My CSV",
  "data": "comma,sep,values\n"
}

Python example:

import pandas as pd

df = pd.DataFrame({"a": [1, 2, 3], "b": [4, 5, 6]})
csv = df.to_csv()

output = {
    "media_type": "CSV",
    "title": "My CSV",
    "data": csv
}

PNG/JPEG¶

JSON format:

{
  "media_type": "PNG",
  "title": "My PNG",
  "data": "png bytes"
}

Python example:

import io

import matplotlib.pyplot as plt
import numpy as np

# see: https://matplotlib.org/tutorials/introductory/usage.html#matplotlib-pyplot-and-pylab-how-are-they-related

# prepare some data
x = np.linspace(0, 2, 100)

# Plot three lines
plt.plot(x, x, label='linear')
plt.plot(x, x**2, label='quadratic')
plt.plot(x, x**3, label='cubic')

plt.title("Simple Plot")

plt.legend()

# Matplotlib needs a file-like object to write the picture data.
# For speed and efficiency, io.BytesIO is used as an in-memory file.
in_memory_file = io.BytesIO()
plt.savefig(in_memory_file, format="png")

# Just need to rewind back to the beginning of the file.
in_memory_file.seek(0)

output = {
  "media_type": "PNG",
  "title": "My PNG Plot",
  "data": in_memory_file.read()
}

Compute Studio Developer Docs