@inb/oeb-chart-scatter

v1.1.4

benchmarkingChart_scatter

visualization chart scatter benchmarking openEBench visualizer elixir-europe elixir-spain

0/weekUpdated 1 years agoISCUnpacked: 1.4 MB

npm install @inb/oeb-chart-scatter

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: https://www.npmjs.com/package/@inb/oeb-chart-scatter

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 }}"

Branches

* 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).

$3

npm i @inb/oeb-chart-scatter

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

``data-id="{{ ID }}" class="benchmarkingChart_scatter" data-api-url="{{ API_URL }}" toTable="true" >

You can then call the load_scatter_visualization() function.

`$3`

- 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. https://openebench.bsc.es/api/scientific/graphql

`$3`

Requirements:

-npm -http server

Clone the repo to your document root :`git clone https://github.com/inab/OpenEBench_scientific_visualizer.git`

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 theload_scatter_visualization()` function.

The HTML file should look like this

Live Demo

See a demo of how this visualizer works here

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).

npm i @inb/oeb-chart-scatter

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

                          
                        data-id="{{ ID }}"
              class="benchmarkingChart_scatter"
              data-api-url="{{ API_URL }}"
              toTable="true"
          >