2e:null 2f:["$","title",null,{"children":"General Update Pattern in Observable | Maureen Linke | Observable"}] 34: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 }35:T4cc,md`## Notes Job categories are based on Robert Manduca's [Job Dot Map](http://www.robertmanduca.com/projects/jobs.html). The U.S. Census' [Longitudinal Employer-Household Dynamics Workplace Area Characteristics dataset](https://lehd.ces.census.gov/data/) breaks down job counts by 2-digit NAICS code. This represents the primary industry of the employing company. I aggregated these categories as Manduca did as follows: - Manufacturing and Logistics: 11 (Agriculture and Forestry), 21 (Mining), 22 (Utilities), 23 (Construction), 31-33 (Manufacturing), 42 (Wholesale Trade), 48-49 (Transportation and Warehousing) - Professional Services: 51 (Information), 52 (Finance and Insurance), 53 (Real Estate), 54 (Professional, Scientific, and Technical Services), 55 (Management of Companies and Enterprises) - Healthcare, Education, and Government: 61 (Educational Services), 62 (Health Care), 81 (Other Services - largely Religious, Grantmaking, Civic, Professional, and Similar Organizations) - Retail, Hospitality, and Other Services: 44-45 (Retail Trade), 56 (Administrative and Support Services), 71 (Arts, Entertainment, and Recreation - largely Amusement, Gambling, and Recreation), 72 (Accomodation and Food Services) `36:[] 32:{"id":"1bc197577abad155","slug":"general-update-pattern-in-observable","title":"General Update Pattern in Observable","thumbnail":"f2bfdae8f9ccf4c46395c256fa9cb3624c4cb4377a8b9ca9e13bb11086591aaa","access_level":"public","create_time":"$D2019-08-09T15:12:06.399Z","update_time":"$D2019-08-12T16:52:38.686Z","view_time":null,"first_public_time":"$D2019-08-12T15:07:33.558Z","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":"7aaafa10ac6d1df4","login":"maureenlinke","name":"Maureen Linke","avatar_url":"https://avatars-next.observableusercontent.com/ef1417fea4b9fc286626190a37752eeb08c8dd1b737dc9165bb1413413ba1936","tier":"starter_2024"},"version":223,"publish_version":223,"role":null,"authored":false,"authors":[{"type":"individual","id":"f1c681bfa502caae","login":"maureenlinke","name":"Maureen Linke","avatar_url":"https://avatars-next.observableusercontent.com/ef1417fea4b9fc286626190a37752eeb08c8dd1b737dc9165bb1413413ba1936","tier":null}],"members":[{"type":"individual","id":"f1c681bfa502caae","login":"maureenlinke","name":"Maureen Linke","avatar_url":"https://avatars-next.observableusercontent.com/ef1417fea4b9fc286626190a37752eeb08c8dd1b737dc9165bb1413413ba1936","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"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","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","output":"$undefined","database":"$undefined"},{"id":25,"value":"viewof category = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":138,"value":"viewof numberOfBreaks = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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`