Plutus Cost Model Visualization

Overview

This website provides interactive visualizations of Plutus Core builtin function cost models. Each visualization displays benchmark data alongside fitted cost model predictions, allowing developers and stakeholders to understand the performance characteristics of builtin functions.

Cost models are critical for ensuring accurate script execution costs on the Cardano blockchain. These visualizations help verify that the mathematical models accurately represent the actual execution time measured during benchmarking.

Key Features

Available Visualizations

Data Sources

All visualizations load data directly from the official Plutus repository:

Data is fetched dynamically using the browser's fetch() API, ensuring you always see the latest benchmarks and cost models from the master branch.

Adding New Functions

Developers can easily add visualizations for additional builtin functions by following these steps:

Prerequisites

Steps

  1. Copy an existing function directory: 
    cp -r valuedata/ myfunction/
  2. Edit myfunction/index.html:
    • Update page title and heading
    • Update plot information panel labels (X-axis, Y-axis, description)
  3. Add an entry to PAGES in shared/utils.js: 
    ['myfunction', 'MyFunction', 'What it does. (2D visualization: ...)']
    This is what puts the page in the navigation bar and in the list above.
  4. Edit myfunction/plot.js:
    • Update FUNCTION_NAME constant (must match CSV entry exactly)
    • Update ARITY constant (number of arguments for overhead calculation)
    • If needed, adjust plot type (2D vs 3D) by modifying the renderPlot() function
    • Update axis labels in the layout configuration
  5. Test locally: 
    python -m http.server 8000
# Visit http://localhost:8000/myfunction/
  6. Add to navigation:
    • Update index.html to include your function in the list
    • Add navigation link to all other function pages
  7. Verify:
    • Data loads correctly from CSV
    • Model predictions render (if cost model exists)
    • Plot information displays accurate details
    • Toggle controls work as expected

Troubleshooting

Example Configuration

For a 2D plot with a single argument:

const FUNCTION_NAME = 'MyFunction';  // Must match CSV
const ARITY = 1;                      // Number of arguments

// In renderPlot():
const benchmarkX = benchmarkData.map(d => d.args[0]);  // First argument
const benchmarkY = benchmarkData.map(d => d.time);     // Time (always Y)

For a 3D plot with two arguments:

const FUNCTION_NAME = 'MyFunction';
const ARITY = 2;

// In renderPlot():
const benchmarkX = benchmarkData.map(d => d.args[0]);  // First argument
const benchmarkY = benchmarkData.map(d => d.args[1]);  // Second argument
const benchmarkZ = benchmarkData.map(d => d.time);     // Time (always Z)

Technical Details

Architecture

This is a static website built with plain HTML, CSS, and JavaScript. It uses Plotly.js for interactive plotting. No build tools or frameworks are required.

Cost Model Evaluation

The website implements JavaScript evaluators for various cost model types (linear, quadratic, multi-dimensional, etc.). Model predictions are calculated at the same input points as the benchmark data to enable direct comparison.

Overhead Calculation

Overhead values are automatically calculated from Nop benchmarks in the CSV file. The overhead for a given arity is added to all model predictions to account for the base cost of function invocation and result handling.

Deployment

This site can be deployed to GitHub Pages or any static hosting service. Opening index.html from disk works as well, because the data is fetched from GitHub over HTTPS. A local HTTP server is only needed to plot data files that are not on GitHub yet, since fetch() rejects file:// URLs: 

python3 -m http.server 8000