Data Visualization with D3 4.x Cookbook - Second Edition

Sorting with data

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.

Getting ready

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 .

How to do it...

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"}, ...