14 Jul 2019
Receiver Operating Characteristic (ROC) Curves
The main idea to do this project is to find a better way to dynamically construct ROC curve for your web based work. I was asked to plot ROC curve and to meet the requirement i have spent some time to search for a easy to understand able javascrip code. Finally i came across the code posted over github and modified it accordingly. Please find the code from the following repository. The author used the D3 javascript based graph visualization library.
roc.js file is as follows.
(function() {
var container, svg, x, y, line;
if (typeof roc === 'undefined')
roc = {};
function axes(width, height, margin) {
var two_third = margin * 2 / 3;
svg.append('g')
.attr('class', 'x axis')
.attr('transform', 'translate(0,' + height + ')')
.call(d3.svg.axis().scale(x).orient('bottom'));
svg.append("text")
.attr('class', 'x-label')
.attr("transform", "translate(" + (width/2)
+ "," + (height + two_third) + ")")
.text("False Positive Rate");
svg.append('g')
.attr('class', 'y axis')
.call(d3.svg.axis().scale(y).orient('left'));
svg.append("text")
.attr('class', 'y-label')
.attr("transform", "translate(" + (-two_third)
+ "," + (height/2) + ") rotate(-90)")
.text("True Positive Rate");
svg.append('line').attr('class', 'diagonal')
.attr('x1', 0)
.attr('y1', height)
.attr('x2', width)
.attr('y2', 0);
}
roc.path = function(data) {
var path = svg.select('.roc-path');
if (path.empty())
path = svg.append('path')
.datum(data)
.attr('class', 'roc-path')
.attr('d', line);
else
path.datum(data)
.attr('d', line);
}
roc.init = function(id, width, height, margin, data) {
container = d3.select('#' + id);
x = d3.scale.linear().domain([0, 1]).range([0, width]),
y = d3.scale.linear().domain([0, 1]).range([height, 0]);
line = d3.svg.line()
.x(function(d) { return x(d.x); })
.y(function(d) { return y(d.y); });
svg = container.append('svg')
.attr('width', width + 2 * margin)
.attr('height', height + 2 * margin)
.append('g')
.attr('transform', 'translate(' + margin
+ ',' + margin + ')');
axes(width, height, margin);
roc.path(data);
}
})();//HTML and PHP code
<html><head> <title>ROC Curve</title>
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="roc.js" charset="utf-8"></script>
<link rel="stylesheet" href="roc.css"/>
</head><body>
<?php $roc = array();
$roc['tpr'][] = 0.85;
$roc['fpr'][] = 0.08;
$roc['tpr'][] = 0.75;
$roc['fpr'][] = 0.07;
$roc['tpr'][] = 0.65;
$roc['fpr'][] = 0.06;
$roc['tpr'][] = 0.55;
$roc['fpr'][] = 0.05;
$roc['tpr'][] = 0.85;
$roc['fpr'][] = 0.08;
$roc = json_encode($roc);
echo "<div id='roc'></div>";
echo "<script>";
echo " var jsonData =". $roc.";";
echo "var data = [];
data.push({'x': 0, 'y': 0});
for(var i=0; i<jsonData.fpr.length; i++){
data.push({'x': jsonData.fpr[i], 'y': jsonData.tpr[i]});
}
data.push({'x': 1, 'y': 1});
roc.init('roc', 400, 300, 70, data);
</script>";
?>
</body>
</html>
About Author
