2b:null 2c:["$","title",null,{"children":"Enter-update-exit pattern | parshwa mehta | Observable"}] 31:T543,slide` ## \`✨.data(data, key)\` The \`.data()\` function is powerful because it not only binds data to our *selection* and calculates the *enter* selection, it also calculates our *update* and *exit* selection as well. To help with the calculation, we'll often times pass in a **key function**: ${Object.assign(await FileAttachment("update_key.jpg").image(), { alt: '', style: 'width: 100%; max-width: 640px;', })}

**↑** this is a pretty trivial example because we're using the bound integer datum as the key. Usually we'd pass in an unique ID (within an object) and use that.

With the **key function**, D3.js calculates the *update*, *exit*, and *enter* selections: ${Object.assign(await FileAttachment("update_update.jpg").image(), { alt: '', style: 'width: 100%; max-width: 640px;', })}
${Object.assign(await FileAttachment("update_exit@2.jpg").image(), { alt: '', style: 'width: 100%; max-width: 640px;', })}
${Object.assign(await FileAttachment("update_enter@1.jpg").image(), { alt: '', style: 'width: 100%; max-width: 640px;', })}

* If a key function isn't provided, D3.js defaults to using the _integer_ as the key.

**↓** Here is what the D3 selection looks like with the new data bound: `32:T498,slide` ~~~js const rect = d3.select(svg).selectAll('rect') .data(newData, d => d) ~~~ Now that we have all the selections calculated, let's update the DOM. There are actually two valid ways to do it: an old way, and a new way.

**Let's start with the old way:** 1. grab the *exit* selection with \`rect.exit()\`, and remove those elements from the DOM: ~~~js rect.exit().remove() ~~~ 2. create new elements with the *enter* selection: ~~~js const enter = rect.enter().append('rect') // set attributes that don't depend on data: .attr('width', rectWidth) .attr('fill', 'pink') ... ~~~ 3. **merge** the *enter* and *update* selection (the *update* selection is stored in \`rect\` since it's what \`.data()\` returns, no need for an accessor function). The ***enter*+*update* selection together represents what should be in the DOM to match the new data**, and thus we want to set attributes that change when data changes: ~~~js enter.merge(rect) // enter + update selections // set attributes that change when data changes: .attr('x', (d, i) => i * rectWidth) .attr('y', d => 100 - d) .attr('height', d => d) ~~~ `33:[{"id":"5ac5acb99eb6a36f8d4449cfa5ed2290314f65ffd31886099c6a00fd2a83004ebaca86b6aa6ec5f69408599c5d627e3e471e51a28f3238578cabdd0e37d91e93","href":"https://static.observableusercontent.com/files/5ac5acb99eb6a36f8d4449cfa5ed2290314f65ffd31886099c6a00fd2a83004ebaca86b6aa6ec5f69408599c5d627e3e471e51a28f3238578cabdd0e37d91e93","name":"update_key.jpg","type":"image/jpeg","lastModified":1607255861807.365,"size":114670},{"id":"2f2b9634c2cd4b9b704c1344c430d39b4e18312164d43bc7f9b39c0790e989383afd801a5ce8e4f2cc1ada2bd29e556438240390c44802d53ecc9c4c95bd5ecd","href":"https://static.observableusercontent.com/files/2f2b9634c2cd4b9b704c1344c430d39b4e18312164d43bc7f9b39c0790e989383afd801a5ce8e4f2cc1ada2bd29e556438240390c44802d53ecc9c4c95bd5ecd","name":"update_update.jpg","type":"image/jpeg","lastModified":1607255861807.365,"size":122182},{"id":"27223f3227446ec7341c5855bede29ce0c2e07a2c523fea390421d1c341ef9f9d676aa2a46059306cf5c044d81bc7df89f75b81fa26202e8167d6b0a263662af","href":"https://static.observableusercontent.com/files/27223f3227446ec7341c5855bede29ce0c2e07a2c523fea390421d1c341ef9f9d676aa2a46059306cf5c044d81bc7df89f75b81fa26202e8167d6b0a263662af","name":"update_exit@2.jpg","type":"image/jpeg","lastModified":1607255861807.365,"size":127379},{"id":"8df0507ee52b9ddcadc37fc45bb1292c72a7f1ab358087a2bf8b213ab5fcf3de7c525f991f2c025dbd7c04b72ef97e94094b149094275ca4583bb57ade57e5e8","href":"https://static.observableusercontent.com/files/8df0507ee52b9ddcadc37fc45bb1292c72a7f1ab358087a2bf8b213ab5fcf3de7c525f991f2c025dbd7c04b72ef97e94094b149094275ca4583bb57ade57e5e8","name":"update_enter@1.jpg","type":"image/jpeg","lastModified":1607255861807.365,"size":125205}] 2f:{"id":"10de261c9831ac9c","slug":"enter-update-exit-pattern","title":"Enter-update-exit pattern","thumbnail":"a53455252f5b333ac070cb68dd03283ee6f345bd0ca60371f474c3687943aedc","access_level":"public","create_time":"$D2020-12-06T11:57:41.807Z","update_time":"$D2021-10-21T21:23:35.564Z","view_time":null,"first_public_time":"$D2020-12-06T12:52:21.896Z","fork":{"id":"681e1e3eb92d6f08","slug":"6-add-filter-by-options","title":"6. Add filter by options","owner":{"id":"dd2028e442ef0aed","login":"sxywu","name":"Shirley Wu"}},"stars":1,"starred":false,"owner":{"type":"team","id":"83eccca209618a73","login":"parshwamehta13","name":"parshwa mehta","avatar_url":"https://avatars-next.observableusercontent.com/d99af472eb1fbed2fb91f4b964431150c55f9dfea780591339a9a0c23354e217","tier":"starter_2024"},"version":797,"publish_version":797,"role":null,"authored":false,"authors":[{"type":"individual","id":"05e7852b4131104b","login":"parshwamehta13","name":"parshwa mehta","avatar_url":"https://avatars-next.observableusercontent.com/d99af472eb1fbed2fb91f4b964431150c55f9dfea780591339a9a0c23354e217","tier":null}],"members":[{"type":"individual","id":"05e7852b4131104b","login":"parshwamehta13","name":"parshwa mehta","avatar_url":"https://avatars-next.observableusercontent.com/d99af472eb1fbed2fb91f4b964431150c55f9dfea780591339a9a0c23354e217","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"title":"Enter-update-exit pattern","cells":[{"id":0,"value":"md`\n# Enter-update-exit pattern\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":279,"value":"barData","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":283,"value":"md`\nAnd let's say this is the new data we want to update to:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":286,"value":"newData = [33, 62, 84, 84, 10, 45, 22, 2, 60]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":541,"value":"md`\n\n## ✨ the enter-update-exit pattern\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":219,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":764,"value":"newData","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":666,"value":"barData","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":260,"value":"rect = {\n const svg = html``\n \n // bind previous data and create rectangles\n d3.select(svg).selectAll('rect')\n .data(barData).enter().append('rect')\n \n return d3.select(svg).selectAll('rect').data(newData, d => d)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":334,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":413,"value":"slide`\n**And now the new way**:\n\n~~~js\nd3.select(svg).selectAll('rect')\n .data(newData, d => d)\n .join('rect') // takes care of enter & exit in one\n // returns the enter+update selection,\n // so we can set all our attributes on it:\n .attr('x', (d, i) => i * rectWidth)\n .attr('width', rectWidth)\n ...\n~~~\n\n
\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":331,"value":"md`\n## 🔥 exercise time 🔥\n\nLet's first try updating the simple bar chart the **old way**:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":442,"value":"updateBarsOld = (svg, data) => {\n const rectWidth = 50\n \n // ✨ OUR CODE HERE\n const rect = d3.select(svg).selectAll('rect').data(data);\n rect.exit().remove();\n const enter = rect.enter().append('rect').attr('width', 50).attr('fill', 'beige').attr('strokeWidth', 1).attr('stroke', 'black')\n enter\n .merge(rect)\n .attr('height', d => d)\n .attr('x', (d, i) => i * rectWidth)\n .attr('y', d => 100 - d)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":480,"value":"md`\nThen the **new way**:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":484,"value":"updateBarsNew = (svg, data) => {\n const rectWidth = 50\n\n // ✨ OUR CODE HERE\n d3\n .select(svg)\n .selectAll('rect')\n .data(data, d => d)\n .join('rect')\n .attr('width', rectWidth)\n .attr('fill', 'pink')\n .attr('height', d => d)\n .attr('x', (d, i) => i * rectWidth)\n .attr('y', d => 100 - d)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":498,"value":"md`\nAnd if we wrote them correctly, the bars should show up here:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":492,"value":"{\n const oldSVG = html``\n const newSVG = html``\n const code = html`

`\n  const button = html``\n  \n  d3.select(button).on('click', d => {\n    // randomly generate an array of data\n    const data = _.times(_.random(3, 8), i => _.random(0, 100))\n\n    updateBarsOld(oldSVG, data)\n    updateBarsNew(newSVG, data)\n    \n    // update div with new data array:\n    d3.select(code).text(JSON.stringify(data).replace(/\\,/g, ', '))\n  })\n  \n  return html`\n    old way:
\n    ${oldSVG}\n    new way:
\n    ${newSVG}\n    \n    ${button} ${code}\n    
\n  `\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":711,"value":"md`## Exercise 2 - Update data in the bar chart`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":745,"value":"x1 = d3.scaleBand()\n      .domain(fruits.map(d => d.name))\n      .range([margin.left, width - margin.right])\n      .padding(0.1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":749,"value":" y1 = d3.scaleLinear()\n      .domain([0, 100])\n      .range([height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":752,"value":"xAxis1 = g =>\n    g.attr(\"transform\", `translate(0,${height - margin.bottom})`)\n    .call(d3.axisBottom(x1))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":754,"value":"yAxis1 = g => \n    g.attr(\"transform\", `translate(${margin.left},0)`)\n    .call(d3.axisLeft(y1))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":734,"value":"updateBarChart = (svg, data) => {\n  d3.select(svg)\n      .selectAll('rect')\n      .data(data, d => d.count)\n      .join('rect')\n      .attr('x', d => {\n        // console.log(d.name, x1(d.name))\n        return x1(d.name)\n      })\n      .attr('y', d => y1(d.count))\n      .attr('width', x1.bandwidth())\n      .attr('height', d => y1(0) - y1(d.count))\n      .attr('fill', 'plum')\n    \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":709,"value":"{\n  const barChartWrapper = html``\n  const button = html``\n \n  \n  d3.select(button).on('click', d => {\n    // randomly generate an array of data\n    const data = _.map(fruits, fruit => {\n      return {\n        ...fruit,\n        count: _.random(0, 100)\n      }\n    })\n    updateBarChart(barChartWrapper, data)\n    d3.select(barChartWrapper)\n    .append('g').call(xAxis1)\n  \n  d3.select(barChartWrapper)\n    .append('g').call(yAxis1)\n    \n    // update div with new data array:\n    d3.select(code).text(JSON.stringify(data, null, 4))\n  })\n  \n  return html`\n    Bar Chart
\n    ${barChartWrapper}\n    \n    ${button} ${code}\n    \n  `\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"md`\n### ~appendix~\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"import {\n  movies, slide, slide_style, topGenres, rated,\n  svgHeight, scrollSVG, barData,\n} from '@sxywu/workshop-utility-functions'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"import {calculateData} from '2683357905679f61'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"topGenresOther = _.union(topGenres, ['Other'])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"import {form} from '@mbostock/form-input'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"import {checkbox} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"slide_style","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"_ = require('lodash')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":717,"value":"width = 640","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":719,"value":"height = 202","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":721,"value":"margin = ({top: 20, right: 20, bottom: 20, left: 40})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":724,"value":"fruits = [\n  {name: \"🍊\", count: 21},\n  {name: \"🍇\", count: 13},\n  {name: \"🍏\", count: 8},\n  {name: \"🍌\", count: 5},\n  {name: \"🍐\", count: 3},\n  {name: \"🍋\", count: 2},\n  {name: \"🍎\", count: 1},\n  {name: \"🍉\", count: 1}\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}}
30:"$2f:body"