Accepted answer

You need to calculate the new value for y in the array every time draw() is being called.

Also, I just restructured the update pattern in draw() and it updates the y attribute of the second rect when the window is resized.

See code below and a plunker here:

Please mark the answer as correct when you are done!

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

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

    var _data = [];

    draw();"resize", draw);

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

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


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


      .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?

Related Query

More Query from same tag