Box plot overview

Box plot shiw the results of a benchmarking challenge that uses a graphical representation of the distribution of a dataset on a seven-number summary of datapoints. The challenge metrics is represented in Y axis by default.

Usage

Add the installed package to your HTML file. 

let graphData = {
  "_id": "OEBDTEST0000003",
  "inline_data": {
    "challenge_participants": [
    {
        "name":	"Tool_1",
        "metric_id":	"length of transcripts",
        "q1":	2.428134794028789,
        "mean":	2.6573958631434174,
        "median":	2.574031267727719,
        "q3":	2.82020145948564,
        "lowerfence":	1.8400347958435121,
        "upperfence":	3.408301457670917
    },
    {
        "name":	"Tool_2",
        "metric_id":	"length of transcripts",
        "q1":	4.028134794028789,
        "mean":	4.6573958631434174,
        "median":	4.574031267727719,
        "q3":	4.92020145948564,
        "lowerfence":	3.8400347958435121,
        "upperfence":	5.408301457670917
    }
    ],
    "visualization": {
        "type": "box-plot",
        "y_axis": "length of transcripts",
        "optimization": "minimum"
    }
  },
  "dates": {
    "creation": "2023-05-26T20:12:32Z",
    "modification": "2023-05-27T19:34:43+00:00"
  },
}

graphData = JSON.stringify(graphData);

const graphType=JSON.stringify("2D-plot");

const myComp = document.getElementById('widget-element');
// Change the type and data of the graph
let type = JSON.parse(graphType);
myComp.type = type;
myComp.data = graphData;

Example