Start Visualizing Data Driven Documents with D3 v4

Heyy-- Could you share the link to Mike Bostock's article that explains data joins- the one with the venn diagrams? I'm curious to get more background on his approach/ way of framing enter/exit/etc.

Actually nevermind, I googled and found: https://bost.ocks.org/mike/join/ :)

Actually nevermind, I googled and found: https://bost.ocks.org/mike/join/ :)

Thanks!

What I didn't understand was this - at 2:27 you were saying: <br> <br> "What we have resulting from this data join is five elements in the enter selection, which is just data and no elements, and an empty update selection, and an empty exit selection. By default, a data join like this returns the update selection, so let's go ahead and assign this to a variable called update." <br> <br> According to diagram and the text above, the resulting selection should return enter selection - because it is "data and no elements". But you are saying that data joint like this returns the "update" selection. <br> <br> Yes, I know, later on you are referring to this topic saying: <br> <br> "The reason it's called the update selection, because this is for when you already have elements on the page, and some of the data corresponds to those items." <br> <br> But it is still confusing - because in the example there are NO elements, and even if there were some elements, what if there are only 3 of them but 5 data elements - now we have enter and update selection together. I am struggling a little bit with this.

@Doug, .data() will return always a subclass with three properties: _enter, _exit, and _groups, corresponding to the so-called "update" selection, wrapped together with all the methods you need attached to the subclass prototype. So ya, I guess @Ben is maybe cutting too short by saying that a data join like that returns an update selection by default.

So those three are always there. When you join data points that have not matching elements in the DOM, placeholders are created in the _enter selection. When there are no more data points for existing DOM elements, those are found in the _exit property. When data changes for an already matched element, you'll find a reference to those DOM elements in the _groups selection.

You can explore the update variable by yourself by logging it to the console and playing with it until it clicks.

I agree though, not the most straightforward concept to get ^_^

Something probably changed since this is a pretty old tutorial. The second argument to the data method (the function) doesn't seem to return either, but instead keeps the original div inside the html and then adds the other 5 entries from our data array.

Still works, but different.