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.
// This is a line plot schema
let graphData = {
"_id": "OEBDTEST0000006",
"dates": {
"modification": "2023-05-27T19:18:32Z"
},
"inline_data": {
"series_type": "aggregation-data-series",
"challenge_participants": [
{
"label": "Tool_1",
"metric_id": "FPR",
"values": [
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
]
},
{
"label": "Tool_1",
"metric_id": "TPR",
"values": [
{"v": 0.0, "e": 0.023}, {"v": 0.0417, "e": 0.038}, {"v": 0.0833, "e": 0.029},
{"v": 0.1250, "e": 0.045}, {"v": 0.1667, "e": 0.032}, {"v": 0.2083, "e": 0.052},
{"v": 0.25, "e": 0.041}, {"v": 0.2917, "e": 0.034}, {"v": 0.3333, "e": 0.028},
{"v": 0.3750, "e": 0.047}, {"v": 0.4167, "e": 0.033}, {"v": 0.4583, "e": 0.039},
{"v": 0.5, "e": 0.021}, {"v": 0.5417, "e": 0.055}, {"v": 0.5833, "e": 0.044},
{"v": 0.6250, "e": 0.026}, {"v": 0.6667, "e": 0.058}, {"v": 0.7083, "e": 0.022},
{"v": 0.75, "e": 0.030}, {"v": 0.7917, "e": 0.035}, {"v": 0.8333, "e": 0.049},
{"v": 0.8750, "e": 0.042}, {"v": 0.9167, "e": 0.027}, {"v": 0.9583, "e": 0.053},
{"v": 1.0, "e": 0.025}
]
},
{
"label": "Tool_2",
"metric_id": "FPR",
"values": [
0.03, 0.0417, 0.0633, 0.1350, 0.2067, 0.22, 0.2583, 0.2817, 0.3533,
0.3750, 0.4383, 0.4467, 0.55, 0.5517, 0.5833, 0.6267, 0.6550, 0.7183,
0.74, 0.8317, 0.8333, 0.8950, 0.9283, 0.9667, 1.0
]
},
{
"label": "Tool_2",
"metric_id": "TPR",
"values": [
{"v": 0.0,"e": 0.065}, {"v": 0.0417,"e": 0.049}, {"v": 0.0833,"e": 0.074},
{"v": 0.1250,"e": 0.058}, {"v": 0.1667,"e": 0.033}, {"v": 0.25,"e": 0.046},
{"v": 0.2083,"e": 0.081}, {"v": 0.2917,"e": 0.029}, {"v": 0.3333,"e": 0.090},
{"v": 0.3750,"e": 0.054}, {"v": 0.4583,"e": 0.037}, {"v": 0.4167,"e": 0.061},
{"v": 0.5,"e": 0.068}, {"v": 0.5417,"e": 0.075}, {"v": 0.5833,"e": 0.042},
{"v": 0.6667,"e": 0.080}, {"v": 0.6250,"e": 0.059}, {"v": 0.7083,"e": 0.036},
{"v": 0.75,"e": 0.045}, {"v": 0.7917,"e": 0.062}, {"v": 0.8333,"e": 0.070},
{"v": 0.8750,"e": 0.055}, {"v": 0.9583,"e": 0.048}, {"v": 0.9167,"e": 0.084},
{"v": 1.0,"e": 0.078}
]
}
],
"visualization": {
"available_metrics": [
"FPR",
"TPR"
],
"representations": [
{
"type": "line-plot",
"metrics_series": [
{
"metric_id": "FPR",
"title": "False Positive Rate (FPR)",
"optimization": "minimize",
"axis": "x"
},
{
"metric_id": "TPR",
"title": "True Positive Rate (TPR)",
"optimization": "maximize",
"axis": "y"
}
],
"type_group_id": "line-plot-1"
}
]
},
"labels": [
{
"label": "Tool_1",
"dataset_orig_id": "OEBDTOOL10001"
},
{
"label": "Tool_2",
"dataset_orig_id": "OEBDTOOL00002"
}
]
}
}
// Define the graph type
const graphType = JSON.stringify("line-plot");
// Get the widget element
const myComp = document.getElementById('widget-element');
// Create new data object
// Get the type and data of the graph
let type = JSON.parse(graphType);
// Build a new data object
let dataObj = {_id: graphData._id,
dates: graphData.dates,
dataset_contact_ids: graphData.dataset_contact_ids,
inline_data: {
challenge_participants: graphData.inline_data.challenge_participants,
visualization: graphData.inline_data.visualization
}
}
// Convert to string
graphData = JSON.stringify(dataObj);
// Assign the new type and data to the graph
myComp.type = type;
myComp.data = graphData;