Plot Benchmark Results

This tool helps plot benchmark results, and compare them with past results.
Just drag and drop benchmark results json files, to visualize & compare data.

Example Comparison

Setup

Install FNM

FNM manages versions of Node.js installed.

After you install fnm and add it to your $PATH, you should be able to do the following.

➜  plot-benchmarks git:(viz-benchmarks) ✗ fnm use
Using Node v18.16.0

Note: fnm use might prompt you to install the version of Node.js being used.

Install Dependencies

Now, you are ready to install all the dependencies.

# Installs the necessary dependencies.
npm install

Running Local Dev Server

# Compiles the code, and hot-deploys code to the local dev server.
npm run-script dev

VITE v4.3.9  ready in 168 ms

➜  Local:   http://localhost:5173/
➜  Network: use --host to expose
➜  press h to show help

Now navigate to the URL listed in the output.

Usage

Drag and drop benchmark results (*.json) files into the page.
Double clicking the items on the legend, toggles the visibility of the dataset in the chart.
You can also filter metrics to plot.
To compare benchmark runs, just load both results into the page, and select the ones you want to compare.

Have fun !