30:T4d8,viewof graph = { var t = svg(hyperplanes, gp) ; const g = d3.select(t).selectAll("#half-planes") const zoomer = d3.zoom() .extent([[0, 0], [gp.width,gp.height]]) .scaleExtent([1, 8]).on('zoom',zoomed) ; function zoomed() { g.attr('transform',d3.event.transform) } t.value =[undefined, undefined] var cx = 0 ; var cy = 0 ; var txt1 = d3.select(t).append('text').attr('id','first_coord') var txt2 = d3.select(t).append('text').attr('id','second_coord') var txt3 = d3.select(t).append('text').attr('id','norm') d3.select(t).select('#half-planes').attr('cursor','crosshair') .on('click',function(d,i) { cx = x.invert(d3.mouse(this)[0]); cy = y.invert(d3.mouse(this)[1]) ; t.value = [cx,cy] ; var nm = (cx**2+cy**2)**(1/2) txt1.attr("x",gp.width-70).attr("y",18).text(`a=${cx.toFixed(2)}`) ; txt2.attr("x",gp.width-70).attr("y",35).text(`b=${cy.toFixed(2)}`) ; txt3.attr("x",gp.width-70).attr("y",54).text(`n=${nm.toFixed(2)}`) ; t.dispatchEvent(new CustomEvent("input")) ; }) function reset() { g.call( zoomer.transform, ); } d3.select(t).call(zoomer) return Object.assign(t, {zoomReset: reset}) }31:T619,svg = function(data,gp) { var s = 1000; const svg = d3.create("svg").attr("viewBox",[0,0, gp.width, gp.height]).attr('id','plot'); // svg.append("rect").attr('width','100%').attr('height','100%').attr('fill','#ffffff') ; svg.append("g") .attr('id','half-planes') .selectAll("rect") .data(data) .enter() .append("rect") .attr('vector-effect', 'non-scaling-stroke') .attr('class','half-plane') .attr("width",s*gp.width) .attr("height",s*gp.height) .attr('fill',gp.color) .attr('fill-opacity',gp.opacity) .attr('transform', function(d) {let e=transformCoords(d.a,d.b,d.c,x,y); return( `matrix(${e.a} ${e.b} ${e.c} ${e.d} ${e.e} ${e.f})` + `translate(0,${-s*gp.height/2})`) }) .attr('stroke','black') svg.select('#half-planes').append("g").attr("transform", "translate("+gp.width/2+",0)").call(y_axis); svg.select('#half-planes').append("g").attr('transform','translate(0,'+gp.height/2+')').call(x_axis) function transformCoords(a,b,c,x,y) { var pt_x, pt_y, nm nm = ((x(a)-x(0))**2+(y(b)-y(0))**2)**(1/2) var normalScreen_x = (x(a)-x(0)) var normalScreen_y = (y(b)-y(0)) var lineScreen_x = (x(-b)-x(0)) var lineScreen_y = (y(a)-y(0)) if (b!=0) { pt_x = x(0) pt_y = y(-c/b) } else { pt_x = x(-c/a) pt_y = y(0) } return ({a:normalScreen_x,b:normalScreen_y,c:lineScreen_x,d:lineScreen_y,e:pt_x,f:pt_y}) } return svg.node() }32:[] 2e:{"title":"The Maximum Margin Problem for Support Vector Machines","cells":[{"id":0,"value":"md`# The Maximum Margin Problem for Support Vector Machines`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1254,"value":"md`On the left is two sets of points, one set colored red, the other colored black. On the right are the hyperplanes defined by the inequalities ${tex `w\\cdot(x-y)/2+1\\ge 0`} with ${tex `x`} chosen from the red ponts and ${tex `y`} from the black. The positive sides of the hyperplanes are colored gold. The intersection of these positive halfplanes is the feasible region for the SVM problem. The closest point of the feasible region yields the hyperplane with maximum margin. Clicking on the right graph draws the associated hyperplane on the left, although the results are only meaningful if you click in the feasible region.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1043,"value":"{\n const form = html``;\n\n form.reset.onclick = () => (viewof graph).zoomReset();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":903,"value":"html`

${dual}

${viewof graph}

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":303,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":1297,"value":"d3.line()(d3.polygonHull(plusPoints.map(d=>[x(d.x),y(d.y)])))","pinned":true,"hidden":false,"mode":"ojs"},{"id":727,"value":"dual = {\n var cplus = d3.max(plusPoints.map(d=>1-graph[0]*d.x-graph[1]*d.y))\n var cminus = d3.min(minusPoints.map(d=>-1-graph[0]*d.x-graph[1]*d.y))\n\n if (typeof(graph[0]) === 'undefined') {\n var plane = [] ;\n } else {\n var plane = [{a:graph[0],b:graph[1],c:(cplus+cminus)/2}];\n }\n \n var dual = svg(plane,gp); \n\n d3.select(dual).\n selectAll('circle').\n data(points).\n enter().\n append('circle').\n attr('cx',d=>x(d.x)).\n attr('cy',d=>y(d.y)).\n attr('r',4).\n attr('fill',d=>(d.z==-1) ? 'black':'red')\n \n const plusLine = d3.line()(d3.polygonHull(plusPoints.map(d=>[x(d.x),y(d.y)])))+'Z'\n const minusLine = d3.line()(d3.polygonHull(minusPoints.map(d=>[x(d.x),y(d.y)])))+'Z'\n\n d3.select(dual).append('g').selectAll('path').data([plusLine,minusLine]).join('path').attr('d', d=>d).attr('stroke','blue').attr('fill-opacity',.1)\n \n return dual ;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1008,"value":"gp = ({height:width/2,width:width/2, x_min:-3,x_max:3,y_min:-3,y_max:3, margin:10,color:\"gold\",opacity:.05,y_ticks:50,x_ticks:50})","pinned":false,"hidden":false,"mode":"ojs"},{"id":385,"value":"points = [new Pt(1,1,1), new Pt(-.5,2,1), new Pt(1.5,3,1), new Pt(1.5,2,1), new Pt(1,-2,-1), new Pt(-1,-.5,-1),new Pt(-1,.5,-1), new Pt(0,0,-1)]","pinned":true,"hidden":false,"mode":"ojs"},{"id":390,"value":"plusPoints = points.filter(d=>d.z==1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":392,"value":"minusPoints = points.filter(d=>d.z==-1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":394,"value":"hyperplanes = {\n var hyperplanes = [] ;\n for (let a of plusPoints) {\n for (let b of minusPoints) {\n hyperplanes.push({a:(a.x-b.x)/2,b:(a.y-b.y)/2,c:-1,xp:a.x,yp:a.y,xm:b.x,ym:b.y})\n }\n }\n return hyperplanes\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":289,"value":"class Pt {\n constructor(x,y,z) {\n this.x = x ; \n this.y = y ; \n this.z = z ; \n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":997,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1124,"value":"cs = {\n const h = hyperplanes ; \n var cs = [] ; \n\n for (let i=0;id.x*a+d.y*b))\n var cm = d3.max(minusPoints.map(d=>d.x*a+d.y*b))\n if(cp>=cm & cp>=0 & cm<=0) {\n cs.push([i,j,a,b,(a**2+b**2)**(1/2),cm,cp]) ;\n }\n }\n }\nreturn cs ;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1000,"value":"x = d3.scaleLinear().domain([gp.x_min, gp.x_max]).range([gp.margin,gp.width-gp.margin])","pinned":true,"hidden":false,"mode":"ojs"},{"id":1001,"value":"y = d3.scaleLinear().domain([gp.y_min,gp.y_max]).range([gp.height-gp.margin,gp.margin])","pinned":true,"hidden":false,"mode":"ojs"},{"id":1004,"value":"y_axis = d3.axisLeft(y).ticks(gp.height/gp.y_ticks)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1006,"value":"x_axis = d3.axisBottom(x).ticks(gp.width/gp.x_ticks)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1267,"value":"html`\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":30,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}