HarryStevens · October 30, 2024 20:52 · Oct 5, 2017 · Jan 12, 2017 · Jan 12, 2017 · Jan 12, 2017
diff --git a/index.html b/index.html
@@ -4,6 +4,7 @@
   <body>
 
     <script src="https://d3js.org/d3.v4.min.js"></script>
+    <script src="https://unpkg.com/[email protected]/lib/jeezy.min.js"></script>
     <script>
 
     var alphabet = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ".split("");
@@ -67,40 +68,18 @@
     }
 
     function randomizeData(){
-      var d0 = shuffle(alphabet),
+      var d0 = jz.arr.shuffle(alphabet),
         d1 = [],
         d2 = [];
-      for (var i = 0; i < random(1, alphabet.length); i++){
+      for (var i = 0; i < jz.num.randBetween(1, alphabet.length); i++){
         d1.push(d0[i]);
       }
       d1.forEach(function(d){
-        d2.push({name: d, size: random(0, 50)})
+        d2.push({name: d, size: jz.num.randBetween(0, 50)})
       });
       return d2;
     }
 
-    function random(min, max) {
-      return Math.floor(Math.random() * (max - min + 1)) + min;
-    }
-
-    function shuffle(array) {
-      var m = array.length, t, i;
-
-      // While there remain elements to shuffle…
-      while (m) {
-
-        // Pick a remaining element…
-        i = Math.floor(Math.random() * m--);
-
-        // And swap it with the current element.
-        t = array[m];
-        array[m] = array[i];
-        array[i] = t;
-      }
-
-      return array;
-    }
-
     </script>
   </body>
 </html>
diff --git a/README.md b/README.md
@@ -1,6 +1,3 @@
 An attempt to replicate Mike's [General Update Pattern, III](https://bl.ocks.org/mbostock/3808234) with a force layout. The update has four parts: (1) Join, (2) Exit, (3) Update, (4) Enter.
 
-See also: 
-- [Voronoi Update Pattern II](https://bl.ocks.org/HarryStevens/044aa7410a497b09a327180acba51764)
-- [Voronoi Update Pattern](http://bl.ocks.org/HarryStevens/b638f5bfb5bd79bdc49b61570f4c69db)
-- [Modifying a Force Layout](https://bl.ocks.org/mbostock/1095795)
+See also: [Voronoi Update Pattern II](https://bl.ocks.org/HarryStevens/044aa7410a497b09a327180acba51764), [Voronoi Update Pattern](http://bl.ocks.org/HarryStevens/b638f5bfb5bd79bdc49b61570f4c69db), and [Modifying a Force Layout](https://bl.ocks.org/mbostock/1095795)
diff --git a/thumbnail.png b/thumbnail.png
diff --git a/index.html b/index.html
@@ -14,7 +14,7 @@
     var nodes = randomizeData();
 
     var simulation = d3.forceSimulation(nodes)
-        .force("charge", d3.forceManyBody().strength(-500))
+        .force("charge", d3.forceManyBody().strength(-150))
         .force("forceX", d3.forceX().strength(.1))
         .force("forceY", d3.forceY().strength(.1))
         .force("center", d3.forceCenter())
@@ -74,7 +74,7 @@
         d1.push(d0[i]);
       }
       d1.forEach(function(d){
-        d2.push({name: d, size: random(0, 100)})
+        d2.push({name: d, size: random(0, 50)})
       });
       return d2;
     }

diff --git a/.block b/.block
@@ -0,0 +1 @@
+license: gpl-3.0
diff --git a/README.md b/README.md
@@ -0,0 +1,6 @@
+An attempt to replicate Mike's [General Update Pattern, III](https://bl.ocks.org/mbostock/3808234) with a force layout. The update has four parts: (1) Join, (2) Exit, (3) Update, (4) Enter.
+
+See also: 
+- [Voronoi Update Pattern II](https://bl.ocks.org/HarryStevens/044aa7410a497b09a327180acba51764)
+- [Voronoi Update Pattern](http://bl.ocks.org/HarryStevens/b638f5bfb5bd79bdc49b61570f4c69db)
+- [Modifying a Force Layout](https://bl.ocks.org/mbostock/1095795)
diff --git a/index.html b/index.html
@@ -0,0 +1,106 @@
+<html>
+  <head>
+  </head>
+  <body>
+
+    <script src="https://d3js.org/d3.v4.min.js"></script>
+    <script>
+
+    var alphabet = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ".split("");
+
+    var width = window.innerWidth,
+        height = window.innerHeight;
+
+    var nodes = randomizeData();
+
+    var simulation = d3.forceSimulation(nodes)
+        .force("charge", d3.forceManyBody().strength(-500))
+        .force("forceX", d3.forceX().strength(.1))
+        .force("forceY", d3.forceY().strength(.1))
+        .force("center", d3.forceCenter())
+        .alphaTarget(1)
+        .on("tick", ticked);
+
+    var svg = d3.select("body").append("svg").attr("width", width).attr("height", height)
+        g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"),
+        node = g.append("g").attr("stroke", "#fff").attr("stroke-width", 1.5).selectAll(".node");
+
+    d3.interval(function(){
+      restart(randomizeData())
+    }, 2000);
+
+    function restart(nodes) {
+
+      // transition
+      var t = d3.transition()
+          .duration(750);
+
+      // Apply the general update pattern to the nodes.
+      node = node.data(nodes, function(d) { return d.name;});
+
+      node.exit()
+          .style("fill", "#b26745")
+        .transition(t)
+          .attr("r", 1e-6)
+          .remove();
+
+      node
+          .transition(t)
+            .style("fill", "#3a403d")
+            .attr("r", function(d){ return d.size; });
+
+      node = node.enter().append("circle")
+          .style("fill", "#45b29d")
+          .attr("r", function(d){ return d.size })
+          .merge(node);
+
+      // Update and restart the simulation.
+      simulation.nodes(nodes)
+        .force("collide", d3.forceCollide().strength(1).radius(function(d){ return d.size + 10; }).iterations(1));
+
+    }
+
+    function ticked() {
+      node.attr("cx", function(d) { return d.x; })
+          .attr("cy", function(d) { return d.y; })
+
+    }
+
+    function randomizeData(){
+      var d0 = shuffle(alphabet),
+        d1 = [],
+        d2 = [];
+      for (var i = 0; i < random(1, alphabet.length); i++){
+        d1.push(d0[i]);
+      }
+      d1.forEach(function(d){
+        d2.push({name: d, size: random(0, 100)})
+      });
+      return d2;
+    }
+
+    function random(min, max) {
+      return Math.floor(Math.random() * (max - min + 1)) + min;
+    }
+
+    function shuffle(array) {
+      var m = array.length, t, i;
+
+      // While there remain elements to shuffle…
+      while (m) {
+
+        // Pick a remaining element…
+        i = Math.floor(Math.random() * m--);
+
+        // And swap it with the current element.
+        t = array[m];
+        array[m] = array[i];
+        array[i] = t;
+      }
+
+      return array;
+    }
+
+    </script>
+  </body>
+</html>