30:T512,{ const svg = html`` const container = d3.select(svg) container.attr("style","width: 450px; height: 450px; border:1px black solid") const xScale = makeXAxis(container,[0,50],[30,420],420) const yScale = makeYAxis(container,[0,50],[420,30],30) const trueP = container.append("circle") .attr("r",5) .attr("fill", "skyblue") .attr("stroke", "black") .attr("cx", xScale(0)) .attr("cy", yScale(TP)) const falseP = container.append("circle") .attr("r",5) .attr("fill", "tomato") .attr("stroke", "black") .attr("cx", xScale(FP)) .attr("cy", yScale(0)) const ROCPoint = container.append("circle") .attr("r",5) .attr("fill", "black") .attr("stroke", "black") .attr("cx", xScale(FP)) .attr("cy", yScale(TP)) const pathData = d3.line().x(d => xScale(d.x)).y(d => yScale(d.y))(ROCData) const ROCPath = container.append("path") .attr("stroke","black") .attr("fill","none") .attr("d",pathData) return svg }31:[] 2e:{"title":"Classification (ML)","cells":[{"id":0,"value":"md`# Classification (ML)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":247,"value":"{\n const svg = html`` \n const container = d3.select(svg)\n container.attr(\"style\",\"width: 600px; height: 300px; border:1px black solid\")\n \n const xScale = makeXAxis(container,[10,45],[30,570],270)\n //const yScale = makeYAxis(container,[100,0],[30,270],30)\n \n for(let i = 0; i < carData.length; i = i + 1){\n \n const circle = container.append(\"circle\")\n .attr(\"r\", 5)\n .attr(\"fill\", \"#786ABC\")\n .attr(\"stroke\",\"black\")\n .attr(\"cx\", xScale(carData[i].Miles_per_Gallon))\n .attr(\"cy\", 260)\n \n if(carData[i].Name.split(\" \")[0] == \"chevrolet\"){\n circle.attr(\"fill\",\"tomato\")\n .attr(\"cy\", 245)\n }\n }\n \n container.append(\"line\")\n .attr(\"stroke\",\"black\")\n .attr(\"stroke-width\",2)\n .attr(\"x1\",xScale(threshold))\n .attr(\"y1\",0)\n .attr(\"x2\",xScale(threshold))\n .attr(\"y2\",270)\n \n return svg\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":296,"value":"viewof threshold = slider({min:10, max:45, step: 0.1})","pinned":false,"hidden":false,"mode":"ojs"},{"id":318,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":407,"value":"{\n const svg = html`` \n const container = d3.select(svg)\n container.attr(\"style\",\"width: 600px; height: 300px; border:1px black solid\")\n \n const xScale = makeXAxis(container,[0,1],[30,570],270)\n const yScale = makeYAxis(container,[0,1], [270,30],30)\n \n const pathData = d3.line().x(d => xScale(d.x)).y(d => yScale(d.y))(probData)\n \n const ROCPath = container.append(\"path\")\n .attr(\"stroke\",\"black\")\n .attr(\"fill\",\"none\")\n .attr(\"d\",pathData)\n return svg\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":417,"value":"probData = {\n const probability = []\n for(let i = 0.01; i < 1; i = i + 0.01){\n probability.push({x:i,y:-2*i*math.log(i,2)})\n }\n return probability\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":215,"value":"md`---\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":373,"value":"ROCData = {\n const points = []\n for(let i = 0; i <= 50; i = i + 0.1){\n const TP = carData.filter(d => d.Name.split(\" \")[0] == \"chevrolet\")\n .filter(d => d.Miles_per_Gallon <= i).length\n const FP = carData.filter(d => d.Name.split(\" \")[0] != \"chevrolet\")\n .filter(d => d.Miles_per_Gallon <= i).length\n points.push({x:FP,y:TP})\n }\n return points\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":227,"value":"carData = cars.filter(d => d.Name.split(\" \")[0] == \"chevrolet\" ||\n d.Name.split(\" \")[0] == \"toyota\" ||\n d.Name.split(\" \")[0] == \"datsun\" )\n .filter(d => d.Miles_per_Gallon != null)","pinned":false,"hidden":false,"mode":"ojs"},{"id":242,"value":"TP = carData.filter(d => d.Name.split(\" \")[0] == \"chevrolet\")\n .filter(d => d.Miles_per_Gallon <= threshold).length","pinned":false,"hidden":false,"mode":"ojs"},{"id":307,"value":"TN = carData.filter(d => d.Name.split(\" \")[0] != \"chevrolet\")\n .filter(d => d.Miles_per_Gallon > threshold).length","pinned":false,"hidden":false,"mode":"ojs"},{"id":305,"value":"FP = carData.filter(d => d.Name.split(\" \")[0] != \"chevrolet\")\n .filter(d => d.Miles_per_Gallon <= threshold).length","pinned":false,"hidden":false,"mode":"ojs"},{"id":309,"value":"FN = carData.filter(d => d.Name.split(\" \")[0] == \"chevrolet\")\n .filter(d => d.Miles_per_Gallon > threshold).length","pinned":false,"hidden":false,"mode":"ojs"},{"id":219,"value":"html`

Dataset

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":223,"value":"cars = d3.json(\"https://vega.github.io/vega-datasets/data/cars.json\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"html`

Libraries

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"import {slider,button,select,text,radio,checkbox,number} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"math = require('mathjs@6.2.1/dist/math.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"stat = require('simple-statistics@7.3.0/dist/simple-statistics.min.js')\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"{\n const svg = html`` \n const container = d3.select(svg)\n container.attr(\"style\",\"width: 600px; height: 300px; border:1px black solid\")\n \n\n \n return svg\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"makeXAxis = function(container,domain,range,y,ticks){\n const xScale = d3.scaleLinear().domain(domain).range(range)\n const xAxis = container.append(\"g\").attr(\"transform\",`translate(0,${y})`)\n d3.axisBottom(xScale).ticks(ticks)(xAxis)\n return xScale\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"makeYAxis = function(container,domain,range,x,ticks){\n const yScale = d3.scaleLinear().domain(domain).range(range)\n const yAxis = container.append(\"g\").attr(\"transform\",`translate(${x},0)`)\n d3.axisLeft(yScale).ticks(ticks)(yAxis)\n return yScale\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"makeBar = function(container,xScale,yScale,x,p,width,fill,opacity){\n container.append(\"rect\")\n .attr(\"x\",xScale(x - width))\n .attr(\"y\",yScale(p))\n .attr(\"width\",xScale(x + width)- xScale(x - width))\n .attr(\"height\",yScale(0) - yScale(p))\n .attr(\"fill\",fill)\n .attr(\"stroke\",\"black\")\n .attr(\"opacity\",opacity)\n\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":100,"value":"makePoint = function(container,xScale,yScale,x,y,fill){\n container.append(\"circle\")\n .attr(\"r\",5)\n .attr(\"stroke\",\"black\")\n .attr(\"fill\",fill)\n .attr(\"cx\",xScale(x))\n .attr(\"cy\",yScale(y))\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":106,"value":"makeLine = function(container, xScale, yScale, x1, y1, x2, y2, stroke, strokeWidth){\n container.append(\"line\")\n .attr(\"stroke\",stroke)\n .attr(\"stroke-width\",strokeWidth)\n .attr(\"x1\",xScale(x1))\n .attr(\"y1\",yScale(y1))\n .attr(\"x2\",xScale(x2))\n .attr(\"y2\",yScale(y2))\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"stdlib = require( \"https://unpkg.com/@stdlib/stdlib@0.0.32/dist/stdlib-flat.min.js\" )","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"normal = stdlib.base.dists.normal.pdf","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"normalArea = stdlib.base.dists.normal.cdf","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"uniformPDF = stdlib.base.dists.uniform.pdf","pinned":false,"hidden":false,"mode":"ojs"},{"id":147,"value":"uniform = stdlib.base.random.uniform","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"uniformDist = function(container,xScale,yScale,a,b,fill){\n const points = []\n for(let i = a;i <= b;i = parseFloat(d3.format(\".1f\")(i + .1))){\n points.push({x:i,y:uniformPDF(i,a,b)})\n console.log(i)\n }\n const pathData = d3.area().x(d => xScale(d.x)).y1(d => yScale(d.y)).y0(d => yScale(0))(points)\n container.append(\"path\")\n .attr(\"stroke\",\"black\")\n .attr(\"fill\",fill)\n .attr(\"opacity\",.3)\n .attr(\"d\",pathData)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":168,"value":"expPDF = stdlib.base.dists.exponential.pdf","pinned":false,"hidden":false,"mode":"ojs"},{"id":172,"value":"expDist = function(container,xScale,yScale,lambda,fill){\n const points = []\n for(let i = 0;i <= 5;i = parseFloat(d3.format(\".1f\")(i + .1))){\n points.push({x:i,y:expPDF(i,lambda)})\n }\n const pathData = d3.area().x(d => xScale(d.x)).y1(d => yScale(d.y)).y0(d => yScale(0))(points)\n container.append(\"path\")\n .attr(\"stroke\",\"black\")\n .attr(\"fill\",fill)\n .attr(\"opacity\",.3)\n .attr(\"d\",pathData)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":197,"value":"exponential = stdlib.base.random.exponential","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"makeNormal = function(container,xScale,yScale,m,s,r,l){\n const points = []\n for(let i = m - 5*s;i <= m + 5*s;i = i + .1){\n points.push({x:d3.format(\".1f\")(i),y:normal(i,m,s)})\n }\n const rightPoints = points.filter(d => d.x >= r)\n const leftPoints = points.filter(d => d.x <= l)\n const pathData = d3.line().x(d => xScale(d.x)).y(d => yScale(d.y))(points)\n const rightData = d3.area().x(d => xScale(d.x)).y0(d => yScale(d.y)).y1(d => yScale(0))(rightPoints)\n const leftData = d3.area().x(d => xScale(d.x)).y0(d => yScale(d.y)).y1(d => yScale(0))(leftPoints)\n \n container.append(\"path\")\n .attr(\"stroke\",\"black\")\n .attr(\"fill\",\"none\")\n .attr(\"d\",pathData)\n \n container.append(\"path\")\n .attr(\"stroke\",\"black\")\n .attr(\"fill\",\"tomato\")\n .attr(\"d\",rightData)\n .attr(\"opacity\",.5)\n \n container.append(\"path\")\n .attr(\"stroke\",\"black\")\n .attr(\"fill\",\"tomato\")\n .attr(\"d\",leftData)\n .attr(\"opacity\",.5)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":206,"value":"densityPlot = function(container,xScale,yScale,points,fill){\n const pathData = d3.area().x(d => xScale(d.x)).y1(d => yScale(d.y)).y0(d => yScale(0)).curve(d3.curveMonotoneX)(points)\n container.append(\"path\")\n .attr(\"stroke\",\"black\")\n .attr(\"fill\",fill)\n .attr(\"opacity\",.5)\n .attr(\"d\",pathData)\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}