Published
Edited
Jun 1, 2020
Insert cell
md`# Half Planes`
Insert cell
md`Given a dataset consisting of triples (a,b,c), each one representing an inequality of the form ax+by+c> 0, draw the corresponding halfplanes.`
Insert cell
svg(boundaries, gp)
Insert cell
boundaries = [({a:3,b:1,c:-3}),({a:1,b:1,c:-2}),({a:1,b:0,c:-1})]
Insert cell
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()
}
Insert cell
gp = ({height:500,width:width, x_min:-3,x_max:3,y_min:-3,y_max:3, margin:10,color:"green",opacity:.1,y_ticks:50,x_ticks:50})
Insert cell
transformCoords = function(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})
}
Insert cell
d3 = require("d3@5")
Insert cell
x = d3.scaleLinear().domain([gp.x_min, gp.x_max]).range([gp.margin,gp.width-gp.margin])

Insert cell
y = d3.scaleLinear().domain([gp.y_min,gp.y_max]).range([gp.height-gp.margin,gp.margin])
Insert cell
y_axis = d3.axisLeft(y).ticks(gp.height/gp.y_ticks)

Insert cell
x_axis = d3.axisBottom(x).ticks(gp.width/gp.x_ticks)
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more