alternatively use .transition()……….selection() to merge

This is a great pattern. Quick question: is it possible to use the await keyword with this pattern and base the promise on the end of the transition instead of the promise that is based on ticks. Context: if you use multiple transitions in an update patterns combined with a delay, it will not be obvious to calculate the exact duration of the transition and it would be great to use `await` / `transition.end()` to resolve the promise. However, I haven't found a way to make this work. Thanks!

This awesome. But this last tidbit is probably going to make me crazy. To clarify : join take a single string as an argument. Or arrow functions for enter, exit and update. Are those arguments? Must they be in order? Must there be only 3? You use call -m ass opposed to each - because it returns the selection?

Yes the method's prototype is selection.join(enter[, update][, exit]) (see https://github.com/d3/d3-selection/blob/master/README.md#selection_join ). Using call() because it returns the selection.

The variable for "monospace fonts" seems to have changed since this notebook was created. `--mono_fonts` should now be `--monospace-font`, I believe.

good catch, thanks!

Just pointing out from a poor color-blinded guy: would it be possible to select colors (and maybe font weights) to improve readability of the transitions? Thanks

Why is it that we cannot "add" selections/appends/joins underneath the `create` line like a normal selection?

We can! However this pattern is necessary here because we need to display the svg node. An alternative would be: ``` d3.create("svg") .attr("width", width) .attr("height", 33) .attr("viewBox", `0 -20 ${width} 33`) .call((svg) => svg.selectAll("text") .data(randomLetters()) .join("text") .attr("x", (d, i) => i * 16) .text(d => d) ) .node() ```

Ah, I think I get it ... Also, WOW thank you for such a quick response!! Just to make sure I understand, the following code would NOT work *because* the `.selectAll` portion makes the final selection (return) "text" and not the SVG. Using `call` ensures that we call the selection/data-join on the SVG, but still return the SVG at the end. Right? ``` d3.create("svg") .attr("width", width) .attr("height", 33) .attr("viewBox", `0 -20 ${width} 33`) .selectAll("text") .data(randomLetters()) .join("text") .attr("x", (d, i) => i * 16) .text(d => d) .node() ```

yes: this would return the first text node

Awesome! This makes perfect sense now. Thank you!