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:T45b,slide` **And now the new way**: ~~~js d3.select(svg).selectAll('rect') .data(newData, d => d) .join('rect') // takes care of enter & exit in one // returns the enter+update selection, // so we can set all our attributes on it: .attr('x', (d, i) => i * rectWidth) .attr('width', rectWidth) ... ~~~
If we want access to specific selections to operate on them: ~~~js d3.select(svg).selectAll('rect') .data(newData, d => d) .join( enter => { // return so it can be joined with update selection return enter.append('rect') // set attributes etc. on only enter selection }, update => update, exit => { // do something with exit selection } ) // .join() returns enter+update selection // so can also chain attributes here ... ~~~

You'll see in the next two exercises that the **new way is much more convenient**. But I wanted to teach you the old way first, because I find it's really important to first **understand where \`.join()\` came from**, and **how to think with the *enter*, *update*, and *exit* selections**. `34:T656,{ const rectWidth = 50 const svgHeight = 100 const svg = html`` const code = html`

`
  const button = html``
  
  function updateBars() {
    // select svg so that transition can be localized within selection
    const t = d3.select(svg).transition().duration(1000)
    
    // randomly generate an array of data
    const data = _.times(_.random(3, 8), i => _.random(0, 100))
    
    // update rectangles
    const rect = d3.select(svg)
      .selectAll('rect').data(data, d => d)
      .join(
        enter => {
          const rect = enter.append('rect')
            .attr('width', rectWidth)
            .attr('stroke-width', 3)
            .attr('stroke', 'plum')
            .attr('fill', 'pink')
            // overwrite the default so the animation looks better:
            .attr('x', (d, i) => i * rectWidth)
            .attr('y', svgHeight)
            .attr('height', 0)
          
          return rect
        },
        update => update,
        exit => {
          exit.transition(t)
            .attr('y', svgHeight)
            .attr('height', 0)
            .remove()
        },
      )
      // animate enter + update selection
      .transition(t)
      .attr('x', (d, i) => i * rectWidth)
      .attr('y', d => 100 - d)
      .attr('height', d => d)
    
    // update div with new data array:
    d3.select(code).text(JSON.stringify(data).replace(/\,/g, ', '))
  }
  
  updateBars()
  d3.select(button).on('click', updateBars)
  
  return html`
    ${svg}
    
    ${button} ${code}
    
  `
}35:T9f0,almostFinal = {
  // this line is a little bit of Observable magic to make sure that every time
  // our filter cells update, we use the existing SVG element instead of trashing it and creating a new one
  // if you're working in your index.html, you'd create your svg element and select it as we did before
  const element = this || scrollSVG(html``)
  
  const svg = d3.select(element).select('svg')
  
  // create transition animation localized to svg selection
  const t = svg.transition().duration(1000)
  
  const g = svg.selectAll('g')
    .data(filteredFlowers, d => d.title) // usually we'd want to use a unique ID
    .join(
      enter => {
        // with the enter selection, first create the group element
        const g = enter.append('g')
          // because we're going to be animating opacity & translate later on
          // we need to overwrite some defaults so the animation looks good
          .attr('opacity', 0)
          .attr('transform', (d, i) => `translate(${d.translate})`)
        
        // then create the petal paths & text
        g.selectAll('path')
          .data(d => _.times(d.numPetals, i =>
             Object.assign({}, d, {rotate: i * (360 / d.numPetals)})))
          .join('path') // takes care of enter+update+exit for the petals
          .attr('fill-opacity', 0.5)
          .attr('d', d => d.path)
          .attr('fill', d => d.color)
          .attr('stroke', d => d.color)
          // animate petal rotating & scaling up
          .transition(t)
          .attr('transform', d => `rotate(${d.rotate})scale(${d.scale})`)
        
        g.append('text')
          .attr('text-anchor', 'middle')
          .attr('dy', '.35em')
          .style('font-size', '.7em')
          .style('font-style', 'italic')
          .text(d => _.truncate(d.title, {length: 20}))
        
        // need to return the enter selection, this is what gets joined with update selection
        return g
      },
      // do nothing with the update (existing) selection
      update => update,
      exit => {
        // fade out before removing
        exit.transition(t)
          .attr('opacity', 0)
          .remove()
      }
    )
  
  // `g` is enter+update selection, so update translate on it
  g.transition(t)
    // after the flowers have been entered, animate its opacity to 1
    .attr('opacity', 1)
    // and when flowers are updated, animate to its new position
    .attr('transform', (d, i) => `translate(${d.translate})`)
  
  return element
}36:[{"id":"8df0507ee52b9ddcadc37fc45bb1292c72a7f1ab358087a2bf8b213ab5fcf3de7c525f991f2c025dbd7c04b72ef97e94094b149094275ca4583bb57ade57e5e8","href":"https://static.observableusercontent.com/files/8df0507ee52b9ddcadc37fc45bb1292c72a7f1ab358087a2bf8b213ab5fcf3de7c525f991f2c025dbd7c04b72ef97e94094b149094275ca4583bb57ade57e5e8","name":"update_enter@1.jpg","type":"image/jpeg","lastModified":1597209015221.465,"size":125205},{"id":"2f2b9634c2cd4b9b704c1344c430d39b4e18312164d43bc7f9b39c0790e989383afd801a5ce8e4f2cc1ada2bd29e556438240390c44802d53ecc9c4c95bd5ecd","href":"https://static.observableusercontent.com/files/2f2b9634c2cd4b9b704c1344c430d39b4e18312164d43bc7f9b39c0790e989383afd801a5ce8e4f2cc1ada2bd29e556438240390c44802d53ecc9c4c95bd5ecd","name":"update_update.jpg","type":"image/jpeg","lastModified":1597208334685.178,"size":122182},{"id":"5ac5acb99eb6a36f8d4449cfa5ed2290314f65ffd31886099c6a00fd2a83004ebaca86b6aa6ec5f69408599c5d627e3e471e51a28f3238578cabdd0e37d91e93","href":"https://static.observableusercontent.com/files/5ac5acb99eb6a36f8d4449cfa5ed2290314f65ffd31886099c6a00fd2a83004ebaca86b6aa6ec5f69408599c5d627e3e471e51a28f3238578cabdd0e37d91e93","name":"update_key.jpg","type":"image/jpeg","lastModified":1597202111135.1,"size":114670},{"id":"27223f3227446ec7341c5855bede29ce0c2e07a2c523fea390421d1c341ef9f9d676aa2a46059306cf5c044d81bc7df89f75b81fa26202e8167d6b0a263662af","href":"https://static.observableusercontent.com/files/27223f3227446ec7341c5855bede29ce0c2e07a2c523fea390421d1c341ef9f9d676aa2a46059306cf5c044d81bc7df89f75b81fa26202e8167d6b0a263662af","name":"update_exit@2.jpg","type":"image/jpeg","lastModified":1597208767035.914,"size":127379}]
2f:{"title":"6. Add filter by options","cells":[{"id":0,"value":"md`\n\nThis notebook was created as workshop material for the *Introduction to SVG and D3.js*  course on Frontend Masters.  Watch the [full video course here](https://frontendmasters.com/courses/d3/)!\n
\n\n# 6. Add filter by options\n\nWe've learned how to create DOM elements based on the data, but what if our data updates and we want the DOM to update to match?\n\nLet's look at how we might update our simple bar chart.  Here's the current data:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":279,"value":"barData","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":286,"value":"newData = [33, 62, 84, 10, 45, 22, 2, 60]","pinned":false,"hidden":false,"mode":"ojs"},{"id":541,"value":"md`\n\n## ✨ the enter-update-exit pattern\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":219,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"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":false,"hidden":false,"mode":"ojs"},{"id":334,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":413,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":442,"value":"updateBarsOld = (svg, data) => {\n  const rectWidth = 50\n  \n  // ✨ OUR CODE HERE\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":480,"value":"md`\nThen the **new way**:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":484,"value":"updateBarsNew = (svg, data) => {\n  const rectWidth = 50\n\n  // ✨ OUR CODE HERE\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":498,"value":"md`\nAnd if we wrote them correctly, the bars should show up here:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":508,"value":"answerOld = (svg, code, data) => {\n  const rectWidth = 50\n  \n  const rect = d3.select(svg).selectAll('rect')\n    .data(data, d => d)\n  \n  // exit\n  rect.exit().remove()\n  \n  // enter\n  const enter = rect.enter().append('rect')\n    .attr('width', rectWidth)\n    .attr('stroke-width', 3)\n    .attr('stroke', 'plum')\n    .attr('fill', 'pink')\n  \n  // enter + update\n  enter.merge(rect)\n    .attr('x', (d, i) => i * rectWidth)\n    .attr('y', d => 100 - d)\n    .attr('height', d => d)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":474,"value":"answerNew = (svg, code, data) => {\n  const rectWidth = 50\n\n  // update rectangles\n  d3.select(svg)\n    .selectAll('rect').data(data, d => d)\n    .join('rect')\n    // we can manipulate the attributes like before:\n    .attr('x', (d, i) => i * rectWidth)\n    .attr('y', d => 100 - d)\n    .attr('height', d => d)\n    .attr('width', rectWidth)\n    .attr('stroke-width', 3)\n    .attr('stroke', 'plum')\n    .attr('fill', 'pink')\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":550,"value":"md`\nWe did a lot of work in these exercises, but it might have felt a little bit dissatisfying because the end result looks the same as if we had completely wiped the SVG and redrawn everything.  So to really show the power of *enter-update-exit*, let's animate everything!\n\n## ✨ D3.js transitions\n\nTransitions are how we animate attributes and styles from one state to the next in D3.js.  This is really important for us to maintain **object constancy**, so that we can visually keep track of all the updates happening.\n\nD3.js has a lot of support for controlling the timing, easing, chaining, or even creating custom animations, but for today, we'll cover the simplest (but still powerful) way to use D3.js transitions.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":582,"value":"slide`\n~~~js\n// define the transition\nconst t = d3.transition().duration(1000)\n\nselection\n  // attributes or styles to transition FROM\n  .transition(t)\n  // attributes or styles to transition TO\n~~~\n\n
\n\nD3.js knows to animate the attributes or styles that comes **after** \\`.transition(t)\\`, and will use those as the values to transition **to**.  \n\n🚨  If there are no corresponding attribute declarations **before** \\`.transition(t)\\`, D3.js will use the SVG element's defaults to transition **from**.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":376,"value":"md`\n## 🔥 exercise time 🔥\n\nLet's put D3.js transitions into practice and have our simple bar chart animate on update:\n- entering bars should **animate up** (\\`y\\` and \\`height\\` are effected)\n- updating bars should **animate to their new positions** (\\`x\\` is effected)\n- exiting bars should **animate back down** (\\`y\\` and \\`height\\` are again effected)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":603,"value":"{\n  const rectWidth = 50\n  const svgHeight = 100\n  \n  const svg = html``\n  const code = html``\n  const button = html``\n  \n  function updateBars() {\n    // select svg so that transition can be localized within selection\n    const t = d3.select('svg').transition().duration(1000)\n    \n    // randomly generate an array of data\n    const data = _.times(_.random(3, 8), i => _.random(0, 100))\n    \n    // ✨ YOUR CODE HERE\n    \n    // update div with new data array:\n    d3.select(code).text(JSON.stringify(data).replace(/\\,/g, ', '))\n  }\n  \n  updateBars()\n  d3.select(button).on('click', updateBars)\n  \n  return html`\n    ${svg}\n    \n    ${button} ${code}\n    
\n  `\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":379,"value":"md`\nHere's what the end result should look like:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":355,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":182,"value":"md`\n## 🔥 exercise time 🔥\n\nLet's update our flower code so that they update correctly when we filter our movies dataset by genres or parental guidance ratings.  There will be two parts to this exercise:\n\n**Part 1**: use \\`.join()\\` to update our flowers every time the movies are filtered.\n\n**Part 2**: add animations so that on every update:\n1. the entering flowers will **fade in** (\\`opacity\\`)\n2. the updating flowers will **animate to their new positions** (\\`x\\` and \\`y\\` positions)\n3. the exiting flowers will **fade out** (\\`opacity\\` again)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"viewof filteredGenres = checkbox({\n  title: \"Genres\",\n  options: _.map(topGenresOther, genre => {\n    return {value: genre, label: genre}\n  }),\n  value: topGenresOther,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":64,"value":"viewof filteredPG = checkbox({\n  title: \"Parental Guidance Ratings\",\n  options: _.map(rated, d => {\n    return {value: d, label: d}\n  }),\n  value: rated,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":383,"value":"md`\nHere's what the end result should look like:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"filtered = _.filter(movies, d => {\n  // either the genre is in the filtered genres\n  return (_.includes(filteredGenres, d.genres[0]) ||\n    // OR the movie's genre isn't one of the top genres, and \"Other\" is toggled\n    (_.includes(filteredGenres, 'Other') && !_.includes(topGenres, d.genres[0]))) &&\n    // AND movie's pg rating is in filtered pg\n    _.includes(filteredPG, d.rated)\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":84,"value":"filteredFlowers = calculateData(filtered)","pinned":true,"hidden":false,"mode":"ojs"},{"id":427,"value":"{\n  // this line is a little bit of Observable magic to make sure that every time\n  // our filter cells update, we use the existing SVG element instead of trashing it and creating a new one\n  // if you're working in your index.html, you'd create your svg element and select it as we did before\n  const element = this || scrollSVG(html``)\n \n  const svg = d3.select(element).select('svg')\n  \n  // create transition animation localized to svg selection\n  const t = svg.transition().duration(1000)\n  \n  // ✨ YOUR CODE HERE\n  \n  return element\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"md `\n---\n\n\n  [7. Position film flowers by the genres they share →](https://observablehq.com/d/a25aafa93f553da6)\n
\n\n
\n
\n
\n
\n
\n
\n
\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"md`\n### ~appendix~\n`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":28,"value":"import {calculateData} from '2683357905679f61'","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"topGenresOther = _.union(topGenres, ['Other'])","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"import {form} from '@mbostock/form-input'","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"import {checkbox} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"slide_style","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"_ = require('lodash')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}