Line plot overview

Line plots display the results of a benchmarking challenge, showcasing trends or changes in the dataset over a continuous range. The challenge metric is represented on the Y-axis by default, with the X-axis typically indicating time or another continuous variable.

Usage

Add the installed package to your HTML file. 

let graphData = {
      "_id": "OEBDTEST0000006",
      "dates": {
        "modification": "2023-05-27T19:18:32Z"
      },
      "inline_data": {
        "challenge_participants":  [
            {
              "y_value": [
                0.0, 0.0417, 0.0833, 0.1250, 0.1667, 0.2083, 0.25, 0.2917, 0.3333,
                0.3750, 0.4167, 0.4583, 0.5, 0.5417, 0.5833, 0.6250, 0.6667, 0.7083,
                0.75, 0.7917, 0.8333, 0.8750, 0.9167, 0.9583, 1.0
              ],
              "x_value": [
                0.00, 0.2143, 0.2887, 0.3636, 0.3882, 0.4564, 0.52,   0.5501, 0.5673,
                0.6324,0.6455, 0.6620, 0.7271, 0.7310, 0.7638, 0.8006, 0.8165, 0.8216,
                0.8810,0.8899, 0.9229, 0.9354, 0.9474, 0.9989, 1.0
              ],
              "t_error": [
                0.023, 0.038, 0.029, 0.045, 0.032, 0.052, 0.041, 0.034, 0.028,
                0.047, 0.033, 0.039, 0.021, 0.055, 0.044, 0.026, 0.058, 0.022,
                0.030, 0.035, 0.049, 0.042, 0.027, 0.053, 0.025
              ],
              "name": "Tool_1",
              "metric_id": "True Positive Rate (TPR)"
            },
            {
              "y_value": [
                0.0, 0.0417, 0.0833, 0.1250, 0.1667, 0.2083, 0.25, 0.2917, 0.3333,
                0.3750, 0.4167, 0.4583, 0.5, 0.5417, 0.5833, 0.6250, 0.6667, 0.7083,
                0.75, 0.7917, 0.8333, 0.8750, 0.9167, 0.9583, 1.0
              ],
              "x_value": [
                0.03,   0.0417, 0.0633, 0.1350, 0.2067, 0.2583, 0.22,   0.2817, 0.3533,
                0.3750, 0.4467, 0.4383, 0.55,   0.5517, 0.5833, 0.6550, 0.6267, 0.7183,
                0.74,   0.8317, 0.8333, 0.8950, 0.9667, 0.9283, 1.0
              ],
              "t_error": [
                0.065, 0.049, 0.074, 0.058, 0.033, 0.081, 0.046, 0.029, 0.090,
                0.054, 0.061, 0.037, 0.068, 0.075, 0.042, 0.059, 0.080, 0.036,
                0.045, 0.062, 0.070, 0.055, 0.084, 0.048, 0.078
              ],
              "name": "Tool_2",
              "metric_id": "True Positive Rate (TPR)"
            }
        ],
        "visualization": {
          "type": "line-plot",
          "x_axis": "True Positive Rate (TPR)",
          "y_axis": "False Positive Rate (FPR)",
          "dates": {
            "modification": "2024-04-09T13:44:20Z"
          }
        }
      }
  }

  graphData = JSON.stringify(graphData);

const graphType=JSON.stringify("line-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