d3 Transition for Bar Graph is Reversed

Question

I am new to coding in general but javascript is a little but more challenging to me than most. I am currently building a d3.js Bar Chart and wanted a transition on load for the bars. When I put in the transition code it always does it in reverse and all tutorials online are not helpful for the type of data I am using of too complicated for me to understand. Here is the code I made so far: http://pastebin.com/dW1x81WT

Please help me with how to make it transition properly. I am very new to coding and d3 graphs expecially.

Answer 1

Is this what you want? https://jsfiddle.net/gerardofurtado/4un5zgsa/

A D3 transition goes from the original value to the final value. So, you have to set the bars width initially to 0:

.attr("width", 0)

And then to the final value after, the transition() :

.attr("width", function(d) { return widthScale(d); })