Predicting Services

<!DOCTYPE html>
<html lang="en">
   <head>
      
      
      
      <meta charset="utf-8">
      <title>Predicting healthcare services</title>
      <script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
      <link rel="stylesheet" type="text/css" href="index.css">
      
      
      
   </head>
   <body>

/////////////////////////////////////////////////////////////////////  
         // GLOBAL VARIABLES
         /////////////////////////////////////////////////////////////////////

var dv={};

// Services
         dv.services=[{name: "A"},{name: "B"},{name: "C"},{name: "D"},{name: "E"},
                      {name: "F"},{name: "G"},{name: "H"},{name: "I"},{name: "J"},
                      {name: "K"},{name: "L"},{name: "M"},{name: "N"}],
         dv.Nservices=dv.services.length;

// Positioning of Elements
         dv.plot={};
         dv.plot.width=100;
         dv.plot.xspacing=50;
         dv.plot.yspacing=60;
         dv.plot.xoff=40;
         dv.plot.yoff=30;
         dv.plot.Nx=5; 
         dv.plot.Ny=Math.ceil(dv.Nservices/dv.plot.Nx);

dv.svg={};
         dv.svg.width=dv.plot.xoff+(dv.plot.width+dv.plot.xspacing)*dv.plot.Nx;
         dv.svg.height=dv.plot.yoff+(dv.plot.width+dv.plot.yspacing)*dv.plot.Ny;

// Add a header
         d3.select("body").append("h1")
           .style("margin-left",(dv.plot.xoff/2)+"px")
           .text("Predicting healthcare services");

// Add a description
         d3.select("body").append("p")
           .style("width",(dv.svg.width-dv.plot.xspacing-dv.plot.xoff/2)+"px")
           .style("margin-left",(dv.plot.xoff/2)+"px")
           .html("Driven Data hosted a <a href=\"https://www.drivendata.org/competitions/6/\" target=\"_blank\">competition</a> in 2015 on behalf of Planned Parenthood to predict reproductive health care services accessed by women.  The features were taken from the CDC's National Survey of Family Growth and the data were obfuscated to the competitors.  The objective was to predict whether women would access any of 14 different services using the features provided.  My goal was to see how well a support vector machine would perform for this task and I was able to achieve a ranking of 74 out of 491 total submissions (15%).  My analysis was completed using Python, Numpy, and Scikit-learn. <br><br> Below are the <a href=\"https://en.wikipedia.org/wiki/Receiver_operating_characteristic\" target=\"_blank\">ROC curves</a> for my predictions for each of the 14 services.  The larger the area under the curve (AUC), the better the predictive power.  AUC values are listed for each plot.  Since testing labels were not provided for the competitors, I used a cross validation data set (a small portion of the training data that was withheld from training and used to optimize model parameters) to produce these plots.");

// Create SVG
         dv.svg=d3.select("body").append("svg")
                  .attr("class","plots")
                  .attr("id","svg_plots")
                  .attr("width",dv.svg.width+"px")
                  .attr("height",dv.svg.height+"px")
                  .attr("style","position:relative; left: 0px;");

// Create linear gradient fill
         var grad=dv.svg.append("svg:defs").append("svg:linearGradient")
                                           .attr("id","grad")
                                           .attr("x1","0%").attr("y1","0%").attr("x2","100%").attr("y2","100%");
         grad.append("stop")
             .attr("offset","0%")
             .attr("stop-color","rgb(255,209,56)")
             .attr("stop-opacity",1);
         grad.append("stop")
             .attr("offset","100%")
             .attr("stop-color","rgb(255,209,56)")
             .attr("stop-opacity",0);

/////////////////////////////////////////////////////////////////////  
         // LOAD THE DATA
         /////////////////////////////////////////////////////////////////////  
         d3.csv("DrivenDataPPFA_ROC.csv", function(error,rdata) {
         d3.csv("DrivenDataPPFA_AUC.csv", function(error,adata) {
            if (error) return console.log(error);

// Add (spec,sens)=(0,0) so that plots show full area
            var hold={threshold: 0, sensA: 0, specA: 0, sensB: 0, specB: 0, sensC: 0, specC: 0, sensD: 0, specD: 0, sensE: 0, specE: 0, 
                      sensF: 0, specF: 0, sensG: 0, specG: 0, sensH: 0, specH: 0, sensI: 0, specI: 0, sensJ: 0, specJ: 0, sensK: 0, specK: 0, 
                      sensL: 0, specL: 0, sensM: 0, specM: 0, sensN: 0, specN: 0};
            rdata.push(hold);

// Plot everything
            var ix=0,iy=0,xx=0,yy=0,auc=0;
            dv.services.map(function(d,i){
               ix=i%dv.plot.Nx;
               iy=Math.floor(i/dv.plot.Nx);
               xx=dv.plot.xoff+(dv.plot.xspacing+dv.plot.width)*ix;
               yy=dv.plot.yoff+(dv.plot.yspacing+dv.plot.width)*iy;
               auc=adata[i].AUC;
               console.log(auc);
               addPlot(d.name,xx,yy,dv.plot.width,rdata,auc);
            });

}); //adata d3.csv("DrivenDataPPFA_AUC.csv"
         }); //rdata d3.csv("DrivenDataPPFA_ROC.csv"

/////////////////////////////////////////////////////////////////////  
         // FUNCTIONS
         /////////////////////////////////////////////////////////////////////

//
         // Add Plot to SVG
         //
         function addPlot(service,xx,yy,ww,rdata,AUCvalue)
         {
            // Some Positioning Information
            var xlabelpad=25, ylabelpad=15, titlepad=0;

// Scales and Axes
            var xScale=d3.scale.linear().range([xx,xx+ww]).domain([0,1]);
            var yScale=d3.scale.linear().range([yy+ww,yy]).domain([0,1]);

var xAxis=d3.svg.axis()
                            .scale(xScale) 
                            .tickValues([0,1])
                            .tickFormat(d3.format(".0d"))
                            .orient("bottom");
            var yAxis=d3.svg.axis()
                            .scale(yScale)
                            .tickValues([0,1])
                            .tickFormat(d3.format(".0d"))
                            .orient("left");

// Plots
            var line = d3.svg.line()
                             .x(function(d) { return xScale(1.0-(+d["spec"+service])); })
                             .y(function(d) { return yScale(+d["sens"+service]); });
            dv.svg.append("path")
                  .datum(rdata)
                  .attr("class", "plot line service"+service)
                  .attr("d", line)
                  .style("fill","url(#grad)");

dv.svg.append("g")
                  .attr("class","plot x axis service"+service)
                  .call(xAxis)
                  .attr("transform","translate(0,"+(yy+ww)+")");
            dv.svg.append("text")
                  .attr("class","plot x label service"+service)
                  .attr("x",xx+ww/2)
                  .attr("y",yy+ww+xlabelpad)
                  .text("1-Specificity")
                  .attr("text-anchor","middle");

dv.svg.append("g")
                  .attr("class","plot y axis service"+service)
                  .call(yAxis)
                  .attr("transform","translate("+xx+",0)");
            dv.svg.append("text")
                  .attr("class","plot y label service"+service)
                  .attr("x",xx-ylabelpad)
                  .attr("y",yy+ww/2)
                  .text("Sensitivity")
                  .attr("transform","rotate(-90,"+(xx-ylabelpad)+","+(yy+ww/2)+")")
                  .attr("text-anchor","middle");

dv.svg.append("text")
                  .attr("class","plot y title service"+service)
                  .attr("x",xx+ww/2)
                  .attr("y",yy-titlepad)
                  .text("Service "+service)
                  .attr("text-anchor","middle");

var fmt=d3.format(".3r");
            dv.svg.append("text")
                  .attr("class","plot annotation service"+service)
                  .attr("x",xx+5)
                  .attr("y",yy+ww-5)
                  .text("AUC="+fmt(+AUCvalue))
                  .attr("text-anchor","start");
console.log(AUCvalue);

}

</script>

</body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

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