Data structures and control flow

Code, Recording

1. Javascript is a programming language that can be run within HTML pages. D3 is a library within this language which will allow us to programmatically manipulating the tags appearing on any page (both adding / removing them and changing their attributes). This is the topic of the next set of notes — for now, let’s study the basic data structures and control flow patterns in this language.

2. We can store numbers and strings in either arrays or objects. We use let to declare a new variable. To look up individual items within an array, we can use their index. To look up objects within an object, we can use a key. For example, here are two arrays,

    let x = [1, 2, 3, 4]
    let y = ["a", "b", "c"]
   
    x[3]
    y[0]
   

   and here are two objects,

    let lecture = {class: "679", session: "javascript"}
    let everest = {longitude: 86.922623, latitude: 27.986065, height: 29032}
    lecture["class"]
    everest["latitude"]
   

3. In fact, both arrays and objects can themselves store either arrays or objects. Here are a few examples,

    // an array of objects
    let mountains = [
      {longitude: 86.922623, latitude: 27.986065, height: 29032},
      {longitude: -78.816940, latitude: -1.469302, height: 20549},
      {longitude: 89.404169, latitude: 43.075322, height: 960}
    ]
   
    // an object of arrays
    let forecast = {
      temp_max: [22, 24, 28, 21],
      temp_min: [15, 14, 21, 24]
    }
   

4. It’s possible to combine arrays using concat and objects using “object spread.”

    [2, 3, 5].concat([7, 11, 13])
    {...lecture, ...everest}
    [...forecast["temp_min"], ...forecast["temp_min"]] // works on arrays too
   

   We can add an individual element to an array using push and can insert a key / value pair in an object directly,

    x.push(5)
    lecture["week"] = 4
   

5. Control flow refers to commands that tell us how to sequentially process our data structures. Essentially all the control flow patterns that exist in R have analogs in javascript. The only difference is the syntax that is used. For example, here is how to write for and if statements.

    // looping over array
    for (let i = 0; i < mountains.length; i++) {
      let cur_height = mountains[i]["height"]
      if (cur_height > 20000) {
        console.log(cur_height + " feet is high")
      } else {
        console.log(cur_height + " feet is not high")
      }
    }
   
    // looping over object
    for (let prop in lecture) {
      console.log(prop, lecture[prop])
    }
   

6. A special way to iterate over arrays is to use .map(). It’s often used to create a new array from an existing one, without having to type a whole for loop.

    x.map(d => d ** 2)
   

   This is the javascript equivalent of map_dbl(x, ~ . ^ 2) in R (using the purrr library).

7. D3 has few helpful functions for creating and manipulating arrays. For example, we can create sequential and random arrays,

    // create a sequence
    let ix = d3.range(25)
    console.log(ix)
   
    // generate random normals
    let generator = d3.randomNormal()
    let z = ix.map(generator)
    console.log(z)
   

   and we can compute some basic statistics,

    d3.mean(z)
    d3.max(z)
   

8. Notice that these d3 functions are not available when working in the console for default webpages. We need to load libraries for them in the header of the HTML page within which we want to run the script. See the loading structure in d3arrays.html.