In this tutorial we’re going to cover some basic stuff in D3: ranges, min and max and merge. These are all pretty straightforward, but nevertheless very useful to have in your D3 toolbox!

### d3.range()

Ranges are actually a pretty convenient way to generate a list of numbers. It is modeled after the built-in range method from Python. The full signature of the function looks like this:

d3.range(start, stop, step)

But the `stop`

and `step`

parameters are optional. So if you provide just the `start`

parameter, you would do something like this:

d3.range(5);

The result of this function call is an array of numbers, starting with 0, and the last number in the array is 4, so 5 is not included:

[0, 1, 2, 3, 4]

Now, if you provide a second argument, it will be interpreted as the `stop`

parameter. Note that the order of the parameters is: `start`

first, and then the `stop`

parameter. So, the result of this:

d3.range(3, 5);

is this:

[3, 4]

Note that again 5 is exclusive. At the moment it is not possible to create descending arrays directly with `d3.range()`

, so if the `start`

value is larger than the `stop`

value, you get an empty array. In order to create a descending array of numbers, you can just call the standard `reverse()`

Javascript function. So, to create the following result:

[4, 3, 2, 1]

you would write this:

d3.range(1, 5).reverse();

The last parameter you can use is the `step`

parameter. If you don’t provide a `step`

argument, it will default to 1. But if you do, then the result of this:

d3.range(5, 10, 2);

is this:

[5, 7, 9]

### d3.min() and d3.max()

So, now you know how to generate a list of numbers in an easy way. Next up is the usage of `min`

and `max`

. It is really straightforward: to find the max number of an array of numbers, you use:

d3.max([4, 2, 6, 3, 8, 2]);

which will return 8 of course. Likewise, if you want to find the min number of an array, you use:

d3.min([4, 2, 6, 3, 8, 2]);

which will return 2 in this case.

### d3.merge()

The `d3.merge()`

can be used to merge an array of arrays so that it becomes one array. It’ll become clear when you see an example. If you have the following 2-dimensional array:

[[1, 2, 3], [4, 5, 6]]

you can turn this into a 1-dimensional array by calling the `d3.merge()`

function:

d3.merge([[1, 2, 3], [4, 5, 6]]);

This will result in the following 1-dimensional array:

[1, 2, 3, 4, 5, 6]

The `d3.merge()`

function will only merge one level. For example, the following 3-dimensional array will * not* result in a single 1-dimensional array:

d3.merge([[[1, 2], [3]], [[4, 5], [6]]]);

It will however, result in a 2-dimensional array:

[[1, 2], [3], [4, 5], [6]]