fundamental of D3： Bind Data and element Selection

1. D3 facilitates generation and manipulation of web documents with data. It does this by

1) Loading Data in to the browser's memory

2) Binding data to elements within the document, creating new elements as needed. 

3) Transforming those elements by interpreting each element's bound datum and setting its visual properties accordingly (MAPPING)

4) Transitioning elements between states in response to user input.

Chapter 5: Data

1.  d3, data is text-based data

2.  Data must be attached to elements within the page. So first, we have to generate page elements

Generating page elements

 d3.select("body")

.append("p")

.text("Data science is very funny");

this will generate a new element named p; you can dynamically generate tens or thousands of elements, each one corresponding to a piece of your dataset.

Chain methods

 d3                    // Reference the D3 object, so We can access its methods.

.select("body")   // return a reference to the first element in the DOM that matches (selectAll )

.append("p")      // create whatever new element you specify and append it to the end( but just inside) of whatever selection it's acting on. Finally

it will return a reference to the new element it just created  

.text("Data science is very funny") // it will takes a string and inserts it between the opening and closing tags of the current selection

;  // this indicates the end of this line of code.

Hand -off 

not all D3 methods will return a reference to a element 

Binding Data

  Data in, visual properties out!

method: selection.data()

Load Data

d3.csv("food.csv",function(data) {

// do something here 

});

d3.csv() has 2 arguments, a string representing the path of the csv file to load in

function is called callback function. the callback function is called only after the csv file has been loaded into                         memory.

caution: 1.  d3.csv() or d3.json() is an asynchronous  method, meaning that the rest of your code will executed even while Javascript is simultaneously waiting for the file to finish loading into the browser.

2. handle error, d3.csv("food.csv",function(error,data){

                                 if (error){

} else{

} 

                                      });

Make your selection

var dataset = [1, 2, 3, 4, 5]

e.g.  d3.select("body")

.selectAll("p")      // p not exist yet, so this return an empty selection

.data(dataset)      // Counts and parses our data values. There are 5 values in the dataset. So everything after this point is executed 5 times.

.enter()                  // Create new, data-bound elements, must use enter() 

                                 first look at the current DOM selection, and then look at the data being handed to it. If there are more values than corresponding DOM elements, then enter() creates a new placeholder element on which you can work your magic.  it then hands off a reference to this new placeholder to the next step in the chain 

.append("p")           // Takes the empty placeholder selection created by enter, and append a p element into the DOM. Then it                                   will hands off a reference to the element it just created to the next step int hte chain

.text("Intersting");  // takes the reference to the newly created p and inserted a text value.

When D3 binds data to an element, that data doesn't exist in the DOM, but it does exist in memory as as a _data_ attribute of that element.

Using Data

d3.select("body").selectAll("p")
.data(dataset)
.enter()
.append("p")
.text(function(d){        // must use function to wrap data

return d;});

when chaining methods together, anytime after you call data(), you can create an anonymous function that accepts d as an input,

the magic data() method ensures that d is set to the corresponding value in your value in your original dataset, 

given the current element at hand. 

 Beyond text

.style("color", function(d) {
if (d > 15) { //Threshold of 15
return "red";
} else {
return "black";
}
});