mbostock · October 20, 2023 14:09 · Nov 17, 2019 · Jan 28, 2019 · Jul 18, 2016 · Jul 18, 2016
diff --git a/.block b/.block
@@ -1 +1,2 @@
 license: gpl-3.0
+redirect: https://observablehq.com/@d3/selection-join
diff --git a/README.md b/README.md
@@ -1,3 +1,5 @@
+Note: d3-selection 1.4 introduced [*selection*.join](https://beta.observablehq.com/@d3/selection-join) which greatly simplifies the general update pattern! This series of examples is useful for understanding how joins work in D3, but I recommend you use *selection*.join in practice.
+
 This example demonstrates [D3](https://d3js.org)’s **general update pattern**, where a data-join is followed by operations on the *enter*, *update* and *exit* selections. Entering elements are shown in green, while updating elements are shown in black. Exiting elements are removed immediately, so they're invisible.
 
 This example does not use a key function for the data-join, so elements may change their associated letter. Entering elements are always added to the end: when the new data has more letters than the old data, new elements are entered to display the new letters. Likewise, exiting letters are always removed from the end when the new data has *fewer* letters than the old data.

diff --git a/index.html b/index.html
@@ -16,7 +16,7 @@
 
 </style>
 <svg width="960" height="500"></svg>
-<script src="https://d3js.org/d3.v4.min.js"></script>
+<script src="https://d3js.org/d3.v5.min.js"></script>
 <script>
 
 var alphabet = "abcdefghijklmnopqrstuvwxyz".split("");

diff --git a/README.md b/README.md
@@ -1,5 +1,5 @@
 This example demonstrates [D3](https://d3js.org)’s **general update pattern**, where a data-join is followed by operations on the *enter*, *update* and *exit* selections. Entering elements are shown in green, while updating elements are shown in black. Exiting elements are removed immediately, so they're invisible.
 
-This example does not use a key function for the data-join, so entering elements are always added to the end: when the new data has more letters than the old data, new elements are entered to display the new letters. Likewise, exiting letters are always removed from the end when the new data has *fewer* letters than the old data.
+This example does not use a key function for the data-join, so elements may change their associated letter. Entering elements are always added to the end: when the new data has more letters than the old data, new elements are entered to display the new letters. Likewise, exiting letters are always removed from the end when the new data has *fewer* letters than the old data.
 
 Next: [Key Functions](/mbostock/3808221)
diff --git a/index.html b/index.html
@@ -59,7 +59,7 @@
 update(alphabet);
 
 // Grab a random sample of letters from the alphabet, in alphabetical order.
-setInterval(function() {
+d3.interval(function() {
   update(d3.shuffle(alphabet)
       .slice(0, Math.floor(Math.random() * 26))
       .sort());

diff --git a/index.html b/index.html
@@ -30,7 +30,7 @@
 
   // DATA JOIN
   // Join new data with old elements, if any.
-  var text = svg.selectAll("text")
+  var text = g.selectAll("text")
     .data(data);
 
   // UPDATE

diff --git a/README.md b/README.md
@@ -1,5 +1,5 @@
-This example demonstrates the **general update pattern** in [D3](http://d3js.org), where a data-join is followed by operations on the *enter*, *update* and *exit* selections. Entering elements are shown in green, while updating elements are shown in black. Exiting elements are removed immediately, so they're invisible.
+This example demonstrates [D3](https://d3js.org)’s **general update pattern**, where a data-join is followed by operations on the *enter*, *update* and *exit* selections. Entering elements are shown in green, while updating elements are shown in black. Exiting elements are removed immediately, so they're invisible.
 
 This example does not use a key function for the data-join, so entering elements are always added to the end: when the new data has more letters than the old data, new elements are entered to display the new letters. Likewise, exiting letters are always removed from the end when the new data has *fewer* letters than the old data.
 
-Next: [Key Functions](http://bl.ocks.org/3808221)
+Next: [Key Functions](/mbostock/3808221)
diff --git a/index.html b/index.html
@@ -15,44 +15,40 @@
 }
 
 </style>
-<body>
-<script src="//d3js.org/d3.v3.min.js"></script>
+<svg width="960" height="500"></svg>
+<script src="https://d3js.org/d3.v4.min.js"></script>
 <script>
 
 var alphabet = "abcdefghijklmnopqrstuvwxyz".split("");
 
-var width = 960,
-    height = 500;
-
-var svg = d3.select("body").append("svg")
-    .attr("width", width)
-    .attr("height", height)
-  .append("g")
-    .attr("transform", "translate(32," + (height / 2) + ")");
+var svg = d3.select("svg"),
+    width = +svg.attr("width"),
+    height = +svg.attr("height"),
+    g = svg.append("g").attr("transform", "translate(32," + (height / 2) + ")");
 
 function update(data) {
 
   // DATA JOIN
   // Join new data with old elements, if any.
   var text = svg.selectAll("text")
-      .data(data);
+    .data(data);
 
   // UPDATE
   // Update old elements as needed.
   text.attr("class", "update");
 
   // ENTER
   // Create new elements as needed.
+  //
+  // ENTER + UPDATE
+  // After merging the entered elements with the update selection,
+  // apply operations to both.
   text.enter().append("text")
       .attr("class", "enter")
       .attr("x", function(d, i) { return i * 32; })
-      .attr("dy", ".35em");
-
-  // ENTER + UPDATE
-  // Appending to the enter selection expands the update selection to include
-  // entering elements; so, operations on the update selection after appending to
-  // the enter selection will apply to both entering and updating nodes.
-  text.text(function(d) { return d; });
+      .attr("dy", ".35em")
+    .merge(text)
+      .text(function(d) { return d; });
 
   // EXIT
   // Remove old elements as needed.

diff --git a/.block b/.block
@@ -0,0 +1 @@
+license: gpl-3.0
diff --git a/index.html b/index.html
@@ -16,7 +16,7 @@
 
 </style>
 <body>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
+<script src="//d3js.org/d3.v3.min.js"></script>
 <script>
 
 var alphabet = "abcdefghijklmnopqrstuvwxyz".split("");

diff --git a/index.html b/index.html
@@ -16,7 +16,7 @@
 
 </style>
 <body>
-<script src="http://d3js.org/d3.v2.min.js?2.10.1"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
 <script>
 
 var alphabet = "abcdefghijklmnopqrstuvwxyz".split("");
@@ -64,19 +64,9 @@
 
 // Grab a random sample of letters from the alphabet, in alphabetical order.
 setInterval(function() {
-  update(shuffle(alphabet)
+  update(d3.shuffle(alphabet)
       .slice(0, Math.floor(Math.random() * 26))
       .sort());
 }, 1500);
 
-// Shuffles the input array.
-function shuffle(array) {
-  var m = array.length, t, i;
-  while (m) {
-    i = Math.floor(Math.random() * m--);
-    t = array[m], array[m] = array[i], array[i] = t;
-  }
-  return array;
-}
-
 </script>
diff --git a/thumbnail.png b/thumbnail.png
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-This example demonstrates the general update pattern in [D3](http://d3js.org), where a data-join is followed by operations on the *enter*, *update* and *exit* selections. Entering elements are shown in green, while updating elements are shown in black. Exiting elements are removed immediately, so they're invisible.
+This example demonstrates the **general update pattern** in [D3](http://d3js.org), where a data-join is followed by operations on the *enter*, *update* and *exit* selections. Entering elements are shown in green, while updating elements are shown in black. Exiting elements are removed immediately, so they're invisible.
 
 This example does not use a key function for the data-join, so entering elements are always added to the end: when the new data has more letters than the old data, new elements are entered to display the new letters. Likewise, exiting letters are always removed from the end when the new data has *fewer* letters than the old data.
 

diff --git a/README.md b/README.md
@@ -1,5 +1,5 @@
 This example demonstrates the general update pattern in [D3](http://d3js.org), where a data-join is followed by operations on the *enter*, *update* and *exit* selections. Entering elements are shown in green, while updating elements are shown in black. Exiting elements are removed immediately, so they're invisible.
 
-This example does not use a key function for the data-join, so entering elements are always added to the end: when the new data has more letters than the old data, new elements are entered to display the new letters. Likewise, exiting letters are always removed from the end.
+This example does not use a key function for the data-join, so entering elements are always added to the end: when the new data has more letters than the old data, new elements are entered to display the new letters. Likewise, exiting letters are always removed from the end when the new data has *fewer* letters than the old data.
 
 Next: [Key Functions](http://bl.ocks.org/3808221)
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-This example demonstrates the general update pattern in [D3](http://d3js.org), where a data-join is followed by operations on the *enter*, *update* and *exit* selections. Entering elements are shown in green, while updating elements are shown in black. Exiting elements are removed immediately, so they're not visible.
+This example demonstrates the general update pattern in [D3](http://d3js.org), where a data-join is followed by operations on the *enter*, *update* and *exit* selections. Entering elements are shown in green, while updating elements are shown in black. Exiting elements are removed immediately, so they're invisible.
 
 This example does not use a key function for the data-join, so entering elements are always added to the end: when the new data has more letters than the old data, new elements are entered to display the new letters. Likewise, exiting letters are always removed from the end.
 

diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-This example demonstrates the general update pattern in [D3](http://d3js.org), where a data-join is followed by operations on the *enter*, *update* and *exit* selections. Entering elements are shown in green, while updating elements are shown in black.
+This example demonstrates the general update pattern in [D3](http://d3js.org), where a data-join is followed by operations on the *enter*, *update* and *exit* selections. Entering elements are shown in green, while updating elements are shown in black. Exiting elements are removed immediately, so they're not visible.
 
 This example does not use a key function for the data-join, so entering elements are always added to the end: when the new data has more letters than the old data, new elements are entered to display the new letters. Likewise, exiting letters are always removed from the end.
 

diff --git a/index.html b/index.html
@@ -67,7 +67,7 @@
   update(shuffle(alphabet)
       .slice(0, Math.floor(Math.random() * 26))
       .sort());
-}, 750);
+}, 1500);
 
 // Shuffles the input array.
 function shuffle(array) {

diff --git a/README.md b/README.md
@@ -1,3 +1,5 @@
 This example demonstrates the general update pattern in [D3](http://d3js.org), where a data-join is followed by operations on the *enter*, *update* and *exit* selections. Entering elements are shown in green, while updating elements are shown in black.
 
+This example does not use a key function for the data-join, so entering elements are always added to the end: when the new data has more letters than the old data, new elements are entered to display the new letters. Likewise, exiting letters are always removed from the end.
+
 Next: [Key Functions](http://bl.ocks.org/3808221)
diff --git a/README.md b/README.md
@@ -1,3 +1,3 @@
-This example demonstrates the general update pattern in [D3](http://d3js.org), where a data-join is followed by operations on the *enter*, *update* and *exit* selections.
+This example demonstrates the general update pattern in [D3](http://d3js.org), where a data-join is followed by operations on the *enter*, *update* and *exit* selections. Entering elements are shown in green, while updating elements are shown in black.
 
 Next: [Key Functions](http://bl.ocks.org/3808221)
diff --git a/README.md b/README.md
@@ -0,0 +1,3 @@
+This example demonstrates the general update pattern in [D3](http://d3js.org), where a data-join is followed by operations on the *enter*, *update* and *exit* selections.
+
+Next: [Key Functions](http://bl.ocks.org/3808221)
diff --git a/index.html b/index.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<style>
+
+text {
+  font: bold 48px monospace;
+}
+
+.enter {
+  fill: green;
+}
+
+.update {
+  fill: #333;
+}
+
+</style>
+<body>
+<script src="http://d3js.org/d3.v2.min.js?2.10.1"></script>
+<script>
+
+var alphabet = "abcdefghijklmnopqrstuvwxyz".split("");
+
+var width = 960,
+    height = 500;
+
+var svg = d3.select("body").append("svg")
+    .attr("width", width)
+    .attr("height", height)
+  .append("g")
+    .attr("transform", "translate(32," + (height / 2) + ")");
+
+function update(data) {
+
+  // DATA JOIN
+  // Join new data with old elements, if any.
+  var text = svg.selectAll("text")
+      .data(data);
+
+  // UPDATE
+  // Update old elements as needed.
+  text.attr("class", "update");
+
+  // ENTER
+  // Create new elements as needed.
+  text.enter().append("text")
+      .attr("class", "enter")
+      .attr("x", function(d, i) { return i * 32; })
+      .attr("dy", ".35em");
+
+  // ENTER + UPDATE
+  // Appending to the enter selection expands the update selection to include
+  // entering elements; so, operations on the update selection after appending to
+  // the enter selection will apply to both entering and updating nodes.
+  text.text(function(d) { return d; });
+
+  // EXIT
+  // Remove old elements as needed.
+  text.exit().remove();
+}
+
+// The initial display.
+update(alphabet);
+
+// Grab a random sample of letters from the alphabet, in alphabetical order.
+setInterval(function() {
+  update(shuffle(alphabet)
+      .slice(0, Math.floor(Math.random() * 26))
+      .sort());
+}, 750);
+
+// Shuffles the input array.
+function shuffle(array) {
+  var m = array.length, t, i;
+  while (m) {
+    i = Math.floor(Math.random() * m--);
+    t = array[m], array[m] = array[i], array[i] = t;
+  }
+  return array;
+}
+
+</script>
Original file line number	Diff line number	Diff line change
		@@ -1 +1,2 @@
		license: gpl-3.0
		redirect: https://observablehq.com/@d3/selection-join
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		This example demonstrates the general update pattern in [D3](http://d3js.org), where a data-join is followed by operations on the enter, update and exit selections.

		Next: [Key Functions](http://bl.ocks.org/3808221)