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('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))/nm
var normalScreen_y = (y(b)-y(0))/nm
var lineScreen_x = (x(-b)-x(0))/nm
var lineScreen_y = (y(a)-y(0))/nm
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()
}