Exploring frequently used methods of d3-array
Last modified:
In this post, I will introduce you to methods from d3-array that I often use for data visualization.
d3.min, d3.max, and d3.extent
d3.min returns the minimum of an array using the natural order. Unlike Math.min, d3.min can handle missing values.
Let’s look at an example:
- mathMin: NaN
- d3Min: 2
Likewise, d3.max returns the maximum. But what happens when the array for which we want to compute the maximum contains objects? We can use an accessor function to retrieve a specific object property and transform it. In the following example, the accessor
extracts the date property and converts it into a JavaScript Date, which is used for comparison. This returns the most recent date (maximum). However, what we need is the object with the most recent date, not just the most recent date. We can use d3.maxIndex to retrieve the index of the object with the most recent date.
Let’s look at an example:
- maxDate: Fri Jun 24 2022 00:00:00 GMT+0000 (Coordinated Universal Time)
- maxIndex: 3
To create an axis for numeric values with D3, you need to know the extent of the data along that axis. Extent means the minimum and maximum values. d3.extent returns an array with these values. It works not only with numeric values but with any values that have a natural sort order.
Let’s look at two examples:
- scoreExtent: [8,99]
- nameExtent: ["Amandi","Xenia"]
d3.range
d3.range returns an array of evenly spaced numbers. It has three arguments: start, stop, and step. The only required argument is stop. start defaults to 0, and step defaults to 1. start is inclusive, stop is exclusive.
Let’s look at these examples:
- stopRange: [0,1,2,3,4,5,6,7,8,9]
- startAndStopRange: [-10,-9,-8,-7,-6,-5,-4,-3,-2,-1]
- floatingPointRange: [0,0.2,0.4,0.6000000000000001,0.8]
- fixedPointRange: ["0.0","0.2","0.4","0.6","0.8"]
- infiniteLoopRange: []
As the floatingPointRange example shows, with d3.range you can run into pitfalls of binary floating-point math.
You can fix this issue with Number.toFixed:
Finally, if you try to create a range that would cause an infinite loop, like the infiniteLoopRange, d3.range returns an empty array.
d3.ticks
d3.ticks generates an array of nicely rounded numbers inside an interval [start, stop]. You have to pass in three arguments:
count is the number of ticks you are aiming for. However, there is no guarantee that you will get
this number. As the example below shows, you may get more or fewer ticks. The only thing that
matters to d3.ticks is that the ticks are nicely rounded and inside [start, stop]. start and stop can be part of the ticks.
Let’s look at a few examples:
- elevenTicks: [0,1,2,3,4,5,6,7,8,9,10] (11 ticks)
- thirteenTicks: [0,1,2,3,4,5,6,7,8,9,10] (11 ticks)
- seventeenTicks: [0,0.5,1,1.5,2,2.5,3,3.5,4,4.5,5,5.5,6,6.5,7,7.5,8,8.5,9,9.5,10] (21 ticks)
JavaScript Array methods
The d3-array documentation points out that you should master JavaScript’s built-in Array methods. d3-array complements them but does not replace them. You cannot do data visualization with JavaScript without knowing the built-in Array methods like the back of your hand.