nobitagit/index.html

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<title>Probability Response</title>
<meta http-equiv="X-UA-Compatible" content="IE=11">
<style>
body {
  font: 24px play;
  width: 700px;
  height: 700px;
}

.button {
	font-family: Play;
	color: #ffffff;
	font-size: 24px;
  text-align: center;
  display: inline-block;
  -webkit-user-select: none;
  width: 5.2%;
	background: #303030;
	padding: 10px 20px 10px 20px;
}

.button:hover {
	background: #4c4d4d;
  cursor:default;
}

div#area2{
  position:relative;
  left: 800px;
  top: -953px;
}

</style>
<div id="area1"></div>
<div id="area2"></div>
<body style="overflow: hidden">
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>

var url = "roc.tsv";
        d3.tsv(url, function (error, rawData) {
var data = rawData.map(function (d) {
  return { X: +d.fpr, Y: +d.tpr}
});
            var xExtents = d3.extent(data, function (d) { return +d.X; });
            var yExtents = d3.extent(data, function (d) { return +d.Y; });
            var maxExtent = d3.max(
                xExtents.concat(xExtents), function (d) { return Math.abs(d); });
            var xmaxExtent = d3.max(xExtents);
            var ymaxExtent = d3.max(yExtents);
            var xminExtent = d3.min(xExtents);
            var yminExtent = d3.min(yExtents);
            var graphWidth = 700, graphHeight = 700;
            var radius = 5;
            var margins = { left: 50, top: 150, right: 50, bottom: 100 };
            var axisPadding = 3;
            var totalHeight = graphHeight + margins.top + margins.bottom;
            var totalWidth = graphWidth + margins.left + margins.right;
            var scale = d3.scale.linear()
                .domain([xminExtent, xmaxExtent])
                .range([0, graphWidth]);
            var yscale = d3.scale.linear()
                .domain([ymaxExtent, yminExtent])
                .range([0, graphHeight]);
            var line2 = d3.svg.line()
                .x(function(d) { return scale(d.X); })
                .y(function(d) { return yscale(d.Y); });

            var svg = d3.select('#area1')
                .append('svg')
                .attr('width', totalWidth)
                .attr('height', totalHeight);

            var gradient = svg.append('defs')
              .append('linearGradient')
                .attr('id', 'gradient')
                .attr('x1', '0%')
                .attr('y1', '0%')
                .attr('x2', '0%')
                .attr('y2', '100%')
                .attr('spreadMethod', 'pad');
            gradient.append('stop')
              .attr('offset', '20%')
              .attr('stop-color', '#90b2db')
              .attr('stop-opacity', 1);
            //#bed2ec
            gradient.append('stop')
                .attr('offset', '100%')
                .attr('stop-color', '#cbd1da')
                .attr('stop-opacity', 1);
            svg.append('rect')
                .attr('width', graphWidth)
                .attr('height', graphHeight)
                .attr('transform', 'translate(' + (margins.left-2) + ',' + margins.top + ')')
                .style('fill','url(#gradient)');

            var yGridlinesAxis = d3.svg.axis().scale(yscale).orient("left");
            var yGridlineNodes = svg.append('g')
                .attr('transform', 'translate(' + (margins.left + graphWidth) + ',' + margins.top + ')')
                .call(yGridlinesAxis.tickSize(graphWidth + axisPadding, 0, 0).tickFormat(""));
            styleGridlineNodes(yGridlineNodes);
            var xGridlinesAxis = d3.svg.axis().scale(scale).orient("bottom");
            var xGridlineNodes = svg.append('g')
                .attr('transform', 'translate(' + margins.left + ',' + (totalHeight - margins.bottom + axisPadding) + ')')
                .call(xGridlinesAxis.tickSize(-graphHeight - axisPadding, 0, 0).tickFormat(""));
            styleGridlineNodes(xGridlineNodes);
            var xAxis = d3.svg.axis().scale(scale).orient("bottom");
            var yAxis = d3.svg.axis().scale(yscale).orient("left");
            var yAxisNodes = svg.append('g')
              .attr('transform', 'translate(' + (margins.left - axisPadding) + ',' + margins.top + ')')
              .call(yAxis);//.attr("class", "x axis");
            styleAxisNodes(yAxisNodes);

            var xAxisNodes = svg.append('g')
                .attr('transform', 'translate(' + margins.left + ',' + (totalHeight - margins.bottom + axisPadding) + ')')
                .call(xAxis);
            styleAxisNodes(xAxisNodes);

            var graphGroup = svg.append('g')
                  .attr('transform', 'translate(' + margins.left + ',' + margins.top + ')');

            var zoomBehavior = d3.behavior.zoom()
              .scaleExtent([.1,10])
              .on('zoom','onZoom');
            svg.append('text')
              .attr('transform', 'translate(' + margins.left + ',' + (margins.top*.75) + ')')
              .text('Receiver Operating Characteristic')
              .attr('font-size','64px')
              .attr('font-family','orbitron');
            svg.append('path')
              .datum(data)
              .attr('d',line2)
              .attr('transform', 'translate(' + (margins.left) + ',' + margins.top + ')')
              .attr('fill','none')
              .attr('stroke', 'white')
              .attr('stroke-width', '5px');

            var diagonal = svg.append('path')
              .attr('d', 'M 0 700 L 700 0')
              .attr('fill', 'none')
	      .attr('transform', 'translate(' + (margins.left) + ',' + margins.top + ')')
              .attr('stroke', 'white')
              .attr('stroke-width', '3px')
              .attr('stroke-dasharray', '4,4');
              //var path_length = path_max.node().getTotalLength();


              // Set the ranges
              var x = d3.scale.linear().range([0, graphWidth]);
              var y = d3.scale.linear().range([graphHeight, 0]);

              // Define the axes
              var xAxis = d3.svg.axis().scale(x)
                  .orient("bottom").ticks(5);

              var yAxis = d3.svg.axis().scale(y)
                  .orient("left").ticks(5);


              // Adds the svg canvas

              var lineSvg = svg.append("g");

              var focus = svg.append("g")
                  .attr('transform', 'translate(' + (margins.left) + ',' + margins.top + ')')
                  .style("display", "none");

              // Get the data
              d3.tsv("roc.tsv", function(error, data) {

                  //var data = [{"date":"0","close":"606.98"},{"date":"10","close":"614.48"},{"date":"20","close":"617.62"},{"date":"30","close":"609.86"},{"date":"40","close":"599.55"},{"date":"50","close":"618.63"},{"date":"60","close":"629.32"},{"date":"70","close":"624.31"},{"date":"80","close":"633.68"},{"date":"90","close":"636.23"},{"date":"100","close":"628.44"},{"date":"110","close":"626.20"},{"date":"120","close":"622.77"},{"date":"130","close":"605.23"},{"date":"140","close":"580.13"},{"date":"150","close":"543.70"},{"date":"160","close":"443.34"},{"date":"170","close":"345.44"},{"date":"180","close":"234.98"},{"date":"190","close":"166.70"},{"date":"200","close":"130.28"},{"date":"210","close":"99.00"},{"date":"220","close":"89.70"},{"date":"230","close":"67.00"},{"date":"240","close":"53.98"},{"date":"250","close":"58.13"}];

                  data.forEach(function(d) {
                      d.date = +d.fpr;
                      d.close = +d.tpr;
                  });

                  var bisectDate = d3.bisector(function(d) { return +d.date; }).left;


                  // Define the line
                  var valueline = d3.svg.line()
                      .x(function(d) { return x(+d.date); })
                      .y(function(d) { return y(+d.close); });

                  // Scale the range of the data
                  x.domain(d3.extent(data, function(d) { return d.date; }));
                  y.domain(d3.extent(data, function(d) { return d.close; }));

                  // Add the valueline path.
                  lineSvg.append("path")
                      .attr("class", "line")
                      .attr("fill", "none")
                      .attr("stroke", "white")
                      .attr('transform', 'translate(' + (margins.left) + ',' + margins.top + ')')
                      .attr("d", valueline(data));

                 // append the x line
                  focus.append("line")
                      .attr('transform', 'translate(' + (margins.left) + ',' + margins.top + ')')
                      .attr("class", "x")
                      .style("stroke", "white")
                      .style("stroke-width", "3px")
                      .style("stroke-dasharray", "5,5")
                      .style("opacity", 1)
                      .attr("y1", 0)
                      .attr("y2", graphHeight);

                  // append the y line
                  focus.append("line")
                      .attr('transform', 'translate(' + (margins.left) + ',' + margins.top + ')')
                      .attr("class", "y")
                      .style("stroke", "white")
                      .style("stroke-width", "3px")
                      .style("stroke-dasharray", "5,5")
                      .style("opacity", 1)
                      .attr("x1", graphWidth)
                      .attr("x2", graphWidth);

                  // append the circle at the intersection
                  focus.append("circle")
                      .attr('transform', 'translate(' + (margins.left) + ',' + margins.top + ')')
                      .attr("class", "y")
                      .style("fill", "#376c9b")
                      .style("stroke", "white")
                      .style("stroke-width", "3px")
                      .attr("r", 5);

                  // place the value at the intersection
                  focus.append("text")
                      .attr("class", "y1")
                      .attr("z-index", "950")
                      .attr('transform', 'translate(' + (margins.left) + ',' + margins.top + ')')
                      .style("stroke", "white")
                      .style("stroke-width", "5px")
                      .style("opacity", 1)
                      .attr("dx", 8)
                      .attr("dy", "-.3em");
                  focus.append("text")
                  .attr('transform', 'translate(' + (margins.left) + ',' + margins.top + ')')
                      .attr("class", "y2")
                      .attr("dx", 8)
                      .attr("dy", "-.3em");

                  // place the date at the intersection
                  focus.append("text")
                      .attr("class", "y3")
                      .style("stroke", "white")
                      .style("stroke-width", "5px")
                      .style("opacity", 1)
                      .attr("dx", 8)
                      .attr("dy", "1em");
                  focus.append("text")
                      .attr("class", "y4")
                      .attr("dx", 8)
                      .attr("dy", "1em");

                  // append the rectangle to capture mouse
                  svg.append("rect")
                      .attr("width", graphWidth)
                      .attr("height", graphHeight)
                      .attr('transform', 'translate(' + (margins.left) + ',' + margins.top + ')')
                      .style("fill", "none")
                      .style("pointer-events", "all")
                      .on("mouseover", function() { focus.style("display", null); })
                      .on("mouseout", function() { focus.style("display", "none"); })
                      .on("mousemove", mousemove);

                  function mousemove(data) {
                      var x0 = x.invert(d3.mouse(this)[0]),
                           i = bisectDate(data, x0, 1),
                          d0 = data[i - 1],
                          d1 = data[i],
                           d = x0 - d0.date > d1.date - x0 ? d1 : d0;

                     focus.select("circle.y")
                            .attr("transform",
                                  "translate(" + x(d.date) + "," +
                                           y(d.close) + ")");

                     focus.select("text.y1")
                      .attr("transform",
                            "translate(" + x(d.date) + "," +
                                           y(d.close) + ")")
                      .text(d.close);

                  focus.select("text.y2")
                      .attr("transform",
                            "translate(" + x(d.date) + "," +
                                           y(d.close) + ")")
                      .text(d.close);

                  focus.select("text.y3")
                      .attr("transform",
                            "translate(" + x(d.date) + "," +
                                           y(d.close) + ")")
                      .text(d.date);

                  focus.select("text.y4")
                      .attr("transform",
                            "translate(" + x(d.date) + "," +
                                           y(d.close) + ")")
                      .text(d.date);

                  focus.select(".x")
                      .attr("transform",
                            "translate(" + x(d.date) + "," +
                                           y(d.close) + ")")
                                 .attr("y2", graphHeight - y(d.close));

                  focus.select(".y")
                      .attr("transform",
                            "translate(" + graphWidth * -1 + "," +
                                           y(d.close) + ")")
                                 .attr("x2", graphWidth + graphWidth);
                }
            });


      function styleGridlineNodes(axisNodes) {
          axisNodes.selectAll('.domain')
              .attr({
                  fill: 'none',
                  stroke: 'none'
              });
          axisNodes.selectAll('.tick line')
              .attr({
                  fill: 'none',
                  'stroke-width': 1,
                  stroke: 'lightgray'
              });
      }
  });
      function styleAxisNodes(axisNodes) {
          axisNodes.selectAll('.domain')
              .attr({
                  fill: 'none',
                  'stroke-width': 1,
                  stroke: 'black'
              });
          axisNodes.selectAll('.tick line')
              .attr({
                  fill: 'none',
                  'stroke-width': 1,
                  stroke: 'none'
              });
          axisNodes.selectAll("text")
            .attr({
              fill: 'black',
              'font-family': 'play'
            });


      }
  </script>
</body>

## roc.tsv

          
            fpr
            tpr
            Threshold
            Cost

            
              1
              1
              0
              68

            
              0.97
              1
              0
              54

            
              0.94
              1
              0
              41

            
              0.85
              1
              0
              34

            
              0.79
              1
              0
              31

            
              0.76
              1
              0
              29

            
              0.61
              1
              0
              28

            
              0.5
              1
              0.01
              26

            
              0.3824
              1
              0.02
              24

            
              0.3529
              1
              0.03
              24

            
              0.3529
              1
              0.04
              20

            
              0.2941
              1
              0.05
              20

            
              0.2941
              1
              0.06
              20

            
              0.2941
              1
              0.07
              18

            
              0.2647
              1
              0.08
              18

            
              0.2647
              1
              0.09
              18

            
              0.2647
              1
              0.1
              18

            
              0.2647
              1
              0.11
              18

            
              0.2647
              1
              0.12
              18

            
              0.2647
              1
              0.13
              18

            
              0.2647
              1
              0.14
              16

            
              0.2353
              1
              0.15
              16

            
              0.2353
              1
              0.16
              14

            
              0.2059
              1
              0.17
              14

            
              0.2059
              1
              0.18
              12

            
              0.1765
              1
              0.19
              10

            
              0.1471
              1
              0.2
              11

            
              0.1471
              0.9655
              0.21
              7

            
              0.0882
              0.9655
              0.22
              7

            
              0.0882
              0.9655
              0.23
              7

            
              0.0882
              0.9655
              0.24
              7

            
              0.0882
              0.9655
              0.25
              7

            
              0.0882
              0.9655
              0.26
              5

            
              0.0588
              0.9655
              0.27
              5

            
              0.0588
              0.9655
              0.28
              6

            
              0.0588
              0.931
              0.29
              6

            
              0.0588
              0.931
              0.3
              6

            
              0.0588
              0.931
              0.31
              6

            
              0.0588
              0.931
              0.32
              6

            
              0.0588
              0.931
              0.33
              6

            
              0.0588
              0.931
              0.34
              6

            
              0.0588
              0.931
              0.35
              6

            
              0.0588
              0.931
              0.36
              6

            
              0.0588
              0.931
              0.37
              6

            
              0.0588
              0.931
              0.38
              6

            
              0.0588
              0.931
              0.39
              6

            
              0.0588
              0.931
              0.4
              6

            
              0.0588
              0.931
              0.41
              6

            
              0.0588
              0.931
              0.42
              6

            
              0.0588
              0.931
              0.43
              7

            
              0.0588
              0.8966
              0.44
              7

            
              0.0588
              0.8966
              0.45
              7

            
              0.0588
              0.8966
              0.46
              7

            
              0.0588
              0.8966
              0.47
              7

            
              0.0588
              0.8966
              0.48
              5

            
              0.0294
              0.8966
              0.49
              5

            
              0.0294
              0.8966
              0.5
              5

            
              0.0294
              0.8966
              0.51
              5

            
              0.0294
              0.8966
              0.52
              5

            
              0.0294
              0.8966
              0.53
              5

            
              0.0294
              0.8966
              0.54
              5

            
              0.0294
              0.8966
              0.55
              5

            
              0.0294
              0.8966
              0.56
              5

            
              0.0294
              0.8966
              0.57
              5

            
              0.0294
              0.8966
              0.58
              5

            
              0.0294
              0.8966
              0.59
              5

            
              0.0294
              0.8966
              0.6
              5

            
              0.0294
              0.8966
              0.61
              5

            
              0.0294
              0.8966
              0.62
              5

            
              0.0294
              0.8966
              0.63
              5

            
              0.0294
              0.8966
              0.64
              5

            
              0.0294
              0.8966
              0.65
              5

            
              0.0294
              0.8966
              0.66
              5

            
              0.0294
              0.8966
              0.67
              5

            
              0.0294
              0.8966
              0.68
              6

            
              0.0294
              0.8621
              0.69
              6

            
              0.0294
              0.8621
              0.7
              6

            
              0.0294
              0.8621
              0.71
              6

            
              0.0294
              0.8621
              0.72
              7

            
              0.0294
              0.8276
              0.73
              7

            
              0.0294
              0.8276
              0.74
              7

            
              0.0294
              0.8276
              0.75
              7

            
              0.0294
              0.8276
              0.76
              7

            
              0.0294
              0.8276
              0.77
              7

            
              0.0294
              0.8276
              0.78
              7

            
              0.0294
              0.8276
              0.79
              7

            
              0.0294
              0.8276
              0.8
              7

            
              0.0294
              0.8276
              0.81
              7

            
              0.0294
              0.8276
              0.82
              7

            
              0.0294
              0.8276
              0.83
              7

            
              0.0294
              0.8276
              0.84
              7

            
              0.0294
              0.8276
              0.85
              7

            
              0.0294
              0.8276
              0.86
              7

            
              0.0294
              0.8276
              0.87
              7

            
              0.0294
              0.8276
              0.88
              8

            
              0.0294
              0.7931
              0.89
              8

            
              0.0294
              0.7931
              0.9
              8

            
              0.0294
              0.7931
              0.91
              6

            
              0
              0.7931
              0.92
              6

            
              0
              0.7931
              0.93
              6

            
              0
              0.7931
              0.94
              6

            
              0
              0.7931
              0.95
              6

            
              0
              0.7931
              0.96
              6

            
              0
              0.7931
              0.97
              7

            
              0
              0.7586
              0.98
              12

            
              0
              0.5862
              0.99
              13

            
              0
              0.5517
              1
              14

            
              0
              0.4828
              1
              15

            
              0
              0.3448
              1
              17

            
              0
              0.3103
              1
              19

            
              0
              0.1379
              1
              23

            
              0
              0.1034
              1
              25

            
              0
              0.07
              1
              27

            
              0
              0
              1
              29
	<!DOCTYPE html>
	<meta charset="utf-8">
	<title>Probability Response</title>
	<meta http-equiv="X-UA-Compatible" content="IE=11">
	<style>
	body {
	font: 24px play;
	width: 700px;
	height: 700px;
	}

	.button {
	font-family: Play;
	color: #ffffff;
	font-size: 24px;
	text-align: center;
	display: inline-block;
	-webkit-user-select: none;
	width: 5.2%;
	background: #303030;
	padding: 10px 20px 10px 20px;
	}

	.button:hover {
	background: #4c4d4d;
	cursor:default;
	}

	div#area2{
	position:relative;
	left: 800px;
	top: -953px;
	}

	</style>
	<div id="area1"></div>
	<div id="area2"></div>
	<body style="overflow: hidden">
	<script src="https://d3js.org/d3.v3.min.js"></script>
	<script>

	var url = "roc.tsv";
	d3.tsv(url, function (error, rawData) {
	var data = rawData.map(function (d) {
	return { X: +d.fpr, Y: +d.tpr}
	});
	var xExtents = d3.extent(data, function (d) { return +d.X; });
	var yExtents = d3.extent(data, function (d) { return +d.Y; });
	var maxExtent = d3.max(
	xExtents.concat(xExtents), function (d) { return Math.abs(d); });
	var xmaxExtent = d3.max(xExtents);
	var ymaxExtent = d3.max(yExtents);
	var xminExtent = d3.min(xExtents);
	var yminExtent = d3.min(yExtents);
	var graphWidth = 700, graphHeight = 700;
	var radius = 5;
	var margins = { left: 50, top: 150, right: 50, bottom: 100 };
	var axisPadding = 3;
	var totalHeight = graphHeight + margins.top + margins.bottom;
	var totalWidth = graphWidth + margins.left + margins.right;
	var scale = d3.scale.linear()
	.domain([xminExtent, xmaxExtent])
	.range([0, graphWidth]);
	var yscale = d3.scale.linear()
	.domain([ymaxExtent, yminExtent])
	.range([0, graphHeight]);
	var line2 = d3.svg.line()
	.x(function(d) { return scale(d.X); })
	.y(function(d) { return yscale(d.Y); });

	var svg = d3.select('#area1')
	.append('svg')
	.attr('width', totalWidth)
	.attr('height', totalHeight);

	var gradient = svg.append('defs')
	.append('linearGradient')
	.attr('id', 'gradient')
	.attr('x1', '0%')
	.attr('y1', '0%')
	.attr('x2', '0%')
	.attr('y2', '100%')
	.attr('spreadMethod', 'pad');
	gradient.append('stop')
	.attr('offset', '20%')
	.attr('stop-color', '#90b2db')
	.attr('stop-opacity', 1);
	//#bed2ec
	gradient.append('stop')
	.attr('offset', '100%')
	.attr('stop-color', '#cbd1da')
	.attr('stop-opacity', 1);
	svg.append('rect')
	.attr('width', graphWidth)
	.attr('height', graphHeight)
	.attr('transform', 'translate(' + (margins.left-2) + ',' + margins.top + ')')
	.style('fill','url(#gradient)');

	var yGridlinesAxis = d3.svg.axis().scale(yscale).orient("left");
	var yGridlineNodes = svg.append('g')
	.attr('transform', 'translate(' + (margins.left + graphWidth) + ',' + margins.top + ')')
	.call(yGridlinesAxis.tickSize(graphWidth + axisPadding, 0, 0).tickFormat(""));
	styleGridlineNodes(yGridlineNodes);
	var xGridlinesAxis = d3.svg.axis().scale(scale).orient("bottom");
	var xGridlineNodes = svg.append('g')
	.attr('transform', 'translate(' + margins.left + ',' + (totalHeight - margins.bottom + axisPadding) + ')')
	.call(xGridlinesAxis.tickSize(-graphHeight - axisPadding, 0, 0).tickFormat(""));
	styleGridlineNodes(xGridlineNodes);
	var xAxis = d3.svg.axis().scale(scale).orient("bottom");
	var yAxis = d3.svg.axis().scale(yscale).orient("left");
	var yAxisNodes = svg.append('g')
	.attr('transform', 'translate(' + (margins.left - axisPadding) + ',' + margins.top + ')')
	.call(yAxis);//.attr("class", "x axis");
	styleAxisNodes(yAxisNodes);

	var xAxisNodes = svg.append('g')
	.attr('transform', 'translate(' + margins.left + ',' + (totalHeight - margins.bottom + axisPadding) + ')')
	.call(xAxis);
	styleAxisNodes(xAxisNodes);

	var graphGroup = svg.append('g')
	.attr('transform', 'translate(' + margins.left + ',' + margins.top + ')');

	var zoomBehavior = d3.behavior.zoom()
	.scaleExtent([.1,10])
	.on('zoom','onZoom');
	svg.append('text')
	.attr('transform', 'translate(' + margins.left + ',' + (margins.top*.75) + ')')
	.text('Receiver Operating Characteristic')
	.attr('font-size','64px')
	.attr('font-family','orbitron');
	svg.append('path')
	.datum(data)
	.attr('d',line2)
	.attr('transform', 'translate(' + (margins.left) + ',' + margins.top + ')')
	.attr('fill','none')
	.attr('stroke', 'white')
	.attr('stroke-width', '5px');

	var diagonal = svg.append('path')
	.attr('d', 'M 0 700 L 700 0')
	.attr('fill', 'none')
	.attr('transform', 'translate(' + (margins.left) + ',' + margins.top + ')')
	.attr('stroke', 'white')
	.attr('stroke-width', '3px')
	.attr('stroke-dasharray', '4,4');
	//var path_length = path_max.node().getTotalLength();


	// Set the ranges
	var x = d3.scale.linear().range([0, graphWidth]);
	var y = d3.scale.linear().range([graphHeight, 0]);

	// Define the axes
	var xAxis = d3.svg.axis().scale(x)
	.orient("bottom").ticks(5);

	var yAxis = d3.svg.axis().scale(y)
	.orient("left").ticks(5);



	// Adds the svg canvas

	var lineSvg = svg.append("g");

	var focus = svg.append("g")
	.attr('transform', 'translate(' + (margins.left) + ',' + margins.top + ')')
	.style("display", "none");

	// Get the data
	d3.tsv("roc.tsv", function(error, data) {

	//var data = [{"date":"0","close":"606.98"},{"date":"10","close":"614.48"},{"date":"20","close":"617.62"},{"date":"30","close":"609.86"},{"date":"40","close":"599.55"},{"date":"50","close":"618.63"},{"date":"60","close":"629.32"},{"date":"70","close":"624.31"},{"date":"80","close":"633.68"},{"date":"90","close":"636.23"},{"date":"100","close":"628.44"},{"date":"110","close":"626.20"},{"date":"120","close":"622.77"},{"date":"130","close":"605.23"},{"date":"140","close":"580.13"},{"date":"150","close":"543.70"},{"date":"160","close":"443.34"},{"date":"170","close":"345.44"},{"date":"180","close":"234.98"},{"date":"190","close":"166.70"},{"date":"200","close":"130.28"},{"date":"210","close":"99.00"},{"date":"220","close":"89.70"},{"date":"230","close":"67.00"},{"date":"240","close":"53.98"},{"date":"250","close":"58.13"}];

	data.forEach(function(d) {
	d.date = +d.fpr;
	d.close = +d.tpr;
	});

	var bisectDate = d3.bisector(function(d) { return +d.date; }).left;


	// Define the line
	var valueline = d3.svg.line()
	.x(function(d) { return x(+d.date); })
	.y(function(d) { return y(+d.close); });

	// Scale the range of the data
	x.domain(d3.extent(data, function(d) { return d.date; }));
	y.domain(d3.extent(data, function(d) { return d.close; }));

	// Add the valueline path.
	lineSvg.append("path")
	.attr("class", "line")
	.attr("fill", "none")
	.attr("stroke", "white")
	.attr('transform', 'translate(' + (margins.left) + ',' + margins.top + ')')
	.attr("d", valueline(data));

	// append the x line
	focus.append("line")
	.attr('transform', 'translate(' + (margins.left) + ',' + margins.top + ')')
	.attr("class", "x")
	.style("stroke", "white")
	.style("stroke-width", "3px")
	.style("stroke-dasharray", "5,5")
	.style("opacity", 1)
	.attr("y1", 0)
	.attr("y2", graphHeight);

	// append the y line
	focus.append("line")
	.attr('transform', 'translate(' + (margins.left) + ',' + margins.top + ')')
	.attr("class", "y")
	.style("stroke", "white")
	.style("stroke-width", "3px")
	.style("stroke-dasharray", "5,5")
	.style("opacity", 1)
	.attr("x1", graphWidth)
	.attr("x2", graphWidth);

	// append the circle at the intersection
	focus.append("circle")
	.attr('transform', 'translate(' + (margins.left) + ',' + margins.top + ')')
	.attr("class", "y")
	.style("fill", "#376c9b")
	.style("stroke", "white")
	.style("stroke-width", "3px")
	.attr("r", 5);

	// place the value at the intersection
	focus.append("text")
	.attr("class", "y1")
	.attr("z-index", "950")
	.attr('transform', 'translate(' + (margins.left) + ',' + margins.top + ')')
	.style("stroke", "white")
	.style("stroke-width", "5px")
	.style("opacity", 1)
	.attr("dx", 8)
	.attr("dy", "-.3em");
	focus.append("text")
	.attr('transform', 'translate(' + (margins.left) + ',' + margins.top + ')')
	.attr("class", "y2")
	.attr("dx", 8)
	.attr("dy", "-.3em");

	// place the date at the intersection
	focus.append("text")
	.attr("class", "y3")
	.style("stroke", "white")
	.style("stroke-width", "5px")
	.style("opacity", 1)
	.attr("dx", 8)
	.attr("dy", "1em");
	focus.append("text")
	.attr("class", "y4")
	.attr("dx", 8)
	.attr("dy", "1em");

	// append the rectangle to capture mouse
	svg.append("rect")
	.attr("width", graphWidth)
	.attr("height", graphHeight)
	.attr('transform', 'translate(' + (margins.left) + ',' + margins.top + ')')
	.style("fill", "none")
	.style("pointer-events", "all")
	.on("mouseover", function() { focus.style("display", null); })
	.on("mouseout", function() { focus.style("display", "none"); })
	.on("mousemove", mousemove);

	function mousemove(data) {
	var x0 = x.invert(d3.mouse(this)[0]),
	i = bisectDate(data, x0, 1),
	d0 = data[i - 1],
	d1 = data[i],
	d = x0 - d0.date > d1.date - x0 ? d1 : d0;

	focus.select("circle.y")
	.attr("transform",
	"translate(" + x(d.date) + "," +
	y(d.close) + ")");

	focus.select("text.y1")
	.attr("transform",
	"translate(" + x(d.date) + "," +
	y(d.close) + ")")
	.text(d.close);

	focus.select("text.y2")
	.attr("transform",
	"translate(" + x(d.date) + "," +
	y(d.close) + ")")
	.text(d.close);

	focus.select("text.y3")
	.attr("transform",
	"translate(" + x(d.date) + "," +
	y(d.close) + ")")
	.text(d.date);

	focus.select("text.y4")
	.attr("transform",
	"translate(" + x(d.date) + "," +
	y(d.close) + ")")
	.text(d.date);

	focus.select(".x")
	.attr("transform",
	"translate(" + x(d.date) + "," +
	y(d.close) + ")")
	.attr("y2", graphHeight - y(d.close));

	focus.select(".y")
	.attr("transform",
	"translate(" + graphWidth * -1 + "," +
	y(d.close) + ")")
	.attr("x2", graphWidth + graphWidth);
	}
	});


	function styleGridlineNodes(axisNodes) {
	axisNodes.selectAll('.domain')
	.attr({
	fill: 'none',
	stroke: 'none'
	});
	axisNodes.selectAll('.tick line')
	.attr({
	fill: 'none',
	'stroke-width': 1,
	stroke: 'lightgray'
	});
	}
	});
	function styleAxisNodes(axisNodes) {
	axisNodes.selectAll('.domain')
	.attr({
	fill: 'none',
	'stroke-width': 1,
	stroke: 'black'
	});
	axisNodes.selectAll('.tick line')
	.attr({
	fill: 'none',
	'stroke-width': 1,
	stroke: 'none'
	});
	axisNodes.selectAll("text")
	.attr({
	fill: 'black',
	'font-family': 'play'
	});


	}
	</script>
	</body>
fpr	tpr	Threshold	Cost
1	1	0	68
0.97	1	0	54
0.94	1	0	41
0.85	1	0	34
0.79	1	0	31
0.76	1	0	29
0.61	1	0	28
0.5	1	0.01	26
0.3824	1	0.02	24
0.3529	1	0.03	24
0.3529	1	0.04	20
0.2941	1	0.05	20
0.2941	1	0.06	20
0.2941	1	0.07	18
0.2647	1	0.08	18
0.2647	1	0.09	18
0.2647	1	0.1	18
0.2647	1	0.11	18
0.2647	1	0.12	18
0.2647	1	0.13	18
0.2647	1	0.14	16
0.2353	1	0.15	16
0.2353	1	0.16	14
0.2059	1	0.17	14
0.2059	1	0.18	12
0.1765	1	0.19	10
0.1471	1	0.2	11
0.1471	0.9655	0.21	7
0.0882	0.9655	0.22	7
0.0882	0.9655	0.23	7
0.0882	0.9655	0.24	7
0.0882	0.9655	0.25	7
0.0882	0.9655	0.26	5
0.0588	0.9655	0.27	5
0.0588	0.9655	0.28	6
0.0588	0.931	0.29	6
0.0588	0.931	0.3	6
0.0588	0.931	0.31	6
0.0588	0.931	0.32	6
0.0588	0.931	0.33	6
0.0588	0.931	0.34	6
0.0588	0.931	0.35	6
0.0588	0.931	0.36	6
0.0588	0.931	0.37	6
0.0588	0.931	0.38	6
0.0588	0.931	0.39	6
0.0588	0.931	0.4	6
0.0588	0.931	0.41	6
0.0588	0.931	0.42	6
0.0588	0.931	0.43	7
0.0588	0.8966	0.44	7
0.0588	0.8966	0.45	7
0.0588	0.8966	0.46	7
0.0588	0.8966	0.47	7
0.0588	0.8966	0.48	5
0.0294	0.8966	0.49	5
0.0294	0.8966	0.5	5
0.0294	0.8966	0.51	5
0.0294	0.8966	0.52	5
0.0294	0.8966	0.53	5
0.0294	0.8966	0.54	5
0.0294	0.8966	0.55	5
0.0294	0.8966	0.56	5
0.0294	0.8966	0.57	5
0.0294	0.8966	0.58	5
0.0294	0.8966	0.59	5
0.0294	0.8966	0.6	5
0.0294	0.8966	0.61	5
0.0294	0.8966	0.62	5
0.0294	0.8966	0.63	5
0.0294	0.8966	0.64	5
0.0294	0.8966	0.65	5
0.0294	0.8966	0.66	5
0.0294	0.8966	0.67	5
0.0294	0.8966	0.68	6
0.0294	0.8621	0.69	6
0.0294	0.8621	0.7	6
0.0294	0.8621	0.71	6
0.0294	0.8621	0.72	7
0.0294	0.8276	0.73	7
0.0294	0.8276	0.74	7
0.0294	0.8276	0.75	7
0.0294	0.8276	0.76	7
0.0294	0.8276	0.77	7
0.0294	0.8276	0.78	7
0.0294	0.8276	0.79	7
0.0294	0.8276	0.8	7
0.0294	0.8276	0.81	7
0.0294	0.8276	0.82	7
0.0294	0.8276	0.83	7
0.0294	0.8276	0.84	7
0.0294	0.8276	0.85	7
0.0294	0.8276	0.86	7
0.0294	0.8276	0.87	7
0.0294	0.8276	0.88	8
0.0294	0.7931	0.89	8
0.0294	0.7931	0.9	8
0.0294	0.7931	0.91	6
0	0.7931	0.92	6
0	0.7931	0.93	6
0	0.7931	0.94	6
0	0.7931	0.95	6
0	0.7931	0.96	6
0	0.7931	0.97	7
0	0.7586	0.98	12
0	0.5862	0.99	13
0	0.5517	1	14
0	0.4828	1	15
0	0.3448	1	17
0	0.3103	1	19
0	0.1379	1	23
0	0.1034	1	25
0	0.07	1	27
0	0	1	29