Flag of Sweden

Draw the national flag of Sweden using javascript’s D3 library. The flag has only two colors: #005b99 and #fcd116. The dimensions of the Swedish flag are 5:2:9 horizontally and 4:2:4 vertically.

This is worth 20 points

forked from scresawn's block: Flag of Sweden

<!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>
//height = 500
//width = 500
    
    var svg = d3.select("body").append("svg")
    //background TL
    svg.append("rect")
      .attr({x: 10, y: 0, width: 300, height: 200})
      .style({ fill: "#005b99"})
    //horizontal stripe
    svg.append("rect")
      .attr({x: 10, y: 200, width: 860, height: 100})
      .style({ fill: "#fcd116"})
    //background BL
    svg.append("rect")
      .attr({x: 10, y: 300, width: 300, height: 200})
      .style({ fill: "#005b99"})
    //vertical stripe-----------------------------
    svg.append("rect")
      .attr({x: 300, y: 0, width: 120, height: 500})
      .style({ fill: "#fcd116"})
    //background TR
    svg.append("rect")
      .attr({x: 420, y: 0, width: 450, height: 200})
      .style({ fill: "#005b99"})
    //background BR
    svg.append("rect")
      .attr({x: 420, y: 300, width: 450, height: 200})
      .style({ fill: "#005b99"})

console.log("you are now rocking with d3", d3);
  </script>
</body>

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