Find position on triangle

HTML

<head lang="en">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body>
  <div id="svgContaintainer"> </div>
</body>

JavaScript

$(function() {
  // For a right angle triangle
  // sin(θ) = Opposite / Hypotenuse
  // cos(θ) = Adjacent / Hypotenuse
  // tan(θ) = Opposite / Adjacent
  var hypotenuese = 500;
  var angle = 20 * Math.PI / 180;
  var adjacent = Math.cos(angle) * hypotenuese;
  var opposite = Math.tan(angle) *  adjacent;
  var left = 150;
  var adjacent2 = adjacent - 150;
  var opposite2 = Math.tan(angle) *  adjacent2;

  // Drawing it out to check the math...
  var outerPoints = [ {x: 0, y: opposite},  {x: adjacent, y: opposite},   {x: 0, y: 0} ];
  var innerPoints = [ {x: left, y: opposite},  {x: adjacent, y: opposite},   {x: left, y: opposite - opposite2} ];
  var svgContainer = d3.select("#svgContaintainer").append("svg")
          .attr("width", 600)
          .attr("height", 800);
  var triangleContainer = svgContainer.append("g")
          .attr("transform", "translate(" + 100 + "," + 100 + ")");
  triangleContainer.data([outerPoints])
          .append("polygon")
          .attr("points",function(d) { return d.map(function(d) {return [d.x,d.y].join(","); }).join(" ");})
          .attr("stroke","black")
          .attr("stroke-width", 2)
          .attr("fill", "none");
  triangleContainer.data([innerPoints])
          .append("polygon")
          .attr("points",function(d) { return d.map(function(d) {return [d.x,d.y].join(","); }).join(" ");})
          .attr("stroke","red")
          .attr("stroke-width", 2)
          .attr("fill", "none");
  triangleContainer.append("circle")
          .attr("r", 5)
          .attr("cx", function(d) {return left})
          .attr("cy", function(d) {return opposite - opposite2})
          .attr("fill", "red");
});