D3 Examples - 02_workshop_binding data to elements

xxxxxxxxxx
 
<!DOCTYPE html>
​
<head>
    <title>d3js workshop - data binding</title>
    <script src="https://d3js.org/d3.v3.js"></script> <!-- import D3 library -->
</head>
​
<body>
    <script type="text/javascript">
        // Write your code here
    // an empty selection - looking for instantiations of data
        element_name = d3.selectAll('div')      //div is a variable here-confusing! 
            .data(['ben', 'elcin', 'ana', 'jonatan', "byron"])      // data - it will be bound to the selection in next line!
            .enter()                // bound data to selection for every time that there is a data but there is no element
            .append('div')          // append a div element to each selection. div is the command here
//          .text("hello world!");  // fill each element with text - but what was the use of data! comment this line and uncomment next line to really use the data. 
        
        element_name.text(function(d, i){
                return i + 1 + " " + d;
                }); // let's really use the data to fill each element. first argument is always the data
​
    </script>
</body>
    