Map obj array

forked from swaggernation77's block: Map obj array

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
    var svg = d3.select("body").append("svg")
      .attr("width", 960)
      .attr("height", 500)

/* svg.append("text")
      .text("Edit the code below to change me!")
      .attr("y", 200)
      .attr("x", 120)
      .attr("font-size", 36)
      .attr("font-family", "monospace")*/
    
    //Write a JavaScript program that uses D3 to draw the flag of Benin as an SVG image. An example of the flag is provided from the Wikipedia entry on this flag (Figure 1). Your flag should be 3 : 2 (width : height), have a width of 150, and use the following color codes: #E8112D, #FCD116, and #008751 as appropriate. The green rectangle should be 40% of the width of the entire flag. Your code must have the following features:an array to hold data about each rectangle in the flag a data join (also known as a data binding)
    
    var flag_data = [{"fill": "#FCD116",  "x": 263, "y": 100, "width": "90", "height":50},
                     {"fill": "#E8112D", "x": 263, "y": 150, "width":"90","height":50},
                     {"fill": "#008751",   "x": 202, "y": 100, "width": "60","height":100},
                    ];
    
    console.log(flag_data);

svg.selectAll("rect")
    	.data(flag_data)
    	.enter()
    	.append("rect")
    	.attr("y", function (d) { return d.y; })
    	.attr("x", function(d) { return d.x;})
			.attr("width", function(d) {return d.width;})
    	.attr("height", function(d){return d.height})
    	.attr("stroke-width", 1)
    	.attr("stroke", "black")
    	.attr("fill", function (d) { return d.fill; });

</script>
</body>

https://d3js.org/d3.v4.min.js