31:T674,slide` # ⚡️ ### We use D3.js scales to translate *raw data* into *visual channels*.
Let's take a look at some common **data types**:

quantitative
*ratings out of 10, number of votes*
temporal
*release dates*
spatial
*cities, countries*

nominal
*genres*
ordinal
*Parental Guidance ratings*

↓

continuous

↓

discrete

And some common **visual channels**:

position
*x, y*
size
*width, height, radius, scale*
color
*sequential, diverging* ${Object.assign(await FileAttachment("image@4.png").image(), {style: 'height: 10px'})} ${Object.assign(await FileAttachment("image@2.png").image(), {style: 'height: 10px'})}

shape
*dots, squares, letters*
color
*categorical* ${Object.assign(await FileAttachment("image@3.png").image(), {style: 'width: 100%; height: 10px'})}

↓

continuous

↓

discrete

`32:T86b,{ const margin = {top: 36, left: 0} const svg = html`` const xScale = d3.scaleBand() .domain(_.keys(data).map(k => +k)) .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 }33:[{"id":"67f1b4f47915e8973c8d8b7ee0ffc4e80c06c647505860acd85aaa20dc09173fedf325479066c20371f2e66f76c53bef2dccf337155526357bf0f8422a8e9803","href":"https://static.observableusercontent.com/files/67f1b4f47915e8973c8d8b7ee0ffc4e80c06c647505860acd85aaa20dc09173fedf325479066c20371f2e66f76c53bef2dccf337155526357bf0f8422a8e9803","name":"image@4.png","type":"image/png","lastModified":1596756930203.668,"size":1589},{"id":"ff92b106af9bbd62025dd6a4e9e7992abc24a335aaf15832fcc9f8777111d08e2da23f6d98079cb0737f38269062f1200639c1a13b10c4a77444491b3da2ef66","href":"https://static.observableusercontent.com/files/ff92b106af9bbd62025dd6a4e9e7992abc24a335aaf15832fcc9f8777111d08e2da23f6d98079cb0737f38269062f1200639c1a13b10c4a77444491b3da2ef66","name":"image@2.png","type":"image/png","lastModified":1596756164404.381,"size":1986},{"id":"7bda38d4f5b5426739828787a5a8e01a670db92178d7a21799d44651c827c940e3ab8632b4ec925f2d725f1e827bca8288823bf026b62f5519c8057f8ba0d745","href":"https://static.observableusercontent.com/files/7bda38d4f5b5426739828787a5a8e01a670db92178d7a21799d44651c827c940e3ab8632b4ec925f2d725f1e827bca8288823bf026b62f5519c8057f8ba0d745","name":"image@3.png","type":"image/png","lastModified":1596756381972.161,"size":1151}] 2f:{"title":"4. Size each petal based on its movie's rating","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# 4. Size each petal based on its movie's rating\n\nSo far we've only mapped our categorical attributes (Parental Guidance, genres) to our flower petals, but what about the quantitative ones?\n\nLet's try **scaling** our petals by the IMDb ratings out of 10:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"{\n const svg = html``\n \n d3.select(svg).selectAll('path')\n .data(movies).enter().append('path')\n .attr('transform', (d, i) => `translate(${calculateGridPos(i)})scale(${d.rating})`)\n .attr('d', d => pathObj[d.rated])\n .attr('fill', d => colorObj[d.genres[0]] || colorObj.Other)\n .attr('stroke', d => colorObj[d.genres[0]] || colorObj.Other)\n .attr('fill-opacity', 0.5)\n .attr('stroke-width', 2)\n \n return scrollSVG(svg)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"md`\nThat actually looks kinda cool but definitely not what we were looking for.\n\nThat's because the petals we created are **100px** tall, and if we're scaling (multiplying) these petals by a number between 0 and 10, some of them will be up to **1000px** tall. And that's definitely not what we want (at least in this workshop).\n\nSo let's go about fixing this with **D3.js scales** ✨\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":219,"value":"md`\n## ✨ D3.js scales (I use often)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":215,"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"},{"id":245,"value":"md`\n## ✨ how to use D3.js 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":"$32","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":"md`\n

const xScale = d3.scaleBand()\n  .domain(d3.keys(data)) // sets domain to: ${JSON.stringify(_.keys(data)).replace(/\\,/g, ', ')}\n  .range([0, width]) // [0 (left), ${example.width}px (right)]\n  .padding(${_.round(example.padding, 2)})\n\nconst max = d3.max(data, d => d) // returns ${d3.max(data, d => d)}\n\nconst yScale = d3.scaleLinear()\n  .domain([0, max])\n  .range([height, 0]) // [${example.height}px (bottom), 0 (top)]\n\nd3.select(svg).selectAll('rect')\n  .data(data).enter().append('rect')\n  .attr('x', (d, i) => xScale(i))\n  .attr('y', d => yScale(d))\n  // ...set other attributes\n

\n`","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":759,"value":"flowers = {\n // movie genre → `color` (color of petals)\n // array of top genres: `topGenres`\n // array of colors to map to: `petalColors`\n \n // `rated` → `path` (type of flower petal)\n // array to map to: `petalPaths`\n \n // `rating` → `scale` (size of petals)\n \n // `votes` → `numPetals` (number of petals)\n \n return _.map(movies, (d, i) => {\n return {\n title: d.title,\n translate: calculateGridPos(i), // util function that returns [x, y]\n }\n })\n}","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":true,"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":546,"value":"md `\n## ✨ svg transform: scale()\nWhen we set scale() on an SVG element, we're scaling the whole coordinate system. Play around with the sliders to get an intuitive feel for how it works:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":852,"value":"viewof transform1 = form(html`\n\n`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":566,"value":"transformCode(transform1, `scale(${_.round(transform1.scale, 2)})`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":600,"value":"transformSVG(transform1, `scale(${_.round(transform1.scale, 2)})`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":817,"value":"md`\n🚨 You might have noticed in our exercise that we chained the \\`translate\\` and \\`scale\\` transforms. The order that we specify these transforms is very important, because the coordinate system will look very different depending on the order.\n\n

\n* I've had many painful bugs because of this, and have now ingrained in me to specify \\`translate\\` first, then \\`scale\\`.\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":873,"value":"viewof transform2 = form(html`\n\n`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":833,"value":"transformCode(transform2,\n `translate(${_.round(transform2.translateX, 2)},${_.round(transform2.translateY, 2)})scale(${_.round(transform2.scale, 2)})`,\n `scale(${_.round(transform2.scale, 2)})translate(${_.round(transform2.translateX, 2)},${_.round(transform2.translateY, 2)})`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":847,"value":"transformSVG(transform2,\n `translate(${_.round(transform2.translateX, 2)}, ${_.round(transform2.translateY, 2)})scale(${_.round(transform2.scale, 2)})`,\n `scale(${_.round(transform2.scale, 2)})translate(${_.round(transform2.translateX, 2)}, ${_.round(transform2.translateY, 2)})`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":270,"value":"md `\n---\n\n

\n [5. Turn petals into flowers for each movie →](https://observablehq.com/d/66eaba834e1dc5b1)\n

\n\n
\n
\n
\n
\n
\n
\n
\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"},{"id":963,"value":"_.keys({a:1, b:2, c:3})","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}