Understanding sorting bar charts in d3 - d3.js

Question

I am reading Interactive Data Visualization for the Web book, and in the Interactivity chapter where we sort the bar chart, the author writes the following code
d3.select("body").append("button")
.text("Sort") //I modified the first two lines
.on("click", function(){
svg.selectAll("rect")//the bars were added before
.sort(function(a, b){
return d3.ascending(a.value, b.value);
})
.attr("x", function(d, i){
return xScale(i);//xScale is defined earlier
})
})
What I don't understand is, when we call the sort function after selecting the bars, what happens? Do the values in the original data set is sorted in ascending order? and why do we call the x attribute again? Suppose I have the value
dataset = [{key: 0, value: 10},
{key: 1, value: 5},
{key: 2, value: 7}]
and the data join happens on the key value. How to understand the sort function in this case? Why the bars are sorted? To me, it seems that, after sorting the dataset becomes
dataset = [{key: 1, value: 5},
{key: 2, value: 7}
{key: 0, value: 10}]
and the x attribute says that the second element to move to the first position, the third element to move to the second position, and the first element to move to the third position. Is this a correct understanding?

Answer 1

If you read the documentation about d3 Selection Sort
Returns a new selection that contains a copy of each group in this
selection sorted according to the compare function. After sorting,
re-inserts elements to match the resulting order (per
selection.order).
D3 binds data to nodes on your html tree. When you use selectAll('rect') then .sort(), it generates a new selection with ordered nodes, it also change the nodes position on your html dom. See also order
The nodes are rearranged but your rectangles x position are still with the old position. So you have to update the x attributes for the sorted elements.
.attr("x", function(d, i){
return xScale(i);//xScale is defined earlier
})
Is updating the x positions folowing h
const data = [10,20,25,4,30]
const xScale = d3.scaleBand()
.domain(d3.range(data.length))
.rangeRound([0, 500])
.paddingInner(0.05);
const yScale = d3.scaleLinear()
.domain([0, d3.max(data)])
.range([0, 200]);
const svg = d3.select("body").append("svg")
.attr("width", "500px")
.attr("height","200px")
.style("width", "100%")
.style("height", "auto");
// normal
svg.append("g")
.attr("class", "x-axis")
.attr("transform", "translate(0,20)")
svg.selectAll('.bar')
.data(data)
.enter()
.append('rect')
.attr("x", (d, i) => xScale(i))
.attr("y", (d, i) => 200 - yScale(d))
.attr("width", xScale.bandwidth())
.attr("height", d=> yScale(d));
setTimeout(() => {
console.log('Data on nodes before D3 sort')
console.log([...document.querySelectorAll('rect')].map(e => e.__data__))
svg.selectAll('rect')
.sort((a, b) => d3.ascending(a, b))
.transition()
.duration(500)
.attr("x", (d, i)=> xScale(i));
console.log('Data on nodes after D3 sort')
console.log([...document.querySelectorAll('rect')].map(e => e.__data__))
}, 2500)
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

Answer 2

In your code selection.sort() reorders the elements, no position is changed by that. Just after the x attribute is reset based on the scale, the visualization is changed. Note that in your example the scale is called with i being the argument. So after the order of the elements change, elements will have a different index.
Some more aboout the topic:
selection.sort()
does reorder the selection elements - not the data. See also: https://github.com/d3/d3-selection#selection_sort.
Reordering elements in the DOM does not change any position of the elements (just overlaps are affected based on the order).
Sorting the elements can be useful when you transition your elements (Mike Bostocks Sortable Bar Chart example):
var margin = {top: 20, right: 20, bottom: 30, left: 40},
width = 400 - margin.left - margin.right,
height = 200 - margin.top - margin.bottom;
var formatPercent = d3.format(".0%");
var x = d3.scale.ordinal()
.rangeRoundBands([0, width], .1, 1);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.tickFormat(formatPercent);
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.csv("https://gist.githubusercontent.com/mbostock/81aa27912ad9b1ed577016797a780b2c/raw/3a807eb0cbb0f5904053ac2f9edf765e2f87a2f5/alphabet.csv", function(error, data) {
data.forEach(function(d) {
d.frequency = +d.frequency;
});
x.domain(data.map(function(d) { return d.letter; }));
y.domain([0, d3.max(data, function(d) { return d.frequency; })]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Frequency");
svg.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) { return x(d.letter); })
.attr("width", x.rangeBand())
.attr("y", function(d) { return y(d.frequency); })
.attr("height", function(d) { return height - y(d.frequency); });
d3.select("input").on("change", change);
var sortTimeout = setTimeout(function() {
d3.select("input").property("checked", true).each(change);
}, 2000);
function change() {
clearTimeout(sortTimeout);
// Copy-on-write since tweens are evaluated after a delay.
var x0 = x.domain(data.sort(this.checked
? function(a, b) { return b.frequency - a.frequency; }
: function(a, b) { return d3.ascending(a.letter, b.letter); })
.map(function(d) { return d.letter; }))
.copy();
svg.selectAll(".bar")
.sort(function(a, b) { return x0(a.letter) - x0(b.letter); });
var transition = svg.transition().duration(750),
delay = function(d, i) { return i * 50; };
transition.selectAll(".bar")
.delay(delay)
.attr("x", function(d) { return x0(d.letter); });
transition.select(".x.axis")
.call(xAxis)
.selectAll("g")
.delay(delay);
}
});
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
position: relative;
width: 400px;
}
.axis text {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.bar {
fill: steelblue;
fill-opacity: .9;
}
.x.axis path {
display: none;
}
label {
position: absolute;
top: 10px;
right: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<label><input type="checkbox"> Sort values</label>
If you click on the sort checkbox, three things happen (see function change):
1) compute the new positions (in this case, the domain of the scale is changed here):
var x0 = x.domain(data.sort(this.checked
? function(a, b) { return b.frequency - a.frequency; }
: function(a, b) { return d3.ascending(a.letter, b.letter); })
.map(function(d) { return d.letter; }))
.copy();
2) resort the selection - just changing the order of the elements, no position has changed!
svg.selectAll(".bar")
.sort(function(a, b) { return x0(a.letter) - x0(b.letter); });
3) transitioning the selection to the new positions:
var transition = svg.transition().duration(750),
delay = function(d, i) { return i * 50; };
transition.selectAll(".bar")
.delay(delay)
.attr("x", function(d) { return x0(d.letter); });
transition.select(".x.axis")
.call(xAxis)
.selectAll("g")
.delay(delay);
The benefit of step 2 (sorting the elements) is that the transition starts with the element which will be placed to the very left. The next transitioning element is the one which will end up next to it, ...and so forth.
See yourself when you run the code snippet und click on sort values.
To see how it looks like without this effect, see the following where I just commented out step 2:
var margin = {top: 20, right: 20, bottom: 30, left: 40},
width = 400 - margin.left - margin.right,
height = 200 - margin.top - margin.bottom;
var formatPercent = d3.format(".0%");
var x = d3.scale.ordinal()
.rangeRoundBands([0, width], .1, 1);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.tickFormat(formatPercent);
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.csv("https://gist.githubusercontent.com/mbostock/81aa27912ad9b1ed577016797a780b2c/raw/3a807eb0cbb0f5904053ac2f9edf765e2f87a2f5/alphabet.csv", function(error, data) {
data.forEach(function(d) {
d.frequency = +d.frequency;
});
x.domain(data.map(function(d) { return d.letter; }));
y.domain([0, d3.max(data, function(d) { return d.frequency; })]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Frequency");
svg.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) { return x(d.letter); })
.attr("width", x.rangeBand())
.attr("y", function(d) { return y(d.frequency); })
.attr("height", function(d) { return height - y(d.frequency); });
d3.select("input").on("change", change);
var sortTimeout = setTimeout(function() {
d3.select("input").property("checked", true).each(change);
}, 2000);
function change() {
clearTimeout(sortTimeout);
// Copy-on-write since tweens are evaluated after a delay.
var x0 = x.domain(data.sort(this.checked
? function(a, b) { return b.frequency - a.frequency; }
: function(a, b) { return d3.ascending(a.letter, b.letter); })
.map(function(d) { return d.letter; }))
.copy();
// svg.selectAll(".bar")
// .sort(function(a, b) { return x0(a.letter) - x0(b.letter); });
var transition = svg.transition().duration(750),
delay = function(d, i) { return i * 50; };
transition.selectAll(".bar")
.delay(delay)
.attr("x", function(d) { return x0(d.letter); });
transition.select(".x.axis")
.call(xAxis)
.selectAll("g")
.delay(delay);
}
});
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
position: relative;
width: 400px;
}
.axis text {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.bar {
fill: steelblue;
fill-opacity: .9;
}
.x.axis path {
display: none;
}
label {
position: absolute;
top: 10px;
right: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<label><input type="checkbox"> Sort values</label>