Untitled

<!DOCTYPE html>
<html>

<head>
  <script data-require="d3@3.5.17" data-semver="3.5.17" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script>
  <link rel="stylesheet" href="style.css" />

</head>

<body>
  <script src="script.js"></script>
</body>
</html>

var width = window.innerWidth;
    var height = window.innerHeight;

    var svg = d3.select('body')
      .append("svg")
      .attr("height", height)
      .attr("width", width);

    var _data = [];

    draw();

    d3.select(window).on("resize", draw);

    function draw() {
      calcData();
      width = window.innerWidth;
      svg.attr("width", width);

      //add rects
      var rects = svg.selectAll('rect')
        .data(_data);

      console.log(_data[1].y);
      console.log(rects);

      var xScale = d3.scale.ordinal()
        .domain(_data)
        .rangeBands([10, width - 10]);

    rects.exit().remove();

    rects.enter()
       .append('rect')
      .attr("fill", function(d, i) {
        return d.color;
      });

    //update logic
      rects.attr("x", function(d) {
          return xScale(d);
        })
        .attr("y", function(d) {
          console.log(d.color, d.y);
          return d.y;
        })
        .attr("width",  xScale.rangeBand() * 0.95)
        .attr("height", 20);

    }

    function calcData(){
      _data = [
        {
          "color": "yellow",
          "y": 0
        },
        {
          "color": "green",
          "y": window.innerHeight - window.innerHeight / 5 //<- this data especially the hight value does not change .data(_data) on widow resize is there a way to change the data entered or at least the "y" value on window resize?
        }
      ];
    }

/* Styles go here */