Lets start with Select

Mike explains how the Select function works in D3 with in-detail explanation. This page will incorporate those ideas for future reference. As I continue reading, I will make notes of important links and points as list below.

The below svg is having three activities ongoing. The three are showing how the enter, update and exit works. The color of the letter tells whether it is being updated, exited or is newly entered. The color coding is done by changing the class attribute.

you won’t often use native methods as D3 provides convenient alternatives, such as selection.each. (A few native methods are overridden to adapt their behavior to selections, namely selection.filter and selection.sort.)
Selections are are arrays of arrays of elements: a selection is an array of groups, and each group is an array of elements. For example, d3.select returns a selection with one group containing the selected element:

            var selection = d3.select("body");

every element in the old selection becomes a group in the new selection; each group contains an old element’s matching descendant elements. So, if each table cell contained a span element, and you called selectAll a third time, you’d get a selection with sixteen groups. There are parent nodes for each group of selections. The ultimate parent is the document element.

d3.selectAll("tr").selectAll("td").selectAll("span");

When you search for document element in the MDN you will find the following

            const rootElement = document.documentElement;
            const firstTier = rootElement.childNodes;
            // firstTier is a NodeList of the direct children of the root element
            // such as  and 

            for (const child of firstTier) {
            // do something with each direct child of the root element
            }

Try opening the document.documentElement in the console. The entire page will be inside the console.

Thing to keep in mind is, a selection.attr or selection.style, the function is called for each element; the main difference with grouping is that the second argument to your function (i) is the within-group index rather than the within-selection index.
Null elements can occur when selection.select cannot find a matching element for the given selector. The select method must preserve the grouping structure, so it fills the missing slots with null. This where the enter and exit function comes into play.

data is not a property of the selection, but a property of its elements.

Data can be assigned to DOM by using selection.data / selection.datum or via insert, append and select. If we now append an element to the body, the child automatically inherits data from the parent

            document.body.__data__ = 43;
            is idiomatic with 
            d3.select('body').datum(42)

Your data function is passed the datum of the group’s parentNode (d) and the group’s index (i), and returns whatever array of data you want to join to that group.

Using the key function...

            function name(d) {
                return d.name;
              } // equivalent to d => d.name

              d3.selectAll('div').data(letters, name);

But what happens when there’s no matching element for a given datum, or no matching datum for a given element?

there are three possible logical outcomes:

            Update - There was a matching element for a given datum.
            Enter - There was no matching element for a given datum.
            Exit - There was no matching datum for a given element.

Following that a series of tutorials on General update pattern is shared by Mike after he explains the selection

        d3.select('body')
            .selectAll('div')
            .data([1,5,5,7,9])
            .enter()
            .append('div')
            .text(str => str)

What is functor

                function functor(x) {
                return function() {
                    return x;
                };
                }
                // and what it does?
                var val = functor(10);
                // val is now a function that
                // always returns 10
                assert.equal(val(), 10);