31:T85e,{ const margin = {top: 36, left: 0} const svg = html`` const xScale = d3.scaleBand() .domain(_.keys(data)) .range([0, example.width]) .padding(example.padding) const max = d3.max(data, d => d) const yScale = d3.scaleLinear() .domain([0, max]) .range([example.height, 0]) const group = d3.select(svg).append('g') .attr('transform', `translate(${margin.left}, ${margin.top})`) // bars group.selectAll('rect') .data(data).enter().append('rect') .attr('x', (d, i) => xScale(i)) .attr('y', d => yScale(d)) .attr('height', d => example.height - yScale(d)) .attr('width', xScale.bandwidth()) .attr('stroke-width', 3) .attr('stroke', 'plum') .attr('fill', 'pink') const text = group.selectAll('text') .data(data).enter().append('text') .attr('y', d => yScale(d)) .style('font-family', 'monospace') .style('font-size', '.75em') text.selectAll('tspan') .data((d, i) => { const x = xScale(i) + xScale.bandwidth() / 2 return [{ x, dy: '-1.5em', text: `x: ${_.round(xScale(i))}px`, // text: `xScale(${i})//${_.round(xScale(i))}px`, }, { x, dy: '1.1em', text: `y: ${_.round(yScale(d))}px`, // text: `yScale(${d})//${_.round(yScale(d))}px`, }] }).enter().append('tspan') .attr('x', d => d.x) .attr('text-anchor', 'middle') .attr('dy', d => d.dy) .text(d => d.text) // return html` // ${svg} //

${data.map((d, i) => {
//     return `
// xScale(${i}) // x: ${_.round(xScale(i))}
// yScale(${d}) // y: ${_.round(yScale(d))}
//     ` 
//   })}

// ` return svg }32:T477,md`

const xScale = d3.scaleBand()
  .domain(d3.keys(data)) // sets domain to: ${JSON.stringify(_.keys(data)).replace(/\,/g, ', ')}
// Ref: https://github.com/d3/d3-collection
// d3.keys() function belong to d3.collection API module, but now it is deprecation to use
// please use JavaScript’s built-in Map, Set and Object classes instead of d3-collection’s corresponding methods 
// in this example we can use array.keys() instead, so we can use data.keys() get the string array of the indexes
  .range([0, width]) // [0 (left), ${example.width}px (right)]
  .padding(${_.round(example.padding, 2)})

const max = d3.max(data, d => d) // returns ${d3.max(data, d => d)}

const yScale = d3.scaleLinear()
  .domain([0, max])
  .range([height, 0]) // [${example.height}px (bottom), 0 (top)]

d3.select(svg).selectAll('rect')
  .data(data).enter().append('rect')
  .attr('x', (d, i) => xScale(i))
  .attr('y', d => yScale(d))
  // ...set other attributes

`33:T779,flowers = { // movie genre → `color` (color of petals) // array of top genres: `topGenres` // array of colors to map to: `petalColors` const colorScale = d3.scaleOrdinal() .domain(topGenres) .range(petalColors) .unknown(colorObj.Other); // if movie has other genre it map to colorObj.Other // `rated` → `path` (type of flower petal) // array to map to: `petalPaths` const pathScale = d3.scaleOrdinal() .range(petalPathsNew); // only set the range, using petalPathsNew instead, probably something goes wrong in petalPath // when we using this Ordinal Scale // everytime when input a new value, it will choose an element whithin the range in order by index, if the next input is a new value, it will map to the next element whithin the range (which hasn't map to other input value yet) // d3 will choose the same element within the range when the input is the same // depending on this rull, d3 can auto assign the range element to different value input, we don't explicit decide the mapping between the domain and the range, seems more flexible and convenient // `rating` → `scale` (size of petals) let minMaxRating = d3.extent(movies, d => d.rating); const sizeScale = d3.scaleLinear() // if the raw data vary from small number to very large number we can use scale log instead .domain(minMaxRating) .range([0.1, 0.65]); // `votes` → `numPetals` (number of petals) const minMaxVotes = d3.extent(movies, d => d.votes); const numScale = d3.scaleQuantize() .domain(minMaxVotes) .range(_.range(5, 10)); // [5, 6, 7, 8, 9, 10] return _.map(movies, (d, i) => { return { title: d.title, color: colorScale(d.genres[0]), path: pathScale(d.rated), scale: sizeScale(d.rating), numPetals: numScale(d.votes), translate: calculateGridPos(i), // util function that returns [x, y] } }) }34:[] 2f:{"title":"Film Flower - Part 2 Scale","cells":[{"id":0,"value":"md`\n# Film Flower - Part 2 Scale\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1001,"value":"md`\n## ✨ D3.js scales (I use often)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":998,"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`","pinned":false,"hidden":false,"mode":"ojs"},{"id":235,"value":"slide`\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"},{"id":263,"value":"md`\n## ✨ D3.js scales in practice\n\nSo far, our bar chart has had a fixed dimension—250px by 100px—that perfectly fit our simple data array of five random numbers between 0 and 100. But let's make this more flexible with D3.js scales, so that we can have any number of bars that fit any dimensions of our choosing. Our bar chart is also upside down right now, so let's fix that with D3.js scales too*!\n\n

* Calculating \\`y-value\\` is probably the most common reason I use D3.js scales.

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":273,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":657,"value":"viewof bars = form(html`\n\n`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":366,"value":"viewof example = form(html`\n\n`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":644,"value":"data = _.times(bars.length, i => _.random(0, 100))","pinned":false,"hidden":false,"mode":"ojs"},{"id":278,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":529,"value":"md`\n## 🔥 exercise time 🔥\n\nWe now have all the tools to convert our raw \\`movies\\` data into the visual channels we need to render (let's call this new array \\`flowers\\`):\n- Parental Guidance rating → type of flower petal\n- Number of IMDB votes → number of petals\n- IMDB rating out of 10 → size of petals\n- Movie genre → color of petals\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":689,"value":"movies","pinned":true,"hidden":false,"mode":"ojs"},{"id":974,"value":"topGenres","pinned":true,"hidden":false,"mode":"ojs"},{"id":982,"value":"petalColors","pinned":true,"hidden":false,"mode":"ojs"},{"id":985,"value":"petalPaths // something wrong","pinned":true,"hidden":false,"mode":"ojs"},{"id":1008,"value":"petalPathsNew = [\n \"M0 0 C50 50 50 100 0 100 C-50 100 -50 50 0 0\",\n \"M-35 0 C-25 25 25 25 35 0 C50 25 25 75 0 100 C-25 75 -50 25 -35 0\",\n \"M0,0 C50,40 50,70 20,100 L0,85 L-20,100 C-50,70 -50,40 0,0\",\n \"M0 0 C50 25 50 75 0 100 C-50 75 -50 25 0 0\"\n];","pinned":false,"hidden":false,"mode":"ojs"},{"id":759,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":1016,"value":"flowers","pinned":true,"hidden":false,"mode":"ojs"},{"id":532,"value":"{\n const svg = html``\n \n d3.select(svg).selectAll('path')\n .data(flowers).enter().append('path')\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('fill-opacity', 0.75)\n .attr('stroke', d => d.color)\n \n return scrollSVG(svg)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":796,"value":"md`\nHere's what the array should look like:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":544,"value":"calculateData(movies)","pinned":false,"hidden":false,"mode":"ojs"},{"id":929,"value":"calculateData = (movies) => {\n const colorScale = d3.scaleOrdinal()\n .domain(topGenres)\n .range(petalColors)\n .unknown('#fff2b4')\n \n const petalScale = d3.scaleOrdinal()\n .range(petalPaths)\n \n const sizeScale = d3.scaleLinear()\n .domain(d3.extent(movies, d => d.rating))\n .range([0.1, 0.6])\n \n const numPetalScale = d3.scaleQuantize()\n .domain(d3.extent(movies, d => d.votes))\n .range(_.range(5, 10))\n \n return _.map(movies, (d, i) => {\n return {\n title: d.title,\n color: colorScale(d.genres[0]),\n path: petalScale(d.rated),\n scale: sizeScale(d.rating),\n numPetals: numPetalScale(d.votes),\n translate: calculateGridPos(i),\n }\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":803,"value":"md`\n

\n* For most of my projects, I prefer to keep the raw data (in this case \\`movies\\`) untouched, and create another array with the visual encodings I'll use to render (I'll usually name the array after the shape I'm rendering, in this case \\`flowers\\`). I started doing this because I'd create several different visualizations based on the same dataset, and it was important that none of the visualizations mutated the original dataset. Nowadays, I do this even when I only have one visualization, because I just find it to be a good habit to have. \n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"md`\n### ~appendix~\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":733,"value":"import {\n movies, slide, slide_style,\n petalColors, petalPaths, colorObj, pathObj, topGenres,\n scrollSVG, transformCode, transformSVG,\n svgHeight, calculateGridPos, textWidth,\n} from '@sxywu/workshop-utility-functions'","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"slide_style","pinned":false,"hidden":false,"mode":"ojs"},{"id":363,"value":"import {form} from '@mbostock/form-input'","pinned":false,"hidden":false,"mode":"ojs"},{"id":357,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"d3 = require('d3', 'd3-array')","pinned":false,"hidden":false,"mode":"ojs"},{"id":358,"value":"_ = require('lodash')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}