data-join.md

data join

• data join -- bost.ocks.org
  • General Update Pattern is deprecated -- notebook
  • But it's informative
• selection.join replaces the general pattern -- notebook
  • d3-transition -- notebook
    • A transition is similar to a selection
    • But it animates changes to the DOM.
    • It's more general than CSS transition
    • Interpolation can be accomplished with a variety of d3-ease interpolators
    • Don't miss: Easing Animations
  • d3-transition API reference -- github

Random alphabet demo

To understand the links above, you should recognize how the code below works.

{
  while (true) {
    yield randomLetters()
    await Promises.tick(1000)
  }
}

• In a nutshell: the cell updates every second (1000 milliseconds) with the return value of randomLetters()
• You can copy and paste this cell into one of the Observable notebook links above (where randomLetters is defined).
• Introduction to Promises is a good reference.
• Note: The comment at the end regarding selection.call() is a technique that enables method chaining.