How to sort transitioning bar charts?

Question

I have a project where i am trying to use transitions to display data for years 1800-1805

I have created a bar chart and could get the transition, but the problem he

Answer 1

Your problem is just the key function, which is fundamental for achieving object constancy.

Right now you have this:

var rects = g.selectAll("rect").data(data, function(d){
    return d;
});

Which returns d, that is, the whole datum. Given your data structure, the datum is an object.

However, the API is clear about the value returned by the key function:

If a key function is not specified, then the first datum in data is assigned to the first selected element, the second datum to the second selected element, and so on. A key function may be specified to control which datum is assigned to which element, replacing the default join-by-index, by computing a string identifier for each datum and element. (emphasis mine)

Therefore, change the key function to:

var rects = g.selectAll("rect").data(data, function(d){
    return d.country;
    //string---^
});