Live Coding D3.js

Don't know Javascript? No problem.

This two-part introduction to d3.js is intended for beginners, even those with limited exposure to JavaScript -- the language used by web browsers. Regardless of your background, I put together a few examples to get everyone (re)oriented to coding in the browser.

Javascript Variables

JavaScript is a type of object-oriented programming; an approach that assigns properties and functionality to objects in the browser. An object has both a state (data) and behavior (code), and it can one of many data types. Here are the ones that matter for d3.js:

• Arrays are always objects

var colors = ['rgb(229,245,249)','rgb(153,216,201)','rgb(44,162,95)'];

var person = {firstName:"John", lastName:"Doe", age:46};

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

• Objects of objects are objects (<--pretty existential)

var person = {firstName:"John", lastName:"Doe", age:46};

var age = person.age;

• Functions are always objects because they have both properties and methods

function double(a,b){
  // arguments.length property returns the number of arguments received 
  // when the function was invoked
  return input * arguments.length
}

var double = function(input){
  return input * 2
}

Notice that you can declare functions using two different syntaxes. There are some technical differences in the syntaxes, but these differences will not affect the performance of your d3 code unless you are a serious programmer.

Functions in JavaScript can be executed by the web browser as well as passed as objects to be used later. To execute a function, all you need to do is place "()" behind the function variable's name:

var myFunction =function() {

    // code here probably does something important

}

// execute function
myFunction();

However, you can also pass a function along to another function to run once it completes its originally assigned task. This process is called a callback function.

var myFunction =function() {

    // Code here probably does something important after you do something first. 

}

var DoSomethingThenCallback =function(number, callback) {

    // Do something and then execute the input function once this is 100% finished.

}

// run function DoSomethingThenCallback and pass myFunction as callback;
DoSomethingThenCallback(10, myFunction);

Functions are often passed as objects in d3.js. For instance, you will learn that, for selection operators (ex., defining a circle radius), you can specify a value either as a constant or a function. If you specify a function, it will be invoked for each element in your selection (in order), being passed the current datum d and the current index i, with the this context as the current DOM element. The function's return value is then used to set each element's attribute.

var circles = SvgWithData.append("circle")
                  .attr("r", function(d,i){ return RadiusSize * i}); // <-- callback example

Variable Declarations

In each of the previous examples, we designated variables using var. Like other programming languages, Javascript sets a limit (e.g., scope) to the set of variables, objects, and functions you have access to while the code is running. Local JavaScript variables are declared within functions, while global variables are declared outside of functions. Global variables can be accessed and updated throughout the body of your script (including within functions), while local variables can only be accessed within the function in which they are declared.

Local Example:

// two backslashes starts a comment
// code here can not use carName

function myFunction() {
    var carName = "Volvo";
    // code here can use carName

}

Global Example:

var carName = " Volvo";

// code here can use carName

function myFunction() {

    // code here can use  carName 

}