25:["$","title",null,{"children":"General Update Pattern in Observable | Denisse Carvajal Bruce | Observable"}] 49: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 }4a:[] 29:{"id":"86150f673e075001","slug":null,"title":"General Update Pattern in Observable","thumbnail":"87458d6fd280c24b9e547ed1a8c3ee55690943b4639d1e4f04f62716adf63a44","access_level":"public","create_time":"$D2023-12-19T21:00:22.407Z","update_time":"$D2023-12-19T21:00:22.407Z","view_time":null,"first_public_time":"$D2023-12-19T21:00:22.407Z","has_unpublished_edits":null,"fork":{"id":"43c11a3ecf359efc","slug":"general-update-pattern-in-observable","title":"General Update Pattern in Observable","owner":{"id":"38569aaf9cf67d70","login":"clhenrick","name":"Chris Henrick"}},"stars":0,"starred":false,"owner":{"type":"team","id":"3df85993da5ddb27","login":"denissecarvajal","name":"Denisse Carvajal Bruce","avatar_url":"https://avatars-next.observableusercontent.com/c793ca7102623c43be8a5456e1f20f5afacd72daf1acbbd61b16738bdc08824c","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":227,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"fd0cd1b3515e4a3c","login":"denissecarvajal","name":"Denisse Carvajal Bruce","avatar_url":"https://avatars-next.observableusercontent.com/c793ca7102623c43be8a5456e1f20f5afacd72daf1acbbd61b16738bdc08824c","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"fd0cd1b3515e4a3c","login":"denissecarvajal","name":"Denisse Carvajal Bruce","avatar_url":"https://avatars-next.observableusercontent.com/c793ca7102623c43be8a5456e1f20f5afacd72daf1acbbd61b16738bdc08824c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"viewof category = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"viewof numberOfBreaks = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"$49","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"md`## Same Chart without the GUP applied:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"chart = {\n/* the following code \"works\", but without the animated transitions */\n\n const svg = d3.select(html`