31:T5db,beeswarm = { let el = this const t = d3.transition().duration(2000) if (!el) { el = DOM.svg(width, height) const svg = d3.select(el) el.g = svg.append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`) el.g.append("g") .classed("axis axis--x", true) .attr("transform", `translate(0, ${height - margin.top - margin.bottom})`) .call(xAxis) el.g.append("g") .classed("circles", true) // create an empty selection from data binding el.circles = el.g.select("g.circles") .selectAll("circle") .data(simulation.nodes(), d => d.id) // render the circles el.circles.enter() .append("circle") .attr("cx", d => d.x) .attr("cy", d => d.y) .attr("r", 3) .attr("fill", d => color(d.value)) .attr("stroke", "#e2e2e2") .attr("stroke-width", 0.7) } else { el.g.select("g.axis.axis--x") .transition(t) .call(xAxis) // bind new data to existing circles, store selection in a local variable const update = d3.select(el) .selectAll("circle") .data(simulation.nodes(), d => d.id) // update existing circles position and fill color update .transition(t) .attr("cx", d => d.x) .attr("cy", d => d.y) .attr("fill", d => color(d.value)) // set the notebook cell `circles` property to the updated selection el.circles = update } return el }32:[] 2f:{"title":"General Update Pattern in Observable","cells":[{"id":0,"value":"md`# General Update Pattern in Observable\n\nTesting D3's [general update pattern](https://bl.ocks.org/mbostock/3808218) in Observable using a Beeswarm Plot. \n\n_A big thanks to the community for [the help debugging this notebook](https://talk.observablehq.com/t/are-animated-transitions-possible-using-d3s-general-update-pattern/812)!_\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"md`The job categories are: _${categories.map(d => d.label).join(\", \")}_. \n\nThe current selected category is: **${categories.find(d => d.value === category).label}**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"viewof category = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":120,"value":"md`## Beeswarm Plot\n\nSimilar to a _Number Line_, a Beeswarm Plot visulizes the distribution of the data: each census tract's value for the currently selected category is plotted along the x axis and moved vertically to prevent overlap. The circles are colored according to where they fall within a _Natural Breaks_ classification scheme using [\\`d3.scaleCluster\\`](https://github.com/schnerd/d3-scale-cluster). Try changing the number of breaks from its current value, **${numberOfBreaks}**\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":138,"value":"viewof numberOfBreaks = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":84,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":214,"value":"md`## Same Chart without the GUP applied:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":216,"value":"chart = {\n/* the following code \"works\", but without the animated transitions */\n\n const svg = d3.select(html`