Zoom interaction and sorting the data in D3.js

Defining zoom interaction:

In order to make the axes of the bar charts zoomable and interactive, we need to revisit the definition of axes as well as defining a new functionality called zoom:

Furthermore, we need to define the zoom function and change bar plot code:

Sort the data:

Here we sorted the in the descending order by using "sortedData = data.slice().sort((a, b) => d3.descending(a.Cases, b.Cases))" command:

The final interactive zoomable bar char based on sorted data is shown here (https://observablehq.com/@mehrdadyousefi/making-zoomable-and-sorted-bar-chart):