D3 Arrays
FREE     Duration: 11:06
Part of Course: Introductory D3 Course
 

Takeaways:

  • For nearly everything you do with D3, the data will be stored in arrays
  • JavaScript Array Mutator Methods modify the original data array
  • Mutator Methods can lead to data being altered, lost, or changed if you aren't careful
  • JavaScript Array Accessor Methods return a part or representation of the array
  • Accessor methods do not change the original data array
  • D3 has basic array utilities built on top of JavaScript's array utilities
  • Some of these basic array utilities include d3.min, d3.max, d3.extent, d3.sum, d3.mean, and d3.median.

Transcript:

D3 Arrays

In D3 Data = Arrays

When using D3—and doing data visualization in general — you will tend to do a lot of array manipulation.

D3's canonical representation of data is an array.

D3 uses Arrays and Associative Arrays.

We focus on Arrays in this video.

Later we will look at Associative Arrays.



JavaScript Arrays

First, let's take a look at JavaScript Arrays.

Because D3 sits on top of JavaScript, we can use all of the power available in JavaScript within our D3 work.

An array is an enumerated list of variables.

It allows us to replace

x0 = 0;
x1 = 1;
x2 = 2;
x3 = 3;
x4 = 4;
x5 = 5;

with

x[0] = 0;
x[1] = 1;
x[2] = 2;
x[3] = 3;
x[4] = 4;
x[5] = 5;

Since an array is an enumerated list, it means that it retains it's order.

Additionally, arrays can consist of any kind of variable you want

var myArray = ["1", 2, function() {return 3;} ];

In this case the array consists of a string, a number and a function.

We can even have an array of arrays.

This gives us multi-dimensional arrays.

Which is great for matrix math if/when we run into it.

var matrixArray = [ [1,2] , [3,4] ];



JavaScript Array Mutator Methods

Basic D3 Array Utilities

  • array.reverse
  • array.shift
  • array.sort
  • array.splice
  • array.unshift

Next, let's take a look at a few Basic JavaScript Array Mutator Methods

A Mutator Method means that it modifies the array.

Lets take a look at an array in the JavaScript Console:

1 - We use the Initial.html file since it already has D3 loaded

2 - Open the Chrome Developer Tools and get the JavaScript Console

3 - [Later - have the video zoom in for the full time]

4 - Define the two arrays we will use

var easyArray = [3, 5, 8, 13, 8, 5, 3, -2, 0, 5];
easyArray;

5 - [Read out - array.reverse: reverses the order of the elements in the array]

6 - easyArray.reverse();

7 - easyArray;

8 - clear();

9 - Define the array again

var easyArray = [3, 5, 8, 13, 8, 5, 3, -2, 0, 5];
easyArray;

10 - [Read out - array.shift: removes the first element from the array]

11 - easyArray.shift();

12 - easyArray;

13 - clear();

14 - Define the array again

var easyArray = [3, 5, 8, 13, 8, 5, 3, -2, 0, 5];
easyArray;

15 - [Read out - array.sort: sorts the elements of the array]

16 - easyArray.sort();

17 - easyArray;

18 - clear();

19 - Define the array again

var easyArray = [3, 5, 8, 13, 8, 5, 3, -2, 0, 5];
easyArray;

20 - [Read out - array.splice: add or remove elements from the array]

21 - easyArray.splice(1,2);

22 - easyArray;

23 - easyArray.splice(1,0,"Banana");

24 - easyArray;

25 - easyArray.splice(3,2,"Sundae");

26 - easyArray;

25 - clear();

26 - Redefine the array

var easyArray = [3, 5, 8, 13, 8, 5, 3, -2, 0, 5];
easyArray;

27 - [Read out - array.unshift: add 1 or more elements to the front of the array]

28 - easyArray.unshift(10, 11, 12);

29 - easyArray;

30 - easyArray.length

31 - clear();

And those are the basic JavaScript Array Mutator methods.

The key word to pay attention to is * mutator *

These methods change the array in place so there is the potential to alter, lose or change the data if you aren't careful.



JavaScript Array Accessor Methods

Basic D3 Array Utilities

  • array.concat
  • array.join
  • array.slice
  • array.indexOf
  • array.lastIndexOf

Next, let's take a look at a few Basic JavaScript Array Accessor Methods

An Accessor Method returns a part or representation of the array

Lets take a look at two arrays in the JavaScript Console:

1 - We continue to use the Chrome Developer Tools we opened earlier

2 - [Later - have the video zoom in for the full time]

3 - Define the two arrays we will use

var easyArray = [3, 5, 8, 13, 8, 5, 3, -2, 0, 5];
var tinyArray = [4, 5];
easyArray;
tinyArray;

4 - [Read out - array.concat: join the array with other arrays or values]

5 - easyArray.concat(tinyArray);

6 - easyArray;

7 - tinyArray;

8 - clear();

9 - As these methods are not mutator methods, the arrays have not been modified.

easyArray;

10 - [Read out - array.join: join all the array elements into a string]

11 - easyArray.join();

12 - easyArray;

13 - clear();

14 - Again, the arrays haven't been modified.

easyArray;

15 - [Read out - array.slice: extract a section of the array]
extracts up to, but not included the end.

16 - easyArray.slice(1,4);
easyArray;

17 - easyArray.slice(1);
easyArray;

18 - clear();

19 - Again, the arrays haven't been modified.

easyArray;

20 - [Read out - array.indexOf: find the 1st occurrence of a value within an array]

21 - easyArray.indexOf(5);

23 - clear();

24 - Again, the arrays haven't been modified.

easyArray;

25 - [Read out - array.lastIndexOf: find the last occurrence of a value within an array]

26 - easyArray.lastIndexOf(5);
easyArray.length

27 - clear();

28 - [Read out - PAY ATTENTION TO THE Letters that are CAPITALIZED I and O]

And those are the basic JavaScript Array Accessor methods.



Basic D3 Array Utilities

Basic D3 Array Utilities

  • d3.min
  • d3.max
  • d3.extent
  • d3.sum
  • d3.mean
  • d3.median

Lastly, let's take a look at a few Basic D3 Array Utilities

These utilities come in very hand later when we are working with scales and axes.

Lets look at what D3 provides for us to manipulate arrays in the JavaScript Console:

1 - We continue to use the Chrome Developer Tools we opened earlier

2 - [Later - have the video zoom in for the full time]

3 - Define the two arrays we will use

var easyArray = [3, 5, 8, 13, 8, 5, 3, -2, 0, 5];
easyArray;

4 - [Read out - d3.min: returns the minimum value using natural order]

5 - d3.min(easyArray);

6 - easyArray;

7 - clear();

9 - As these D3 methods are not mutator methods, the arrays have not been modified.

10 - easyArray;

11 - [Read out - d3.max: returns the maximum value using natural order]

12 - d3.max(easyArray);

13 - easyArray;

14 - clear();

15 - As these D3 methods are not mutator methods, the arrays have not been modified.

16 - easyArray;

17 - [Read out - d3.extent: returns an array containing the minimum and maximum values using natural order]

18 - d3.extent(easyArray);
d3.extent(easyArray)[0];
d3.extent(easyArray)[1];

19 - easyArray;

20 - clear();

21 - As these D3 methods are not mutator methods, the arrays have not been modified.

22 - easyArray;

23 - [Read out - d3.sum: returns the sum of the array]

24 - d3.sum(easyArray);

25 - easyArray;

26 - clear();

27 - As these D3 methods are not mutator methods, the arrays have not been modified.

28 - easyArray;

29 - [Read out - d3.mean: returns the mean of the array]

30 - d3.mean(easyArray);

31 - easyArray;
d3.sum(easyArray)/easyArray.length

32 - clear();

33 - As these D3 methods are not mutator methods, the arrays have not been modified.

34 - easyArray;

35 - [Read out - d3.median: returns the median of the array]

36 - d3.median(easyArray);

37 - easyArray;

38 - clear();

And those are the most basic D3 Array Utilities.

<< Back To D3 Screencast and Written Tutorials Index