Bar plot overview

Bar plot shows the results of a benchmarking challenge that uses one single evaluation metric in the form of a Barplot. Challenge participants are shown in the X axis, while the value of their metric is shown in the Y axis.

Usage

Add the installed package to your HTML file or add it by npm. 


let graphData = {
  "_id": "OEBDTEST0000001",
  "inline_data": {
    "challenge_participants": [
        {
            "tool_id": "Tool_1",
            "metric_value": 8.80130949383027,
            "stderr": 0
        },
        {
            "tool_id": "Tool_2",
            "metric_value": 12.93754721732561,
            "stderr": 0
        },
        {
            "tool_id": "Tool_3",
            "metric_value": 8.876857214807353,
            "stderr": 0
        },
        {
            "tool_id": "Tool_4",
            "metric_value": 0.24553009317552255,
            "stderr": 0
        },
        {
            "tool_id": "Tool_5",
            "metric_value": 10.104507680684966,
            "stderr": 0
        },
        {
            "tool_id": "Tool_6",
            "metric_value": 13.31528582221103,
            "stderr": 0
        }
    ],
    "visualization": {
      "metric": "percentage_genes_w_correct_nPAS",
      "type": "bar-plot"
    },
    
  },
  "dates": {
    "creation": "2023-05-26T20:12:32Z",
    "modification": "2023-05-27T19:34:43+00:00"
  },
}

graphData = JSON.stringify(graphData);

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

<script>
  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;
</script>

Example