ROC curve with inside boxed legend

Area graphs provide an excellent way to showcase changes in quantity over time. They are particularly useful for visualizing trends and comparing the magnitude of different categories within a dataset. Unlike line graphs, area graphs emphasize the cumulative value of each category, making them suitable for depicting proportions or totals. Common applications include financial data, website traffic analysis, and population demographics. The filled area beneath the line helps highlight the overall volume or quantity involved, making it easier to identify significant increases or decreases. Effective area graphs use clear legends, distinct colors, and appropriate labels for enhanced readability.


Economist GGPlot Excel Paul Tol Black And White Solarized Stata Tableau Wall Street CanvasXpress
Edit this code: edit & runin place edit inJSFiddle edit inCodePen 
<html>

  <head>
    <!-- Include the CanvasXpress library in your HTML file -->
    <link rel="stylesheet" href="https://www.canvasxpress.org/dist/canvasXpress.css" type="text/css"/>
    <script src="https://www.canvasxpress.org/dist/canvasXpress.min.js"></script>
  </head>

  <body>

    <!-- Create a canvas element for the chart with the desired dimensions -->
    <div>
      <canvas id="canvasId" width="600" height="600"></canvas>
    </div>


    <!-- Create a script to initialize the chart -->
    <script>

      // Use a data frame (2D-array) for the graph
      var data = 

      // Create the configuration for the graph
      var config = {
         "graphType" : "Area",
         "graphOrientation" : "horizontal",
         "colorScheme" : "Prism",
         "xAxis" : [
            "False Positive Rate (1 - Specificity)"
         ],
         "yAxis" : [
            "True Positive Rate (Sensitivity)"
         ],
         "xAxisTitle" : "False Positive Rate (1 - Specificity)",
         "yAxisTitle" : "True Positive Rate (Sensitivity)",
         "objectColorTransparency" : 0.2,
         "setMinX" : 0,
         "setMaxX" : 1,
         "setMinY" : 0,
         "setMaxY" : 1,
         "showLegend" : true,
         "legendPosition" : "topLeft",
         "legendInside" : true,
         "customLegend" : [
            {
               "title" : "",
               "text" : [
                  "ROC curve",
                  "Random Guess (AUC = 0.5)"
               ],
               "line" : [
                  true,
                  true
               ],
               "lineColor" : [
                  "#5b9bd5",
                  "#6c757d"
               ],
               "lineType" : [
                  "solid",
                  "solid"
               ],
               "lineWidth" : [
                  2,
                  2
               ],
               "paddingX" : 10,
               "paddingY" : 10
            }
         ],
         "showLegendBorder" : true,
         "legendBackgroundColor" : "rgba(255,255,255,0.9)",
         "legendBackgroundBorderColor" : "#999999",
         "legendBackgroundBorderSize" : 1,
         "showTransition" : false,
         "title" : "ROC Curve",
         "subtitle" : "Area under the curve (AUC) = 0.56",
         "background" : "white",
         "decorations" : {
            "line" : [
               {
                  "color" : "#6c757d",
                  "width" : 2,
                  "x" : 0,
                  "y" : 0,
                  "x2" : 1,
                  "y2" : 1,
                  "label" : "Random Guess (AUC = 0.5)",
                  "id" : "roc-grafico-decoration-line-0"
               }
            ]
         }
      }

      // Event used to create graph (optional)
      var events = false

      // Call the CanvasXpress function to create the graph
      var cX = new CanvasXpress("canvasId", data, config, events);

    </script>

  </body>

</html>
Edit this code: edit & runin place edit inJSFiddle edit inCodePen 
<html>

  <head>
    <!-- Include the CanvasXpress library in your HTML file -->
    <link rel="stylesheet" href="https://www.canvasxpress.org/dist/canvasXpress.css" type="text/css"/>
    <script src="https://www.canvasxpress.org/dist/canvasXpress.min.js"></script>
  </head>

  <body>

    <!-- Create a canvas element for the chart with the desired dimensions -->
    <div>
      <canvas id="canvasId" width="600" height="600"></canvas>
    </div>


    <!-- Create a script to initialize the chart -->
    <script>

      // Create the data for the graph
      var data = {
         "y" : {
            "vars" : [
               "ROC-0",
               "ROC-1",
               "ROC-2",
               "ROC-3",
               "ROC-4",
               "ROC-5",
               "ROC-6",
               "ROC-7",
               "ROC-8",
               "ROC-9",
               "ROC-10",
               "ROC-11",
               "ROC-12",
               "ROC-13",
               "ROC-14",
               "ROC-15",
               "ROC-16",
               "ROC-17",
               "ROC-18",
               "ROC-19",
               "ROC-20",
               "ROC-21",
               "ROC-22",
               "ROC-23",
               "ROC-24",
               "ROC-25",
               "ROC-26",
               "ROC-27",
               "ROC-28",
               "ROC-29",
               "ROC-30",
               "ROC-31",
               "ROC-32",
               "ROC-33",
               "ROC-34",
               "ROC-35",
               "ROC-36",
               "ROC-37",
               "ROC-38",
               "ROC-39",
               "ROC-40",
               "ROC-41",
               "ROC-42",
               "ROC-43",
               "ROC-44",
               "ROC-45",
               "ROC-46",
               "ROC-47",
               "ROC-48",
               "ROC-49",
               "ROC-50",
               "ROC-51",
               "ROC-52",
               "ROC-53",
               "ROC-54",
               "ROC-55",
               "ROC-56",
               "ROC-57",
               "ROC-58",
               "ROC-59",
               "ROC-60",
               "ROC-61",
               "ROC-62",
               "ROC-63",
               "ROC-64",
               "ROC-65",
               "ROC-66",
               "ROC-67",
               "ROC-68",
               "ROC-69",
               "ROC-70",
               "ROC-71",
               "ROC-72",
               "ROC-73",
               "ROC-74",
               "ROC-75",
               "ROC-76",
               "ROC-77",
               "ROC-78",
               "ROC-79",
               "ROC-80",
               "ROC-81",
               "ROC-82",
               "ROC-83",
               "ROC-84",
               "ROC-85",
               "ROC-86",
               "ROC-87",
               "ROC-88",
               "ROC-89",
               "ROC-90",
               "ROC-91",
               "ROC-92",
               "ROC-93",
               "ROC-94",
               "ROC-95",
               "ROC-96",
               "ROC-97",
               "ROC-98",
               "ROC-99",
               "ROC-100",
               "ROC-101",
               "ROC-102",
               "ROC-103",
               "ROC-104",
               "ROC-105",
               "ROC-106",
               "ROC-107",
               "ROC-108",
               "ROC-109",
               "ROC-110",
               "ROC-111",
               "ROC-112",
               "ROC-113",
               "ROC-114",
               "ROC-115",
               "ROC-116",
               "ROC-117",
               "ROC-118",
               "ROC-119",
               "ROC-120",
               "ROC-121",
               "ROC-122",
               "ROC-123",
               "ROC-124",
               "ROC-125",
               "ROC-126",
               "ROC-127",
               "ROC-128",
               "ROC-129",
               "ROC-130",
               "ROC-131",
               "ROC-132",
               "ROC-133",
               "ROC-134",
               "ROC-135",
               "ROC-136",
               "ROC-137",
               "ROC-138",
               "ROC-139",
               "ROC-140",
               "ROC-141",
               "ROC-142",
               "ROC-143",
               "ROC-144",
               "ROC-145",
               "ROC-146",
               "ROC-147",
               "ROC-148",
               "ROC-149",
               "ROC-150"
            ],
            "smps" : [
               "False Positive Rate (1 - Specificity)",
               "True Positive Rate (Sensitivity)"
            ],
            "data" : [
               [
                  0,
                  0
               ],
               [
                  0,
                  0.014705882352941176
               ],
               [
                  0.012195121951219513,
                  0.014705882352941176
               ],
               [
                  0.012195121951219513,
                  0.029411764705882353
               ],
               [
                  0.012195121951219513,
                  0.04411764705882353
               ],
               [
                  0.012195121951219513,
                  0.058823529411764705
               ],
               [
                  0.012195121951219513,
                  0.07352941176470588
               ],
               [
                  0.024390243902439025,
                  0.07352941176470588
               ],
               [
                  0.024390243902439025,
                  0.08823529411764706
               ],
               [
                  0.024390243902439025,
                  0.10294117647058823
               ],
               [
                  0.036585365853658534,
                  0.10294117647058823
               ],
               [
                  0.036585365853658534,
                  0.11764705882352941
               ],
               [
                  0.04878048780487805,
                  0.11764705882352941
               ],
               [
                  0.06097560975609756,
                  0.11764705882352941
               ],
               [
                  0.06097560975609756,
                  0.1323529411764706
               ],
               [
                  0.06097560975609756,
                  0.14705882352941177
               ],
               [
                  0.07317073170731707,
                  0.14705882352941177
               ],
               [
                  0.07317073170731707,
                  0.16176470588235295
               ],
               [
                  0.07317073170731707,
                  0.17647058823529413
               ],
               [
                  0.07317073170731707,
                  0.19117647058823528
               ],
               [
                  0.07317073170731707,
                  0.20588235294117646
               ],
               [
                  0.08536585365853659,
                  0.20588235294117646
               ],
               [
                  0.08536585365853659,
                  0.22058823529411764
               ],
               [
                  0.0975609756097561,
                  0.22058823529411764
               ],
               [
                  0.10975609756097561,
                  0.22058823529411764
               ],
               [
                  0.10975609756097561,
                  0.23529411764705882
               ],
               [
                  0.12195121951219512,
                  0.23529411764705882
               ],
               [
                  0.12195121951219512,
                  0.25
               ],
               [
                  0.12195121951219512,
                  0.2647058823529412
               ],
               [
                  0.13414634146341464,
                  0.2647058823529412
               ],
               [
                  0.14634146341463414,
                  0.2647058823529412
               ],
               [
                  0.15853658536585366,
                  0.2647058823529412
               ],
               [
                  0.15853658536585366,
                  0.27941176470588236
               ],
               [
                  0.17073170731707318,
                  0.27941176470588236
               ],
               [
                  0.18292682926829268,
                  0.27941176470588236
               ],
               [
                  0.18292682926829268,
                  0.29411764705882354
               ],
               [
                  0.18292682926829268,
                  0.3088235294117647
               ],
               [
                  0.1951219512195122,
                  0.3088235294117647
               ],
               [
                  0.2073170731707317,
                  0.3088235294117647
               ],
               [
                  0.21951219512195122,
                  0.3088235294117647
               ],
               [
                  0.21951219512195122,
                  0.3235294117647059
               ],
               [
                  0.23170731707317074,
                  0.3235294117647059
               ],
               [
                  0.23170731707317074,
                  0.3382352941176471
               ],
               [
                  0.24390243902439024,
                  0.3382352941176471
               ],
               [
                  0.24390243902439024,
                  0.35294117647058826
               ],
               [
                  0.25609756097560976,
                  0.35294117647058826
               ],
               [
                  0.25609756097560976,
                  0.36764705882352944
               ],
               [
                  0.25609756097560976,
                  0.38235294117647056
               ],
               [
                  0.25609756097560976,
                  0.39705882352941174
               ],
               [
                  0.25609756097560976,
                  0.4117647058823529
               ],
               [
                  0.25609756097560976,
                  0.4264705882352941
               ],
               [
                  0.25609756097560976,
                  0.4411764705882353
               ],
               [
                  0.2682926829268293,
                  0.4411764705882353
               ],
               [
                  0.2804878048780488,
                  0.4411764705882353
               ],
               [
                  0.2926829268292683,
                  0.4411764705882353
               ],
               [
                  0.2926829268292683,
                  0.45588235294117646
               ],
               [
                  0.3048780487804878,
                  0.45588235294117646
               ],
               [
                  0.3170731707317073,
                  0.45588235294117646
               ],
               [
                  0.32926829268292684,
                  0.45588235294117646
               ],
               [
                  0.32926829268292684,
                  0.47058823529411764
               ],
               [
                  0.34146341463414637,
                  0.47058823529411764
               ],
               [
                  0.35365853658536583,
                  0.47058823529411764
               ],
               [
                  0.36585365853658536,
                  0.47058823529411764
               ],
               [
                  0.3780487804878049,
                  0.47058823529411764
               ],
               [
                  0.3902439024390244,
                  0.47058823529411764
               ],
               [
                  0.3902439024390244,
                  0.4852941176470588
               ],
               [
                  0.4024390243902439,
                  0.4852941176470588
               ],
               [
                  0.4146341463414634,
                  0.4852941176470588
               ],
               [
                  0.4146341463414634,
                  0.5
               ],
               [
                  0.4268292682926829,
                  0.5
               ],
               [
                  0.4268292682926829,
                  0.5147058823529411
               ],
               [
                  0.43902439024390244,
                  0.5147058823529411
               ],
               [
                  0.45121951219512196,
                  0.5147058823529411
               ],
               [
                  0.4634146341463415,
                  0.5147058823529411
               ],
               [
                  0.4634146341463415,
                  0.5294117647058824
               ],
               [
                  0.47560975609756095,
                  0.5294117647058824
               ],
               [
                  0.4878048780487805,
                  0.5294117647058824
               ],
               [
                  0.5,
                  0.5294117647058824
               ],
               [
                  0.5,
                  0.5441176470588235
               ],
               [
                  0.5,
                  0.5588235294117647
               ],
               [
                  0.5,
                  0.5735294117647058
               ],
               [
                  0.5,
                  0.5882352941176471
               ],
               [
                  0.5121951219512195,
                  0.5882352941176471
               ],
               [
                  0.524390243902439,
                  0.5882352941176471
               ],
               [
                  0.5365853658536586,
                  0.5882352941176471
               ],
               [
                  0.5365853658536586,
                  0.6029411764705882
               ],
               [
                  0.5365853658536586,
                  0.6176470588235294
               ],
               [
                  0.5487804878048781,
                  0.6176470588235294
               ],
               [
                  0.5609756097560976,
                  0.6176470588235294
               ],
               [
                  0.573170731707317,
                  0.6176470588235294
               ],
               [
                  0.5853658536585366,
                  0.6176470588235294
               ],
               [
                  0.5853658536585366,
                  0.6323529411764706
               ],
               [
                  0.5975609756097561,
                  0.6323529411764706
               ],
               [
                  0.6097560975609756,
                  0.6323529411764706
               ],
               [
                  0.6219512195121951,
                  0.6323529411764706
               ],
               [
                  0.6341463414634146,
                  0.6323529411764706
               ],
               [
                  0.6341463414634146,
                  0.6470588235294118
               ],
               [
                  0.6341463414634146,
                  0.6617647058823529
               ],
               [
                  0.6463414634146342,
                  0.6617647058823529
               ],
               [
                  0.6585365853658537,
                  0.6617647058823529
               ],
               [
                  0.6585365853658537,
                  0.6764705882352942
               ],
               [
                  0.6707317073170732,
                  0.6764705882352942
               ],
               [
                  0.6829268292682927,
                  0.6764705882352942
               ],
               [
                  0.6951219512195121,
                  0.6764705882352942
               ],
               [
                  0.7073170731707317,
                  0.6764705882352942
               ],
               [
                  0.7195121951219512,
                  0.6764705882352942
               ],
               [
                  0.7195121951219512,
                  0.6911764705882353
               ],
               [
                  0.7195121951219512,
                  0.7058823529411765
               ],
               [
                  0.7195121951219512,
                  0.7205882352941176
               ],
               [
                  0.7195121951219512,
                  0.7352941176470589
               ],
               [
                  0.7195121951219512,
                  0.75
               ],
               [
                  0.7317073170731707,
                  0.75
               ],
               [
                  0.7439024390243902,
                  0.75
               ],
               [
                  0.7560975609756098,
                  0.75
               ],
               [
                  0.7682926829268293,
                  0.75
               ],
               [
                  0.7804878048780488,
                  0.75
               ],
               [
                  0.7926829268292683,
                  0.75
               ],
               [
                  0.8048780487804879,
                  0.75
               ],
               [
                  0.8170731707317073,
                  0.75
               ],
               [
                  0.8292682926829268,
                  0.75
               ],
               [
                  0.8414634146341463,
                  0.75
               ],
               [
                  0.8414634146341463,
                  0.7647058823529411
               ],
               [
                  0.8414634146341463,
                  0.7794117647058824
               ],
               [
                  0.8536585365853658,
                  0.7794117647058824
               ],
               [
                  0.8536585365853658,
                  0.7941176470588235
               ],
               [
                  0.8536585365853658,
                  0.8088235294117647
               ],
               [
                  0.8536585365853658,
                  0.8235294117647058
               ],
               [
                  0.8536585365853658,
                  0.8382352941176471
               ],
               [
                  0.8536585365853658,
                  0.8529411764705882
               ],
               [
                  0.8658536585365854,
                  0.8529411764705882
               ],
               [
                  0.8780487804878049,
                  0.8529411764705882
               ],
               [
                  0.8780487804878049,
                  0.8676470588235294
               ],
               [
                  0.8902439024390244,
                  0.8676470588235294
               ],
               [
                  0.9024390243902439,
                  0.8676470588235294
               ],
               [
                  0.9024390243902439,
                  0.8823529411764706
               ],
               [
                  0.9024390243902439,
                  0.8970588235294118
               ],
               [
                  0.9024390243902439,
                  0.9117647058823529
               ],
               [
                  0.9024390243902439,
                  0.9264705882352942
               ],
               [
                  0.9024390243902439,
                  0.9411764705882353
               ],
               [
                  0.9024390243902439,
                  0.9558823529411765
               ],
               [
                  0.9146341463414634,
                  0.9558823529411765
               ],
               [
                  0.9146341463414634,
                  0.9705882352941176
               ],
               [
                  0.926829268292683,
                  0.9705882352941176
               ],
               [
                  0.926829268292683,
                  0.9852941176470589
               ],
               [
                  0.926829268292683,
                  1
               ],
               [
                  0.9390243902439024,
                  1
               ],
               [
                  0.9512195121951219,
                  1
               ],
               [
                  0.9634146341463414,
                  1
               ],
               [
                  0.975609756097561,
                  1
               ],
               [
                  0.9878048780487805,
                  1
               ],
               [
                  1,
                  1
               ]
            ]
         },
         "z" : {
            "Curve" : [
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve",
               "ROC Curve"
            ]
         }
      }

      // Create the configuration for the graph
      var config = {
         "graphType" : "Area",
         "graphOrientation" : "horizontal",
         "colorScheme" : "Prism",
         "xAxis" : [
            "False Positive Rate (1 - Specificity)"
         ],
         "yAxis" : [
            "True Positive Rate (Sensitivity)"
         ],
         "xAxisTitle" : "False Positive Rate (1 - Specificity)",
         "yAxisTitle" : "True Positive Rate (Sensitivity)",
         "objectColorTransparency" : 0.2,
         "setMinX" : 0,
         "setMaxX" : 1,
         "setMinY" : 0,
         "setMaxY" : 1,
         "showLegend" : true,
         "legendPosition" : "topLeft",
         "legendInside" : true,
         "customLegend" : [
            {
               "title" : "",
               "text" : [
                  "ROC curve",
                  "Random Guess (AUC = 0.5)"
               ],
               "line" : [
                  true,
                  true
               ],
               "lineColor" : [
                  "#5b9bd5",
                  "#6c757d"
               ],
               "lineType" : [
                  "solid",
                  "solid"
               ],
               "lineWidth" : [
                  2,
                  2
               ],
               "paddingX" : 10,
               "paddingY" : 10
            }
         ],
         "showLegendBorder" : true,
         "legendBackgroundColor" : "rgba(255,255,255,0.9)",
         "legendBackgroundBorderColor" : "#999999",
         "legendBackgroundBorderSize" : 1,
         "showTransition" : false,
         "title" : "ROC Curve",
         "subtitle" : "Area under the curve (AUC) = 0.56",
         "background" : "white",
         "decorations" : {
            "line" : [
               {
                  "color" : "#6c757d",
                  "width" : 2,
                  "x" : 0,
                  "y" : 0,
                  "x2" : 1,
                  "y2" : 1,
                  "label" : "Random Guess (AUC = 0.5)",
                  "id" : "roc-grafico-decoration-line-0"
               }
            ]
         }
      }

      // Event used to create graph (optional)
      var events = false

            // Call the CanvasXpress function to create the graph
      var cX = new CanvasXpress("canvasId", data, config, events);

    </script>

  </body>

</html>
library(canvasXpress)
y=read.table("https://www.canvasxpress.org/data/r/cX-area21-dat.txt", header=TRUE, sep="\t", quote="", row.names=1, fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE)
z=read.table("https://www.canvasxpress.org/data/r/cX-area21-var.txt", header=TRUE, sep="\t", quote="", row.names=1, fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE)
canvasXpress(
data=y,
varAnnot=z,
background="white",
colorScheme="Prism",
customLegend=list(list(line=list(True, True), lineColor=list("#5b9bd5", "#6c757d"), lineType=list("solid", "solid"), lineWidth=list(2, 2), paddingX=10, paddingY=10, text=list("ROC curve", "Random Guess (AUC = 0.5)"), title="")),
decorations=list(line=list(list(color="#6c757d", id="roc-grafico-decoration-line-0", label="Random Guess (AUC = 0.5)", width=2, x=0, x2=1, y=0, y2=1))),
graphOrientation="horizontal",
graphType="Area",
legendBackgroundBorderColor="#999999",
legendBackgroundBorderSize=1,
legendBackgroundColor="rgba(255,255,255,0.9)",
legendInside=TRUE,
legendPosition="topLeft",
objectColorTransparency=0.2,
setMaxX=1,
setMaxY=1,
setMinX=0,
setMinY=0,
showLegend=TRUE,
showLegendBorder=TRUE,
showTransition=FALSE,
subtitle="Area under the curve (AUC) = 0.56",
title="ROC Curve",
xAxis=list("False Positive Rate (1 - Specificity)"),
xAxisTitle="False Positive Rate (1 - Specificity)",
yAxis=list("True Positive Rate (Sensitivity)"),
yAxisTitle="True Positive Rate (Sensitivity)"
)
from canvasxpress.canvas import CanvasXpress
from canvasxpress.plot import show_in_browser

if __name__ == "__main__":
  # Define the chart with its data and configuration
  chart: CanvasXpress = CanvasXpress(
    render_to = "area21",
    data = {
      "y": {
        "vars": ["ROC-0", "ROC-1", "ROC-2", "ROC-3", "ROC-4", "ROC-5", "ROC-6", "ROC-7", "ROC-8", "ROC-9", "ROC-10", "ROC-11", "ROC-12", "ROC-13", "ROC-14", "ROC-15", "ROC-16", "ROC-17", "ROC-18", "ROC-19", "ROC-20", "ROC-21", "ROC-22", "ROC-23", "ROC-24", "ROC-25", "ROC-26", "ROC-27", "ROC-28", "ROC-29", "ROC-30", "ROC-31", "ROC-32", "ROC-33", "ROC-34", "ROC-35", "ROC-36", "ROC-37", "ROC-38", "ROC-39", "ROC-40", "ROC-41", "ROC-42", "ROC-43", "ROC-44", "ROC-45", "ROC-46", "ROC-47", "ROC-48", "ROC-49", "ROC-50", "ROC-51", "ROC-52", "ROC-53", "ROC-54", "ROC-55", "ROC-56", "ROC-57", "ROC-58", "ROC-59", "ROC-60", "ROC-61", "ROC-62", "ROC-63", "ROC-64", "ROC-65", "ROC-66", "ROC-67", "ROC-68", "ROC-69", "ROC-70", "ROC-71", "ROC-72", "ROC-73", "ROC-74", "ROC-75", "ROC-76", "ROC-77", "ROC-78", "ROC-79", "ROC-80", "ROC-81", "ROC-82", "ROC-83", "ROC-84", "ROC-85", "ROC-86", "ROC-87", "ROC-88", "ROC-89", "ROC-90", "ROC-91", "ROC-92", "ROC-93", "ROC-94", "ROC-95", "ROC-96", "ROC-97", "ROC-98", "ROC-99", "ROC-100", "ROC-101", "ROC-102", "ROC-103", "ROC-104", "ROC-105", "ROC-106", "ROC-107", "ROC-108", "ROC-109", "ROC-110", "ROC-111", "ROC-112", "ROC-113", "ROC-114", "ROC-115", "ROC-116", "ROC-117", "ROC-118", "ROC-119", "ROC-120", "ROC-121", "ROC-122", "ROC-123", "ROC-124", "ROC-125", "ROC-126", "ROC-127", "ROC-128", "ROC-129", "ROC-130", "ROC-131", "ROC-132", "ROC-133", "ROC-134", "ROC-135", "ROC-136", "ROC-137", "ROC-138", "ROC-139", "ROC-140", "ROC-141", "ROC-142", "ROC-143", "ROC-144", "ROC-145", "ROC-146", "ROC-147", "ROC-148", "ROC-149", "ROC-150"],
        "smps": ["False Positive Rate (1 - Specificity)", "True Positive Rate (Sensitivity)"],
        "data": [
          [0, 0],
          [0, 0.014705882352941176],
          [0.012195121951219513, 0.014705882352941176],
          [0.012195121951219513, 0.029411764705882353],
          [0.012195121951219513, 0.04411764705882353],
          [0.012195121951219513, 0.058823529411764705],
          [0.012195121951219513, 0.07352941176470588],
          [0.024390243902439025, 0.07352941176470588],
          [0.024390243902439025, 0.08823529411764706],
          [0.024390243902439025, 0.10294117647058823],
          [0.036585365853658534, 0.10294117647058823],
          [0.036585365853658534, 0.11764705882352941],
          [0.04878048780487805, 0.11764705882352941],
          [0.06097560975609756, 0.11764705882352941],
          [0.06097560975609756, 0.1323529411764706],
          [0.06097560975609756, 0.14705882352941177],
          [0.07317073170731707, 0.14705882352941177],
          [0.07317073170731707, 0.16176470588235295],
          [0.07317073170731707, 0.17647058823529413],
          [0.07317073170731707, 0.19117647058823528],
          [0.07317073170731707, 0.20588235294117646],
          [0.08536585365853659, 0.20588235294117646],
          [0.08536585365853659, 0.22058823529411764],
          [0.0975609756097561, 0.22058823529411764],
          [0.10975609756097561, 0.22058823529411764],
          [0.10975609756097561, 0.23529411764705882],
          [0.12195121951219512, 0.23529411764705882],
          [0.12195121951219512, 0.25],
          [0.12195121951219512, 0.2647058823529412],
          [0.13414634146341464, 0.2647058823529412],
          [0.14634146341463414, 0.2647058823529412],
          [0.15853658536585366, 0.2647058823529412],
          [0.15853658536585366, 0.27941176470588236],
          [0.17073170731707318, 0.27941176470588236],
          [0.18292682926829268, 0.27941176470588236],
          [0.18292682926829268, 0.29411764705882354],
          [0.18292682926829268, 0.3088235294117647],
          [0.1951219512195122, 0.3088235294117647],
          [0.2073170731707317, 0.3088235294117647],
          [0.21951219512195122, 0.3088235294117647],
          [0.21951219512195122, 0.3235294117647059],
          [0.23170731707317074, 0.3235294117647059],
          [0.23170731707317074, 0.3382352941176471],
          [0.24390243902439024, 0.3382352941176471],
          [0.24390243902439024, 0.35294117647058826],
          [0.25609756097560976, 0.35294117647058826],
          [0.25609756097560976, 0.36764705882352944],
          [0.25609756097560976, 0.38235294117647056],
          [0.25609756097560976, 0.39705882352941174],
          [0.25609756097560976, 0.4117647058823529],
          [0.25609756097560976, 0.4264705882352941],
          [0.25609756097560976, 0.4411764705882353],
          [0.2682926829268293, 0.4411764705882353],
          [0.2804878048780488, 0.4411764705882353],
          [0.2926829268292683, 0.4411764705882353],
          [0.2926829268292683, 0.45588235294117646],
          [0.3048780487804878, 0.45588235294117646],
          [0.3170731707317073, 0.45588235294117646],
          [0.32926829268292684, 0.45588235294117646],
          [0.32926829268292684, 0.47058823529411764],
          [0.34146341463414637, 0.47058823529411764],
          [0.35365853658536583, 0.47058823529411764],
          [0.36585365853658536, 0.47058823529411764],
          [0.3780487804878049, 0.47058823529411764],
          [0.3902439024390244, 0.47058823529411764],
          [0.3902439024390244, 0.4852941176470588],
          [0.4024390243902439, 0.4852941176470588],
          [0.4146341463414634, 0.4852941176470588],
          [0.4146341463414634, 0.5],
          [0.4268292682926829, 0.5],
          [0.4268292682926829, 0.5147058823529411],
          [0.43902439024390244, 0.5147058823529411],
          [0.45121951219512196, 0.5147058823529411],
          [0.4634146341463415, 0.5147058823529411],
          [0.4634146341463415, 0.5294117647058824],
          [0.47560975609756095, 0.5294117647058824],
          [0.4878048780487805, 0.5294117647058824],
          [0.5, 0.5294117647058824],
          [0.5, 0.5441176470588235],
          [0.5, 0.5588235294117647],
          [0.5, 0.5735294117647058],
          [0.5, 0.5882352941176471],
          [0.5121951219512195, 0.5882352941176471],
          [0.524390243902439, 0.5882352941176471],
          [0.5365853658536586, 0.5882352941176471],
          [0.5365853658536586, 0.6029411764705882],
          [0.5365853658536586, 0.6176470588235294],
          [0.5487804878048781, 0.6176470588235294],
          [0.5609756097560976, 0.6176470588235294],
          [0.573170731707317, 0.6176470588235294],
          [0.5853658536585366, 0.6176470588235294],
          [0.5853658536585366, 0.6323529411764706],
          [0.5975609756097561, 0.6323529411764706],
          [0.6097560975609756, 0.6323529411764706],
          [0.6219512195121951, 0.6323529411764706],
          [0.6341463414634146, 0.6323529411764706],
          [0.6341463414634146, 0.6470588235294118],
          [0.6341463414634146, 0.6617647058823529],
          [0.6463414634146342, 0.6617647058823529],
          [0.6585365853658537, 0.6617647058823529],
          [0.6585365853658537, 0.6764705882352942],
          [0.6707317073170732, 0.6764705882352942],
          [0.6829268292682927, 0.6764705882352942],
          [0.6951219512195121, 0.6764705882352942],
          [0.7073170731707317, 0.6764705882352942],
          [0.7195121951219512, 0.6764705882352942],
          [0.7195121951219512, 0.6911764705882353],
          [0.7195121951219512, 0.7058823529411765],
          [0.7195121951219512, 0.7205882352941176],
          [0.7195121951219512, 0.7352941176470589],
          [0.7195121951219512, 0.75],
          [0.7317073170731707, 0.75],
          [0.7439024390243902, 0.75],
          [0.7560975609756098, 0.75],
          [0.7682926829268293, 0.75],
          [0.7804878048780488, 0.75],
          [0.7926829268292683, 0.75],
          [0.8048780487804879, 0.75],
          [0.8170731707317073, 0.75],
          [0.8292682926829268, 0.75],
          [0.8414634146341463, 0.75],
          [0.8414634146341463, 0.7647058823529411],
          [0.8414634146341463, 0.7794117647058824],
          [0.8536585365853658, 0.7794117647058824],
          [0.8536585365853658, 0.7941176470588235],
          [0.8536585365853658, 0.8088235294117647],
          [0.8536585365853658, 0.8235294117647058],
          [0.8536585365853658, 0.8382352941176471],
          [0.8536585365853658, 0.8529411764705882],
          [0.8658536585365854, 0.8529411764705882],
          [0.8780487804878049, 0.8529411764705882],
          [0.8780487804878049, 0.8676470588235294],
          [0.8902439024390244, 0.8676470588235294],
          [0.9024390243902439, 0.8676470588235294],
          [0.9024390243902439, 0.8823529411764706],
          [0.9024390243902439, 0.8970588235294118],
          [0.9024390243902439, 0.9117647058823529],
          [0.9024390243902439, 0.9264705882352942],
          [0.9024390243902439, 0.9411764705882353],
          [0.9024390243902439, 0.9558823529411765],
          [0.9146341463414634, 0.9558823529411765],
          [0.9146341463414634, 0.9705882352941176],
          [0.926829268292683, 0.9705882352941176],
          [0.926829268292683, 0.9852941176470589],
          [0.926829268292683, 1],
          [0.9390243902439024, 1],
          [0.9512195121951219, 1],
          [0.9634146341463414, 1],
          [0.975609756097561, 1],
          [0.9878048780487805, 1],
          [1, 1]
        ]
      },
      "z": {
        "Curve": ["ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve"]
      }
    },
    config = {
      "graphType": "Area",
      "graphOrientation": "horizontal",
      "colorScheme": "Prism",
      "xAxis": ["False Positive Rate (1 - Specificity)"],
      "yAxis": ["True Positive Rate (Sensitivity)"],
      "xAxisTitle": "False Positive Rate (1 - Specificity)",
      "yAxisTitle": "True Positive Rate (Sensitivity)",
      "objectColorTransparency": 0.2,
      "setMinX": 0,
      "setMaxX": 1,
      "setMinY": 0,
      "setMaxY": 1,
      "showLegend": True,
      "legendPosition": "topLeft",
      "legendInside": True,
      "customLegend": [
        {
          "title": "",
          "text": ["ROC curve", "Random Guess (AUC = 0.5)"],
          "line": [True, True],
          "lineColor": ["#5b9bd5", "#6c757d"],
          "lineType": ["solid", "solid"],
          "lineWidth": [2, 2],
          "paddingX": 10,
          "paddingY": 10
        }
      ],
      "showLegendBorder": True,
      "legendBackgroundColor": "rgba(255,255,255,0.9)",
      "legendBackgroundBorderColor": "#999999",
      "legendBackgroundBorderSize": 1,
      "showTransition": False,
      "title": "ROC Curve",
      "subtitle": "Area under the curve (AUC) = 0.56",
      "background": "white",
      "decorations": {
        "line": [
          {
            "color": "#6c757d",
            "width": 2,
            "x": 0,
            "y": 0,
            "x2": 1,
            "y2": 1,
            "label": "Random Guess (AUC = 0.5)",
            "id": "roc-grafico-decoration-line-0"
          }
        ]
      }
    },
    width = 600,
    height = 600
  )

  # Display the chart in its own Web page
  show_in_browser(chart)
Run this notebook: Open in Binder 
from canvasxpress.canvas import CanvasXpress
from canvasxpress.plot import graph

graph(
  CanvasXpress(
    render_to = "area21",
    data = {
      "y": {
        "vars": ["ROC-0", "ROC-1", "ROC-2", "ROC-3", "ROC-4", "ROC-5", "ROC-6", "ROC-7", "ROC-8", "ROC-9", "ROC-10", "ROC-11", "ROC-12", "ROC-13", "ROC-14", "ROC-15", "ROC-16", "ROC-17", "ROC-18", "ROC-19", "ROC-20", "ROC-21", "ROC-22", "ROC-23", "ROC-24", "ROC-25", "ROC-26", "ROC-27", "ROC-28", "ROC-29", "ROC-30", "ROC-31", "ROC-32", "ROC-33", "ROC-34", "ROC-35", "ROC-36", "ROC-37", "ROC-38", "ROC-39", "ROC-40", "ROC-41", "ROC-42", "ROC-43", "ROC-44", "ROC-45", "ROC-46", "ROC-47", "ROC-48", "ROC-49", "ROC-50", "ROC-51", "ROC-52", "ROC-53", "ROC-54", "ROC-55", "ROC-56", "ROC-57", "ROC-58", "ROC-59", "ROC-60", "ROC-61", "ROC-62", "ROC-63", "ROC-64", "ROC-65", "ROC-66", "ROC-67", "ROC-68", "ROC-69", "ROC-70", "ROC-71", "ROC-72", "ROC-73", "ROC-74", "ROC-75", "ROC-76", "ROC-77", "ROC-78", "ROC-79", "ROC-80", "ROC-81", "ROC-82", "ROC-83", "ROC-84", "ROC-85", "ROC-86", "ROC-87", "ROC-88", "ROC-89", "ROC-90", "ROC-91", "ROC-92", "ROC-93", "ROC-94", "ROC-95", "ROC-96", "ROC-97", "ROC-98", "ROC-99", "ROC-100", "ROC-101", "ROC-102", "ROC-103", "ROC-104", "ROC-105", "ROC-106", "ROC-107", "ROC-108", "ROC-109", "ROC-110", "ROC-111", "ROC-112", "ROC-113", "ROC-114", "ROC-115", "ROC-116", "ROC-117", "ROC-118", "ROC-119", "ROC-120", "ROC-121", "ROC-122", "ROC-123", "ROC-124", "ROC-125", "ROC-126", "ROC-127", "ROC-128", "ROC-129", "ROC-130", "ROC-131", "ROC-132", "ROC-133", "ROC-134", "ROC-135", "ROC-136", "ROC-137", "ROC-138", "ROC-139", "ROC-140", "ROC-141", "ROC-142", "ROC-143", "ROC-144", "ROC-145", "ROC-146", "ROC-147", "ROC-148", "ROC-149", "ROC-150"],
        "smps": ["False Positive Rate (1 - Specificity)", "True Positive Rate (Sensitivity)"],
        "data": [
          [0, 0],
          [0, 0.014705882352941176],
          [0.012195121951219513, 0.014705882352941176],
          [0.012195121951219513, 0.029411764705882353],
          [0.012195121951219513, 0.04411764705882353],
          [0.012195121951219513, 0.058823529411764705],
          [0.012195121951219513, 0.07352941176470588],
          [0.024390243902439025, 0.07352941176470588],
          [0.024390243902439025, 0.08823529411764706],
          [0.024390243902439025, 0.10294117647058823],
          [0.036585365853658534, 0.10294117647058823],
          [0.036585365853658534, 0.11764705882352941],
          [0.04878048780487805, 0.11764705882352941],
          [0.06097560975609756, 0.11764705882352941],
          [0.06097560975609756, 0.1323529411764706],
          [0.06097560975609756, 0.14705882352941177],
          [0.07317073170731707, 0.14705882352941177],
          [0.07317073170731707, 0.16176470588235295],
          [0.07317073170731707, 0.17647058823529413],
          [0.07317073170731707, 0.19117647058823528],
          [0.07317073170731707, 0.20588235294117646],
          [0.08536585365853659, 0.20588235294117646],
          [0.08536585365853659, 0.22058823529411764],
          [0.0975609756097561, 0.22058823529411764],
          [0.10975609756097561, 0.22058823529411764],
          [0.10975609756097561, 0.23529411764705882],
          [0.12195121951219512, 0.23529411764705882],
          [0.12195121951219512, 0.25],
          [0.12195121951219512, 0.2647058823529412],
          [0.13414634146341464, 0.2647058823529412],
          [0.14634146341463414, 0.2647058823529412],
          [0.15853658536585366, 0.2647058823529412],
          [0.15853658536585366, 0.27941176470588236],
          [0.17073170731707318, 0.27941176470588236],
          [0.18292682926829268, 0.27941176470588236],
          [0.18292682926829268, 0.29411764705882354],
          [0.18292682926829268, 0.3088235294117647],
          [0.1951219512195122, 0.3088235294117647],
          [0.2073170731707317, 0.3088235294117647],
          [0.21951219512195122, 0.3088235294117647],
          [0.21951219512195122, 0.3235294117647059],
          [0.23170731707317074, 0.3235294117647059],
          [0.23170731707317074, 0.3382352941176471],
          [0.24390243902439024, 0.3382352941176471],
          [0.24390243902439024, 0.35294117647058826],
          [0.25609756097560976, 0.35294117647058826],
          [0.25609756097560976, 0.36764705882352944],
          [0.25609756097560976, 0.38235294117647056],
          [0.25609756097560976, 0.39705882352941174],
          [0.25609756097560976, 0.4117647058823529],
          [0.25609756097560976, 0.4264705882352941],
          [0.25609756097560976, 0.4411764705882353],
          [0.2682926829268293, 0.4411764705882353],
          [0.2804878048780488, 0.4411764705882353],
          [0.2926829268292683, 0.4411764705882353],
          [0.2926829268292683, 0.45588235294117646],
          [0.3048780487804878, 0.45588235294117646],
          [0.3170731707317073, 0.45588235294117646],
          [0.32926829268292684, 0.45588235294117646],
          [0.32926829268292684, 0.47058823529411764],
          [0.34146341463414637, 0.47058823529411764],
          [0.35365853658536583, 0.47058823529411764],
          [0.36585365853658536, 0.47058823529411764],
          [0.3780487804878049, 0.47058823529411764],
          [0.3902439024390244, 0.47058823529411764],
          [0.3902439024390244, 0.4852941176470588],
          [0.4024390243902439, 0.4852941176470588],
          [0.4146341463414634, 0.4852941176470588],
          [0.4146341463414634, 0.5],
          [0.4268292682926829, 0.5],
          [0.4268292682926829, 0.5147058823529411],
          [0.43902439024390244, 0.5147058823529411],
          [0.45121951219512196, 0.5147058823529411],
          [0.4634146341463415, 0.5147058823529411],
          [0.4634146341463415, 0.5294117647058824],
          [0.47560975609756095, 0.5294117647058824],
          [0.4878048780487805, 0.5294117647058824],
          [0.5, 0.5294117647058824],
          [0.5, 0.5441176470588235],
          [0.5, 0.5588235294117647],
          [0.5, 0.5735294117647058],
          [0.5, 0.5882352941176471],
          [0.5121951219512195, 0.5882352941176471],
          [0.524390243902439, 0.5882352941176471],
          [0.5365853658536586, 0.5882352941176471],
          [0.5365853658536586, 0.6029411764705882],
          [0.5365853658536586, 0.6176470588235294],
          [0.5487804878048781, 0.6176470588235294],
          [0.5609756097560976, 0.6176470588235294],
          [0.573170731707317, 0.6176470588235294],
          [0.5853658536585366, 0.6176470588235294],
          [0.5853658536585366, 0.6323529411764706],
          [0.5975609756097561, 0.6323529411764706],
          [0.6097560975609756, 0.6323529411764706],
          [0.6219512195121951, 0.6323529411764706],
          [0.6341463414634146, 0.6323529411764706],
          [0.6341463414634146, 0.6470588235294118],
          [0.6341463414634146, 0.6617647058823529],
          [0.6463414634146342, 0.6617647058823529],
          [0.6585365853658537, 0.6617647058823529],
          [0.6585365853658537, 0.6764705882352942],
          [0.6707317073170732, 0.6764705882352942],
          [0.6829268292682927, 0.6764705882352942],
          [0.6951219512195121, 0.6764705882352942],
          [0.7073170731707317, 0.6764705882352942],
          [0.7195121951219512, 0.6764705882352942],
          [0.7195121951219512, 0.6911764705882353],
          [0.7195121951219512, 0.7058823529411765],
          [0.7195121951219512, 0.7205882352941176],
          [0.7195121951219512, 0.7352941176470589],
          [0.7195121951219512, 0.75],
          [0.7317073170731707, 0.75],
          [0.7439024390243902, 0.75],
          [0.7560975609756098, 0.75],
          [0.7682926829268293, 0.75],
          [0.7804878048780488, 0.75],
          [0.7926829268292683, 0.75],
          [0.8048780487804879, 0.75],
          [0.8170731707317073, 0.75],
          [0.8292682926829268, 0.75],
          [0.8414634146341463, 0.75],
          [0.8414634146341463, 0.7647058823529411],
          [0.8414634146341463, 0.7794117647058824],
          [0.8536585365853658, 0.7794117647058824],
          [0.8536585365853658, 0.7941176470588235],
          [0.8536585365853658, 0.8088235294117647],
          [0.8536585365853658, 0.8235294117647058],
          [0.8536585365853658, 0.8382352941176471],
          [0.8536585365853658, 0.8529411764705882],
          [0.8658536585365854, 0.8529411764705882],
          [0.8780487804878049, 0.8529411764705882],
          [0.8780487804878049, 0.8676470588235294],
          [0.8902439024390244, 0.8676470588235294],
          [0.9024390243902439, 0.8676470588235294],
          [0.9024390243902439, 0.8823529411764706],
          [0.9024390243902439, 0.8970588235294118],
          [0.9024390243902439, 0.9117647058823529],
          [0.9024390243902439, 0.9264705882352942],
          [0.9024390243902439, 0.9411764705882353],
          [0.9024390243902439, 0.9558823529411765],
          [0.9146341463414634, 0.9558823529411765],
          [0.9146341463414634, 0.9705882352941176],
          [0.926829268292683, 0.9705882352941176],
          [0.926829268292683, 0.9852941176470589],
          [0.926829268292683, 1],
          [0.9390243902439024, 1],
          [0.9512195121951219, 1],
          [0.9634146341463414, 1],
          [0.975609756097561, 1],
          [0.9878048780487805, 1],
          [1, 1]
        ]
      },
      "z": {
        "Curve": ["ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve"]
      }
    },
    config = {
      "graphType": "Area",
      "graphOrientation": "horizontal",
      "colorScheme": "Prism",
      "xAxis": ["False Positive Rate (1 - Specificity)"],
      "yAxis": ["True Positive Rate (Sensitivity)"],
      "xAxisTitle": "False Positive Rate (1 - Specificity)",
      "yAxisTitle": "True Positive Rate (Sensitivity)",
      "objectColorTransparency": 0.2,
      "setMinX": 0,
      "setMaxX": 1,
      "setMinY": 0,
      "setMaxY": 1,
      "showLegend": True,
      "legendPosition": "topLeft",
      "legendInside": True,
      "customLegend": [
        {
          "title": "",
          "text": ["ROC curve", "Random Guess (AUC = 0.5)"],
          "line": [True, True],
          "lineColor": ["#5b9bd5", "#6c757d"],
          "lineType": ["solid", "solid"],
          "lineWidth": [2, 2],
          "paddingX": 10,
          "paddingY": 10
        }
      ],
      "showLegendBorder": True,
      "legendBackgroundColor": "rgba(255,255,255,0.9)",
      "legendBackgroundBorderColor": "#999999",
      "legendBackgroundBorderSize": 1,
      "showTransition": False,
      "title": "ROC Curve",
      "subtitle": "Area under the curve (AUC) = 0.56",
      "background": "white",
      "decorations": {
        "line": [
          {
            "color": "#6c757d",
            "width": 2,
            "x": 0,
            "y": 0,
            "x2": 1,
            "y2": 1,
            "label": "Random Guess (AUC = 0.5)",
            "id": "roc-grafico-decoration-line-0"
          }
        ]
      }
    },
    width = 600,
    height = 600
  )
)

using CanvasXpress

canvasxpress(Dict(
  "y" => Dict(
    "vars" => ["ROC-0", "ROC-1", "ROC-2", "ROC-3", "ROC-4", "ROC-5", "ROC-6", "ROC-7", "ROC-8", "ROC-9", "ROC-10", "ROC-11", "ROC-12", "ROC-13", "ROC-14", "ROC-15", "ROC-16", "ROC-17", "ROC-18", "ROC-19", "ROC-20", "ROC-21", "ROC-22", "ROC-23", "ROC-24", "ROC-25", "ROC-26", "ROC-27", "ROC-28", "ROC-29", "ROC-30", "ROC-31", "ROC-32", "ROC-33", "ROC-34", "ROC-35", "ROC-36", "ROC-37", "ROC-38", "ROC-39", "ROC-40", "ROC-41", "ROC-42", "ROC-43", "ROC-44", "ROC-45", "ROC-46", "ROC-47", "ROC-48", "ROC-49", "ROC-50", "ROC-51", "ROC-52", "ROC-53", "ROC-54", "ROC-55", "ROC-56", "ROC-57", "ROC-58", "ROC-59", "ROC-60", "ROC-61", "ROC-62", "ROC-63", "ROC-64", "ROC-65", "ROC-66", "ROC-67", "ROC-68", "ROC-69", "ROC-70", "ROC-71", "ROC-72", "ROC-73", "ROC-74", "ROC-75", "ROC-76", "ROC-77", "ROC-78", "ROC-79", "ROC-80", "ROC-81", "ROC-82", "ROC-83", "ROC-84", "ROC-85", "ROC-86", "ROC-87", "ROC-88", "ROC-89", "ROC-90", "ROC-91", "ROC-92", "ROC-93", "ROC-94", "ROC-95", "ROC-96", "ROC-97", "ROC-98", "ROC-99", "ROC-100", "ROC-101", "ROC-102", "ROC-103", "ROC-104", "ROC-105", "ROC-106", "ROC-107", "ROC-108", "ROC-109", "ROC-110", "ROC-111", "ROC-112", "ROC-113", "ROC-114", "ROC-115", "ROC-116", "ROC-117", "ROC-118", "ROC-119", "ROC-120", "ROC-121", "ROC-122", "ROC-123", "ROC-124", "ROC-125", "ROC-126", "ROC-127", "ROC-128", "ROC-129", "ROC-130", "ROC-131", "ROC-132", "ROC-133", "ROC-134", "ROC-135", "ROC-136", "ROC-137", "ROC-138", "ROC-139", "ROC-140", "ROC-141", "ROC-142", "ROC-143", "ROC-144", "ROC-145", "ROC-146", "ROC-147", "ROC-148", "ROC-149", "ROC-150"],
    "smps" => ["False Positive Rate (1 - Specificity)", "True Positive Rate (Sensitivity)"],
    "data" => [
      [0, 0],
      [0, 0.014705882352941176],
      [0.012195121951219513, 0.014705882352941176],
      [0.012195121951219513, 0.029411764705882353],
      [0.012195121951219513, 0.04411764705882353],
      [0.012195121951219513, 0.058823529411764705],
      [0.012195121951219513, 0.07352941176470588],
      [0.024390243902439025, 0.07352941176470588],
      [0.024390243902439025, 0.08823529411764706],
      [0.024390243902439025, 0.10294117647058823],
      [0.036585365853658534, 0.10294117647058823],
      [0.036585365853658534, 0.11764705882352941],
      [0.04878048780487805, 0.11764705882352941],
      [0.06097560975609756, 0.11764705882352941],
      [0.06097560975609756, 0.1323529411764706],
      [0.06097560975609756, 0.14705882352941177],
      [0.07317073170731707, 0.14705882352941177],
      [0.07317073170731707, 0.16176470588235295],
      [0.07317073170731707, 0.17647058823529413],
      [0.07317073170731707, 0.19117647058823528],
      [0.07317073170731707, 0.20588235294117646],
      [0.08536585365853659, 0.20588235294117646],
      [0.08536585365853659, 0.22058823529411764],
      [0.0975609756097561, 0.22058823529411764],
      [0.10975609756097561, 0.22058823529411764],
      [0.10975609756097561, 0.23529411764705882],
      [0.12195121951219512, 0.23529411764705882],
      [0.12195121951219512, 0.25],
      [0.12195121951219512, 0.2647058823529412],
      [0.13414634146341464, 0.2647058823529412],
      [0.14634146341463414, 0.2647058823529412],
      [0.15853658536585366, 0.2647058823529412],
      [0.15853658536585366, 0.27941176470588236],
      [0.17073170731707318, 0.27941176470588236],
      [0.18292682926829268, 0.27941176470588236],
      [0.18292682926829268, 0.29411764705882354],
      [0.18292682926829268, 0.3088235294117647],
      [0.1951219512195122, 0.3088235294117647],
      [0.2073170731707317, 0.3088235294117647],
      [0.21951219512195122, 0.3088235294117647],
      [0.21951219512195122, 0.3235294117647059],
      [0.23170731707317074, 0.3235294117647059],
      [0.23170731707317074, 0.3382352941176471],
      [0.24390243902439024, 0.3382352941176471],
      [0.24390243902439024, 0.35294117647058826],
      [0.25609756097560976, 0.35294117647058826],
      [0.25609756097560976, 0.36764705882352944],
      [0.25609756097560976, 0.38235294117647056],
      [0.25609756097560976, 0.39705882352941174],
      [0.25609756097560976, 0.4117647058823529],
      [0.25609756097560976, 0.4264705882352941],
      [0.25609756097560976, 0.4411764705882353],
      [0.2682926829268293, 0.4411764705882353],
      [0.2804878048780488, 0.4411764705882353],
      [0.2926829268292683, 0.4411764705882353],
      [0.2926829268292683, 0.45588235294117646],
      [0.3048780487804878, 0.45588235294117646],
      [0.3170731707317073, 0.45588235294117646],
      [0.32926829268292684, 0.45588235294117646],
      [0.32926829268292684, 0.47058823529411764],
      [0.34146341463414637, 0.47058823529411764],
      [0.35365853658536583, 0.47058823529411764],
      [0.36585365853658536, 0.47058823529411764],
      [0.3780487804878049, 0.47058823529411764],
      [0.3902439024390244, 0.47058823529411764],
      [0.3902439024390244, 0.4852941176470588],
      [0.4024390243902439, 0.4852941176470588],
      [0.4146341463414634, 0.4852941176470588],
      [0.4146341463414634, 0.5],
      [0.4268292682926829, 0.5],
      [0.4268292682926829, 0.5147058823529411],
      [0.43902439024390244, 0.5147058823529411],
      [0.45121951219512196, 0.5147058823529411],
      [0.4634146341463415, 0.5147058823529411],
      [0.4634146341463415, 0.5294117647058824],
      [0.47560975609756095, 0.5294117647058824],
      [0.4878048780487805, 0.5294117647058824],
      [0.5, 0.5294117647058824],
      [0.5, 0.5441176470588235],
      [0.5, 0.5588235294117647],
      [0.5, 0.5735294117647058],
      [0.5, 0.5882352941176471],
      [0.5121951219512195, 0.5882352941176471],
      [0.524390243902439, 0.5882352941176471],
      [0.5365853658536586, 0.5882352941176471],
      [0.5365853658536586, 0.6029411764705882],
      [0.5365853658536586, 0.6176470588235294],
      [0.5487804878048781, 0.6176470588235294],
      [0.5609756097560976, 0.6176470588235294],
      [0.573170731707317, 0.6176470588235294],
      [0.5853658536585366, 0.6176470588235294],
      [0.5853658536585366, 0.6323529411764706],
      [0.5975609756097561, 0.6323529411764706],
      [0.6097560975609756, 0.6323529411764706],
      [0.6219512195121951, 0.6323529411764706],
      [0.6341463414634146, 0.6323529411764706],
      [0.6341463414634146, 0.6470588235294118],
      [0.6341463414634146, 0.6617647058823529],
      [0.6463414634146342, 0.6617647058823529],
      [0.6585365853658537, 0.6617647058823529],
      [0.6585365853658537, 0.6764705882352942],
      [0.6707317073170732, 0.6764705882352942],
      [0.6829268292682927, 0.6764705882352942],
      [0.6951219512195121, 0.6764705882352942],
      [0.7073170731707317, 0.6764705882352942],
      [0.7195121951219512, 0.6764705882352942],
      [0.7195121951219512, 0.6911764705882353],
      [0.7195121951219512, 0.7058823529411765],
      [0.7195121951219512, 0.7205882352941176],
      [0.7195121951219512, 0.7352941176470589],
      [0.7195121951219512, 0.75],
      [0.7317073170731707, 0.75],
      [0.7439024390243902, 0.75],
      [0.7560975609756098, 0.75],
      [0.7682926829268293, 0.75],
      [0.7804878048780488, 0.75],
      [0.7926829268292683, 0.75],
      [0.8048780487804879, 0.75],
      [0.8170731707317073, 0.75],
      [0.8292682926829268, 0.75],
      [0.8414634146341463, 0.75],
      [0.8414634146341463, 0.7647058823529411],
      [0.8414634146341463, 0.7794117647058824],
      [0.8536585365853658, 0.7794117647058824],
      [0.8536585365853658, 0.7941176470588235],
      [0.8536585365853658, 0.8088235294117647],
      [0.8536585365853658, 0.8235294117647058],
      [0.8536585365853658, 0.8382352941176471],
      [0.8536585365853658, 0.8529411764705882],
      [0.8658536585365854, 0.8529411764705882],
      [0.8780487804878049, 0.8529411764705882],
      [0.8780487804878049, 0.8676470588235294],
      [0.8902439024390244, 0.8676470588235294],
      [0.9024390243902439, 0.8676470588235294],
      [0.9024390243902439, 0.8823529411764706],
      [0.9024390243902439, 0.8970588235294118],
      [0.9024390243902439, 0.9117647058823529],
      [0.9024390243902439, 0.9264705882352942],
      [0.9024390243902439, 0.9411764705882353],
      [0.9024390243902439, 0.9558823529411765],
      [0.9146341463414634, 0.9558823529411765],
      [0.9146341463414634, 0.9705882352941176],
      [0.926829268292683, 0.9705882352941176],
      [0.926829268292683, 0.9852941176470589],
      [0.926829268292683, 1],
      [0.9390243902439024, 1],
      [0.9512195121951219, 1],
      [0.9634146341463414, 1],
      [0.975609756097561, 1],
      [0.9878048780487805, 1],
      [1, 1]
    ]
  ),
  "z" => Dict(
    "Curve" => ["ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve", "ROC Curve"]
  )
);
  graphType = "Area",
  graphOrientation = "horizontal",
  colorScheme = "Prism",
  xAxis = ["False Positive Rate (1 - Specificity)"],
  yAxis = ["True Positive Rate (Sensitivity)"],
  xAxisTitle = "False Positive Rate (1 - Specificity)",
  yAxisTitle = "True Positive Rate (Sensitivity)",
  objectColorTransparency = 0.2,
  setMinX = 0,
  setMaxX = 1,
  setMinY = 0,
  setMaxY = 1,
  showLegend = true,
  legendPosition = "topLeft",
  legendInside = true,
  customLegend = [
    Dict(
      "title" => "",
      "text" => ["ROC curve", "Random Guess (AUC = 0.5)"],
      "line" => [true, true],
      "lineColor" => ["#5b9bd5", "#6c757d"],
      "lineType" => ["solid", "solid"],
      "lineWidth" => [2, 2],
      "paddingX" => 10,
      "paddingY" => 10
    )
  ],
  showLegendBorder = true,
  legendBackgroundColor = "rgba(255,255,255,0.9)",
  legendBackgroundBorderColor = "#999999",
  legendBackgroundBorderSize = 1,
  showTransition = false,
  title = "ROC Curve",
  subtitle = "Area under the curve (AUC) = 0.56",
  background = "white",
  decorations = Dict(
    "line" => [
      Dict(
        "color" => "#6c757d",
        "width" => 2,
        "x" => 0,
        "y" => 0,
        "x2" => 1,
        "y2" => 1,
        "label" => "Random Guess (AUC = 0.5)",
        "id" => "roc-grafico-decoration-line-0"
      )
    ]
  )
)
CanvasXpress Logo

CanvasXpress a stand-alone JavaScript Library for Data Analytics. Built for the purpose of reproducible research with a sophisticated and unobtrusive user interface. Full and effortless audit trail of data, configuration and all user interactions in every visualization.

©2025 All Rights Reserved. CanvasXpress®

Documentation
Examples Docs Learn Api Spec Quality Accessibility Updates Changelog
Company
Contact License Governance Support Regulated & GxP Admin
Information
Terms of Use Privacy policy References
⇧