2c:null 2d:["$","title",null,{"children":"\"Force Update Pattern\" in Observable | Bryan Gin-ge Chen | Observable"}] 32:T4b8,md`A port of [Harry Stevens](http://harryjstevens.com/)'s [block](https://bl.ocks.org/HarryStevens/bc938c8d45008d99faed47039fbe5d49). The original \`README.md\` says: >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), and [Modifying a Force Layout](https://bl.ocks.org/mbostock/1095795) [After the eye-candy](#comments), I compare the source code of the original block to the implementation in this notebook. Some familiarity with [d3](https://d3js.org)'s [selections](https://bost.ocks.org/mike/selection/) and its [force layout functionality](/@esperanc/intro-to-forced-layouts) is assumed. I wrote a _whole bunch_ because I really learned a lot while porting this; I hope my notes are useful to you too! Questions? Comments? Feel free to DM me at [@blockspins](https://twitter.com/blockspins) or post in [the Observable forum](https://talk.observablehq.com).`33:T7f6,svg = { const svg = d3.select(this || DOM.svg(width, height)); const g = svg.select("g").empty() ? svg.append("g") .attr("transform", `translate(${width / 2},${height / 2})`) .attr("stroke", "currentColor") .attr("stroke-width", 1.5) : svg.select("g"); const node = g.selectAll(".node").data(nodes, d => d.name); // transition const t = d3.transition().duration(750); // Apply the general update pattern to the nodes. // exit const nodeExit = node.exit(); nodeExit.transition(t).remove(); nodeExit.selectAll("circle") .style("fill", "#b26745") .transition(t) .attr("r", 1e-6); nodeExit.selectAll("text") .style("fill", "blue") .transition(t) .attr("font-size", 9); // update const nodeCircU = node.selectAll("circle").data(nodes, d => d.name); nodeCircU.transition(t) .style("fill", "#3a403d") .attr("r", d => d.size); const nodeTextU = node.selectAll("text").data(nodes, d => d.name); nodeTextU.transition(t) .style("fill", "red"); // enter const nodeEnter = node.enter().append("g") .attr("class", "node"); const nodeCirc = nodeEnter.append("circle") .style("fill", "#45b29d") .attr("r", d => d.size); const nodeText = nodeEnter.append("text") .attr("font-size", 22) .style("fill", "white") .style("stroke", "none") .attr("text-anchor", "middle") .attr("dominant-baseline", "central") .text(d => d.name); // Update and restart the simulation. simulation.force("collide", d3.forceCollide() .strength(1) .radius(d => (d.size + 5)) .iterations(5)) .on("tick", ticked); function ticked() { nodeCirc.attr("cx", d => d.x).attr("cy", d => d.y); nodeCircU.attr("cx", d => d.x).attr("cy", d => d.y); nodeText.attr("x", d => d.x).attr("y", d=> d.y); nodeTextU.attr("x", d => d.x).attr("y", d=> d.y); } return svg.node(); }34:T77a,md` ### Introduction The original block implements a "force layout" of data-dependent graphics elements with different animations for [the "enter", "update" and "exit" selections](https://bost.ocks.org/mike/join/). Here's a rough outline of its code: * First, it creates a \`d3-force\` simulation and attaches it to the data array \`nodes\`, * then, it creates an SVG element containing a \`g\` element centered in the middle of the window, as well as * a d3 selection (called, somewhat confusingly, \`node\`). * The animation is driven by a call to \`d3.interval()\` which: * sets up a timer which regenerates \`nodes\` (a random sample of upper- and lower-case letters) and * calls \`restart()\` to update the \`svg\` every 2 seconds. * The function \`restart()\` uses \`d3\`'s data-join, enter, update, exit scheme to: * bind \`nodes\` to \`node\` and then * create, * update, and * remove associated colored circles. My goal was to rewrite this as a notebook whose main cells would be * an animated graphics cell (encompassing the code creating and updating the SVG) whose data source would be * a [generator](https://beta.observablehq.com/@mbostock/introduction-to-generators) cell (which replaces the \`d3.interval()\` call). I also wanted to enhance the SVG so that each of the circles would be labeled by its corresponding letter. In the next subsection, we'll go line-by-line through [the original Javascript source](https://bl.ocks.org/HarryStevens/bc938c8d45008d99faed47039fbe5d49#index.html), discussing where the code ends up in this notebook. The quoted code is grouped inside rounded borders like this; **click** them to toggle my comments (solid borders indicate that the comments are hidden, dashed borders indicate that the comments are shown). Afterwards, [in the final section of this notebook](#tips), I list a few miscellaneous thoughts. `35:T486,commentOn(md` The following lines define the \`d3-force\` simulation on top of \`nodes\`:`, md` \`\`\`js var simulation = d3.forceSimulation(nodes) .force("charge", d3.forceManyBody().strength(-150)) .force("forceX", d3.forceX().strength(.1)) .force("forceY", d3.forceY().strength(.1)) .force("center", d3.forceCenter()) .alphaTarget(1) .on("tick", ticked); \`\`\``, md` In this notebook, \`simulation\` gets [its own cell](#simulation), however, to avoid a circular dependency arising from \`ticked()\`, we move the line \`.on("tick", ticked)\` into the \`svg\` cell. Also, since this cell will be re-evaluated repeatedly due to its dependence on \`nodes\`, we can save on repeated reinitialization by using Observable's [\`this\`](https://beta.observablehq.com/@tmcw/untitled/5). \`\`\`js simulation = { if (this) return this.nodes(nodes);//.alpha(1).restart(); return d3.forceSimulation(nodes) .force("charge", d3.forceManyBody().strength(-150)) .force("forceX", d3.forceX().strength(.1)) .force("forceY", d3.forceY().strength(.1)) .force("center", d3.forceCenter()) .alphaTarget(1); } \`\`\` `)36:T5a5,commentOn(md` These definitions in the original block:`, md` \`\`\`js 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"); \`\`\``, md` correspond to the first few lines in the main visualization cell ([\`svg\`](#svg)) of this notebook: \`\`\`js const svg = d3.select(this || DOM.svg(width, height)); const g = svg.select("g").empty() ? svg.append("g") .attr("transform", \`translate(\${width / 2},\${height / 2})\`) .attr("stroke", "currentColor") .attr("stroke-width", 1.5) : svg.select("g"); const node = g.selectAll(".node").data(nodes, d => d.name); \`\`\` To simplify later selections, we bind the data \`nodes\` to the selection \`node\` here. Once again, we use \`this\` in the notebook's initialization of \`svg\` so that the cell can build off the previously generated SVG when \`nodes\` is updated; otherwise, the SVG will be reset on each change instead and the data will always be viewed as "entering" (comment out \`this ||\` and see what happens!). (I learned this particular trick from the notebook ["Enter / Update / Exit"](/@tophtucker/enter-update-exit) by [@tophtucker](/@tophtucker).) Similarly, we also must \`select\` rather than \`append\` \`g\` once it has been created. `)37:T545,commentOn(md` These lines act on the "exit" selection of \`node\`, coloring the circles orange and giving them a shrinking animation before deleting them:`, md` \`\`\`js node.exit() .style("fill", "#b26745") .transition(t) .attr("r", 1e-6) .remove(); \`\`\``, md` Because we want the circles to be labeled by the corresponding letter from \`nodes\`, the corresponding code in this notebook deals with both exiting circles and text: \`\`\`js // exit const nodeExit = node.exit(); nodeExit.transition(t).remove(); nodeExit.selectAll("circle") .style("fill", "#b26745") .transition(t) .attr("r", 1e-6); nodeExit.selectAll("text") .style("fill", "blue") .transition(t) .attr("font-size", 9); \`\`\` **Warning!** If \`nodes\` is updated before the transition finishes, some circles may be removed inappropriately and the graphics may temporarily fall out of sync with the data. This is essentially the issue brought up in the already-cited [Enter, Update, Exit notebook](/@tophtucker/enter-update-exit). There is a neat solution given in [Mike Bostock's fork](https://beta.observablehq.com/@mbostock/non-interrupting-exit), but I didn't attempt to apply it here -- we want to keep the "update" selection, and those notebooks throw it out with the "exit" selection. `)38:T4a6,tips = md`## Tips / lessons learned * The way I started porting the original stand-alone Javascript block into Observable was by first pasting everything into a single code cell, making sure that it worked, and then repeatedly moving definitions out to new cells and trying various adjustments until things worked. * One of the cardinal rules of [the Observable runtime](https://beta.observablehq.com/@mbostock/how-observable-runs) is that circular dependencies must be avoided. Observable will complain if you violate this rule, but it can sometimes be hard to see exactly where the dependence is. * While trying to get the logic in \`svg\` right, I made \`nodes\` into a static cell (rather than a generator) and I would rerun it manually to trigger updates in the graphics. * Frequently, I had bugs which caused multiple unwanted copies of circles to be created. Usually, looking at the SVG with the DOM inspector in my browser tools helped me see what the problem was. * Another common issue was the existence of circles that didn't update their positions properly. This was always a sign that the data bound to the circles and the data bound to the simulation were out of sync. `39:[] 30:{"id":"6d0705f30576b182","slug":"force-update-pattern-in-observable","title":"\"Force Update Pattern\" in Observable","thumbnail":"f1d07a6600e18507a79e52b429e87841433ae76a79a260efb57ab3bc9ea289b2","access_level":"public","create_time":"$D2018-10-31T04:25:05.888Z","update_time":"$D2020-01-22T15:27:35.675Z","view_time":null,"first_public_time":"$D2018-11-07T02:13:21.144Z","has_unpublished_edits":null,"fork":false,"stars":38,"starred":false,"owner":{"type":"team","id":"d2fd23101beb2a61","login":"bryangingechen","name":"Bryan Gin-ge Chen","avatar_url":"https://avatars-next.observableusercontent.com/73f0dccc0b7fc5c845e6a52a58e01a2ae432cc529aaada0d10ab602137e603c0","tier":"starter_2024"},"version":1323,"publish_version":1323,"role":null,"authored":false,"authors":[{"type":"individual","id":"5c13a1a27cf52564","login":"bryangingechen","name":"Bryan Gin-ge Chen","avatar_url":"https://avatars-next.observableusercontent.com/73f0dccc0b7fc5c845e6a52a58e01a2ae432cc529aaada0d10ab602137e603c0","tier":null}],"members":[{"type":"individual","id":"5c13a1a27cf52564","login":"bryangingechen","name":"Bryan Gin-ge Chen","avatar_url":"https://avatars-next.observableusercontent.com/73f0dccc0b7fc5c845e6a52a58e01a2ae432cc529aaada0d10ab602137e603c0","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":16,"collection":{"id":"938fbc4744e2d8f6","slug":"observable","title":"Observable","owner":{"id":"d2fd23101beb2a61","login":"bryangingechen","name":"Bryan Gin-ge Chen"}},"type":"notebook","body":{"titling":"auto","title":"\"Force Update Pattern\" in Observable","cells":[{"id":0,"value":"md`# \"Force Update Pattern\" in Observable`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"viewof nodes = {\n while (true) {\n const data = randomizeData();\n const disp = html`node labels: [${data.map(d => d.name).sort().join(\", \")}]`;\n disp.value = data;\n yield Promises.tick(2000, disp);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"height = 600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"alphabet = \"abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ\".split(\"\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"function randomizeData() {\n const d0 = jz.arr.shuffle(alphabet),\n d1 = [],\n d2 = [];\n for (let i = 0; i < jz.num.randBetween(1, alphabet.length); i++) {\n d1.push(d0[i]);\n }\n d1.forEach(d => d2.push({name: d, size: jz.num.randBetween(12, 72)}));\n return d2;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":497,"value":"simulation = {\n if (this) return this.nodes(nodes);//.alpha(1).restart();\n return d3.forceSimulation(nodes)\n .force(\"charge\", d3.forceManyBody().strength(-150))\n .force(\"forceX\", d3.forceX().strength(.1))\n .force(\"forceY\", d3.forceY().strength(.1))\n .force(\"center\", d3.forceCenter())\n .alphaTarget(1);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":345,"value":"imports=md`### Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"jz = require('jeezy@1')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":349,"value":"comments = md`## Comments on the original source`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":372,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":351,"value":"md`\n### Original Source\n\n${commentOnToggle()}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1050,"value":"commentOn(\n md`To begin, the references to external libraries are easy to convert to \\`require\\` cells in Observable (see the [**Imports:** section](#imports)):`, \n md`\n\\`\\`\\`html\n\n\n\\`\\`\\``,\n '')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":361,"value":"commentOn(md`\nThe first few variables in the main script are practically constants and can be placed in separate notebook cells.`,\nmd`\n\\`\\`\\`html\n\n\\`\\`\\`\n`,'')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":701,"value":"md`### Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1251,"value":"import {commentOn, commentOnToggle} from \"@bryangingechen/commenton\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":589,"value":"borderStyle = \"border:2px currentColor solid; border-radius:7px; display:inline-block; padding:7px\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":782,"value":"sourceStyle = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":544,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"md`## LICENSE`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":251,"value":"md`Released under the [GNU General Public License, version 3](https://opensource.org/licenses/GPL-3.0).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W39","stdlib":"1"}} 31:"$30:body"