Animated ROC Chart

A d3js ROC Chart that animates through the areas under each curve.
Might be useful for evaluating models.

the data shown are from models that predict various tennis stats. curious about the source data? browse through the R script that @ilanthedataman uses to generate the data.

inspired by the Interactive ROC Curve bl.ock from ilanman

<!DOCTYPE html>
<meta charset="utf-8">
<head>
  <link href='https://fonts.googleapis.com/css?family=Roboto:400,700,300,100,900|Open+Sans:400,300,700,600,800' rel='stylesheet' type='text/css'>
</head>
<style>

body { 
  font-size: 12px; 
  font-family: 'Open Sans';
}

path { 
    stroke-width: 3;
    fill: none;
    opacity: .7;
}

.axis path,
.axis line {
    fill: none;
    stroke: grey;
    stroke-width: 2;
    shape-rendering: crispEdges;
    opacity: 1;
}

.d3-tip {
    font-family: Verdana;
    background: rgba(0, 0, 0, 0.8);
    padding: 8px;
    color: #fff; 
    z-index: 5070;
  }

</style>
<body>

var margin = {top: 30, right: 61, bottom: 70, left: 61}, 
    width = 470 - margin.left - margin.right,
    height = 450 - margin.top - margin.bottom;

// fpr for "false positive rate"
// tpr for "true positive rate"

var rocChartOptions = {
  "margin": margin,
  "width": width,
  "height": height,
  "interpolationMode": "basis",
  "fpr": "X",
  "tprVariables": [
    {
      "name": "BPC",
      "label": "Break Points"
    },
    {
      "name": "WNR",
      "label": "Winners"
    },
    {
      "name": "FSP",
      "label": "First Serve %",
    },
    {
      "name": "NPW",
      "label": "Net Points Won"
    }
  ], 
  "animate": true,
  "smooth": true
}

d3.json("data.json", function(error, data) {
  rocChart("#roc", data, rocChartOptions)
})

</script>
</body>

https://d3js.org/d3.v3.min.js