In many cases, it is desirable to sort your visual elements according to the data they represent so that you can highlight the significance of different elements visually. In this recipe, we will explore how this can be achieved in D3.
Open your local copy of the following file in your web browser:
https://github.com/NickQiZhu/d3-cookbook-v2/blob/master/src/chapter3/data-sort.html .
Let's take a look at how data-driven sorting and further manipulation can be performed using D3. In this example, we will sort the bar chart we created in the previous recipe based on either expense (width) or category, using a user's input:
<script type="text/javascript"> var data = [ // <-A {expense: 10, category: "Retail"}, {expense: 15, category: "Gas"}, {expense: 30, category: "Retail"}, {expense: 50, category: "Dining"}, {expense: 80, category: "Gas"}, {expense...