The General Update Pattern of D3.js

All about D3 Data Joins and how to use them. Also animated transitions!

[tedfitzpatrickyt]

thanks curran this is a nicely done tutorial that i’ll review before my next d3 project. neat es6 stuff too

[flwi]

Great tutorial! I struggled a bit to understand the concepts behind d3 and your video helped a lot! Thanks a lot!

[caryleblondell]

Excellent explanation. Great work. Thank you Curran

[AskAW]

I'm just starting my d3.js journey and didn't understand a word you said.

I'll come back to this video in a few weeks.

[saurabhprakash]

Excellent explanation of d3 core concepts. Thanks a lot Curran.

[saulgoodalvarez]

The way you explain things is just phenomenal! Keep it up!

[jcantonelli]

Excellent video Curran! I came for Object Constancy, but was re-educated on Enter, Update, Exit and introduced to Merge as well. I think PBS should offer you a show.

[amnesia]

Finally a proper explanation of the update pattern. Thank you!

[loomer]

Great video that finally got me over the hump understanding these basic concepts of D3. Thank you.

[alienwaremx]

This is a really good explanation and understanding these makes working with D3 easier.

[EzraSchroeder]

@8:48 and exit is for when there are elements--DOM elements--on the page that don't have any corresponding data elements

[EzraSchroeder]

@8:41 the udpate part is when there are data elements and DOM elements that correspond to those data elements

[EzraSchroeder]

@8:35 the enter part is where there are data elements but no corresponding DOM elements

[cj_clippy]

Thanks for this tut I am going to use this knowledge to build something great!

[dasten]

Wow! What an excellent tutorial!!! Thank u very much!

[monfera]

Great video! Also, it's worth using `.classed('fruit', true)` after the `append`, and selecting on the class with `svg.selectAll('.fruit')` instead of selecting on `circle`. The reason is manifold. The SVG element may change to some other SVG tag, often, a `g` element which groups other things, eg. the shape of the apple, annotation, tooltip... There's also the risk that `svg` will have another children which are also circles, confusing the updates, D3 doesn't know which is which. (For this reason, it's good to attach the fruits not to the `svg` but a `g` underneath `svg`). Sure the class can be added later, as the scenegraph grows, but it's error prone. So, as a matter of principle, I always select on and assign a class that has some meaning. Similarly, I always use the second argument of `.data()` ie. the key function, even if I have no immediate plans for updates - again, no need to think about it if new requirements emerge.

[karthikd]

I've been trying to wrap my head around enter and exit functions for a while.thanks for the video. The way you explain is crystal clear. If you accept crypto as donations. please share the address in the description. I would like to send you some.

[alvarobyrne]

that single element thing looks like a hack and not a feature, doesn't it? that "data([null])" thing, like a knack