Shrinking the two window back and clearing the console output.
Since with such a narrow window, the table becomes unreadable,
let's start inspecting what gets returned from each of
the function calls in the D3 data binding chain.
As you can see here, d3.select passing in SVGselects the SVG
element on the page, which in our case is at the bottom of the window,
below the image of the data binding process which I'll be talking through.
And currently there's no elements contained in it.
Correspondingly in the image,
we have an SVG element on the page that's not bound to any data.
And we have our data variable which contains all the data in worldcup.tsv.
Running the next function here, the select all circle, which is a sub select,
looking for circle SVG elements contained within the SVG,
we can see here that actually returns an empty selection.
And this should make perfect sense since we haven't added any circles,
to our page, and our SVG is empty.
What happens next with the call to the .data function, passing in our
data JavaScript variable, representing all the rows in our world_cup.tsv,
is where D3 binds the rows of our data file to the elements on the page.
But what I've just said, probably doesn't make a whole lot of sense.
How can we bind data to an empty selection,
since there aren't any circles on the page?
And even stranger, is what gets returned.
Here we see we have an array of 836 elements.
Which got returned from the data bind.
What are those elements?
Where did they come from?
And where does the data reside that we've bound to it?
Well, this is where things get strange and magical.
I've updated diagram to reflect this process.
Since there are not yet any elements on the page corresponding to
either our rows of the data or circles on the page, which are bound to data.
D3 essentially creates empty placeholder nodes, which you can think of
something like a virtual HTML node that exists in our JavaScript scope or
in the console but is not yet visible on the page, as an SVG element.
And each one of these virtual placeholders,
gets associated with one row in the data file.
So this mysterious array that got returned is actually an array of
placeholder elements, that have been associated with some data.
In my graphic, I've only shown four for clarity but this essentially
has all 836 rows of our data bound to 836 placeholder elements.
And to prove if there aren't yet
any circle elements on the page, I rerun the select statement, again,
d3.select("svg").selectAll("circles"), and again, an empty selection returns.
So while we have told D3 we're going to be inserting 836 of some element,
associated with some data, D3 has not yet added anything to the page.
Well you might be asking yourself, now that we have some data bound to
some virtual or placeholder elements, how do we actually draw them on the page?
Well, this is where the mysterious .enter selection comes into play.
.enter corresponds to a D3 selection of all the virtual nodes,
or placeholders, bound to some data, which aren't yet on the page.
In our case, since there isn't anything already on the page,
this enter selection simply corresponds to every placeholder bound to
every row of our data.
And if we inspect what's contained in the enter selection, we get
returned something even more interesting than what gets returned from .data.
Here we see we have an array of 836 elements,
but instead of corresponding to these mysterious placeholders,
the enter selection corresponds to actual JavaScript objects,
which contain a data field, which represents a single row of our data file.