D3 Examples - JS array

xxxxxxxxxx
 
<!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:10;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("rect")
        .attr("width", 50)
        .attr("height", 100)
        .attr("fill", "blue")
        .attr("x", 200)
      .attr("y", 200)
    svg.append("rect")
        .attr("width", 50)
        .attr("height", 100)
        .attr("fill", "white")
        .attr("x", 250)
      .attr("y", 200)
    svg.append("rect")
        .attr("width", 50)
        .attr("height", 100)
        .attr("fill", "red")
        .attr("x", 300)
      .attr("y", 200)
    */
​
    var frenchFlag = [{"x": 200,  "fill":"blue"}, 
                      {"x": 250, "fill":"white"}, 
                      {"x": 300, "fill":"red","y":200}];
    console.log(frenchFlag);
    //selects existing rectangle svgs
    svg.selectAll("rect")
        //data-join connects the data to the rectangles
      .data(frenchFlag)
        //checks the dataset to keep track of what has to happen in the following                   code
      .enter()
        // kind of like a loop, checks to see the objects in the in the dataset and                  sees that there are no rectangles to hold those values so it will run the                  following code three times in order to give those objects a home
        .append("rect")
        // each rectangle made will be at the y value of 100
        if(function(d.y)== )
      .attr("y", 100)
        // each rectangle will have a vlaue of x depending on what is checked in the                    dataset
        .attr("x", function(d) {return d.x;})
        // each rectangle has the same width and height
        .attr("width", 50)
        .attr("height", 100)
        // each rectangle has a fill depending on the dataset
        .attr("fill", function(d) {return d.fill;})
    
  </script>
</body>
​
    