horizontal well bubbles

by Rushan Sakhibgareev

HTML

<svg height="600" width="600"></svg>

JavaScript

var horWellRectWidth = 20;
var maxRate = 350;
var minRate = 100;
var svg = d3.select('svg');

var horWells = [{x1:50,y1:160,x2:100,y2:190, wc:26.3, rate:24},
                {x1:80,y1:280,x2:220,y2:220, wc:81.12, rate:89},
                {x1:90,y1:20,x2:20,y2:90, wc:43.6, rate:225},
                {x1:220,y1:120,x2:120,y2:70, wc:11, rate:341}
                ];

var polyOils = [];
var polyWaters = [];

for (var i=0;i<horWells.length;i++)
{
	var x1 = horWells[i].x1;
  var x2 = horWells[i].x2;
  var y1 = horWells[i].y1;
  var y2 = horWells[i].y2;
  var wc = horWells[i].wc;
  var x12 = x1+(x2-x1)*(1-wc/100);
  var y12 = y1+(y2-y1)*(1-wc/100);
  var dx = x2-x1;
  var dy = y2-y1;
  var tan = dy/dx;
  var rate = horWells[i].rate;
  var halfWidth = (horWellRectWidth/2)*(Math.log(rate)/Math.log(maxRate));
  var angle = Math.atan(tan);
  var wDx = Math.sin(angle)*halfWidth;
  var wDy = Math.cos(angle)*halfWidth;
  var polyOil = [
  						{x:x1+wDx,y:y1-wDy},
              {x:x12+wDx,y:y12-wDy},
              {x:x12-wDx,y:y12+wDy},
              {x:x1-wDx,y:y1+wDy}
  					];
  var polyWater = [
  						{x:x12+wDx,y:y12-wDy},
              {x:x2+wDx,y:y2-wDy},
              {x:x2-wDx,y:y2+wDy},
              {x:x12-wDx,y:y12+wDy}
  					];            
  polyOils.push(polyOil);
  polyWaters.push(polyWater);  
}

var oilHorWellPolys = svg.append("g");
var waterHorWellPolys = svg.append("g");



var polygons = oilHorWellPolys.selectAll('polygon')
			.data(polyOils)
      .enter()
      .append("polygon") 
      .attr("points",function(d) { 
        return d.map(function(d) {
            return [(d.x),(d.y)].join(",");
        }).join(" ");
    })
    .attr("stroke","black")
    .attr("stroke-width",1)
    .attr("fill","orange");

var polygons = waterHorWellPolys.selectAll('polygon')
			.data(polyWaters)
      .enter()
      .append("polygon") 
      .attr("points",function(d) { 
        return d.map(function(d) {
            return [(d.x),(d.y)].join(",");
        }).join("...