Nitrogen Poisonous Monoxide


    1.1.4 • Public • Published

    OpenEBench Scientific Benchmarking visualizer

    Repository that contains the code required to visualize results from scientific benchmarking experiments in plot format, and apply several classification methods in order to transform them to tabular format.

    NPM Package

    NPM Package @inb/oeb-chart-scatter published to:

    Data Input

    The visualizer uses as input the results of one challenge stored in the OpenEBench database in the format of the official Benchmarking Data Model.

    Per default it consumes the OpenEBench Sci-API (deprecated).

    It is also able to consume the new API OpenEBench API Scientific. The API can be set by supplying the following attribute: data-api-url="{{ API_URL }}"


    • master: Python visualizer scripts
    • js: JavaScript visualizer project

    Classification methods

    • Square quartiles - divide the plotting area in four squares by getting the 2nd quartile of the X and Y metrics. squares
    • Diagonal quartiles - divide the plotting area with diagonal lines by assigning a score to each participant based in the distance to the 'optimal performance'. diagonals
    • Clustering - group the participants using the K-means clustering algorithm and sort the clusters according to the performance. clusters

    How to use

    The component can be imported in two way: As npm package (preferred), or via the build file from the git repository (see bottom).

    Use the npm package

    npm i @inb/oeb-chart-scatter

    In your frontend component: import { load_scatter_visualization } from "@inb/oeb-chart-scatter";

                  data-id="{{ ID }}"
                  data-api-url="{{ API_URL }}"

    You can then call the load_scatter_visualization() function.

    Attributes that can be set on the <div> tag

    • data-id : the official OEB id of the aggregation dataset you want to visualize.
    • toTable: should be set to true/false depending whether you want to view the classification table in the right or not.
    • class: should always be 'benchmarkingChart_scatter'
    • data-api-url: Should always contain the full API URL e.g.

    Alternative way: Clone from repository


    -npm -http server

    Clone the repo to your document root :

    git clone

    Install dependencies from package.json :

    npm install 

    Export node moodules :

    export PATH="${PWD}/node_modules/.bin/:$PATH"

    Compile with webpack and visualize sample results in your localhost :

    ./node_modules/.bin/webpack-cli src/app.js --output=build/build.js -d -w

    Add JS cdn for D3 and jquery and the build file which you can download from build/build.js and tag it into your html. You can then call the load_scatter_visualization() function.

    The HTML file should look like this

    Live Demo

    See a demo of how this visualizer works here


    npm i @inb/oeb-chart-scatter

    DownloadsWeekly Downloads






    Unpacked Size

    1.41 MB

    Total Files


    Last publish


    • jmfernandez