When learning D3 and Observables, I had a hard time figuring out how to do data joins. Once you learn, it isn't hard, but it takes a few tricks to set up correctly. When I started, I wish I knew: - .data(dataIn, d => d.key) - The second argument of .data() is for a key to keep track of each object. If you don't include this, D3 defaults to using the array index of data. This means if you start with dataIn = [A, B, C] , and then update it to dataIn = [A, C, D],

with keys:
>>> ${html`

A	updates to	A
B	exits
C	updates to	C
	enters	D

`} >> without keys:
>>> ${html`

A	updates to	A
B	updates to	C
C	updates to	D

`} - .join( enter => enter, update => update, exit => exit ) - This is the core of the update pattern. This is where the code goes for each enter, update and exit case.

- svg.selectAll("circle.dots") with .attr('class', 'dots') on enter - We need to make a class of each object that enters, so it can be reselected when the data is re-inputted. You don't technically need to do this if you only have one object type on the page, but if you are using something like D3 axes and then svg.selectAll("path") to make a line chart, then you will select the lines that are axes ticks.