2b:null 2c:["$","title",null,{"children":"Introduction to d3.js (Swu) | Carlos Leon | Observable"}] 31:T437,md ` ## ✨ lessons & key takeaways 1. [Draw a flower petal on the screen](#drawing_petal) - SVG coordinate system - SVG paths and the d attribute 2. [Select existing petal(s) and bind movie data](#bind_data) - d3.select() and d3.selectAll() - selection.datum() and selection.data() - selection.attr() and selection.style() 3. [Create a petal for each movie](#petal_per_movie) - D3's enter-append pattern - SVG transforms (translate) 4. [Size each petal based on its movie's rating](#petal_size) - d3.min(), d3.max(), d3.extent() - D3 scales - SVG transforms (scale) 5. [Turn petals into flowers for each movie](#turn_into_flower) - Nesting - SVG transforms (rotate) 6. [Add filter by options](#enter_update_exit_pattern) - D3's update and exit patterns - D3 transitions 7. [Position film flowers by the genres they share](https://observablehq.com/d/a25aafa93f553da6) - D3 shapes and hierarchies - D3 force layout `32:T629,{ const recWidth = 50 const svgHeight = 100 const svg = html`` const code = html`
`
const button = html ``

function updateBars() {
  
  const t = d3.select(svg).transition().duration(1000)
  
  // randomly generate an array of data
  const data = _.times(_.random(3, 8), i => _.random(0, 100))

  //Your code here
  d3.select(svg).selectAll('rect')
    .data(data, d => d)
    .join(
      enter => {
        // create new rectangles in the DOM
        return enter.append('rect')
                  //attributes transition FROM 
                  .attr('width', recWidth)
                  .attr('height', 0)
                  .attr('x', (d, i) => i * recWidth)
                  .attr('y', svgHeight)
                  .attr('fill', 'pink')
                  .attr('stroke', 'plum')
                  .attr('stroke-width', 2)
      },
      update => update,
      exit => {
        exit.transition(t)
        // attributes trannstion TO
        .attr('height', 0)
        .attr('y', svgHeight)
      }
    )
    // enter + update selection
    .attr('width', recWidth)
    .transition(t)
    // attributes to transition TO
    .attr('x', (d, i) => i * recWidth)
    .attr('y', d => svgHeight - 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}
          
            `
}33:T49d,{
  const element = this || scrollSVG(html``)

  // create transition animation

  const t = d3.transition().duration(1000)

  const svg = d3.select(element).select('svg')

  // The code
  // most of cases use id as a key fuction, but in these example we use the title 
  const g = svg.selectAll('g')
  .data(filteredFlowers, d => d.title)
  .join(
    enter => {
      const g = enter.append('g')

      // create paths and texts
      g.selectAll('path')
      .data(d => _.times(d.numPetals, i => {
                          return {rotate: i * (360 / d.numPetals), ...d}
            }))
      .join('path') // enter + update + exit
      .attr('transform', d => `rotate(${d.rotate})scale(${d.scale})`)
      .attr('d', d => d.path)
      .attr('fill', d => d.color)
      .attr('stroke', d => d.color)
      .attr('fill-opacity', 0.5)
      .attr('stroke-width', 2)

      g.append('text')
      .attr('text-anchor', 'middle')
      .attr('dy', '.35em')
      .style('font-size', '.7em')
      .text(d => _.truncate(d.title, 15))

      return g
    }
  )
  .attr('transform', d => `translate(${d.translate})`)

  return element

}34:[{"id":"c6e7b073081b742480fc5aa27cfff3053cb69144c2b8e515dd535dc8b63b28b6dc77e5e3b5defeec9ba1806c45ad522e75e37bbe6d9740ab801d561017d53d00","href":"https://static.observableusercontent.com/files/c6e7b073081b742480fc5aa27cfff3053cb69144c2b8e515dd535dc8b63b28b6dc77e5e3b5defeec9ba1806c45ad522e75e37bbe6d9740ab801d561017d53d00","name":"d3_api.jpg","type":"image/jpeg","lastModified":1680099858414.955,"size":122619}]
2f:{"id":"6b977ce38479f8bc","slug":null,"title":"Introduction to d3.js (Swu)","thumbnail":"093ecc066c0aca18e713d004b1de1bccad835f5959ea3296cce211ba7ccc0dc3","access_level":"public","create_time":"$D2023-03-14T16:25:22.673Z","update_time":"$D2023-04-14T13:44:55.266Z","view_time":null,"first_public_time":"$D2023-03-14T16:25:22.673Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"490e7e0672a8f34a","login":"ccalobeto","name":"Carlos Leon","avatar_url":"https://avatars-next.observableusercontent.com/91b65313e71d8ba6cbf83ebb2b120dd2b3ad2c994afa491213201d652427923c","tier":"starter_2024"},"version":876,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"dcafb1b6644a8536","login":"ccalobeto","name":"calobeto","avatar_url":"https://avatars-next.observableusercontent.com/372381563b9a093ef65ea66c839c4b7504da532b5c9a533873fb8b04643d6244","tier":null}],"members":[{"type":"individual","id":"dcafb1b6644a8536","login":"ccalobeto","name":"calobeto","avatar_url":"https://avatars-next.observableusercontent.com/372381563b9a093ef65ea66c839c4b7504da532b5c9a533873fb8b04643d6244","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Introduction to d3.js (Swu)","cells":[{"id":193,"value":"# Introduction to d3.js (Swu)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":425,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":453,"value":"md `\n## ✨ data visualization ecosystem & resources\n\n- [D3.js API Reference](https://github.com/d3/d3/blob/master/API.md)\n- [Bl.ocks](https://bl.ocks.org/) → [Observable](http://observablehq.com/)\n- [D3.js Slack](https://d3-slackin.herokuapp.com/)\n- [Data Visualization Society](https://www.datavisualizationsociety.com/)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":407,"value":"drawing_petal = md`## 1. Draw a flower petal on the screen`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":462,"value":"SVG (scalar vector graphics)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":20,"value":"Pro and Cons \n- SVG: Easy to manipulate but performance don't work well with large data\n- HTML5 Canvas: very performance but hard to interact (draw a shape, build your custom events)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":22,"value":"### Draw a smile","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":26,"value":"html `\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"smilePath= `M25,25 L25,35 \n            M75,25 L75,35 \n            M15,60 C25,85 75,85 85,60`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"### Draw a petal","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":45,"value":"// translate(50,0) move the center\nhtml `\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"petalPath = `\nM0,85 L-20,100\nC-55,70 -40,50 -30,40\nL-20,60\nC-35,20 -10,25 0,0\nM0,85 L20,100\nC55,70 40,50 30,40\nL20,60\nC35,20 10,25 0,0\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"bind_data = md`## 2. Select existing petal(s) and bind movie data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":496,"value":"slide`\n\n${Object.assign(await FileAttachment(\"d3_api.jpg\").image(), {\n\n})}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":500,"value":"html `\n${genre}
 `  \n  })}\n\n`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"colors","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"movies","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":" ${textcolor('D3:', 'red')} Things to look out when you entering and appending:\n - The data you pass must be an array (object, text etc)\n - The *selector* in selectAll(*selector*) must match what is appended","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":264,"value":"importing the path from library","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":256,"value":"pathObj","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":165,"value":"colors['Action']","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"movies","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":523,"value":"Shows 5/135 objects","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":158,"value":"{\n  const svg = html`\n    \n  `\n  \n  const path = d3.select(svg).selectAll('path')\n    .data(movies)\n    .attr('fill', d => colors[d.genres[0]] || colors.Other)\n    .attr('fill-opacity', 0.5)\n    .attr('stroke', d => colors[d.genres[0]] || colors.Other)\n    .attr('stroke-width', 2)\n \n  return svg\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":525,"value":"petal_per_movie = md`## 3. Create a petal for each movie`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":537,"value":"slide`\n# ⚡️\n### D3.js stands for *data-driven documents* because\n### we're letting our *data* drive what is created in the *DOM*.\n\n
\n
\n🚨 Things to look out for when entering and appending:\n- The data passed in *must* be an array\n- The *selector* in selectAll(*selector*) *must* match what is appended.  \n  For example, if the *selector* is a class name instead of element tag:\n  \\`\\`\\`js\nselection.selectAll('.bar')\n    .data(data).enter().append('rect')\n    .classed('bar', true)\n  \\`\\`\\`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":543,"value":"### exercise","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":288,"value":"svgHeight","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":371,"value":"pathObj","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":381,"value":"Correct PG-13","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":375,"value":"pathObj['PG-13'] = \"M0,0 C50,40 50,70 20,100 L0,85 L-20,100 C-50,70 -50,40 0,0\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":282,"value":"{\n  \n  const svg = html ``\n  \n  d3.select(svg).selectAll('path')\n  .data(movies).enter().append('path')\n  // calculateGridPos => (x,y) => translate(x, y)\n  .attr('transform', (d, i) => `translate(${calculateGridPos(i)})`)\n  .attr('d', d => pathObj[d.rated])\n  .attr('fill', d => colorObj[d.genres[0]] || colorObj.Other)\n  .attr('stroke', d => colorObj.Other)\n  .attr('fill-opacity', 0.8)\n  .attr('stroke-width', 2) \n  \n  return scrollSVG(svg)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":328,"value":"calculateGridPos(15)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":552,"value":"### transform = `traslate(168, 89)` sets the coordinate system","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":351,"value":"petal_size = md`## 4. Size each petal based on it's movie rating`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":564,"value":"slide`\n\n### continuous → continuous\n- [scaleLinear()](https://github.com/d3/d3-scale#linear-scales)\n- [scaleLog()](https://github.com/d3/d3-scale/tree/v2.2.2#log-scales)\n- [scaleSqrt()](https://github.com/d3/d3-scale/tree/v2.2.2#scaleSqrt)\n- [scaleTime()](https://github.com/d3/d3-scale/tree/v2.2.2#time-scales)\n\n### continuous → discrete\n- [scaleQuantize()](https://github.com/d3/d3-scale/tree/v2.2.2#quantize-scales)  \n\n### discrete → discrete\n- [scaleOrdinal()](https://github.com/d3/d3-scale/tree/v2.2.2#ordinal-scales)\n\n### discrete → continuous\n- [scaleBand()](https://github.com/d3/d3-scale/tree/v2.2.2#band-scales)\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":567,"value":"slide`\n---\n### How to use scales\n\n~~~js\nconst scale = d3.scaleLinear()\n  .domain([min, max]) // raw data\n  .range([min, max]) // visual channel\n\nscale(someValue) // returns translated value\n~~~\n\n
\nTo get min & max values from data:\n~~~js\nd3.min(data, d => d[someAttr])\nd3.max(data, d => d[someAttr])\nd3.extent(data, d => d[someAttr]) // returns [min, max]\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":580,"value":"topGenres","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":587,"value":"movies[0]['genres'][0]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":609,"value":"petalPaths[2] = \"M0,0 C50,40 50,70 20,100 L0,85 L-20,100 C-50,70 -50,40 0,0\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":617,"value":"petalPaths","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":571,"value":"flowers = {\n\n  // genre -> color\n  const colorScale = d3.scaleOrdinal()\n    .domain(topGenres)\n    .range(petalColors)\n    .unknown(colorObj.Other)\n\n  // rated -> path\n  const pathScale = d3.scaleOrdinal()\n    .range(petalPaths)\n\n  // rating -> scale\n  const minMaxRating = d3.extent(movies, d => d.rating)\n  const sizeScale = d3.scaleLinear()\n    .domain(minMaxRating)\n    .range([0.2, 0.75])\n\n  // votes -> numPerls\n  const minMaxVotes = d3.extent(movies, d => d.votes)\n  const numPetalScale = d3.scaleQuantize()\n    .domain(minMaxVotes)\n    .range([5, 6, 7, 8, 9, 10]) // _.range(5, 11)\n  \n  return _.map(movies, (d, i) => {\n   return {\n     path: pathScale(d.rated),\n     color: colorScale(d.genres[0]),\n     scale: sizeScale(d.rating),\n     numPetals: numPetalScale(d.votes),\n     title: d.title,\n     translate: calculateGridPos(i),\n   } \n  })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":628,"value":" ${textcolor('D3:', 'red')} Translate first and then scale","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":386,"value":"{\n  \n  const svg = html ``\n  \n  d3.select(svg).selectAll('path')\n  .data(flowers).enter().append('path')\n  // calculateGridPos => (x,y) => translate(x, y)\n  .attr('transform', (d, i) => `translate(${d.translate})scale(${d.scale || 1})`)\n  .attr('d', d => d.path)\n  .attr('fill', d => d.color)\n  .attr('stroke', d => d.color)\n  .attr('fill-opacity', 0.8)\n  .attr('stroke-width', 2) \n  \n  return scrollSVG(svg)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":632,"value":"turn_into_flower = md`## Turn petals into flowers for each movie`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":683,"value":" ${textcolor('D3:', 'red')} De careful in your designs, translate first and then rotate. The other way you will miss the coordinates.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":639,"value":"{\n  const svg = html``\n\n  //create our group element \n  const g = d3.select(svg).selectAll('g')\n              .data(flowers).enter().append('g')\n              .attr('transform', (d, i) => `translate(${d.translate})`)\n\n  // crear our petal paths\n  g.selectAll('path')\n    // construye el atributo rotate\n    .data(d => {\n      return _.times(d.numPetals, i => \n                     Object.assign({}, d, {rotate: i * (360 / d.numPetals)}))\n    }).enter().append('path')\n    .attr('transform', d => `rotate(${d.rotate})scale(${d.scale})`)\n    .attr('d', d => d.path)\n    .attr('fill', d => d.color)\n    .attr('stroke', d => d.color)\n    .attr('fill-opacity', 0.5)\n    .attr('stroke-width', 2)\n\n  g.append('text')\n      .text(d => _.truncate(d.title, 18))\n      .style('font-size', '.7em')\n      .attr('text-anchor', 'middle')\n      .attr('dy', '.35em')\n      .style('font-style', 'italic')\n  \n  return scrollSVG(svg)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":689,"value":"enter_update_exit_pattern = md`## 6. Add filter by options`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":697,"value":"exercise time","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":702,"value":"updateBarsNew = (svg, data) => {\n  const rectWidth = 50\n\n  // ✨ OUR CODE HERE\n  const rect = d3.select(svg).selectAll('rect')\n    .data(data, d => d)\n    .join('rect')\n    .attr('x', (d, i) => i *rectWidth)\n    .attr('y', d => 100 - d)\n    .attr('height', d => d)\n    .attr('width', rectWidth)\n    .attr('fill', 'pink')\n    .attr('stroke', 'plum')\n    .attr('stroke-width', 2)\n  }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":700,"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    new way:
\n    ${newSVG}\n    \n    ${button} ${code}\n    \n  `\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":717,"value":"#### Transitions\nExercise: Animate bar charts\n- entering bars should be animate up(y and height are affected)\n- updating bars should be animate to their new positions (x is affected)\n- exiting bars should be animate back down(y and height are gain affected) ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":722,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":772,"value":"#### filter our movie chart\n1.**Part 1**: use .join() to update our flowers every time the movies are filtered.\n2.**Part 2**: add animations: \n    - the entering flowers will fade in opacity\n    - the updating flower will animate to their new positions\n    - the exiting flower will fade out in opacity\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":801,"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":818,"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":789,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":822,"value":"filtered = _.filter(movies, d => {\n  return (_.includes(filteredGenres, d.genres[0]) || \n          (_.includes(filteredGenres, 'Other') && !_.includes(topGenres, d.genres[0]))) &&\n          _.includes(filteredPG, d.rated)\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":829,"value":"filteredFlowers = calculateData(filtered)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":806,"value":"topGenresOther = _.union(topGenres, [\"Other\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":447,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":136,"value":"import {movies, colorObj, pathObj, slide, slide_style, scrollSVG, svgHeight, calculateGridPos, petalColors, topGenres, rated, petalPaths} from \"@sxywu/workshop-utility-functions\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":152,"value":"import {form} from \"@mbostock/form-input\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"import {textcolor} from \"@observablehq/text-color-annotations-in-markdown\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":831,"value":"import {calculateData} from '2683357905679f61'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":814,"value":"import {checkbox} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}}
30:"$2f:body"