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: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) `33:[] 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":false,"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`