30:T753,{ const svgDims = [600,170] const svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr("style","background:white;border:1px solid white") const xScale = d3.scaleLinear().domain([0,10]).range([30,570]) const xAxis = svg.append("g").attr("transform",`translate(0,150)`).call(d3.axisBottom(xScale)) const blueGroup = svg.append("g").attr("transform",`translate(${xScale(5+s)},150)`) const redGroup = svg.append("g").attr("transform",`translate(${xScale(5-s)},150)`) for(let i = 0; i < 100; i++){ redGroup.append("circle") .attr("stroke","black") .attr("fill","tomato") .attr("cx",xScale(red[i])-xScale(0)) .attr("cy",-5) .attr("r",4) } for(let i = 0; i < 100; i++){ blueGroup.append("circle") .attr("stroke","black") .attr("fill","cornflowerblue") .attr("cx",xScale(blue[i])-xScale(0)) .attr("cy",-20) .attr("r",4) } svg.append("rect") .attr("x",xScale(0)) .attr("y",0) .attr("width",xScale(x) - xScale(0)) .attr("height",150) .attr("fill","tomato") .attr("opacity",.5) svg.append("rect") .attr("x",xScale(x)) .attr("y",0) .attr("width",xScale(10) - xScale(x)) .attr("height",150) .attr("fill","cornflowerblue") .attr("opacity",.5) svg.append("line") .attr("x1",xScale(x)) .attr("y1",150) .attr("x2",xScale(x)) .attr("y2",0) .attr("stroke","black") svg.append("line") .attr("x1",xScale(0)) .attr("y1",150) .attr("x2",xScale(0)) .attr("y2",0) .attr("stroke","black") svg.append("line") .attr("x1",xScale(10)) .attr("y1",150) .attr("x2",xScale(10)) .attr("y2",0) .attr("stroke","black") svg.append("line") .attr("x1",xScale(0)) .attr("y1",.5) .attr("x2",xScale(10)) .attr("y2",.5) .attr("stroke","black") yield svg.node() }31:Tde1,{ const svgDims = [900,300] const svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr("style","background:white;border:1px solid white") const xScale1 = d3.scaleLinear().domain([0,10]).range([30,270]) const yScale1 = d3.scaleLinear().domain([0,1]).range([270,30]) const xAxis1 = svg.append("g").attr("transform",`translate(0,${yScale1(0)})`).call(d3.axisBottom(xScale1)) const yAxis1 = svg.append("g").attr("transform",`translate(${xScale1(0)},0)`).call(d3.axisLeft(yScale1)) const xScale2 = d3.scaleLinear().domain([0,1]).range([330,570]) const yScale2 = d3.scaleLinear().domain([0,1]).range([270,30]) const xAxis2 = svg.append("g").attr("transform",`translate(0,${yScale2(0)})`).call(d3.axisBottom(xScale2)) const yAxis2 = svg.append("g").attr("transform",`translate(${xScale2(0)},0)`).call(d3.axisLeft(yScale2)) const pathDataRed = d3.line() .x(d => xScale1(d)) .y(d => yScale1(red.filter(e => 5 + e - s < d).length/100))(data) const pathRed = svg.append("path").attr("stroke","tomato").attr("fill","none").attr("d",pathDataRed).attr("stroke-width",2) const pathDataBlue = d3.line() .x(d => xScale1(d)) .y(d => yScale1(blue.filter(e => 5 + e + s < d).length/100))(data) const pathBlue = svg.append("path").attr("stroke","cornflowerblue").attr("fill","none").attr("d",pathDataBlue).attr("stroke-width",2) svg.append("circle") .attr("r",4) .attr("stroke","black") .attr("fill","tomato") .attr("cx",xScale1(x)) .attr("cy",yScale1(red.filter(e => 5 + e - s < x).length/100)) svg.append("circle") .attr("r",4) .attr("stroke","black") .attr("fill","tomato") .attr("cx",xScale1(0)) .attr("cy",yScale1(red.filter(e => 5 + e - s < x).length/100)) svg.append("circle") .attr("r",4) .attr("stroke","black") .attr("fill","cornflowerblue") .attr("cx",xScale1(x)) .attr("cy",yScale1(blue.filter(e => 5 + e + s < x).length/100)) svg.append("circle") .attr("r",4) .attr("stroke","black") .attr("fill","cornflowerblue") .attr("cx",xScale1(0)) .attr("cy",yScale1(blue.filter(e => 5 + e + s < x).length/100)) const pathData = d3.area().x(d => xScale2(blue.filter(e => 5 + e + s < d).length/100)).y1(d => yScale2(red.filter(e => 5 + e - s < d).length/100)).y0(d => yScale2(0)).curve(d3.curveBasis)(data) const path = svg.append("path").attr("stroke","none").attr("fill","lightgrey").attr("d",pathData).attr("stroke-width",2).attr("opacity",.5) const pathData2 = d3.line().x(d => xScale2(blue.filter(e => 5 + e + s < d).length/100)).y(d => yScale2(red.filter(e => 5 + e - s < d).length/100)).curve(d3.curveBasis)(data) const path2 = svg.append("path").attr("stroke","black").attr("fill","none").attr("d",pathData2).attr("stroke-width",2) svg.append("circle") .attr("r",4) .attr("stroke","black") .attr("fill","tomato") .attr("cx",xScale2(0)) .attr("cy",yScale2(red.filter(e => 5 + e - s < x).length/100)) svg.append("circle") .attr("r",4) .attr("stroke","black") .attr("fill","cornflowerblue") .attr("cy",yScale2(0)) .attr("cx",xScale2(blue.filter(e => 5 + e + s < x).length/100)) svg.append("circle") .attr("r",4) .attr("stroke","black") .attr("fill","black") .attr("cy",yScale2(red.filter(e => 5 + e - s < x).length/100)) .attr("cx",xScale2(blue.filter(e => 5 + e + s < x).length/100)) svg.append("text") .text("ROC Curve") .attr("x",xScale2(0)) .attr("y",10) .attr("font-size",12) yield svg.node() }32:[] 2e:{"title":"AUC - ROC Curve","cells":[{"id":0,"value":"md`# AUC - ROC Curve`","pinned":false,"hidden":false,"mode":"ojs"},{"id":69,"value":"viewof b = button({value:\"new points\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"html`\n \n \n \n \n \n \n

	Predicted: Red	Predicted: Blue	Total
Actual: Red	${redRed} (TP)	${blueRed} (FN)	${100}
Actual: Blue	${redBlue} (FP)	${blueBlue} (TN)	${100}
Total	${predRed}	${predBlue}	${2*100}

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":62,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"viewof s = slider({max:2,display:(v)=>``})","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"viewof x = slider({min:0,max:10,display:(v)=>{return `x < ${v} => red`},description:`set threshold`})","pinned":false,"hidden":false,"mode":"ojs"},{"id":74,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"html`

Variables and Code

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"red = {\n b\n const red = []\n for(let i = 0;i < 100;i++){\n red.push(normal(0,.5))\n }\n return red\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":90,"value":"red.sort((a,b)=>a-b)","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"blue = {\n b\n const blue = []\n for(let i = 0;i < 100;i++){\n blue.push(normal(0,.5))\n }\n return blue\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"redRed = red.filter(d => d + 5 - s < x).length","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"redBlue = blue.filter(d => d + 5 + s < x).length","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"blueRed = red.filter(d => d + 5 - s >= x).length","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"blueBlue = blue.filter(d => d + 5 + s >= x).length","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"predRed = redRed + redBlue","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"predBlue = blueRed + blueBlue","pinned":false,"hidden":false,"mode":"ojs"},{"id":96,"value":"data = {\n const data = []\n for(let i = 0;i < 10;i = i+.01){\n data.push(i)\n }\n return data\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"html`

Libraries

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"import {slider,button,select,text,radio,checkbox,number} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"stdlib = require( \"https://unpkg.com/@stdlib/stdlib@0.0.32/dist/stdlib-flat.min.js\" )","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"normal = stdlib.base.random.normal","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"ss = require(\"https://unpkg.com/simple-statistics@6.1.0/dist/simple-statistics.min.js\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}