**process:** **- start by selecting a dome element (parent / container / whatever)** **- bind data (generate a data union)** **- define enter, update, exit.** - will be applied to each datum** ** ** **- Child selections inherit the data binding of their parent by default** ** ** **Questions** **- how default to identify data union?** **- still don't quite understand the enter state / selection** ** ** **Selections** **- allow you to apply operators onto multiple entities** ** ** **Data Binding** [**https://www.dashingd3js.com/binding-data-to-dom-elements**](https://www.dashingd3js.com/binding-data-to-dom-elements) [**https://www.dashingd3js.com/using-data-bound-to-dom-elements**](https://www.dashingd3js.com/using-data-bound-to-dom-elements) ** ** **- builds off the concept of selections** **- e.g d3.select("body").selectAll("p").data(theData)** - returns a virtual selection of 3 elements (enter, update, exit)** - binds each element of theData to the \_\_data\_\_ element of each new element** - (not sure where the new element comes in yet)** ** ** **- The operator can take a value or a function** ** ** var p = d3.select("body").selectAll("p")** .data(theData)** .enter()** .append("p")** .text( "hello" );** ** ** var p = d3.select("body").selectAll("p")** .data(theData)** .enter()** .append("p")** .text( function (d) { return d; } );** ** ** - Alternatively, function(d, i) to get the index.** - 'this' is bound to the current dom element** ** ** ** ** **Data types** [**https://www.dashingd3js.com/data-structures-d3js-accepts**](https://www.dashingd3js.com/data-structures-d3js-accepts) **- the data() operator must take an array** **- d3 provides ways of injecting data from many types of sources** ** **