[Solved]-D3 transition not working as intended-d3.js

Well, I just had a chat with Mike Bostock and he pointed out what the issue is. In the full code, there is also a popupclose event:

map.on('popupclose', function(e) {
    rects
    .attr("width", 0);
});

This code is only resetting width to 0 but Y needs to be reset to height as well. So, this code is fixing the issue:

map.on('popupclose', function(e) {
    rects
    .attr("width", 0)
    .attr("y", function(d) {return height; });
});

As an added bonus, Mike gave me very insightful feedback. He doesn't recommend using transition the way I have here. he says it introduces distraction and delay and its not informative. It would be best to keep transitions for when switching between datasets (Object constancy). After review, I have to agree so I will not pursue this animation as an aesthetic property of my visualizations.