nsfyn55 · December 26, 2012 15:08
diff --git a/beachline.html b/beachline.html
 <!--

 -->
 <html>
  <head>
    <meta http-equiv="Content-Type" content="text/html"; charset="UTF-8"/>
    <title>Page Title</title>
    <script type="text/javascript" src="d3.js"></script>
    <link rel="stylesheet" type="text/css" href="test.css">
  </head>
  <body>
    <script type="text/javascript">
      //var dataset = [
      //                [5, 20], [480, 90], [250, 50]
      //              ];
      var dataset = [
                      [0, 0], [50, 50], [35, 75], [100, 100]
                    ];
      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 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")

      var sweepLine = [{p1:{x: 0,y: 49},p2:{x: 500,y: 49}}]; 

      var group = svg
        .append("g")

      group.selectAll(".line")
        .data(sweepLine)
        .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);  
          })

      var parabPoints = getParabolasForDataSet(dataset,sweepLine[0].p1.y, 0, 500, 1); 

      var parabola = svg.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])
            }
          }
        }

        console.log(points)

        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)
      }
    </script>
  </body>
 </html>
	<!--

	-->
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html"; charset="UTF-8"/>
	<title>Page Title</title>
	<script type="text/javascript" src="d3.js"></script>
	<link rel="stylesheet" type="text/css" href="test.css">
	</head>
	<body>
	<script type="text/javascript">
	//var dataset = [
	// [5, 20], [480, 90], [250, 50]
	// ];
	var dataset = [
	[0, 0], [50, 50], [35, 75], [100, 100]
	];
	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 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")

	var sweepLine = [{p1:{x: 0,y: 49},p2:{x: 500,y: 49}}];

	var group = svg
	.append("g")

	group.selectAll(".line")
	.data(sweepLine)
	.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);
	})

	var parabPoints = getParabolasForDataSet(dataset,sweepLine[0].p1.y, 0, 500, 1);

	var parabola = svg.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])
	}
	}
	}

	console.log(points)

	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))/(2p1.y - 2p2.y)
	}
	</script>
	</body>
	</html>