Skip to content

Instantly share code, notes, and snippets.

@nsfyn55

nsfyn55/Beachline Visualization with Parabolas

Last active August 29, 2015 13:56
Show Gist options
  • Save nsfyn55/9231563 to your computer and use it in GitHub Desktop.
Save nsfyn55/9231563 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Beachline Visualization with Parabolas
<!-- Sample Site http://nsfyn55.fortune.site.s3-website-us-east-1.amazonaws.com/ -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html"; charset="UTF-8"/>
<title>Page Title</title>
<link rel="stylesheet" type="text/css" href="test.css">
<link rel="stylesheet" type="text/css" href="dhtmlxslider.css">
<script type="text/javascript" src="d3.js"></script>
<script type="text/javascript" src="dhtmlxcommon.js"></script>
<script type="text/javascript" src="dhtmlxslider.js"></script>
</head>
<body>
<div>
<div id="slider"></div>
<div id="sliderbox"></div
</div>
<script type="text/javascript">
var dataset = [
[25, 60], [50, 50], [75, 80],[100, 100]
];
var sweepLineY = 25
var h = 300;
var w = 500;
var padding = 20;
var xScale = d3.scale.linear()
.domain([0, d3.max(dataset, function(d) { return d[0]; })])
.range([padding, w-padding*3]);
var yScale = d3.scale.linear()
.domain([0, d3.max(dataset, function(d) { return d[1]; })])
.range([h-padding, padding]);
var rScale = d3.scale.linear()
.domain([0, d3.max(dataset, function(d) { return d[1]; })])
.range([2, 5]);
var svg = d3.selectAll("body")
.append("svg")
.attr("width" , w)
.attr("height" , h)
var group = svg
.append("g")
.attr("class", 'sweepline')
var group = svg
.append("g")
.attr("class", 'parabolas')
var group = svg
.append("g")
.attr("class", 'intersects')
var sweepLineData = [{p1:{x: 0,y: sweepLineY},p2:{x: 500,y: sweepLineY}}];
var sld = new dhtmlxSlider("slider", 500);
sld.attachEvent("onChange", handler);
sld.init();
initialrender(svg, dataset, sweepLineY, sweepLineData, xScale, yScale ,rScale);
function handler(pos, slider){
document.getElementById("sliderbox").innerHTML=pos;
clearDerivedImages();
var sweepLineData = [{p1:{x: 0,y: pos},p2:{x: 500,y: pos}}];
drawParabolas(svg, pos, dataset, xScale, yScale);
drawSweepLine(svg, sweepLineData , xScale, yScale);
drawPointsWhereParabolasIntersect(svg, dataset, pos, xScale, yScale, rScale);
}
function initialrender(svg, dataset, sweepLineY, sweepLineData, xScale, yScale, rScale) {
drawPoints(svg, dataset, xScale, yScale, rScale);
drawParabolas(svg, sweepLineY, dataset, xScale, yScale);
drawSweepLine(svg, sweepLineData , xScale, yScale);
drawPointsWhereParabolasIntersect(svg, dataset, sweepLineY, xScale, yScale, rScale);
return svg;
}
function clearDerivedImages(){
var svg = d3.selectAll("svg")
//Remove Sweepline
var sweeplinegroup = svg.selectAll(".sweepline");
var sweepline = sweeplinegroup.selectAll(".line");
sweepline.remove();
//remove parabolas
var parabgroup = svg.selectAll(".parabolas");
var circle = parabgroup.selectAll("circle");
circle.remove();
//remove intersections
var intersectiongroup = svg.selectAll(".intersects");
var circle = intersectiongroup.selectAll("circle");
circle.remove();
}
function drawPointsWhereParabolasIntersect(svg, beachLinePoints,
sweepLineY, xScale, yScale, rScale){ var data = [];
//select valid beachline points
cleanBeach = [];
for(i=0; i<beachLinePoints.length; i++){
if(beachLinePoints[i][1] >= sweepLineY){
cleanBeach.push(beachLinePoints[i]);
}
}
console.log(cleanBeach)
for(i=0; i<cleanBeach.length-1; i++){
var p1 = cleanBeach[i];
var p2 = cleanBeach[i + 1];
var point = getPointOfArcIntersection(p1[0], p1[1], p2[0], p2[1], sweepLineY);
data.push(point);
}
var group = svg.selectAll(".intersects");
var circles = group.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("cx", function(d){
return xScale(d.x);
})
.attr("cy", function(d){
return yScale(d.y);
})
.attr("r", function(d){
return rScale(80);
})
.attr("fill","red")
}
function drawPoints(svg, dataset, xScale, yScale, rScale){
var circles = svg.selectAll("circle")
.data(dataset)
.enter()
.append("circle")
.attr("cx", function(d){
return xScale(d[0]);
})
.attr("cy", function(d){
return yScale(d[1]);
})
.attr("r", function(d){
return rScale(d[1]);
})
svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.text(function(d) {
return "(" + d[0] + ", " + d[1] + ")";
})
.attr("x", function(d) {
return xScale(d[0]);
})
.attr("y", function(d) {
return yScale(d[1]);
})
.attr("font-family", "sans-serif")
.attr("font-size", "11px")
.attr("fill", "red")
}
function drawSweepLine(svg, sweepLineData, xScale, yScale){
var group = svg.selectAll(".sweepline");
group.selectAll(".line")
.data(sweepLineData)
.enter()
.append("line")
.attr("class", "line")
.attr("x1", function(d) {
return xScale(d.p1.x);
})
.attr("y1", function(d) {
return yScale(d.p1.y);
})
.attr("x2", function(d) {
return xScale(d.p2.x);
})
.attr("y2", function(d) {
return yScale(d.p2.y);
})
}
function drawParabolas(svg, sweepLineY, dataset, xScale, yScale){
var parabPoints = getParabolasForDataSet(dataset,sweepLineY, 0, 500, 1);
var group = svg.selectAll(".parabolas");
var parabola = group.selectAll("circle") .data(parabPoints)
.enter()
.append("circle")
.attr("cx", function(d){
return xScale(d[0]);
})
.attr("cy", function(d){
return yScale(d[1]);
})
.attr("r", 2)
}
function getParabolasForDataSet(dataset,sweepLineY, startX, endX, spacing){
ret = [];
for(var i=0; i<dataset.length; i++){
if(dataset[i][1] > sweepLineY){
ret = ret.concat(
getParabolaPoints(sweepLineY, dataset[i][0], dataset[i][1],
startX, endX, spacing));
}
}
return ret;
}
function getParabolaPoints(sweepLineY, siteX, siteY ,startX,endX,spacing){
points = [];
for(var i=startX; i<endX; i++){
if(i % spacing == 0){
var sweepLinePoint = {x: i, y: sweepLineY}
var unknownYComponent = genUnknownYComponent(sweepLinePoint,{x: siteX, y: siteY});
if(unknownYComponent < 500){
points.push([i,unknownYComponent])
}
}
}
return points;
}
function genUnknownYComponent(p1,p2){
return (-1 * Math.pow((p2.x-p1.x),2) - Math.pow(p2.y,2) +
Math.pow(p1.y,2))/(2*p1.y - 2*p2.y)
}
function getPointOfArcIntersection(x,y,v,w,h){
var alpha = getAlpha(v, x);
var beta = getBeta(y, w);
var gamma = getGamma(w, v, x, y);
var omega = getOmega(h ,w);
var mu = getMu(h, v, w);
var epsilon = getEpsilon(omega, gamma, beta, mu);
var phi = getPhi(beta, v, alpha, omega);
var step = -1 * phi - Math.sqrt(Math.pow(phi,2) - 4 * beta * epsilon)
var xCenter = step / (2 * beta);
var yCenter = getYCenter(xCenter, v, mu, omega);
return {x: Math.floor(xCenter), y: Math.floor(yCenter)};
}
function getYCenter(xCenter, v, mu , omega){
return (2 * xCenter * v - Math.pow(xCenter, 2) + mu) / omega;
}
function getAlpha(v, x){
return 2 * v - 2 * x;
}
function getBeta(y, w){
return 2 * y - 2 * w;
}
function getGamma(w, v, x, y){
return Math.pow(w,2) + Math.pow(v,2) - Math.pow(x,2) - Math.pow(y,2);
}
function getOmega(h, w){
return 2 * h - 2 * w;
}
function getMu(h, v, w){
return Math.pow(h, 2) - Math.pow(v, 2) - Math.pow(w, 2);
}
function getEpsilon(omega, gamma, beta, mu){
return -1 * omega * gamma - beta * mu;
}
function getPhi(beta, v, alpha, omega){
return -2 * beta * v + alpha * omega
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment