xxxxxxxxxx<html lang="en"> <head> <!------------------------------------------------------------------> <!-- BEGIN HEADER --> <!------------------------------------------------------------------> <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"> <!------------------------------------------------------------------> <!-- END HEADER --> <!------------------------------------------------------------------> </head> <body> <!------------------------------------------------------------------> <!-- BEGIN BODY --> <!------------------------------------------------------------------> <script type="text/javascript"> ///////////////////////////////////////////////////////////////////// // 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> <!------------------------------------------------------------------> <!-- END BODY --> <!------------------------------------------------------------------> </body></html> Modified http://d3js.org/d3.v3.min.js to a secure url
https://d3js.org/d3.v3.min.js