Bahamas Flag

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { width:100%; height: 100% }
  </style>
</head>

<body>
  <script>
    var canvas = d3.select("body")
    								.append("svg")
    								.attr("x", 1000)
    								.attr("y", 1000)
    								.append("g");
    
    var blue =  canvas.append("rect")
    									.attr("x", 50)
    									.attr("y", 50)
    									.attr("height", 300)
    									.attr("width", 600)
    									.style("fill", "#33cccc")
    
    var yellowstripe =  canvas.append("rect")
    													.attr("x", 50)
    													.attr("y", 150)
    													.attr("height", 100)
    													.attr("width", 600)
    													.style("fill", "yellow")
    
    
    
    
    
    
    var blacktri = [{"x": 50.0, "y": 50.0},
                    {"x": 300.0, "y": 150.0},
                    {"x": 50.0, "y": 300.0}];
    
    
   
   											
                   
    var triangle = canvas.append("polygon")
            .attr("points", "50, 50  300, 200  50, 350")
            .style("stroke-width", 2)
            .style("stroke", "black")
            .style("fill", "black");
     											
        	
    										
    											
    											
    
    
    
    
  </script>
</body>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js